sproutcore 1.0.1046 → 1.0.1049.pre.1

data/frameworks/sproutcore/frameworks/foundation/views/view.js

@@ -2,13 +2,14 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('system/browser');
 sc_require('system/event');
 sc_require('system/cursor');
 sc_require('system/responder') ;
+sc_require('system/theme');
 
 sc_require('mixins/string') ;
 
@@ -75,14 +76,49 @@ SC.ANCHOR_CENTER = { centerX: 0, centerY: 0 };
 
 SC.LAYOUT_AUTO = 'auto';
 
+/**
+  Default property to disable or enable by default the contextMenu
+*/
+SC.CONTEXT_MENU_ENABLED = NO;
+
+/**
+  Default property to disable or enable if the focus can jump to the address
+  bar or not.
+*/
+SC.TABBING_ONLY_INSIDE_DOCUMENT = YES;
+
+/**
+  Tells the property (when fetched with themed()) to get its value from the renderer (if any).
+*/
+SC.FROM_THEME = "__FROM_THEME__"; // doesn't really matter what it is, so long as it is unique. Readability is a plus.
+
 /** @private - custom array used for child views */
 SC.EMPTY_CHILD_VIEWS_ARRAY = [];
 SC.EMPTY_CHILD_VIEWS_ARRAY.needsClone = YES;
 
+/**
+  Map to CSS Transforms
+*/
+SC.CSS_TRANSFORM_MAP = {
+  rotate: function(val){
+    if (SC.typeOf(val) === SC.T_NUMBER || val === 0) val += 'deg';
+    return 'rotate('+val+')';
+  },
+  scale: function(val){
+    if (SC.typeOf(val) === SC.T_ARRAY) val = val.join(', ');
+    return 'scale('+val+')';
+  }
+};
+
+/**
+  Properties that can be animated
+*/
+SC.ANIMATABLE_PROPERTIES = ["top", "left", "bottom", "right", "width", "height", "centerX", "centerY", "opacity", "scale", "rotate"];
+
 /** 
   @class
   
-  Base class for managing a view.  View's provide two functions:
+  Base class for managing a view.  Views provide two functions:
   
   1. They translate state and events into drawing instructions for the 
      web browser and
@@ -119,7 +155,7 @@ SC.EMPTY_CHILD_VIEWS_ARRAY.needsClone = YES;
     override this behavior with your own custom updating code, you can 
     replace updateLayer() with your own implementation instead.
     
-  - *didAppendLayerToDocument:* in theory all DOM setup could be done
+  - *didAppendToDocument:* in theory all DOM setup could be done
     in didCreateLayer() as you already have a DOM element instantiated. 
     However there is cases where the element has to be first appended to the
     Document because there is either a bug on the browser or you are using 
@@ -134,7 +170,7 @@ SC.EMPTY_CHILD_VIEWS_ARRAY.needsClone = YES;
 SC.View = SC.Responder.extend(SC.DelegateSupport,
 /** @scope SC.View.prototype */ {
   
-  concatenatedProperties: 'outlets displayProperties layoutProperties classNames renderMixin didCreateLayerMixin willDestroyLayerMixin'.w(),
+  concatenatedProperties: 'outlets displayProperties layoutProperties classNames renderMixin didCreateLayerMixin willDestroyLayerMixin createRendererMixin updateRendererMixin'.w(),
   
   /** 
     The current pane. 
@@ -180,6 +216,185 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   backgroundColor: null,
   
+  /**
+    Activates use of brower's static layout. To activate, set this
+    property to YES.
+
+    @property {Boolean}
+  */
+  useStaticLayout: NO,  
+  
+  // ..........................................................
+  // THEME SUPPORT
+  // 
+  
+  _baseThemeName: false,
+  
+  /**
+    The base theme to start from; the "theme" property looks in this theme.
+    baseTheme is inherited from parent's theme property.
+  */
+  baseTheme: null,
+  
+  /**
+    This sets the base theme 
+  */
+  _baseThemeProperty: function(key, value) {
+    if (SC.typeOf(value) === SC.T_STRING) {
+      this.set("_baseThemeName", value);
+    }
+    
+    // find the base theme by name if we have a name.
+    if (this.get("_baseThemeName")) {
+      var theme = SC.Theme.find(this.get("_baseThemeName"));
+      if (theme) return theme;
+    }
+    
+    // otherwise, return parent's theme.
+    var parent = this.get("parentView");
+    if (parent) return parent.get("theme");
+    
+    return SC.Theme.find("sc-base");
+  }.property().cacheable(),
+  
+  
+  _last_theme: null, // used to determine if theme has changed since last time the property was evaluated.
+  _themeName: false,
+  
+  // baseTheme is a "property"; since it gets set after extension of the view,
+  // we need an observer in addition to it to actually do notifications.
+  _baseThemeDidChange: function() {
+    this.notifyPropertyChange("theme");
+  }.observes("baseTheme"),
+  
+  _themeProperty: function(key, value) {
+    // if it is a string, set theme name
+    if (SC.typeOf(value) === SC.T_STRING) {
+      this.set("_themeName", value);
+    }
+    
+    // get the base theme
+    var base = this.get("baseTheme");
+    
+    // find theme, if possible
+    if (this.get("_themeName")) {
+      // Note: theme instance "find" function will search every parent
+      // _except_ global (which is not a parent)
+      var theme;
+      if (base) {
+        theme = base.find(this.get("_themeName"));
+        if (theme) return theme;
+      }
+      
+      theme = SC.Theme.find(this.get("_themeName"));
+      if (theme) return theme;
+    }
+    
+    // can't find anything, return base.
+    return base;
+  }.property().cacheable(),
+  
+  _notifyThemeDidChange: function() {
+    var len, idx, childViews = this.get("childViews");
+    len = childViews.length;
+    for (idx = 0; idx < len; idx++){
+      childViews[idx].notifyPropertyChange("baseTheme");
+      childViews[idx].notifyPropertyChange("theme");
+    }
+  },
+  
+  /**
+    The current theme. You may only set this to a string, and during runtime, the value
+    (from get()) will always be a theme object or null.
+  */
+  theme: null,
+  
+  /**
+    Detects when the theme changes. Replaces the layer if necessary.
+  */
+  _themeDidChange: function() {
+    var theme = this.get("theme");
+    if (theme === this._last_theme) return;
+    this._last_theme = theme;
+    
+    // replace the layer
+    if (this.get("layer")) this.replaceLayer();
+    
+    // notify child views
+    if (this._hasCreatedChildViews) this._notifyThemeDidChange();
+    
+    // and now, regenerate renderer
+    this._generateRenderer();
+  }.observes("theme"),
+  
+  /**
+    Like "get", but if the value is SC.FROM_THEME, it will find the value from the view's
+    renderer, if any; if none, then it will look for <property>Default and return that.
+  */
+  themed: function(property) {
+    var val = this.get(property);
+    if (val === SC.FROM_THEME) {
+      if (this.renderer) return this.renderer[property];
+      else return this.get(property + "Default");
+    }
+    return val;
+  },
+  
+  /**
+    @private
+    Generates the view's renderer (calling _destroyRenderer on any old ones if needed).
+  */
+  _generateRenderer: function() {
+    var theme = this.get("theme"); // renderers need a theme
+    
+    // reset the renderer (the theme changed, hello!)
+    this._destroyRenderer();
+    
+    // now, if we do have a theme, we can try to create the renderer.
+    if (theme && theme.isTheme) {
+      this._viewRenderer = theme.view();
+      
+      if (this.createRenderer) {
+        this.renderer = this.createRenderer(theme);
+
+        // the renderer was not necessarily successfully created.
+        if (this.renderer) {
+          var mixins, idx, len;
+          this.renderer.contentProvider = this; // set renderer's content provider to this (it will call renderContent, etc. as needed)
+          if (mixins = this.createRendererMixin) {
+            len = mixins.length;
+            for (idx = 0; idx < len; idx++) mixins[idx].call(this, theme);
+          }
+        }
+      }
+    }
+    
+    // update!
+    this._updateViewRenderer();
+    this._updateRenderer();
+  },
+  
+  /**
+    @private
+    Updates the view's renderer, if one exists, calling all mixins to renderer as well.
+  */
+  _updateRenderer: function() {
+    var mixins, idx, len;
+    if (this.renderer){
+      this.updateRenderer(this.renderer);
+      if (mixins = this.updateRendererMixin) {
+        len = mixins.length;
+        for (idx = 0; idx < len; idx++) mixins[idx].call(this, this.renderer);
+      }
+    }
+  },
+  
+  _destroyRenderer: function() {
+    if (!this.renderer) return;
+    this.renderer.destroy();
+    this.renderer = null;    
+  },
+  
   // ..........................................................
   // IS ENABLED SUPPORT
   // 
@@ -213,6 +428,38 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (ret && (pv = this.get('parentView'))) ret = pv.get('isEnabledInPane');
     return ret ;
   }.property('parentView', 'isEnabled'),
+
+  /** @private
+    Observes the isEnabled property and resigns first responder if set to NO.
+    This will avoid cases where, for example, a disabled text field retains
+    its focus rings.
+
+    @observes isEnabled
+  */
+  _sc_view_isEnabledDidChange: function(){
+    if(!this.get('isEnabled') && this.get('isFirstResponder')){
+      this.resignFirstResponder();
+    }
+  }.observes('isEnabled'),
+
+  // ..........................................................
+  // MULTITOUCH SUPPORT
+  //
+  /**
+    Set to YES if you want to receive touch events for each distinct touch (rather than only
+    the first touch start and last touch end).
+  */
+  acceptsMultitouch: NO,
+  
+  /**
+    Is YES if the view is currently being touched. NO otherwise.
+  */
+  hasTouch: NO,
+  
+  /**
+    Whether to route touch events to mouse events (defaults to YES)
+  */
+  routeTouch: YES,
   
   // ..........................................................
   // IS VISIBLE IN WINDOW SUPPORT
@@ -240,6 +487,14 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   isVisibleInWindow: NO,
   
+  /**
+   By default we don't disable the context menu. Overriding this property
+   can enable/disable the context menu per view.
+  */
+  isContextMenuEnabled: function() {
+    return SC.CONTEXT_MENU_ENABLED;
+  }.property(),
+  
   /**
     Recomputes the isVisibleInWindow property based on the visibility of the 
     view and its parent.  If the recomputed value differs from the current 
@@ -256,45 +511,74 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @returns {SC.View} receiver 
   */
   recomputeIsVisibleInWindow: function(parentViewIsVisible) {
-    var last = this.get('isVisibleInWindow'),
-        cur = this.get('isVisible'), parentView ;
+    var previous = this.get('isVisibleInWindow'),
+        current  = this.get('isVisible'),
+        parentView;
     
     // isVisibleInWindow = isVisible && parentView.isVisibleInWindow
     // this approach only goes up to the parentView if necessary.
-    if (cur) {
-      cur = (parentViewIsVisible === undefined) ? 
-       ((parentView=this.get('parentView')) ? 
-         parentView.get('isVisibleInWindow') : NO) : parentViewIsVisible ;
+    if (current) {
+      // If we weren't passed in 'parentViewIsVisible' (we generally aren't;
+      // it's an optimization), then calculate it.
+      if (parentViewIsVisible === undefined) {
+        parentView = this.get('parentView');
+        parentViewIsVisible = parentView ? parentView.get('isVisibleInWindow') : NO;
+      }
+      current = current && parentViewIsVisible;
     }
     
-    // if the state has changed, update it and notify children
-    // if (last !== cur) {
-      this.set('isVisibleInWindow', cur) ;
-      this._needsVisibiltyChange = YES ; // update even if we aren't visible
+    // If our visibility has changed, then set the new value and notify our
+    // child views to update their value.
+    //if (previous !== current) {
+      this.set('isVisibleInWindow', current) ;
       
       var childViews = this.get('childViews'), len = childViews.length, idx;
       for(idx=0;idx<len;idx++) {
-        childViews[idx].recomputeIsVisibleInWindow(cur);
+        childViews[idx].recomputeIsVisibleInWindow(current);
       }
-        
-      // if we just became visible, update layer + layout if needed...
-      if (cur) {
-        if (this.parentViewDidResize) this.parentViewDidResize();
-        
+
+
+      // We'll also kick off some necessary work when the visibility changes.
+      // This more appropriately belongs in a 'isVisibleInWindow' observer or
+      // some such helper method because this work is not strictly related to
+      // computing the visibility, but view performance is critical, so
+      // avoiding the extra observer is worthwhile.
+      if (current) {
+        // If we just became visible, update layer + layout if needed...
+        this.displayDidChange();
+
         if (this.get('childViewsNeedLayout')) {
           this.invokeOnce(this.layoutChildViewsIfNeeded);
         }
       }
-      
-      this.set('layerNeedsUpdate', YES) ;
-      
-      // if we were firstResponder, resign firstResponder also if no longer
-      // visible.
-      if (!cur && this.get('isFirstResponder')) this.resignFirstResponder();
-      
-    // }
-    return this ;
+      else {
+        // We need to set some internal state to indicate that we went from
+        // visible to invisible.
+        //
+        // (Typically, invisible views are not updated for performance
+        // reasons, but if we went from visible to invisible, we need to
+        // update once.)
+        this._forceLayerUpdateDueToVisibilityChange = YES;
+        this.displayDidChange();
+
+        // Also, if we were previously 'firstResponder', resign it.
+        if (this.get('isFirstResponder')) this.resignFirstResponder();
+      }
+    //}
+    return this;
+  },
+
+
+  /** @private
+    Whenever the view’s visibility changes, we need to recompute whether it is
+    actually visible inside the window (a view is only visible in the window
+    if it is marked as visibile and its parent view is as well).
+  */
+  _sc_isVisibleDidChange: function() {
+    this.recomputeIsVisibleInWindow();
   }.observes('isVisible'),
+
+
   
   // ..........................................................
   // CHILD VIEW SUPPORT
@@ -371,7 +655,10 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (view.parentView !== this) {
       throw "%@.removeChild(%@) must belong to parent".fmt(this,view);
     }
-    
+
+    // Animation cleanup
+    if (SC.platform.supportsCSSTransitions) this.resetAnimation();
+
     // notify views
     if (view.willRemoveFromParent) view.willRemoveFromParent() ;
     if (this.willRemoveChild) this.willRemoveChild(view) ;
@@ -380,8 +667,8 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     view.set('parentView', null) ;
     
     // remove view from childViews array.
-    var childViews = this.get('childViews') ;
-    var idx = childViews.indexOf(view) ;
+    var childViews = this.get('childViews'),
+        idx = childViews.indexOf(view) ;
     if (idx>=0) childViews.removeAt(idx);
     
     // The DOM will need some fixing up, note this on the view.
@@ -491,6 +778,8 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   parentViewDidChange: function() {
     this.recomputeIsVisibleInWindow() ;
     
+    this.resetBuildState();
+    this.notifyPropertyChange("baseTheme");
     this.set('layerLocationNeedsUpdate', YES) ;
     this.invokeOnce(this.updateLayerLocationIfNeeded) ;
     
@@ -504,7 +793,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     this._invalidatePaneCacheForSelfAndAllChildViews();
     
     return this ;
-  }.observes('isVisible'),
+  },
   
   /** @private
     We want to cache the 'pane' property, but it's impossible for us to
@@ -515,13 +804,16 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     views, and so on.
   */
   _invalidatePaneCacheForSelfAndAllChildViews: function () {
+    var childView, childViews = this.get('childViews'),
+        len = childViews.length, idx ;
+        
     this.notifyPropertyChange('pane');
     
-    var childViews = this.get('childViews'),
-        len = childViews.length, idx ;
     for (idx=0; idx<len; ++idx) {
-      var childView = childViews[idx];
-      if (childView._invalidatePaneCacheForSelfAndAllChildViews) childView._invalidatePaneCacheForSelfAndAllChildViews();
+      childView = childViews[idx];
+      if (childView._invalidatePaneCacheForSelfAndAllChildViews) {
+        childView._invalidatePaneCacheForSelfAndAllChildViews();
+      } 
     }
   },
   
@@ -600,6 +892,27 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     return SC.guidFor(this) ;
   }.property().cacheable(),
   
+  _lastLayerId: null,
+  /**
+    Handles changes in the layer id.
+  */
+  layerIdDidChange: function() {
+    var layer = this.get("layer");
+    if (layer && this.get("layerId") !== this._lastLayerId) {
+      // if we had an earlier one, remove from view hash.
+      if (this._lastLayerId) delete SC.View.views[this._lastLayerId];
+      
+      // set the current one as the new old one
+      this._lastLayerId = this.get("layerId");
+      
+      // and add the new one
+      SC.View.views[this.get("layerId")] = this;
+      
+      // and finally, set the actual layer id.
+      layer.id = this.get("layerId");
+    }
+  }.observes("layerId"),
+  
   /**
     Attempts to discover the layer in the parent layer.  The default 
     implementation looks for an element with an ID of layerId (or the view's
@@ -654,6 +967,20 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     return elem;
   },
   
+  /**
+    Returns YES if the receiver is a subview of a given view or if it’s 
+    identical to that view. Otherwise, it returns NO.
+    
+    @property {SC.View} view
+  */
+  isDescendantOf: function(view) {
+    var parentView = this.get('parentView');
+    
+    if(this===view) return YES;
+    else if(parentView) return parentView.isDescendantOf(view);
+    else return NO;
+  },
+  
   /**
     This method is invoked whenever a display property changes.  It will set 
     the layerNeedsUpdate method to YES.  If you need to perform additional
@@ -701,14 +1028,13 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     You should not override this method.  Instead override updateLayer() or
     render().
     
-    @param {Boolean} isVisible if true assume view is visible even if it is not.
     @returns {SC.View} receiver
     @test in updateLayer
   */
   updateLayerIfNeeded: function() {
-    var viz = this.get('isVisibleInWindow') ;
-    if ((viz || this._needsVisibiltyChange) && this.get('layerNeedsUpdate')) {
-      this._needsVisibiltyChange = NO ;
+    var force = this._forceLayerUpdateDueToVisibilityChange,
+        shouldUpdate = (force || this.get('isVisibleInWindow')) && this.get('layerNeedsUpdate');
+    if (shouldUpdate) {
       // only update a layer if it already exists
       if (this.get('layer')) {
         this.beginPropertyChanges() ;
@@ -718,6 +1044,10 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       }
     }
     else this.set('layerNeedsUpdate', NO) ;
+
+    // If we were forcing the layer update for this round, clear the flag.
+    this._forceLayerUpdateDueToVisibilityChange = NO;
+
     return this ;
   },
   
@@ -736,20 +1066,47 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     do not want your render() method called when updating a layer, then you
     should override this method instead.
     
+    @param optionalContext provided only for backwards-compatibility.
+    
     @returns {SC.View} receiver 
   */
-  updateLayer: function() {
-    var context = this.renderContext(this.get('layer')) ;
-    this.prepareContext(context, NO) ;
-    context.update() ;
-    if (context._innerHTMLReplaced) {
-      var pane = this.get('pane');
-      if(pane && pane.get('isPaneAttached')) {
-        this._notifyDidAppendToDocument();
+  updateLayer: function(optionalContext) {
+    var mixins, idx, len, renderer = this.renderer, viewRenderer = this._viewRenderer;
+    this.updateViewSettings();
+    
+    // make sure to update any renderers
+    this._updateViewRenderer();
+    this._updateRenderer();
+    
+    // Now, update using renderer if possible; render() otherwise
+    if (!this._useRenderFirst && this.createRenderer) {
+      if (renderer) renderer.update();
+      if (viewRenderer) viewRenderer.update();
+    } else {
+      var context = optionalContext || this.renderContext(this.get('layer')) ;
+      this.render(context, NO) ;
+      if (mixins = this.renderMixin) {
+        len = mixins.length;
+        for(idx=0; idx<len; ++idx) mixins[idx].call(this, context, NO) ;
+      }
+      
+      context.update() ;
+      if (context._innerHTMLReplaced) {
+        var pane = this.get('pane');
+        if(pane && pane.get('isPaneAttached')) {
+          this._notifyDidAppendToDocument();
+        }
       }
     }
+
+      // If this view uses static layout, then notify that the frame (likely)
+      // changed.
+      if (this.useStaticLayout) this.viewDidResize();
+
     if (this.didUpdateLayer) this.didUpdateLayer(); // call to update DOM
-    if(this.designer && this.designer.viewDidUpdateLayer) this.designer.viewDidUpdateLayer(); //let the designer know
+    if(this.designer && this.designer.viewDidUpdateLayer) {
+      this.designer.viewDidUpdateLayer(); //let the designer know
+    }
     return this ;
   },
   
@@ -782,7 +1139,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     var context = this.renderContext(this.get('tagName')) ;
     
     // now prepare the content like normal.
-    this.prepareContext(context, YES) ;
+    this.renderToContext(context) ;
     this.set('layer', context.element()) ;
     
     // now notify the view and its child views..
@@ -796,7 +1153,20 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     invokes the same on all child views.
   */
   _notifyDidCreateLayer: function() {
+    // notify, not just the view, but also the view renderers
+    this.notifyPropertyChange("layer");
+    this._viewRenderer.attachLayer(this);
+    if (this.renderer) this.renderer.attachLayer(this);
     if (this.didCreateLayer) this.didCreateLayer() ;
+
+    // Animation prep
+    if (SC.platform.supportsCSSTransitions) {
+      this.resetAnimation();
+      SC.Event.add(this.get('layer'), SC.platform.cssPrefix+"TransitionEnd", this, this._scv_animationEnd);
+      SC.Event.add(this.get('layer'), "transitionEnd", this, this._scv_animationEnd);
+    }
+
+    // and notify others
     var mixins = this.didCreateLayerMixin, len, idx,
         childViews = this.get('childViews');
     if (mixins) {
@@ -832,10 +1202,26 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   destroyLayer: function() {
     var layer = this.get('layer') ;
     if (layer) {
+
+      // Teardown animations
+      if (SC.platform.supportsCSSTransitions) {
+        SC.Event.remove(this.get('layer'), SC.platform.cssPrefix+"TransitionEnd", this, this._scv_animationEnd);
+        SC.Event.remove(this.get('layer'), "transitionEnd", this, this._scv_animationEnd);
+      }
+
       // Now notify the view and its child views.  It will also set the
       // layer property to null.
       this._notifyWillDestroyLayer() ;
       
+      if (this._viewRenderer) {
+        this._viewRenderer.detachLayer();
+      }
+      
+      // tell the renderer the layer has gone away
+      if (this.renderer) {
+        this.renderer.detachLayer();
+      }
+      
       // do final cleanup
       if (layer.parentNode) layer.parentNode.removeChild(layer) ;
       layer = null ;
@@ -874,53 +1260,134 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     this.set('layer', null) ;
   },
   
+  
+  isLayerProvider: YES,
+  /**
+    @private (semi)
+    Returns the layer. Meant only for use from renderers and such—this is a layer provider function.
+  */
+  getLayer: function() {
+    return this.get("layer");
+  },
+  
+  /**
+    @private
+    
+    Renders to a context.
+    Rendering only happens for the initial rendering. Further updates happen in updateLayer,
+    and are not done to contexts, but to layers.
+    
+    Both renderToContext and updateLayer will call render(context, firstTime) as needed
+    to maintain backwards compatibility, but prefer calling createRenderer.
+    
+    Note: You should not generally override nor directly call this method. This method is only
+    called by createLayer to set up the layer initially, and by renderChildViews, to write to
+    a context.
+    
+    @param {SC.RenderContext} context the render context.
+    @param {Boolean} firstTime Provided for compatibility when rendering legacy views only.
+  */
+  renderToContext: function(context, firstTime) {
+    var mixins, idx, len;
+    
+    this.beginPropertyChanges() ;
+    this.set('layerNeedsUpdate', NO) ;
+    
+    this.renderViewSettings(context);
+    
+    /* Now, the actual rendering, which will use a renderer if possible */
+    // the renderer will have been created when the theme was found; if it is around,
+    // we just need to ensure it is up-to-date
+    if (this.createRenderer) {
+      // our private version does mixins too! Yay!
+      this._updateRenderer();
+    }
+    
+    if (!this._useRenderFirst && this.createRenderer) {
+      if (this.renderer) this.renderer.render(context);
+    } else {
+      if (SC.none(firstTime)) firstTime = YES;
+      
+      this.render(context, firstTime);
+      if (mixins = this.renderMixin) {
+        len = mixins.length;
+        for(idx=0; idx<len; ++idx) mixins[idx].call(this, context, firstTime) ;
+      }
+    }
+    
+    this.endPropertyChanges() ;
+  },
+  
+  /**
+    @private
+    Updates the properties of the renderer used for the view
+  */
+  _updateViewRenderer: function() {
+    if (!this._viewRenderer) return;
+    
+    var classNames = this.get('classNames');
+    if (this.get('theme')) {
+      classNames = classNames.concat(this.get("theme").classNames);
+    }
+
+    this._scv_willRenderAnimations();
+
+    this._viewRenderer.attr({
+      layerId: this.layerId ? this.get('layerId') : SC.guidFor(this),
+      classNames: classNames,
+      backgroundColor: this.get('backgroundColor'),
+      cursor: this.get('cursor'),
+      layoutStyle: this.get('layoutStyle'),
+      isTextSelectable: this.get('isTextSelectable'),
+      isEnabled: this.get('isEnabled'),
+      isVisible: this.get('isVisible'),
+      isFirstResponder: this.get('isFirstResponder'),
+      hasStaticLayout: this.get('useStaticLayout')
+    });
+  },
+  
+  /**
+    @private
+    Renders view settings (class names and id, for instance) to the context.
+  */
+  renderViewSettings: function(context) {
+    this._updateViewRenderer();
+    this.renderLayout(context, YES); // provide backwards compatibility
+    this._viewRenderer.render(context);
+  },
+  
+  /**
+    @private
+    Updates view settings on the context (including class names).
+  */
+  updateViewSettings: function() {
+    this._updateViewRenderer();
+    this._viewRenderer.update();
+  },
+  
   /**
+  @private
+  
     Invoked by createLayer() and updateLayer() to actually render a context.
     This method calls the render() method on your view along with any 
     renderMixin() methods supplied by mixins you might have added.
     
-    You should not override this method directly.  However, you might call
-    this method if you choose to override updateLayer() or createLayer().
+    You should not override this method directly. Nor should you call it. It is OLD.
     
     @param {SC.RenderContext} context the render context
     @param {Boolean} firstTime YES if this is creating a layer
     @returns {void}
   */
   prepareContext: function(context, firstTime) {
-    var mixins, len, idx, layerId, bgcolor, cursor ;
-    
-    // do some initial setup only needed at create time.
+    // eventually, firstTime will be removed because it is ugly.
+    // for now, we will sense whether we are doing things the ugly way or not.
+    // if ugly, we will allow updates through.
+    if (SC.none(firstTime)) firstTime = YES; // the GOOD code path :)
     if (firstTime) {
-      // TODO: seems like things will break later if SC.guidFor(this) is used
-      
-      layerId = this.layerId ? this.get('layerId') : SC.guidFor(this) ;
-      context.id(layerId).classNames(this.get('classNames'), YES) ;
-      this.renderLayout(context, firstTime) ;
-    }else{
-      context.resetClassNames();
-      context.classNames(this.get('classNames'), YES);  
-    }
-    
-    // do some standard setup...
-    if (this.get('isTextSelectable')) context.addClass('allow-select') ;
-    if (!this.get('isEnabled')) context.addClass('disabled') ;
-    if (!this.get('isVisible')) context.addClass('hidden') ;
-    if (this.get('isFirstResponder')) context.addClass('focus');
-    
-    bgcolor = this.get('backgroundColor');
-    if (bgcolor) context.addStyle('backgroundColor', bgcolor);
-    
-    cursor = this.get('cursor') ;
-    if (cursor) context.addClass(cursor.get('className')) ;
-    
-    this.beginPropertyChanges() ;
-    this.set('layerNeedsUpdate', NO) ;
-    this.render(context, firstTime) ;
-    if (mixins = this.renderMixin) {
-      len = mixins.length;
-      for(idx=0; idx<len; ++idx) mixins[idx].call(this, context, firstTime) ;
+      this.renderToContext(context);
+    } else {
+      this.updateLayer(context);
     }
-    this.endPropertyChanges() ;
   },
   
   /**
@@ -929,21 +1396,62 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     walk down the childView chain, rendering all of the children in a nested
     way.
     
+    If a context is provided, it is always assumed to be firstTime.
+    
+    @deprecated In SproutCore 1.1. Use renderContent and updateContent explicitly instead.
     @param {SC.RenderContext} context the context
     @param {Boolean} firstName true if the layer is being created
     @returns {SC.RenderContext} the render context
-    @test in render
+    @test in render and renderer
   */
   renderChildViews: function(context, firstTime) {
+    if (firstTime || context) {
+      // we pass along firstTime for compatibility. Some older (less wise) views may
+      // think it will work. Well, it wouldn't, but we'll make it work.
+      this.renderContent(context, firstTime);
+    } else {
+      this.updateContent(context);
+    }
+    return context;
+  },
+  
+  /**
+    @private
+    Views are content suppliers for renderers. That is, views pass themselves to renderers
+    for renderers' "content" properties. Content providers have two functions: renderContent and updateContent.
+    This is the first of those.
+    
+    @param {SC.RenderContext} context
+    @param {Boolean} firstTime For compatibility (do not use; if not first time, call updateContent).
+  */
+  renderContent: function(context, firstTime) {
     var cv = this.get('childViews'), len = cv.length, idx, view ;
     for (idx=0; idx<len; ++idx) {
       view = cv[idx] ;
       if (!view) continue;
       context = context.begin(view.get('tagName')) ;
-      view.prepareContext(context, firstTime) ;
+      view.renderToContext(context, firstTime);
       context = context.end() ;
     }
-    return context ;  
+  },
+  
+  /**
+    @private
+    Views are content suppliers for renderers. That is, views pass themselves to renderers
+    for renderers' "content" properties. Content providers have two functions: renderContent and updateContent.
+    This is the first of those.
+    
+    For old-style rendering, the render context created by the parent renderer is passed along
+    as well.
+  */
+  updateContent: function(optionalContext) {
+    var cv = this.get('childViews'), len = cv.length, idx, view ;
+    for (idx=0; idx<len; ++idx) {
+      view = cv[idx] ;
+      if (!view) continue;
+      
+      view.updateLayer(optionalContext);
+    }
   },
   
   /**
@@ -965,19 +1473,29 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @param {SC.RenderContext} context the render context
     @param {Boolean} firstTime YES if this is creating a layer
     @returns {void}
-  */
+  */   
   render: function(context, firstTime) {
-    if (firstTime) this.renderChildViews(context, firstTime) ;
+    var renderer = this.renderer;
+    if (this.createRenderer && renderer) {
+      if (firstTime) { 
+        renderer.render(context);
+      } else {
+        renderer.update();
+      }
+    } else {
+      if (firstTime) this.renderChildViews(context, firstTime);
+    }
   },
   
   
   /** @private - 
-    Invokes the receivers didAppendLayerToDocument() method if it exists and then
-    invokes the same on all child views. 
+    Invokes the receivers didAppendLayerToDocument() method if it exists and
+    then invokes the same on all child views. 
   */
   
   _notifyDidAppendToDocument: function() {
-    if(this.didAppendToDocument) this.didAppendToDocument();
+    if (this.didAppendToDocument) this.didAppendToDocument();
+
     var i=0, child, childLen, children = this.get('childViews');
     for(i=0, childLen=children.length; i<childLen; i++) {
       child = children[i];
@@ -1040,15 +1558,27 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   displayProperties: ['isFirstResponder', 'isVisible'],
   
   /**
-    You can set this to an SC.Cursor instance; it's className will 
-    automatically be added to the layer's classNames. The cursor is only used 
-    when a layer is first created.  If you change the cursor for an element, 
-    you must destroy and recreate the view layer.
-    
-    @property {SC.Cursor}
+    You can set this to an SC.Cursor instance; its class name will 
+    automatically be added to the layer's classNames, allowing you
+    to efficiently change the cursor for a large group of views with
+    just one change to the SC.Cursor object.  The cursor property
+    is only used when the layer is created, so if you need to change
+    it to a different cursor object, you will have to destroy and
+    recreate the view layer.  (In this case you might investigate
+    setting cursors using CSS directly instead of SC.Cursor.)
+    
+    @property {SC.Cursor String}
   */
   cursor: null,
   
+  /**
+    A child view without a cursor of its own inherits its parent's cursor by
+    default.  Set this to NO to prevent this behavior.
+    
+    @property {Boolean}
+  */
+  shouldInheritCursor: YES,
+  
   // ..........................................................
   // LAYER LOCATION
   // 
@@ -1117,11 +1647,12 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       if (!node) {
         this.createLayer() ;
         node = this.get('layer') ;
+        if (!node) return; // can't do anything without a node.
       }
       
-      var siblings = parentView.get('childViews') ;
-      var nextView = siblings.objectAt(siblings.indexOf(this)+1) ;
-      var nextNode = (nextView) ? nextView.get('layer') : null ;
+      var siblings = parentView.get('childViews'),
+          nextView = siblings.objectAt(siblings.indexOf(this)+1),
+          nextNode = (nextView) ? nextView.get('layer') : null ;
       
       // before we add to parent node, make sure that the nextNode exists...
       if (nextView && (!nextNode || nextNode.parentNode!==parentNode)) {
@@ -1129,12 +1660,9 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         nextNode = nextView.get('layer') ;
       }
       
-      // add to parentNode if needed.  If we do add, then also notify view
-      // that its parentView has resized since joining a parentView has the
-      // same effect.
+      // add to parentNode if needed.
       if ((node.parentNode!==parentNode) || (node.nextSibling!==nextNode)) {
         parentNode.insertBefore(node, nextNode) ;
-        if (this.parentViewDidResize) this.parentViewDidResize() ;
       }
     }
     
@@ -1172,18 +1700,24 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   isKeyResponder: NO,
 
   /**
-    This method is invoked just before you lost the key responder status.  The passed view is the view that is about to gain keyResponder status.  This gives you a chance to do any early setup.
-    
-    Remember that you can gain/lose key responder status either because another view in the same pane is becoming first responder or because another pane is about to become key.
+    This method is invoked just before you lost the key responder status.  
+    The passed view is the view that is about to gain keyResponder status.  
+    This gives you a chance to do any early setup. Remember that you can 
+    gain/lose key responder status either because another view in the same 
+    pane is becoming first responder or because another pane is about to 
+    become key.
     
     @param {SC.Responder} responder
   */
   willLoseKeyResponderTo: function(responder) {},
   
   /**
-    This method is invoked just before you become the key responder.  The passed view is the view that is about to lose keyResponder status.  You can use this to do any setup before the view changes.
-    
-    Remember that you can gain/lose key responder status either because another view in the same pane is becoming first responder or because another pane is about to become key.
+    This method is invoked just before you become the key responder.  The 
+    passed view is the view that is about to lose keyResponder status.  You 
+    can use this to do any setup before the view changes.
+    Remember that you can gain/lose key responder status either because 
+    another view in the same pane is becoming first responder or because 
+    another pane is about to become key.
     
     @param {SC.Responder} responder
   */
@@ -1200,7 +1734,11 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   didBecomeKeyResponderFrom: function(responder) {},
     
   /**
-    This method will process a key input event, attempting to convert it to an appropriate action method and sending it up the responder chain.  The event is converted using the SC.KEY_BINDINGS hash, which maps key events into method names.  If no key binding is found, then the key event will be passed along using an insertText() method.
+    This method will process a key input event, attempting to convert it to 
+    an appropriate action method and sending it up the responder chain.  The 
+    event is converted using the SC.KEY_BINDINGS hash, which maps key events 
+    into method names.  If no key binding is found, then the key event will 
+    be passed along using an insertText() method.
     
     @param {SC.Event} event
     @returns {Object} object that handled event, if any
@@ -1234,7 +1772,9 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   },
   
   /**
-    This method is invoked by interpretKeyEvents() when you receive a key event matching some plain text.  You can use this to actually insert the text into your application, if needed.
+    This method is invoked by interpretKeyEvents() when you receive a key 
+    event matching some plain text.  You can use this to actually insert the 
+    text into your application, if needed.
     
     @param {SC.Event} event
     @returns {Object} receiver or object that handled event
@@ -1283,13 +1823,19 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @type SC.View
   */
   nextValidKeyView: function() {
-    var seen = [],
-        rootView = this.pane(), ret; 
-    ret = rootView._computeNextValidKeyView(this, seen);
+    var seen = [], 
+        rootView = this.pane(), ret = this.get('nextKeyView');
+    
+    if(!ret) ret = rootView._computeNextValidKeyView(this, seen);
+    
+    if(SC.TABBING_ONLY_INSIDE_DOCUMENT && !ret) {
+      ret = rootView._computeNextValidKeyView(rootView, seen);
+    }
+    
     return ret ;
   }.property('nextKeyView'),
   
-  _computeNextValidKeyView: function(currentView, seen) {  
+  _computeNextValidKeyView: function(currentView, seen) {
     var ret = this.get('nextKeyView'),
         children, i, childLen, child;
     if(this !== currentView && seen.indexOf(currentView)!=-1 && 
@@ -1301,7 +1847,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     // find next sibling
     if (!ret) {
       children = this.get('childViews');
-      for(i=0, childLen= children.length; i<childLen; i++){
+      for(i=0, childLen = children.length; i<childLen; i++){
         child = children[i];
         if(child.get('isVisibleInWindow') && child.get('isVisible')){
           ret = child._computeNextValidKeyView(currentView, seen);
@@ -1329,8 +1875,8 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   previousValidKeyView: function() {
     var seen = [],
-        rootView = this.pane(), ret; 
-    ret = rootView._computePreviousValidKeyView(this, seen);
+        rootView = this.pane(), ret = this.get('previousKeyView'); 
+    if(!ret) ret = rootView._computePreviousValidKeyView(this, seen);
     return ret ;
   }.property('previousKeyView'),
   
@@ -1374,6 +1920,32 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     
     sc_super() ;
     
+    // set up theme
+    var baseTheme = this.baseTheme;
+    this.baseTheme = this._baseThemeProperty;
+    this.set("baseTheme", baseTheme);
+    
+    var theme = this.theme;
+    this.theme = this._themeProperty;
+    this.set("theme", theme);
+    
+    // find render path (to be removed in SC 2.0?)
+    var renderAge = -1, rendererAge = -1, currentAge = 0, c = this.constructor;
+    while (c && c.prototype.render) {
+      if (renderAge < 0 && c.prototype.render !== this.render) renderAge = currentAge;
+      if (rendererAge < 0 && c.prototype.createRenderer !== this.createRenderer) rendererAge = currentAge;
+      if (rendererAge >= 0 && renderAge >= 0) break;
+      currentAge = currentAge + 1;
+      c = c.superclass;
+    }
+    
+    // which one?
+    if (renderAge < rendererAge && renderAge >= 0) {
+      this._useRenderFirst = YES;
+    } else {
+      this._useRenderFirst = NO;
+    }
+    
     // register for event handling now if we're not a materialized view
     // (materialized views register themselves as needed)
     if (!this.get('isMaterialized')) {
@@ -1385,6 +1957,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     // setup child views.  be sure to clone the child views array first
     this.childViews = childViews ? childViews.slice() : [] ;
     this.createChildViews() ; // setup child Views
+    this._hasCreatedChildViews = YES;
     
     // register display property observers ..
     // TODO: Optimize into class setup 
@@ -1430,18 +2003,20 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   destroy: function() {
     if (this.get('isDestroyed')) return this; // nothing to do
-     
-    sc_super();
+    
+    this._destroy(); // core destroy method
     
     // remove from parent if found
     this.removeFromParent() ;
-    this._destroy(); // core destroy method
     
     // unregister for drags
     if (this.get('isDropTarget')) SC.Drag.removeDropTarget(this) ;
     
     // unregister for autoscroll during drags
     if (this.get('isScrollable')) SC.Drag.removeScrollableView(this) ;
+    
+    //Do generic destroy. It takes care of mixins and sets isDestroyed to YES.
+    sc_super();
     return this; // done with cleanup
   },
   
@@ -1456,7 +2031,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     var childViews = this.get('childViews'), len = childViews.length, idx ;
     if (len) {
       childViews = childViews.slice() ;
-      for (idx=0; idx<len; ++idx) childViews[idx]._destroy() ;
+      for (idx=0; idx<len; ++idx) childViews[idx].destroy() ;
     }
     
     // next remove view from global hash
@@ -1464,8 +2039,6 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     delete this._CQ ; 
     delete this.page ;
     
-    // mark as destroyed so we don't do this again
-    this.set('isDestroyed', YES) ;
     return this ;
   },
   
@@ -1550,7 +2123,29 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   // ...........................................
   // LAYOUT
   //
-  
+
+  /**
+    The 'frame' property depends on the 'layout' property as well as the
+    parent view’s frame.  In order to properly invalidate any cached values,
+    we need to invalidate the cache whenever 'layout' changes.  However,
+    observing 'layout' does not guarantee that; the observer might not be run
+    immediately.
+    
+    In order to avoid any window of opportunity where the cached frame could
+    be invalid, we need to force layoutDidChange() to always immediately run
+    whenever 'layout' is set.
+  */
+  propertyDidChange: function(key, value, _keepCache) {
+    // If the key is 'layout', we need to call layoutDidChange() immediately
+    // so that if the frame has changed any cached values (for both this view
+    // and any child views) can be appropriately invalidated.
+    if (key === 'layout') this.layoutDidChange();
+
+    // Resume notification as usual.
+    sc_super();
+  },
+
+
   /** 
     This convenience method will take the current layout, apply any changes
     you pass and set it again.  It is more convenient than having to do this
@@ -1599,13 +2194,221 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         }
       }
     }
+    // now set adjusted layout
+    if (didChange) this.set('layout', layout) ;
     
+    return this ;
+  },
+
+
+  /**
+    Animate a given property using CSS animations.
+
+    Takes a key, value and either a duration, or a hash of options.
+    The options hash has the following parameters
+      - duration: Duration of animation in seconds
+      - callback: Callback method to run when animation completes
+      - timing: Animation timing function
+
+    @param {String|Hash} key
+    @param {Object} value
+    @params {Number|Hash} duration or options
+    @returns {SC.View} receiver
+  */
+  animate: function(keyOrHash, valueOrOptions, optionsOrCallback, callback) {
+    var hash, options;
+
+    if (SC.typeOf(keyOrHash) === SC.T_HASH) {
+      hash = keyOrHash;
+      options = valueOrOptions;
+      callback = optionsOrCallback;
+    } else {
+      hash = {};
+      hash[keyOrHash] = valueOrOptions;
+      options = optionsOrCallback;
+    }
+
+    if (SC.typeOf(options) === SC.T_NUMBER) {
+      options = { duration: options };
+    } else if (SC.typeOf(options) !== SC.T_HASH) {
+      throw "Must provide options hash or duration!";
+    }
+
+    if (callback) options.callback = callback;
+
+
+    var layout = SC.clone(this.get('layout')), didChange = NO, value, cur, animValue, curAnim;
+    
+    for(key in hash) {
+      if (!hash.hasOwnProperty(key)) continue;
+      value = hash[key];
+      cur = layout[key];
+
+      if (SC.ANIMATABLE_PROPERTIES.contains(key)) {
+        curAnim = layout['animate'+key.capitalize()];
+        
+        if (value === null || value === undefined) {
+          throw "Can only animate to an actual value!";
+        } else {
+          if (cur !== value) didChange = YES;
+
+          // FIXME: We should check more than duration
+          // Also, will we allow people to just set a number instead of a hash? If so, we have to account for that.
+          if (curAnim && curAnim.duration !== options.duration) didChange = YES ;
+
+          layout[key] = value ;
+          
+          // I'm pretty sure we want to be cloning this because we may be applying it
+          // to multiple properties which can be edited independently
+          layout['animate'+key.capitalize()] = SC.clone(options);
+        }
+      } else {
+        if (cur !== value) didChange = YES;
+        layout[key] = value;
+      }
+    }
+
     // now set adjusted layout
     if (didChange) this.set('layout', layout) ;
     
     return this ;
   },
-  
+
+  /**
+  Resets animation, stopping all existing animations.
+  */
+  resetAnimation: function() {
+    var layout = this.get('layout'), didChange = NO, key;
+    for (key in layout) {
+      if (key.substring(0,7) === 'animate') {
+        didChange = YES;
+        delete layout[key];
+      }
+    }
+    if (didChange) {
+      this.set('layout', layout);
+      this.notifyPropertyChange('layout');
+    }
+    return this;
+  },
+
+  _scv_willRenderAnimations: function(){
+    if (SC.platform.supportsCSSTransitions) {
+      var layer = this.get('layer'),
+          currentStyle = layer ? layer.style : null,
+          newStyle = this.get('layoutStyle'),
+          transitionStyle = newStyle[SC.platform.domCSSPrefix+"Transition"],
+          layout = this.get('layout'),
+          key;
+
+      // Handle existing animations
+      if (this._activeAnimations) {
+        for(key in this._activeAnimations){
+          // TODO: Check for more than duration
+          if (
+            newStyle[key] !== currentStyle[key] ||
+            !this._pendingAnimations || !this._pendingAnimations[key] ||
+            this._activeAnimations[key].duration !== this._pendingAnimations[key].duration
+          ) {
+            var callback = this._activeAnimations[key].callback;
+            if (callback) {
+              if (this._animatedTransforms && this._animatedTransforms.length > 0) {
+                for (idx=0; idx < this._animatedTransforms.length; idx++) {
+                  this._scv_runAnimationCallback(callback, null, this._animatedTransforms[idx], YES);
+                }
+                this._animatedTransforms = null;
+              } else {
+                this._scv_runAnimationCallback(callback, null, key, YES);
+              }
+            }
+
+            this._scv_removeAnimationFromLayout(key, YES);
+          }
+        }
+      }
+
+      this._activeAnimations = this._pendingAnimations;
+      this._pendingAnimations = null;
+    } else {
+      // Transitions not supported
+      var key;
+      for (key in this._pendingAnimations) {
+        var callback = this._pendingAnimations[key].callback;
+        if (callback) this._scv_runAnimationCallback(callback, null, key, NO);
+        this._scv_removeAnimationFromLayout(key, NO, YES);
+      }
+      this._activeAnimations = this._pendingAnimations = null;
+    }
+  },
+
+  _scv_removeAnimationFromLayout: function(propertyName, updateStyle, isPending) {
+
+    if (updateStyle) {
+      var layer = this.get('layer'),
+          updatedCSS = [], key;
+      for(key in this._activeAnimations) {
+        if (key !== propertyName) updatedCSS.push(this._activeAnimations[key].css);
+      }
+
+      // FIXME: Not really sure this is the right way to do it, but we don't want to trigger a layout update
+      layer.style[SC.platform.domCSSPrefix+"Transition"] = updatedCSS.join(', ');
+    }
+
+
+    var layout = this.get('layout');
+
+    if (propertyName === '-'+SC.platform.cssPrefix+'-transform' && this._animatedTransforms && this._animatedTransforms.length > 0) {
+      for(idx=0; idx < this._animatedTransforms.length; idx++) {
+        delete layout['animate'+this._animatedTransforms[idx].capitalize()];
+      }
+      this._animatedTransforms = null;
+    }
+    delete layout['animate'+propertyName.capitalize()];
+
+    if (!isPending) delete this._activeAnimations[propertyName];
+  },
+
+  _scv_runAnimationCallback: function(callback, evt, propertyName, cancelled) {
+    if (callback) {
+      if (SC.typeOf(callback) !== SC.T_HASH) callback = { action: callback };
+      callback.source = this;
+      if (!callback.target) callback.target = this;
+    }
+    SC.View.runCallback(callback, { event: evt, propertyName: propertyName, view: this, isCancelled: cancelled });
+  },
+
+  /**
+    Called when animation ends, should not usually be called manually
+  */
+  _scv_animationEnd: function(evt){
+    // WARNING: Sometimes this will get called more than once for a property. Not sure why.
+
+    var propertyName = evt.originalEvent.propertyName,
+        layout = this.get('layout'),
+        animation;
+
+    animation = this._activeAnimations ? this._activeAnimations[propertyName] : null;
+
+    if(animation) {
+      if (animation.callback) {
+        // Charles says this is a good idea
+        SC.RunLoop.begin();
+        // We're using invokeLater so we don't trigger any layout changes from the callbacks until the animations are done
+        if (this._animatedTransforms && this._animatedTransforms.length > 0) {
+          for (idx=0; idx < this._animatedTransforms.length; idx++) {
+            this.invokeLater('_scv_runAnimationCallback', 1, animation.callback, evt, this._animatedTransforms[idx], NO);
+          }
+        } else {
+          this.invokeLater('_scv_runAnimationCallback', 1, animation.callback, evt, propertyName, NO);
+        }
+        SC.RunLoop.end();
+      }
+
+      this._scv_removeAnimationFromLayout(propertyName, YES);
+    }
+  },
+
+
   /** 
     The layout describes how you want your view to be positions on the 
     screen.  You can define the following properties:
@@ -1660,10 +2463,6 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   convertFrameToView: function(frame, targetView) {
     var myX=0, myY=0, targetX=0, targetY=0, view = this, f ;
     
-    if (this.get('useStaticLayout')) {
-      throw "convertFrameToView is not available with static layout";
-    }
-    
     // walk up this side
     while (view) {
       f = view.get('frame'); myX += f.x; myY += f.y ;
@@ -1704,15 +2503,12 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @test in converFrames
   */
   convertFrameFromView: function(frame, targetView) {
-    var myX=0, myY=0, targetX=0, targetY=0, view = this, next, f ;
-    
-    if (this.get('useStaticLayout')) {
-      throw "convertFrameToView is not available with static layout";
-    }
+    var myX=0, myY=0, targetX=0, targetY=0, view = this, f ;
     
     // walk up this side
-    while (view && view.get('frame')) {
-      f = view.get('frame'); myX += f.x; myY += f.y ;
+    //Note: Intentional assignment of variable f
+    while (view && (f = view.get('frame'))) {
+      myX += f.x; myY += f.y ;
       view = view.get('parentView') ; 
     }
     
@@ -1760,7 +2556,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   frame: function() {
     return this.computeFrameWithParentFrame(null) ;
-  }.property('layout', 'useStaticLayout').cacheable(),
+  }.property('useStaticLayout').cacheable(),    // We depend on the layout, but layoutDidChange will call viewDidChange to check the frame for us
   
   /**
     Computes what the frame of this view would be if the parent were resized
@@ -1780,108 +2576,158 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   computeFrameWithParentFrame: function(pdim) {
     var layout = this.get('layout'),
         f = {} , error, layer, AUTO = SC.LAYOUT_AUTO,
-        stLayout = this.get('useStaticLayout') ;
-    
-    if (layout.width !== undefined &&
-        layout.width === SC.LAYOUT_AUTO &&
+        stLayout = this.get('useStaticLayout'),
+        pv = this.get('parentView'),
+        dH, dW, //shortHand for parentDimensions
+        borderTop, borderLeft,
+        lR = layout.right, 
+        lL = layout.left, 
+        lT = layout.top, 
+        lB = layout.bottom, 
+        lW = layout.width, 
+        lH = layout.height, 
+        lcX = layout.centerX, 
+        lcY = layout.centerY;
+
+    if (lW !== undefined &&
+        lW === SC.LAYOUT_AUTO &&
         stLayout !== undefined && !stLayout) {
-     error = SC.Error.desc("%@.layout() you cannot use width:auto if staticLayout is disabled".fmt(this),"%@".fmt(this), -1) ;
-     console.error(error.toString()) ;
-     throw error ;
+      error = SC.Error.desc(("%@.layout() cannot use width:auto if "+
+                "staticLayout is disabled").fmt(this), "%@".fmt(this), -1);
+      console.error(error.toString()) ;
+      throw error ;
     }
     
-    if (layout.height !== undefined &&
-        layout.height === SC.LAYOUT_AUTO &&
+    if (lH !== undefined &&
+        lH === SC.LAYOUT_AUTO &&
         stLayout !== undefined && !stLayout) {
-      error = SC.Error.desc("%@.layout() you cannot use height:auto if staticLayout is disabled".fmt(this),"%@".fmt(this), -1) ;
-      console.error(error.toString())  ;
+       error = SC.Error.desc(("%@.layout() cannot use height:auto if "+
+                "staticLayout is disabled").fmt(this),"%@".fmt(this), -1);
+       console.error(error.toString())  ;
       throw error ;
     }
     
-    if (stLayout) return null; // can't compute
+    if (stLayout) {
+      // need layer to be able to compute rect
+      if (layer = this.get('layer')) {
+        f = SC.viewportOffset(layer); // x,y
+        if (pv) f = pv.convertFrameFromView(f, null);
+        
+        /*
+          TODO Can probably have some better width/height values - CC
+        */
+        f.width = layer.offsetWidth;
+        f.height = layer.offsetHeight;
+        return f;
+      }
+      return null; // can't compute
+    }
+    
+
+    if (!pdim) pdim = this.computeParentDimensions(layout) ;
+    dH = pdim.height;
+    dW = pdim.width;
     
     // handle left aligned and left/right 
-    if (!SC.none(layout.left)) {
-      f.x = Math.floor(layout.left) ;
-      if (layout.width !== undefined) {
-        if(layout.width === AUTO) f.width = AUTO ;
-        else f.width = Math.floor(layout.width) ;
-      } else { // better have layout.right!
-        if (!pdim) pdim = this.computeParentDimensions(layout) ;
-        f.width = Math.floor(pdim.width - f.x - (layout.right || 0)) ;
+    if (!SC.none(lL)) {
+      if(SC.isPercentage(lL)){
+        f.x = dW*lL;
+      }else{
+        f.x = lL ;
+      }
+      if (lW !== undefined) {
+        if(lW === AUTO) f.width = AUTO ;
+        else if(SC.isPercentage(lW)) f.width = dW*lW ;
+        else f.width = lW ;
+      } else { // better have lR!
+        f.width = dW - f.x ;
+        if(lR && SC.isPercentage(lR)) f.width = f.width - (lR*dW) ;
+        else f.width = f.width - (lR || 0) ;
       }
-      
     // handle right aligned
-    } else if (!SC.none(layout.right)) {
-      if (!pdim) pdim = this.computeParentDimensions(layout) ;
-      if (SC.none(layout.width)) {
-        f.width = pdim.width - layout.right ;
+    } else if (!SC.none(lR)) {
+      if (SC.none(lW)) {
+        if (SC.isPercentage(lL)) f.width = dW - (dW*lR) ;
+        else f.width = dW - lR ;
         f.x = 0 ;
       } else {
-        if(layout.width === AUTO) f.width = AUTO ;
-        else f.width = Math.floor(layout.width || 0) ;
-        f.x = Math.floor(pdim.width - layout.right - f.width) ;
+        if(lW === AUTO) f.width = AUTO ;
+        else if(SC.isPercentage(lW)) f.width = dW*lW ;
+        else f.width = (lW || 0) ;
+        if (SC.isPercentage(lW)) f.x = dW - (lR*dW) - f.width ;
+        else f.x = dW - lR - f.width ;
       }
       
     // handle centered
-    } else if (!SC.none(layout.centerX)) {
-      if (!pdim) pdim = this.computeParentDimensions(layout) ; 
-      if(layout.width === AUTO) f.width = AUTO ;
-      else f.width = Math.floor(layout.width || 0) ;
-      f.x = Math.floor((pdim.width - f.width)/2 + layout.centerX) ;
+    } else if (!SC.none(lcX)) {
+      if(lW === AUTO) f.width = AUTO ;
+      else if (SC.isPercentage(lW)) f.width = lW*dW ;
+      else f.width = (lW || 0) ;
+      if(SC.isPercentage(lcX)) f.x = (dW - f.width)/2 + (lcX*dW) ;
+      else f.x = (dW - f.width)/2 + lcX ;
     } else {
       f.x = 0 ; // fallback
-      if (SC.none(layout.width)) {
-        if (!pdim) pdim = this.computeParentDimensions(layout) ;
-        f.width = Math.floor(pdim.width) ;
+      if (SC.none(lW)) {
+        f.width = dW ;
       } else {
-        if(layout.width === AUTO) f.width = AUTO ;
-        else f.width = Math.floor(layout.width || 0) ;
+        if(lW === AUTO) f.width = AUTO ;
+        if (SC.isPercentage(lW)) f.width = lW*dW ;
+        else f.width = (lW || 0) ;
       }
     }
     
     // handle top aligned and top/bottom 
-    if (!SC.none(layout.top)) {
-      f.y = Math.floor(layout.top) ;
-      if (layout.height !== undefined) {
-        if(layout.height === AUTO) f.height = AUTO ;
-        else f.height = Math.floor(layout.height) ;
-      } else { // better have layout.bottm!
-        if (!pdim) pdim = this.computeParentDimensions(layout) ;
-        f.height = Math.floor(pdim.height - f.y - (layout.bottom || 0)) ;
+    if (!SC.none(lT)) {
+      if(SC.isPercentage(lT)) f.y = lT*dH ;
+      else f.y = lT ;
+      if (lH !== undefined) {
+        if(lH === AUTO) f.height = AUTO ;
+        else if(SC.isPercentage(lH)) f.height = lH*dH ;
+        else f.height = lH ;
+      } else { // better have lB!
+        if(lB && SC.isPercentage(lB)) f.height = dH - f.y - (lB*dH) ;
+        else f.height = dH - f.y - (lB || 0) ;
       }
       
     // handle bottom aligned
-    } else if (!SC.none(layout.bottom)) {
-      if (!pdim) pdim = this.computeParentDimensions(layout) ;
-      if (SC.none(layout.height)) {
-        f.height = pdim.height - layout.bottom ;
+    } else if (!SC.none(lB)) {
+      if (SC.none(lH)) {
+        if (SC.isPercentage(lB)) f.height = dH - (lB*dH) ;
+        else f.height = dH - lB ;
         f.y = 0 ;
       } else {
-        if(layout.height === AUTO) f.height = AUTO ;
-        else f.height = Math.floor(layout.height || 0) ;
-        f.y = Math.floor(pdim.height - layout.bottom - f.height) ;
+        if(lH === AUTO) f.height = AUTO ;
+        if (lH && SC.isPercentage(lH)) f.height = lH*dH ;
+        else f.height = (lH || 0) ;
+        if (SC.isPercentage(lB)) f.y = dH - (lB*dH) - f.height ;
+        else f.y = dH - lB - f.height ;
       }
       
     // handle centered
-    } else if (!SC.none(layout.centerY)) {
-      if (!pdim) pdim = this.computeParentDimensions(layout) ; 
-      if(layout.height === AUTO) f.height = AUTO ;
-      else f.height = Math.floor(layout.height || 0) ;
-      f.y = Math.floor((pdim.height - f.height)/2 + layout.centerY) ;
+    } else if (!SC.none(lcY)) {
+      if(lH === AUTO) f.height = AUTO ;
+      if (lH && SC.isPercentage(lH)) f.height = lH*dH ;
+      else f.height = (lH || 0) ;
+      if (SC.isPercentage(lcY)) f.y = (dH - f.height)/2 + (lcY*dH) ;
+      else f.y = (dH - f.height)/2 + lcY ;
       
     // fallback
     } else {
       f.y = 0 ; // fallback
-      if (SC.none(layout.height)) {
-        if (!pdim) pdim = this.computeParentDimensions(layout) ; 
-        f.height = Math.floor(pdim.height) ;
+      if (SC.none(lH)) {
+        f.height = dH ;
       } else {
-        if(layout.height === AUTO) f.height = AUTO ;
-        else f.height = Math.floor(layout.height || 0) ;
+        if(lH === AUTO) f.height = AUTO ;
+        if (SC.isPercentage(lH)) f.height = lH*dH ;
+        else f.height = lH || 0 ;
       }
     }
     
+    f.x = Math.floor(f.x);
+    f.y = Math.floor(f.y);
+    if(f.height !== AUTO) f.height = Math.floor(f.height);
+    if(f.width !== AUTO) f.width = Math.floor(f.width);
+    
     // if width or height were set to auto and we have a layer, try lookup
     if (f.height === AUTO || f.width === AUTO) {
       layer = this.get('layer');
@@ -1889,6 +2735,24 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       if (f.width === AUTO) f.width = layer ? layer.clientWidth : 0;
     }
     
+    // views with SC.Border mixin applied applied
+    if (this.get('hasBorder')) {
+      borderTop = this.get('borderTop');
+      borderLeft = this.get('borderLeft');
+      f.height -= borderTop+this.get('borderBottom');
+      f.y += borderTop;
+      f.width -= borderLeft+this.get('borderRight');
+      f.x += borderLeft;
+    }
+
+    // Account for special cases inside ScrollView, where we adjust the
+    // element's scrollTop/scrollLeft property for performance reasons.
+    if (pv && pv.isScrollContainer) {
+      pv = pv.get('parentView');
+      f.x -= pv.get('horizontalScrollOffset');
+      f.y -= pv.get('verticalScrollOffset');
+    }
+
     // make sure the width/height fix min/max...
     if (!SC.none(layout.maxHeight) && (f.height > layout.maxHeight)) {
       f.height = layout.maxHeight ;
@@ -1930,36 +2794,72 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   
   /**
     The clipping frame returns the visible portion of the view, taking into
-    account the clippingFrame of the parent view.  Keep in mind that the 
-    clippingFrame is in the context of the view itself, not it's parent view.
-    
-    Normally this will be calculate based on the intersection of your own 
-    clippingFrame and your parentView's clippingFrame.  
+    account the contentClippingFrame of the parent view.  Keep in mind that 
+    the clippingFrame is in the context of the view itself, not it's parent 
+    view.
     
+    Normally this will be calculated based on the intersection of your own 
+    clippingFrame and your parentView's contentClippingFrame.  
+
     @property {Rect}
   */
   clippingFrame: function() {
-    var pv= this.get('parentView'), f = this.get('frame'), ret = f ;
+    var f = this.get('frame'),
+        ret = f,
+        pv, cf;
+    
+    if (!f) return null;
+    pv = this.get('parentView');
     if (pv) {
-     pv = pv.get('clippingFrame') ;
-     ret = SC.intersectRects(pv, f) ;
-    }
-    ret.x -= f.x ;
-    ret.y -= f.y ;
-    return ret ;
+      cf = pv.get('contentClippingFrame');
+      if (!cf) return f;
+      ret = SC.intersectRects(cf, f);
+    } 
+    ret.x -= f.x;
+    ret.y -= f.y;
+    
+    return ret;
   }.property('parentView', 'frame').cacheable(),
   
+  /**
+    The clipping frame child views should intersect with.  Normally this is 
+    the same as the regular clippingFrame.  However, you may override this 
+    method if you want the child views to actually draw more or less content
+    than is actually visible for some reason.
+    
+    Usually this is only used by the ScrollView to optimize drawing on touch
+    devices.
+    
+    @property {Rect}
+  */
+  contentClippingFrame: function() {
+    return this.get("clippingFrame");
+  }.property('clippingFrame').cacheable(),
+
   /** @private
-    Whenever the clippingFrame changes, this observer will fire, notifying
-    child views that their frames have also changed.
+    This method is invoked whenever the clippingFrame changes, notifying
+    each child view that its clippingFrame has also changed.
   */
   _sc_view_clippingFrameDidChange: function() {
     var cvs = this.get('childViews'), len = cvs.length, idx, cv ;
     for (idx=0; idx<len; ++idx) {
       cv = cvs[idx] ;
-      if (!cv.hasStaticLayout) cv.notifyPropertyChange('clippingFrame') ;
+      
+      // In SC 1.0 views with static layout did not receive notifications 
+      // of frame changes because they didn't support frames.  In SC 1.1 they
+      // do support frames, so they should receive notifications.  Also in
+      // SC 1.1 SC.StaticLayout is merged into SC.View.  The mixin is only 
+      // for compatibility.  This property is defined on the mixin. 
+      //
+      // frame changes should be sent all the time unless this property is 
+      // present to indicate that we want the old 1.0 API behavior instead.
+      // 
+      if (!cv.useStaticLayout) {
+        cv.notifyPropertyChange('clippingFrame') ;
+        cv._sc_view_clippingFrameDidChange();
+      }
     }
-  }.observes('clippingFrame'),
+  },
     
   /** 
     This method may be called on your view whenever the parent view resizes.
@@ -1972,40 +2872,68 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @test in viewDidResize
   */
   parentViewDidResize: function() {
-    var layout = this.get('layout') ;
+    var layout = this.get('layout'), isPercentageFunc, isPercentage, isFixed;
     
     // only resizes if the layout does something other than left/top - fixed
     // size.
-    var isFixed = (
+    isFixed = (
       (layout.left !== undefined) && (layout.top !== undefined) &&
       (layout.width !== undefined) && (layout.height !== undefined)
     );
-    
-    if (!isFixed) {
-      this.notifyPropertyChange('frame') ;
-      this.viewDidResize() ;
+
+    isPercentageFunc = SC.isPercentage;
+    isPercentage = (isPercentageFunc(layout.left) || 
+                    isPercentageFunc(layout.top) ||
+                    isPercentageFunc(layout.width) || 
+                    isPercentageFunc(layout.right) ||
+                    isPercentageFunc(layout.centerX) || 
+                    isPercentageFunc(layout.centerY));
+
+    // Do we think there's a chance our frame will have changed as a result?
+    if (!isFixed || isPercentage) {
+      // There's a chance our frame changed.  Invoke viewDidResize(), which
+      // will notify about our change to 'frame' (if it actually changed) and
+      // appropriately notify our child views.
+      this.viewDidResize();
     }
   },
-  
+
+
+
   /**
     This method is invoked on your view when the view resizes due to a layout
-    change or due to the parent view resizing.  You can override this method
+    change or potentially due to the parent view resizing (if your view’s size
+    depends on the size of your parent view).  You can override this method
     to implement your own layout if you like, such as performing a grid 
     layout.
     
-    The default implementation simply calls parentViewDidResize on all of
-    your children.
+    The default implementation simply notifies about the change to 'frame' and
+    then calls parentViewDidResize on all of your children.
     
     @returns {void}
   */
   viewDidResize: function() {
+    this._viewFrameDidChange();
+
+    // Also notify our children.
     var cv = this.childViews, len = cv.length, idx, view ;
     for (idx=0; idx<len; ++idx) {
-      view = cv[idx] ;
-      if (view.parentViewDidResize) view.parentViewDidResize() ;
+      view = cv[idx];
+      view.parentViewDidResize();
     }
-  }.observes('layout'),
-  
+  },
+
+  /** @private
+    Invoked by other views to notify this view that its frame has changed.
+
+    This notifies the view that its frame property has changed,
+    then propagates those changes to its child views.
+  */
+  _viewFrameDidChange: function() {
+    this.notifyPropertyChange('frame');
+    this._sc_view_clippingFrameDidChange();
+  },
+
   // Implementation note: As a general rule, paired method calls, such as 
   // beginLiveResize/endLiveResize that are called recursively on the tree
   // should reverse the order when doing the final half of the call. This 
@@ -2066,7 +2994,21 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (this.didEndLiveResize) this.didEndLiveResize() ;
     return this ;
   },
-  
+
+  /**
+    Setting wantsAcceleratedLayer to YES will use transforms to move the
+    layer when available. On some platforms transforms are hardware accelerated.
+  */
+  wantsAcceleratedLayer: NO,
+
+  /**
+    Specifies whether transforms can be used to move the layer.
+  */
+  hasAcceleratedLayer: function(){
+    return this.get('wantsAcceleratedLayer') && SC.platform.supportsCSSTransforms;
+  }.property('wantsAcceleratedLayer').cacheable(),
+
+
   /**
     layoutStyle describes the current styles to be written to your element
     based on the layout you defined.  Both layoutStyle and frame reset when
@@ -2077,69 +3019,143 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @property {Hash}
     @readOnly
   */
+  
+  
   layoutStyle: function() {
     var layout = this.get('layout'), ret = {}, pdim = null, error, 
         AUTO = SC.LAYOUT_AUTO,
-        stLayout = this.get('useStaticLayout');
-    
-    if (layout.width !== undefined &&
-        layout.width === SC.LAYOUT_AUTO &&
-        !stLayout) {
-     error= SC.Error.desc("%@.layout() you cannot use width:auto if  staticLayout is disabled".fmt(this),"%@".fmt(this),-1);
-     console.error(error.toString()) ;
-     throw error ;
+        dims = SC._VIEW_DEFAULT_DIMS, loc = dims.length, x, value, key,
+        stLayout = this.get('useStaticLayout'),
+        lR = layout.right, 
+        lL = layout.left, 
+        lT = layout.top, 
+        lB = layout.bottom, 
+        lW = layout.width, 
+        lH = layout.height,
+        lMW = layout.maxWidth,
+        lMH = layout.maxHeight,
+        lcX = layout.centerX, 
+        lcY = layout.centerY,
+        canUseAcceleratedLayer = this.get('hasAcceleratedLayer'),
+        translateTop = null,
+        translateLeft = null;
+    if (lW !== undefined && lW === SC.LAYOUT_AUTO && !stLayout) {
+      error= SC.Error.desc("%@.layout() you cannot use width:auto if ".fmt(this) +
+              "staticLayout is disabled","%@".fmt(this),-1);
+      console.error(error.toString()) ;
+      throw error ;
     }
     
-    if (layout.height !== undefined &&
-        layout.height === SC.LAYOUT_AUTO &&
-        !stLayout) {
-      error = SC.Error.desc("%@.layout() you cannot use height:auto if  staticLayout is disabled".fmt(this),"%@".fmt(this),-1);  
+    if (lH !== undefined && lH === SC.LAYOUT_AUTO && !stLayout) {
+      error = SC.Error.desc("%@.layout() you cannot use height:auto if ".fmt(this) +
+                "staticLayout is disabled","%@".fmt(this),-1);  
       console.error(error.toString()) ;
       throw error ;
     }
-    
+
+    if (SC.platform.supportsCSSTransforms) {
+      // Check to see if we're using transforms
+      var animatingTransforms = NO, transformAnimationDuration;
+      for(key in layout){
+        if (key.substring(0,7) === 'animate') {
+          if (SC.CSS_TRANSFORM_MAP[key.substring(7).camelize()]) {
+            animatingTransforms = YES;
+
+            if (this._pendingAnimations && this._pendingAnimations['-'+SC.platform.cssPrefix+'-transform']) {
+              throw "Animations of transforms must be executed simultaneously!";
+            }
+
+            // TODO: If we want to allow it to be set as just a number for duration we need to add support here
+            if (transformAnimationDuration && layout[key].duration !== transformAnimationDuration) {
+              console.warn("Can't animate transforms with different durations! Using first duration specified.");
+              layout[key].duration = transformAnimationDuration;
+            }
+            transformAnimationDuration = layout[key].duration;
+
+            // FIXME: There will also be problems if we have conflicting timings and callbacks
+          }
+        }
+      }
+
+      // If we're animating other transforms at different speeds, don't use acceleratedLayer
+      if (
+        animatingTransforms &&
+        (
+          (layout['animateTop'] && layout['animateTop'].duration !== transformAnimationDuration) ||
+          (layout['animateLeft'] && layout['animateLeft'].duration !== transformAnimationDuration)
+        )
+      ) {
+        canUseAcceleratedLayer = NO;
+      }
+    }
+
     // X DIRECTION
-    
+
     // handle left aligned and left/right
-    if (!SC.none(layout.left)) {
-      ret.left = Math.floor(layout.left);
-      if (layout.width !== undefined) {
-        if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
-        else ret.width = Math.floor(layout.width) ;
+    if (!SC.none(lL)) {
+      if(SC.isPercentage(lL)) {
+        ret.left = (lL*100)+"%";  //percentage left
+      } else if (canUseAcceleratedLayer && !SC.empty(lW)) {
+        translateLeft = Math.floor(lL);
+        ret.left = 0;
+      } else {
+        ret.left = Math.floor(lL); //px left
+      }
+      ret.marginLeft = 0 ;
+      
+      if (lW !== undefined) {
+        if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+        else if(SC.isPercentage(lW)) ret.width = (lW*100)+"%"; //percentage width
+        else ret.width = Math.floor(lW) ; //px width
         ret.right = null ;
       } else {
         ret.width = null ;
-        ret.right = Math.floor(layout.right || 0) ;
+        if(lR && SC.isPercentage(lR)) ret.right = (lR*100)+"%"; //percentage right
+        else ret.right = Math.floor(lR || 0) ; //px right
       }
-      ret.marginLeft = 0 ;
       
     // handle right aligned
-    } else if (!SC.none(layout.right)) {
-      ret.right = Math.floor(layout.right) ;
+    } else if (!SC.none(lR)) {
+      if(SC.isPercentage(lR)) {
+        ret.right = Math.floor(lR*100)+"%";  //percentage left
+      }else{
+        ret.right = Math.floor(lR) ;
+      }
       ret.marginLeft = 0 ;
       
-      if (SC.none(layout.width)) {
-        ret.left = 0;
+      if (SC.none(lW)) {
+        if (SC.none(lMW)) ret.left = 0;
         ret.width = null;
       } else {
         ret.left = null ;
-        if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
-        else ret.width = Math.floor(layout.width || 0) ;
+        if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+        else if(lW && SC.isPercentage(lW)) ret.width = (lW*100)+"%" ; //percentage width
+        else ret.width = Math.floor(lW || 0) ; //px width
       }
       
     // handle centered
-    } else if (!SC.none(layout.centerX)) {
+    } else if (!SC.none(lcX)) {
       ret.left = "50%";
-      ret.width = Math.floor(layout.width || 0) ;
-      ret.marginLeft = Math.floor(layout.centerX - ret.width/2) ;
+      if(lW && SC.isPercentage(lW)) ret.width = (lW*100)+"%" ; //percentage width
+      else ret.width = Math.floor(lW || 0) ;
+      if(lW && SC.isPercentage(lW) && (SC.isPercentage(lcX) || SC.isPercentage(lcX*-1))){
+        ret.marginLeft = Math.floor((lcX - lW/2)*100)+"%" ;
+      }else if(lW && lW >= 1 && !SC.isPercentage(lcX)){
+        ret.marginLeft = Math.floor(lcX - ret.width/2) ;
+      }else {
+        // This error message happens whenever width is not set.
+        console.warn("You have to set width and centerX using both percentages or pixels");
+        ret.marginLeft = "50%";
+      }
       ret.right = null ;
     
     // if width defined, assume top/left of zero
-    } else if (!SC.none(layout.width)) {
+    } else if (!SC.none(lW)) {
       ret.left =  0;
       ret.right = null;
-      if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
-      else ret.width = Math.floor(layout.width);
+      if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+      else if(SC.isPercentage(lW)) ret.width = (lW*100)+"%";
+      else ret.width = Math.floor(lW);
       ret.marginLeft = 0;
       
     // fallback, full width.
@@ -2157,44 +3173,65 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     
     // Y DIRECTION
     
-    // handle left aligned and left/right
-    if (!SC.none(layout.top)) {
-      ret.top = Math.floor(layout.top);
-      if (layout.height !== undefined) {
-        if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
-        else ret.height = Math.floor(layout.height) ;
+    // handle top aligned and left/right
+    if (!SC.none(lT)) {
+      if(SC.isPercentage(lT)) {
+        ret.top = (lT*100)+"%";
+      } else if (canUseAcceleratedLayer && !SC.empty(lH)) {
+        translateTop = Math.floor(lT);
+        ret.top = 0;
+      } else {
+        ret.top = Math.floor(lT);
+      }
+      if (lH !== undefined) {
+        if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+        else if(SC.isPercentage(lH)) ret.height = (lH*100)+"%" ;
+        else ret.height = Math.floor(lH) ;
         ret.bottom = null ;
       } else {
         ret.height = null ;
-        ret.bottom = Math.floor(layout.bottom || 0) ;
+        if(lB && SC.isPercentage(lB)) ret.bottom = (lB*100)+"%" ;
+        else ret.bottom = Math.floor(lB || 0) ;
       }
       ret.marginTop = 0 ;
       
-    // handle right aligned
-    } else if (!SC.none(layout.bottom)) {
+    // handle bottom aligned
+    } else if (!SC.none(lB)) {
       ret.marginTop = 0 ;
-      ret.bottom = Math.floor(layout.bottom) ;
-      if (SC.none(layout.height)) {
-        ret.top = 0;
+      if(SC.isPercentage(lB)) ret.bottom = (lB*100)+"%";
+      else ret.bottom = Math.floor(lB) ;
+      if (SC.none(lH)) {
+        if (SC.none(lMH)) ret.top = 0;
         ret.height = null ;
       } else {
         ret.top = null ;
-        if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
-        else ret.height = Math.floor(layout.height || 0) ;
+        if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+        else if(lH && SC.isPercentage(lH)) ret.height = (lH*100)+"%" ;
+        else ret.height = Math.floor(lH || 0) ;
       }
       
     // handle centered
-    } else if (!SC.none(layout.centerY)) {
+    } else if (!SC.none(lcY)) {
       ret.top = "50%";
-      ret.height = Math.floor(layout.height || 0) ;
-      ret.marginTop = Math.floor(layout.centerY - ret.height/2) ;
       ret.bottom = null ;
-    
-    } else if (!SC.none(layout.height)) {
+      
+      if(lH && SC.isPercentage(lH)) ret.height = (lH*100)+ "%" ;
+      else ret.height = Math.floor(lH || 0) ;
+      
+      if(lH && SC.isPercentage(lH) && (SC.isPercentage(lcY) || SC.isPercentage(lcY*-1))){ //height is percentage and lcy too
+        ret.marginTop = Math.floor((lcY - lH/2)*100)+"%" ;
+      }else if(lH && lH >= 1 && !SC.isPercentage(lcY)){
+        ret.marginTop = Math.floor(lcY - ret.height/2) ;
+      }else {
+        console.warn("You have to set height and centerY to use both percentages or pixels");
+        ret.marginTop = "50%";
+      }
+    } else if (!SC.none(lH)) {
       ret.top = 0;
       ret.bottom = null;
-      if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
-      else ret.height = Math.floor(layout.height || 0) ;
+      if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+      else if(lH && SC.isPercentage(lH)) ret.height = (lH*100)+"%" ;
+      else ret.height = Math.floor(lH || 0) ;
       ret.marginTop = 0;
       
     // fallback, full width.
@@ -2215,7 +3252,10 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     
     // if zIndex is set, use it.  otherwise let default shine through
     ret.zIndex = SC.none(layout.zIndex) ? null : layout.zIndex.toString();
-    
+
+    // if opacity is set, use it. otherwise let default shine through
+    ret.opacity = SC.none(layout.opacity) ? null : layout.opacity.toString();
+
     // if backgroundPosition is set, use it.
     // otherwise let default shine through
     ret.backgroundPosition = SC.none(layout.backgroundPosition) ?
@@ -2224,17 +3264,119 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     
     // set default values to null to allow built-in CSS to shine through
     // currently applies only to marginLeft & marginTop
-    var dims = SC._VIEW_DEFAULT_DIMS, loc = dims.length, x;
     while(--loc >=0) {
       x = dims[loc];
       if (ret[x]===0) ret[x]=null;
     }
-    
+
+    if (SC.platform.supportsCSSTransforms) {
+      // Handle transforms
+      var transformAttribute = SC.platform.domCSSPrefix+'Transform',
+          layer = this.get('layer'),
+          // FIXME: This is not the best way to do it, we should track these locally
+          currentTransforms = (layer ? layer.style[transformAttribute] : '').split(' '),
+          halTransforms, specialTransforms = [], idx;
+
+      if (canUseAcceleratedLayer) {
+        // Remove previous transforms
+        if (this._lastAcceleratedTransforms) currentTransforms.removeObjects(this._lastAcceleratedTransforms);
+
+        halTransforms = ['translateX('+(translateLeft || 0)+'px)', 'translateY('+(translateTop || 0)+'px)'];
+
+        // FIXME: This join.match is a bit hackish
+        if (SC.platform.supportsCSS3DTransforms && !currentTransforms.join(' ').match('translateZ')) {
+          halTransforms.push('translateZ(0px)');
+        }
+
+        // Store for next time
+        this._lastAcceleratedTransforms = halTransforms;
+      }
+
+      // Handle special CSS transform attributes
+      var specialTransforms = [], transformName;
+      for(transformName in SC.CSS_TRANSFORM_MAP) {
+        var cleanedTransforms = [], idx;
+        for(idx=0; idx < currentTransforms.length; idx++) {
+          if (!currentTransforms[idx].match(new RegExp('^'+transformName+'\\\('))) {
+            cleanedTransforms.push(currentTransforms[idx]);
+          }
+        }
+        currentTransforms = cleanedTransforms;
+
+        if (layout[transformName]) {
+          specialTransforms.push(SC.CSS_TRANSFORM_MAP[transformName](layout[transformName]));
+        } 
+      }
+      specialTransforms = specialTransforms.join(' ');
+
+      var allTransforms = currentTransforms.concat(halTransforms, specialTransforms).without(undefined).without('').join(' ');
+
+      // Set transform attribute
+      if (allTransforms !== '') ret[transformAttribute] = allTransforms;
+    }
+
+    // Temporary fix to not break SC.Animatable
+    if (!this.isAnimatable) {
+
+      // Handle animations
+      var transitions = [], animation, propertyKey;
+      this._animatedTransforms = [];
+
+      for(key in layout) {
+        if (key.substring(0,7) === 'animate') {
+          // FIXME: If we want to allow it to be set as just a number for duration we need to add support here
+          animation = layout[key];
+
+          if (animation.timing) {
+            if (SC.typeOf(animation.timing) != SC.T_STRING) {
+              animation.timing = "cubic-bezier("+animation.timing[0]+", "+animation.timing[1]+", "+
+                                                 animation.timing[2]+", "+animation.timing[3]+")";
+            }
+          } else {
+            animation.timing = 'linear';
+          }
+
+          propertyKey = key.substring(7).camelize();
+
+          // TODO: This is a weird conditional, we can probably clean it up
+          if (
+            SC.platform.supportsCSSTransforms &&
+            (
+              (
+                canUseAcceleratedLayer && (
+                  (propertyKey === 'top' && !SC.empty(translateTop)) ||
+                  (propertyKey === 'left' && !SC.empty(translateLeft))
+                )
+              ) ||
+              SC.CSS_TRANSFORM_MAP[propertyKey]
+            )
+          ) {
+            this._animatedTransforms.push(propertyKey);
+            propertyKey = '-'+SC.platform.cssPrefix+'-transform';
+          }
+
+          animation.css = propertyKey + " " + animation.duration + "s " + animation.timing;
+
+          // If it's a transform this may have already been set
+          if (!this._pendingAnimations) this._pendingAnimations = {};
+          if (!this._pendingAnimations[propertyKey]) {
+            this._pendingAnimations[propertyKey] = animation;
+            transitions.push(animation.css);
+          }
+        }
+      }
+
+      if (SC.platform.supportsCSSTransitions) ret[SC.platform.domCSSPrefix+"Transition"] = transitions.length > 0 ? transitions.join(", ") : null;
+
+    }
+
+
     // convert any numbers into a number + "px".
-    for(var key in ret) {
-      var value = ret[key];
+    for(key in ret) {
+      value = ret[key];
       if (typeof value === SC.T_NUMBER) ret[key] = (value + "px");
     }
+
     return ret ;
   }.property().cacheable(),
   
@@ -2250,13 +3392,51 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     This method is called whenever a property changes that invalidates the 
     layout of the view.  Changing the layout will do this automatically, but 
     you can add others if you want.
+
+    Implementation Note:  In a traditional setup, we would simply observe
+    'layout' here, but as described above in the documentation for our custom
+    implementation of propertyDidChange(), this method must always run
+    immediately after 'layout' is updated to avoid the potential for stale
+    (incorrect) cached 'frame' values.
     
     @returns {SC.View} receiver
   */
   layoutDidChange: function() {
+    // Did our layout change in a way that could cause us to be resized?  If
+    // not, then there's no need to invalidate the frames of our child views.
+    var previousLayout = this._previousLayout,
+        currentLayout  = this.get('layout'),
+        didResize      = YES,
+        previousWidth, previousHeight, currentWidth, currentHeight;
+
+    if (previousLayout  &&  previousLayout !== currentLayout) {
+      // This is a simple check to see whether we think the view may have
+      // resized.  We could look for a number of cases, but for now we'll
+      // handle only one simple case:  if the width and height are both
+      // specified, and they have not changed.
+      previousWidth = previousLayout.width;
+      if (previousWidth !== undefined) {
+        currentWidth = currentLayout.width;
+        if (previousWidth === currentWidth) {
+          previousHeight = previousLayout.height;
+          if (previousLayout !== undefined) {
+            currentHeight = currentLayout.height;
+            if (previousHeight === currentHeight) didResize = NO;
+          }
+        }
+      }
+    }
+
     this.beginPropertyChanges() ;
-    if (this.frame) this.notifyPropertyChange('frame') ;
     this.notifyPropertyChange('layoutStyle') ;
+    if (didResize) {
+      this.viewDidResize();
+    }
+    else {
+      // Even if we didn't resize, our frame might have changed.
+      // viewDidResize() handles this in the other case.
+      this._viewFrameDidChange();
+    }
     this.endPropertyChanges() ;
     
     // notify layoutView...
@@ -2267,10 +3447,10 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       if (layoutView.get('childViewsNeedLayout')) {
         layoutView.invokeOnce(layoutView.layoutChildViewsIfNeeded);
       }
-     }
+    }
     
     return this ;
-  }.observes('layout'),
+  },
   
   /**
     This this property to YES whenever the view needs to layout its child
@@ -2335,13 +3515,12 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @returns {void}
   */
   layoutChildViews: function() {
-    var set = this._needLayoutViews, len = set ? set.length : 0, idx,
-        view, context, layer;
-    for(idx=0;idx<len;idx++) {
-      view = set[idx];
-      view.updateLayout();
+    var set = this._needLayoutViews,
+        len = set ? set.length : 0,
+        i;
+    for (i = 0; i < len; ++i) {
+      set[i].updateLayout();
     }
-    view = context = layer = null ; // cleanup
     set.clear(); // reset & reuse
   },
   
@@ -2363,6 +3542,10 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       context = this.renderContext(layer);
       this.renderLayout(context);
       context.update();
+
+      // If this view uses static layout, then notify if the frame changed.
+      // (viewDidResize will do a comparison)
+      if (this.useStaticLayout) this.viewDidResize();
     }
     layer = null ;
     return this ;
@@ -2379,7 +3562,11 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @test in layoutChildViews
   */
   renderLayout: function(context, firstTime) {
-    context.addStyle(this.get('layoutStyle'));
+    this._viewRenderer.attr({
+      layoutStyle: this.get('layoutStyle')
+    });
+    this._scv_willRenderAnimations();
+    this._viewRenderer.render(context);
   },
   
   /** walk like a duck */
@@ -2404,8 +3591,248 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   selectStart: function(evt) {
     return this.get('isTextSelectable');
-  }
+  },
+  
+  /**
+    Used to block the contextMenu per view.
+   
+    @param evt {SC.Event} the contextmenu event
+    @returns YES if the contextmenu can show up
+  */
+  contextMenu: function(evt) {
+    if(!this.get('isContextMenuEnabled')) evt.stop();
+    return true;
+  },
+  
+  /**
+    A boundary set of distances outside which the touch will not be considered "inside" the view anymore.
+    
+    By default, up to 50px on each side.
+  */
+  touchBoundary: { left: 50, right: 50, top: 50, bottom: 50 },
+  
+  /**
+    @private
+    A computed property based on frame.
+  */
+  _touchBoundaryFrame: function (){
+    return this.get("parentView").convertFrameToView(this.get('frame'), null);
+  }.property("frame", "parentView").cacheable(),
+  
+  /**
+    Returns YES if the provided touch is within the boundary.
+  */
+  touchIsInBoundary: function(touch) {
+    var f = this.get("_touchBoundaryFrame"), maxX = 0, maxY = 0, boundary = this.get("touchBoundary");
+    var x = touch.pageX, y = touch.pageY;
+    
+    if (x < f.x) {
+      x = f.x - x;
+      maxX = boundary.left;
+    } else if (x > f.x + f.width) {
+      x = x - (f.x + f.width);
+      maxX = boundary.right;
+    } else {
+      x = 0;
+      maxX = 1;
+    }
+    
+    if (y < f.y) {
+      y = f.y - y;
+      maxY = boundary.top;
+    } else if (y > f.y + f.height) {
+      y = y - (f.y + f.height);
+      maxY = boundary.bottom;
+    } else {
+      y = 0;
+      maxY = 1;
+    }
+    
+    if (x > 100 || y > 100) return NO;
+    return YES;
+  },
+  
+  ///
+  /// BUILDING IN/OUT
+  ///
+  
+  /**
+    Call this to append a child while building it in. If the child is not
+    buildable, this is the same as calling appendChild.
+  */
+  buildInChild: function(view) {
+    view.willBuildInToView(this);
+    this.appendChild(view);
+    view.buildInToView(this);
+  },
   
+  /**
+    Call to remove a child after building it out. If the child is not buildable,
+    this will simply call removeChild.
+  */
+  buildOutChild: function(view) {
+    view.buildOutFromView(this);
+  },
+  
+  /**
+    Called by child view when build in finishes. By default, does nothing.
+    
+  */
+  buildInDidFinishFor: function(child) {
+  },
+  
+  /**
+    @private
+    Called by child view when build out finishes. By default removes the child view.
+  */
+  buildOutDidFinishFor: function(child) {
+    this.removeChild(child);
+  },
+  
+  /**
+    Whether the view is currently building in.
+  */
+  isBuildingIn: NO,
+  
+  /**
+    Whether the view is currently building out.
+  */
+  isBuildingOut: NO,
+  
+  /**
+    Implement this, and call didFinishBuildIn when you are done.
+  */
+  buildIn: function() {
+    this.buildInDidFinish();
+  },
+  
+  /**
+    Implement this, and call didFinsihBuildOut when you are done.
+  */
+  buildOut: function() {
+    this.buildOutDidFinish();
+  },
+  
+  /**
+    This should reset (without animation) any internal states; sometimes called before.
+    
+    It is usually called before a build in, by the parent view.
+  */
+  resetBuild: function() {
+    
+  },
+  
+  /**
+    Implement this if you need to do anything special when cancelling build out;
+    note that buildIn will subsequently be called, so you usually won't need to do
+    anything.
+    
+    This is basically called whenever build in happens.
+  */
+  buildOutDidCancel: function() {
+    
+  },
+  
+  /**
+    Implement this if you need to do anything special when cancelling build in.
+    You probably won't be able to do anything. I mean, what are you gonna do?
+    
+    If build in was cancelled, it means build out is probably happening. 
+    So, any timers or anything you had going, you can cancel. 
+    Then buildOut will happen.
+  */
+  buildInDidCancel: function() {
+    
+  },
+  
+  /**
+    Call this when you have built in.
+  */
+  buildInDidFinish: function() {
+    this.isBuildingIn = NO;
+    this._buildingInTo.buildInDidFinishFor(this);
+    this._buildingInTo = null;
+  },
+  
+  /**
+    Call this when you have finished building out.
+  */
+  buildOutDidFinish: function() {
+    this.isBuildingOut = NO;
+    this._buildingOutFrom.buildOutDidFinishFor(this);
+    this._buildingOutFrom = null;
+  },
+  
+  /**
+    Usually called by parentViewDidChange, this resets the build state (calling resetBuild in the process).
+  */
+  resetBuildState: function() {
+    if (this.isBuildingIn) {
+      this.buildInDidCancel();
+      this.isBuildingIn = NO;
+    }
+    if (this.isBuildingOut) {
+      this.buildOutDidCancel();
+      this.isBuildingOut = NO;
+    }
+    
+    // finish cleaning up
+    this.buildingInTo = null;
+    this.buildingOutFrom = null;
+    
+    this.resetBuild();
+  },
+  
+  /**
+    @private (semi)
+    Called by building parent view's buildInChild method. This prepares
+    to build in, but unlike buildInToView, this is called _before_ the child
+    is appended.
+    
+    Mostly, this cancels any build out _before_ the view is removed through parent change.
+  */
+  willBuildInToView: function(view) {
+    // stop any current build outs (and if we need to, we also need to build in again)
+    if (this.isBuildingOut) {
+      this.buildOutDidCancel();
+    }
+  },
+  
+  /**
+    @private (semi)
+    Called by building parent view's buildInChild method.
+  */
+  buildInToView: function(view) {
+    // if we are already building in, do nothing.
+    if (this.isBuildingIn) return;
+    
+    this._buildingInTo = view;
+    this.isBuildingOut = NO;
+    this.isBuildingIn = YES;
+    this.buildIn();
+  },
+  
+  /**
+    @private (semi)
+    Called by building parent view's buildOutChild method.
+    
+    The supplied view should always be the parent view.
+  */
+  buildOutFromView: function(view) {
+    // if we are already building out, do nothing.
+    if (this.isBuildingOut) return;
+    
+    // cancel any build ins
+    if (this.isBuildingIn) {
+      this.buildInDidCancel();
+    }
+    
+    // in any case, we need to build out
+    this.isBuildingOut = YES;
+    this.isBuildingIn = NO;
+    this._buildingOutFrom = view;
+    this.buildOut();
+  }
 });
 
 SC.View.mixin(/** @scope SC.View */ {
@@ -2444,47 +3871,66 @@ SC.View.mixin(/** @scope SC.View */ {
     Convert any layout to a Top, Left, Width, Height layout
   */
   convertLayoutToAnchoredLayout: function(layout, parentFrame){
-    var ret = {top: 0, left: 0, width: parentFrame.width, height: parentFrame.height};
+    var ret = {top: 0, left: 0, width: parentFrame.width, height: parentFrame.height},
+        pFW = parentFrame.width, pFH = parentFrame.height, //shortHand for parentDimensions
+        lR = layout.right, 
+        lL = layout.left, 
+        lT = layout.top, 
+        lB = layout.bottom, 
+        lW = layout.width, 
+        lH = layout.height, 
+        lcX = layout.centerX, 
+        lcY = layout.centerY;
     
     // X Conversion
     // handle left aligned and left/right
-    if (!SC.none(layout.left)) {
-      ret.left = Math.floor(layout.left);
-      if (layout.width !== undefined) {
-        if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
-        else ret.width = Math.floor(layout.width) ;
+    if (!SC.none(lL)) {
+      if(SC.isPercentage(lL)) ret.left = lL*pFW;
+      else ret.left = lL;
+      if (lW !== undefined) {
+        if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+        else if(SC.isPercentage(lW)) ret.width = lW*pFW ;
+        else ret.width = lW ;
       } else {
-        ret.width = parentFrame.width - ret.left - Math.floor(layout.right || 0);
+        if (lR && SC.isPercentage(lR)) ret.width = pFW - ret.left - (lR*pFW);
+        else ret.width = pFW - ret.left - (lR || 0);
       }
 
     // handle right aligned
-    } else if (!SC.none(layout.right)) {
+    } else if (!SC.none(lR)) {
       
       // if no width, calculate it from the parent frame
-      if (SC.none(layout.width)) {
+      if (SC.none(lW)) {
         ret.left = 0;
-        ret.width = parentFrame.width - Math.floor(layout.right || 0);
+        if(lR && SC.isPercentage(lR)) ret.width = pFW - (lR*pFW);
+        else ret.width = pFW - (lR || 0);
       
       // If has width, calculate the left anchor from the width and right and parent frame
       } else {
-        if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+        if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
         else { 
-          ret.width = layout.width;
-          ret.left = parentFrame.width - (layout.width + layout.right); 
+          if (SC.isPercentage(lW)) ret.width = lW*pFW;
+          else ret.width = lW;
+          if (SC.isPercentage(lR)) ret.left = pFW - (ret.width + lR);
+          else ret.left = pFW - (ret.width + lR); 
         }
       }
 
     // handle centered
-    } else if (!SC.none(layout.centerX)) {
-      ret.width = Math.floor(layout.width || 0) ;
-      ret.left = Math.floor((parentFrame.width - ret.width)/2) + layout.centerX;
+    } else if (!SC.none(lcX)) {
+      if(lW && SC.isPercentage(lW)) ret.width = (lW*pFW) ;
+      else ret.width = (lW || 0) ;
+      ret.left = ((pFW - ret.width)/2);
+      if (SC.isPercentage(lcX)) ret.left = ret.left + lcX*pFW;
+      else ret.left = ret.left + lcX;
     
     // if width defined, assume left of zero
-    } else if (!SC.none(layout.width)) {
+    } else if (!SC.none(lW)) {
       ret.left =  0;
-      if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+      if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
       else {
-        ret.width = Math.floor(layout.width);
+        if(SC.isPercentage(lW)) ret.width = lW*pFW;
+        else ret.width = lW;
       }
 
     // fallback, full width.
@@ -2499,48 +3945,67 @@ SC.View.mixin(/** @scope SC.View */ {
     
     // Y Conversion
     // handle left aligned and top/bottom
-    if (!SC.none(layout.top)) {
-      ret.top = Math.floor(layout.top);
-      if (layout.height !== undefined) {
-        if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
-        else ret.height = Math.floor(layout.height) ;
+    if (!SC.none(lT)) {
+      if(SC.isPercentage(lT)) ret.top = lT*pFH;
+      else ret.top = lT;
+      if (lH !== undefined) {
+        if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+        else if (SC.isPercentage(lH)) ret.height = lH*pFH;
+        else ret.height = lH ;
       } else {
-        ret.height = parentFrame.height - ret.top - Math.floor(layout.bottom || 0);
+        ret.height = pFH - ret.top;
+        if(lB && SC.isPercentage(lB)) ret.height = ret.height - (lB*pFH);
+        else ret.height = ret.height - (lB || 0);
       }
 
     // handle bottom aligned
-    } else if (!SC.none(layout.bottom)) {
+    } else if (!SC.none(lB)) {
       
       // if no height, calculate it from the parent frame
-      if (SC.none(layout.height)) {
+      if (SC.none(lH)) {
         ret.top = 0;
-        ret.height = parentFrame.height - Math.floor(layout.bottom || 0);
+        if (lB && SC.isPercentage(lB)) ret.height = pFH - (lB*pFH);
+        else ret.height = pFH - (lB || 0);
       
       // If has height, calculate the top anchor from the height and bottom and parent frame
       } else {
-        if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+        if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
         else { 
-          ret.height = layout.height;
-          ret.top = parentFrame.height - (layout.height + layout.bottom); 
+          if (SC.isPercentage(lH)) ret.height = lH*pFH;
+          else ret.height = lH;
+          ret.top = pFH - ret.height;
+          if (SC.isPercentage(lB)) ret.top = ret.top - (lB*pFH);
+          else ret.top = ret.top - lB; 
         }
       }
 
     // handle centered
-    } else if (!SC.none(layout.centerY)) {
-      ret.height = Math.floor(layout.height || 0) ;
-      ret.top = Math.floor((parentFrame.height - ret.height)/2) + layout.centerY;
+    } else if (!SC.none(lcY)) {
+      if(lH && SC.isPercentage(lH)) ret.height = (lH*pFH) ;
+      else ret.height = (lH || 0) ;
+      ret.top = ((pFH - ret.height)/2);
+      if(SC.isPercentage(lcY)) ret.top = ret.top + lcY*pFH;
+      else ret.top = ret.top + lcY;
     
     // if height defined, assume top of zero
-    } else if (!SC.none(layout.height)) {
+    } else if (!SC.none(lH)) {
       ret.top =  0;
-      if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
-      else ret.height = Math.floor(layout.height);
+      if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+      else if (SC.isPercentage(lH)) ret.height = lH*pFH;
+      else ret.height = lH;
 
     // fallback, full height.
     } else {
       ret.top = 0;
       ret.height = 0;
     }
+    
+    if(ret.top) ret.top = Math.floor(ret.top);
+    if(ret.bottom) ret.bottom = Math.floor(ret.bottom);
+    if(ret.left) ret.left = Math.floor(ret.left);
+    if(ret.right) ret.right = Math.floor(ret.right);
+    if(ret.width !== SC.LAYOUT_AUTO) ret.width = Math.floor(ret.width);
+    if(ret.height !== SC.LAYOUT_AUTO) ret.height = Math.floor(ret.height);
 
     // handle min/max
     if (layout.minHeight !== undefined) ret.minHeight = layout.minHeight ;
@@ -2674,9 +4139,10 @@ SC.View.mixin(/** @scope SC.View */ {
     }
     
     // apply localization recursively to childViews
-    var childViews = this.prototype.childViews, idx = childViews.length;
+    var childViews = this.prototype.childViews, idx = childViews.length,
+      viewClass;
     while(--idx>=0) {
-      var viewClass = childViews[idx];
+      viewClass = childViews[idx];
       loc = childLocs[idx];
       if (loc && viewClass && viewClass.loc) viewClass.loc(loc) ;
     }
@@ -2706,25 +4172,59 @@ SC.View.mixin(/** @scope SC.View */ {
   define an outlet that points to another view or object.  The root object
   used for the path will be the receiver.
 */
-SC.outlet = function(path) {
+SC.outlet = function(path, root) {
   return function(key) {
-    return (this[key] = SC.objectForPropertyPath(path, this)) ;
+    return (this[key] = SC.objectForPropertyPath(path, (root !== undefined) ? root : this)) ;
   }.property();
 };
 
 /** @private on unload clear cached divs. */
 SC.View.unload = function() {
-  
   // delete view items this way to ensure the views are cleared.  The hash
   // itself may be owned by multiple view subclasses.
   var views = SC.View.views;
   if (views) {
-    for(var key in views) {
-      if (!views.hasOwnProperty(key)) continue ;
-      delete views[key];
+   for(var key in views) {
+     if (!views.hasOwnProperty(key)) continue ;
+     delete views[key];
+   }
+  }   
+} ;
+
+SC.View.runCallback = function(callback){
+  var additionalArgs = SC.$A(arguments).slice(1),
+      typeOfAction = SC.typeOf(callback.action);
+
+  // if the action is a function, just try to call it.
+  if (typeOfAction == SC.T_FUNCTION) {
+    callback.action.apply(callback.target, additionalArgs);
+
+  // otherwise, action should be a string.  If it has a period, treat it
+  // like a property path.
+  } else if (typeOfAction === SC.T_STRING) {
+    if (callback.action.indexOf('.') >= 0) {
+      var path = callback.action.split('.') ;
+      var property = path.pop() ;
+
+      var target = SC.objectForPropertyPath(path, window) ;
+      var action = target.get ? target.get(property) : target[property];
+      if (action && SC.typeOf(action) == SC.T_FUNCTION) {
+        action.apply(target, additionalArgs);
+      } else {
+        throw 'SC.Animator could not find a function at %@'.fmt(callback.action) ;
+      }
+
+    // otherwise, try to execute action direction on target or send down
+    // responder chain.
+    // FIXME: Add support for additionalArgs to this
+    // } else {
+    //  SC.RootResponder.responder.sendAction(callback.action, callback.target, callback.source, callback.source.get("pane"), null, callback.source);
     }
   }
-  
-} ;
+};
+
+
+//unload views for IE, trying to collect memory.
+if(SC.browser.msie) SC.Event.add(window, 'unload', SC.View, SC.View.unload) ;
+
 
-SC.Event.add(window, 'unload', SC.View, SC.View.unload) ;