sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/frameworks/{foundation → amber}/views/view.js

@@ -9,10 +9,11 @@ sc_require('system/browser');
 sc_require('system/event');
 sc_require('system/cursor');
 sc_require('system/responder') ;
+sc_require('system/theme');
 
 sc_require('mixins/string') ;
-
-SC.viewKey = SC.guidKey + "_view" ;
+sc_require('views/base') ;
+sc_require('views/layout_style') ;
 
 /** Select a horizontal layout for various views.*/
 SC.LAYOUT_HORIZONTAL = 'sc-layout-horizontal';
@@ -23,36 +24,6 @@ SC.LAYOUT_VERTICAL = 'sc-layout-vertical';
 /** @private */
 SC._VIEW_DEFAULT_DIMS = 'marginTop marginLeft'.w();
 
-/**
-  Layout properties needed to anchor a view to the top.
-*/
-SC.ANCHOR_TOP = { top: 0 };
-
-/**
-  Layout properties needed to anchor a view to the left.
-*/
-SC.ANCHOR_LEFT = { left: 0 };
-
-/*
-  Layout properties to anchor a view to the top left 
-*/
-SC.ANCHOR_TOP_LEFT = { top: 0, left: 0 };
-
-/**
-  Layout properties to anchoe view to the bottom.
-*/
-SC.ANCHOR_BOTTOM = { bottom: 0 };
-
-/**
-  Layout properties to anchor a view to the right.
-*/
-SC.ANCHOR_RIGHT = { right: 0 } ;
-
-/**
-  Layout properties to anchor a view to the bottom right.
-*/
-SC.ANCHOR_BOTTOM_RIGHT = { bottom: 0, right: 0 };
-
 /**
   Layout properties to take up the full width of a parent view.
 */
@@ -86,146 +57,318 @@ SC.CONTEXT_MENU_ENABLED = YES;
 */
 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){
+    return null;
+  },
+
+  rotateX: function(val){
+    if (SC.typeOf(val) === SC.T_NUMBER) val += 'deg';
+    return 'rotateX('+val+')';
+  },
+
+  rotateY: function(val){
+    if (SC.typeOf(val) === SC.T_NUMBER) val += 'deg';
+    return 'rotateY('+val+')';
+  },
+
+  rotateZ: function(val){
+    if (SC.typeOf(val) === SC.T_NUMBER) val += 'deg';
+    return 'rotateZ('+val+')';
+  },
+
+  scale: function(val){
+    if (SC.typeOf(val) === SC.T_ARRAY) val = val.join(', ');
+    return 'scale('+val+')';
+  }
+};
+
+
+
+/**
+  Properties that can be animated
+  (Hash for faster lookup)
+*/
+SC.ANIMATABLE_PROPERTIES = {
+  top:     YES,
+  left:    YES,
+  bottom:  YES,
+  right:   YES,
+  width:   YES,
+  height:  YES,
+  centerX: YES,
+  centerY: YES,
+  opacity: YES,
+  scale:   YES,
+  rotate:  YES,
+  rotateX: YES,
+  rotateY: YES,
+  rotateZ: YES
+};
+
+
+
+/**
   @class
-  
+
   Base class for managing a view.  Views provide two functions:
-  
-  1. They translate state and events into drawing instructions for the 
+
+  1. They translate state and events into drawing instructions for the
      web browser and
-  
-  2. They act as first responders for incoming keyboard, mouse, and 
+
+  2. They act as first responders for incoming keyboard, mouse, and
      touch events.
-  
+
   h2. View Initialization
-  
-  When a view is setup, there are several methods you can override that 
+
+  When a view is setup, there are several methods you can override that
   will be called at different times depending on how your view is created.
   Here is a guide to which method you want to override and when:
-  
-  - *init:* override this method for any general object setup (such as 
-    observers, starting timers and animations, etc) that you need to happen 
-    everytime the view is created, regardless of whether or not its layer 
+
+  - *init:* override this method for any general object setup (such as
+    observers, starting timers and animations, etc) that you need to happen
+    everytime the view is created, regardless of whether or not its layer
     exists yet.
-    
+
   - *render:* override this method to generate or update your HTML to reflect
     the current state of your view.  This method is called both when your view
     is first created and later anytime it needs to be updated.
 
-  - *didCreateLayer:* the render() method is used to generate new HTML.  
+  - *didCreateLayer:* the render() method is used to generate new HTML.
     Override this method to perform any additional setup on the DOM you might
     need to do after creating the view.  For example, if you need to listen
     for events.
-    
-  - *willDestroyLayer:* if you implement didCreateLayer() to setup event 
-    listeners, you should implement this method as well to remove the same 
+
+  - *willDestroyLayer:* if you implement didCreateLayer() to setup event
+    listeners, you should implement this method as well to remove the same
     just before the DOM for your view is destroyed.
-    
+
   - *updateLayer:* Normally, when a view needs to update its content, it will
-    re-render the view using the render() method.  If you would like to 
-    override this behavior with your own custom updating code, you can 
+    re-render the view using the render() method.  If you would like to
+    override this behavior with your own custom updating code, you can
     replace updateLayer() with your own implementation instead.
-    
+
   - *didAppendToDocument:* in theory all DOM setup could be done
-    in didCreateLayer() as you already have a DOM element instantiated. 
+    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 
+    Document because there is either a bug on the browser or you are using
     plugins which objects are not instantiated until you actually append the
-    element to the DOM. This will allow you to do things like registering 
+    element to the DOM. This will allow you to do things like registering
     DOM events on flash or quicktime objects.
-  
+
   @extends SC.Responder
   @extends SC.DelegateSupport
   @since SproutCore 1.0
 */
-SC.View = SC.Responder.extend(SC.DelegateSupport,
+SC.View.reopen(
 /** @scope SC.View.prototype */ {
-  
+
   concatenatedProperties: 'outlets displayProperties layoutProperties classNames renderMixin didCreateLayerMixin willDestroyLayerMixin'.w(),
-  
-  /** 
-    The current pane. 
+
+  /**
+    The current pane.
     @property {SC.Pane}
   */
   pane: function() {
     var view = this ;
-    while (view && !view.isPane) view = view.get('parentView') ;
+    while (view && !view.isPane) { view = view.get('parentView') ; }
     return view ;
   }.property('parentView').cacheable(),
-  
+
   /**
     The page this view was instantiated from.  This is set by the page object
     during instantiation.
-    
+
     @property {SC.Page}
   */
   page: null,
-    
-  /** 
-    The current split view this view is embedded in (may be null). 
-    @property {SC.SplitView}
-  */
-  splitView: function() {
-    var view = this ;
-    while (view && !view.isSplitView) view = view.get('parentView') ;
-    return view ;
-  }.property('parentView').cacheable(),
-  
+
   /**
     If the view is currently inserted into the DOM of a parent view, this
     property will point to the parent of the view.
   */
   parentView: null,
-  
+
   /**
-    Optional background color.  Will be applied to the view's element if 
+    Optional background color.  Will be applied to the view's element if
     set.  This property is intended for one-off views that need a background
     element.  If you plan to create many view instances it is probably better
     to use CSS.
-  
+
     @property {String}
   */
   backgroundColor: null,
-  
+
   /**
-    Activates use of brower's static layout.  You can apply this mixin and
-    still use absolute positioning.  To activate static positioning, set this
+    Activates use of brower's static layout. To activate, set this
     property to YES.
 
     @property {Boolean}
   */
-  useStaticLayout: NO,  
-  
+  useStaticLayout: NO,
+
+  // ..........................................................
+  // THEME SUPPORT
+  //
+
+  /**
+    Names which theme this view should use; the theme named by this property
+    will be set to the view's 'theme' property.
+
+    Themes are identified by their name. In addition to looking for the
+    theme globally, SproutCore will look for the theme inside 'baseTheme',
+    which is almost always the parent view's theme.
+
+    If null (the default), the view will set its 'theme' property to
+    be equal to 'baseTheme'.
+
+    Example: themeName: 'ace'
+
+    @property {String}
+  */
+  themeName: null,
+
+  /**
+    Selects which theme to use as a 'base theme'. If null, the 'baseTheme'
+    property will be set to the parent's theme. If there is no parent, the theme
+    named by SC.defaultTheme is used.
+
+    This property is private for the time being.
+
+    @private
+    @property {String}
+  */
+  baseThemeName: null,
+
+  /**
+    The SC.Theme instance which this view should use to render.
+
+    Note: the actual code for this function is in _themeProperty for backwards-compatibility:
+    some older views specify a string value for 'theme', which would override this property,
+    breaking it.
+
+    @property {SC.Theme}
+  */
+  theme: function() {
+    var base = this.get('baseTheme'), themeName = this.get('themeName');
+
+    // find theme, if possible
+    if (themeName) {
+      // Note: theme instance "find" function will search every parent
+      // _except_ global (which is not a parent)
+      var theme;
+      if (base) {
+        theme = base.find(themeName);
+        if (theme) return theme;
+      }
+
+      theme = SC.Theme.find(themeName);
+      if (theme) return theme;
+
+      // Create a new invisible subtheme. This will cause the themeName to
+      // be applied as a class name.
+      return base.invisibleSubtheme(themeName);
+    }
+
+    // can't find anything, return base.
+    return base;
+  }.property('baseTheme', 'themeName').cacheable(),
+
+  /**
+    Detects when the theme changes. Replaces the layer if necessary.
+
+    Also, because
+  */
+  _sc_view_themeDidChange: function() {
+    if (this._lastTheme === this.get('theme')) return;
+    this._lastTheme = this.get('theme');
+
+    // invalidate child view base themes, if present
+    var childViews = this.childViews, len = childViews.length, idx;
+    for (idx = 0; idx < len; idx++) {
+      childViews[idx].notifyPropertyChange('baseTheme');
+    }
+
+    if (this.get('layer')) this.replaceLayer();
+  }.observes('theme'),
+
+  /**
+    The SC.Theme instance in which the 'theme' property should look for the theme
+    named by 'themeName'.
+
+    For example, if 'baseTheme' is SC.AceTheme, and 'themeName' is 'popover',
+    it will look to see if SC.AceTheme has a child theme named 'popover',
+    and _then_, if it is not found, look globally.
+
+    @private
+    @property {SC.Theme}
+  */
+  baseTheme: function() {
+    var parent;
+    var baseThemeName = this.get('baseThemeName');
+    if (baseThemeName) {
+      return SC.Theme.find(baseThemeName);
+    } else {
+      parent = this.get('parentView');
+      var theme  = parent && parent.get('theme');
+      return   theme || SC.Theme.find(SC.defaultTheme);
+    }
+  }.property('baseThemeName', 'parentView').cacheable(),
+
+  /**
+   * Returns the named property if it is specified on the view, and
+   * otherwise returns the named constant from the view's theme.
+   *
+   * @param {String} property The property on the view.
+   * @param {String} constantName The name of the constant on the theme.
+  */
+  getThemedProperty: function(property, constantName){
+    var value = this.get(property);
+    if (value !== undefined) return value;
+
+    var theme = this.get('theme');
+    if (!theme) return undefined;
+
+    return theme[constantName];
+  },
+
   // ..........................................................
   // IS ENABLED SUPPORT
-  // 
-  
-  /** 
+  //
+
+  /**
     Set to true when the item is enabled.   Note that changing this value
-    will also alter the isVisibleInWindow property for this view and any
-    child views.
-    
-    Note that if you apply the SC.Control mixin, changing this property will
-    also automatically add or remove a 'disabled' CSS class name as well.
-    
+    will alter the isVisibleInWindow property for this view and any
+    child views as well as to automatically add or remove a 'disabled' CSS
+    class name.
+
     This property is observable and bindable.
-    
+
     @property {Boolean}
   */
   isEnabled: YES,
   isEnabledBindingDefault: SC.Binding.oneWay().bool(),
-  
+
   /**
     Computed property returns YES if the view and all of its parent views
-    are enabled in the pane.  You should use this property when deciding 
+    are enabled in the pane.  You should use this property when deciding
     whether to respond to an incoming event or not.
-    
+
     This property is not observable.
-    
+
     @property {Boolean}
   */
   isEnabledInPane: function() {
@@ -247,32 +390,46 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
   }.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,
+
   // ..........................................................
   // IS VISIBLE IN WINDOW SUPPORT
-  // 
-  
+  //
+
   /**
-    The isVisible property determines if the view is shown in the view 
+    The isVisible property determines if the view is shown in the view
     hierarchy it is a part of. A view can have isVisible == YES and still have
     isVisibleInWindow == NO. This occurs, for instance, when a parent view has
     isVisible == NO. Default is YES.
-    
+
     The isVisible property is considered part of the layout and so changing it
     will trigger a layout update.
-    
+
     @property {Boolean}
   */
   isVisible: YES,
   isVisibleBindingDefault: SC.Binding.bool(),
-  
+
   /**
     YES only if the view and all of its parent views are currently visible
     in the window.  This property is used to optimize certain behaviors in
-    the view.  For example, updates to the view layer are not performed 
+    the view.  For example, updates to the view layer are not performed
     if the view until the view becomes visible in the window.
   */
   isVisibleInWindow: NO,
-  
+
   /**
    By default we don't disable the context menu. Overriding this property
    can enable/disable the context menu per view.
@@ -280,27 +437,27 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   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 
-    isVisibleInWindow state, this method will also call 
-    recomputIsVisibleInWindow() on its child views as well.  As an optional 
-    optimization, you can pass the isVisibleInWindow state of the parentView 
+    Recomputes the isVisibleInWindow property based on the visibility of the
+    view and its parent.  If the recomputed value differs from the current
+    isVisibleInWindow state, this method will also call
+    recomputIsVisibleInWindow() on its child views as well.  As an optional
+    optimization, you can pass the isVisibleInWindow state of the parentView
     if you already know it.
-    
-    You will not generally need to call or override this method yourself. It 
-    is used by the SC.View hierarchy to relay window visibility changes up 
+
+    You will not generally need to call or override this method yourself. It
+    is used by the SC.View hierarchy to relay window visibility changes up
     and down the chain.
-    
+
     @property {Boolean} parentViewIsVisible
-    @returns {SC.View} receiver 
+    @returns {SC.View} receiver
   */
   recomputeIsVisibleInWindow: function(parentViewIsVisible) {
     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 (current) {
@@ -373,54 +530,54 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   }.observes('isVisible'),
 
 
-  
+
   // ..........................................................
   // CHILD VIEW SUPPORT
-  // 
-  
-  /** 
+  //
+
+  /**
     Array of child views.  You should never edit this array directly unless
     you are implementing createChildViews().  Most of the time, you should
-    use the accessor methods such as appendChild(), insertBefore() and 
+    use the accessor methods such as appendChild(), insertBefore() and
     removeChild().
-    
-    @property {Array} 
+
+    @property {Array}
   */
   childViews: SC.EMPTY_CHILD_VIEWS_ARRAY,
-  
+
   /**
     Insert the view into the the receiver's childNodes array.
-    
-    The view will be added to the childNodes array before the beforeView.  If 
-    beforeView is null, then the view will be added to the end of the array.  
-    This will also add the view's rootElement DOM node to the receivers 
+
+    The view will be added to the childNodes array before the beforeView.  If
+    beforeView is null, then the view will be added to the end of the array.
+    This will also add the view's rootElement DOM node to the receivers
     containerElement DOM node as a child.
-    
-    If the specified view already belongs to another parent, it will be 
+
+    If the specified view already belongs to another parent, it will be
     removed from that view first.
-    
+
     @param {SC.View} view
     @param {SC.View} beforeView
     @returns {SC.View} the receiver
   */
-  insertBefore: function(view, beforeView) { 
+  insertBefore: function(view, beforeView) {
     view.beginPropertyChanges(); // limit notifications
-    
+
     // remove view from old parent if needed.  Also notify views.
     if (view.get('parentView')) view.removeFromParent() ;
     if (this.willAddChild) this.willAddChild(view, beforeView) ;
     if (view.willAddToParent) view.willAddToParent(this, beforeView) ;
-    
+
     // set parentView of child
     view.set('parentView', this);
-    
+
     // add to childView's array.
     var idx, childViews = this.get('childViews') ;
     if (childViews.needsClone) this.set(childViews = []);
     idx = (beforeView) ? childViews.indexOf(beforeView) : childViews.length;
     if (idx<0) idx = childViews.length ;
     childViews.insertAt(idx, view) ;
-    
+
     // The DOM will need some fixing up, note this on the view.
     view.parentViewDidChange() ;
     view.layoutDidChange() ;
@@ -428,19 +585,19 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if(pane && pane.get('isPaneAttached')) {
       view._notifyDidAppendToDocument();
     }
-    
+
     // notify views
     if (this.didAddChild) this.didAddChild(view, beforeView) ;
     if (view.didAddToParent) view.didAddToParent(this, beforeView) ;
-    
+
     view.endPropertyChanges();
-    
+
     return this ;
   },
-  
+
   /**
-    Removes the child view from the parent view.  
-    
+    Removes the child view from the parent view.
+
     @param {SC.View} view
     @returns {SC.View} receiver
   */
@@ -452,29 +609,29 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     // notify views
     if (view.willRemoveFromParent) view.willRemoveFromParent() ;
     if (this.willRemoveChild) this.willRemoveChild(view) ;
-    
+
     // update parent node
     view.set('parentView', null) ;
-    
+
     // remove view from childViews array.
     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.
     view.parentViewDidChange() ;
-    
+
     // notify views
     if (this.didRemoveChild) this.didRemoveChild(view);
     if (view.didRemoveFromParent) view.didRemoveFromParent(this) ;
-    
+
     return this ;
   },
-  
+
   /**
     Removes all children from the parentView.
-    
-    @returns {SC.View} receiver 
+
+    @returns {SC.View} receiver
   */
   removeAllChildren: function() {
     var childViews = this.get('childViews'), view ;
@@ -483,11 +640,11 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return this ;
   },
-  
-  /** 
+
+  /**
     Removes the view from its parentView, if one is found.  Otherwise
     does nothing.
-    
+
     @returns {SC.View} receiver
   */
   removeFromParent: function() {
@@ -495,15 +652,15 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (parent) parent.removeChild(this) ;
     return this ;
   },
-  
+
   /**
-    Replace the oldView with the specified view in the receivers childNodes 
-    array. This will also replace the DOM node of the oldView with the DOM 
+    Replace the oldView with the specified view in the receivers childNodes
+    array. This will also replace the DOM node of the oldView with the DOM
     node of the new view in the receivers DOM.
-    
-    If the specified view already belongs to another parent, it will be 
+
+    If the specified view already belongs to another parent, it will be
     removed from that view first.
-    
+
     @param view {SC.View} the view to insert in the DOM
     @param view {SC.View} the view to remove from the DOM.
     @returns {SC.View} the receiver
@@ -513,76 +670,77 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     view.beginPropertyChanges();
     oldView.beginPropertyChanges();
     this.beginPropertyChanges();
-    
+
     this.insertBefore(view,oldView).removeChild(oldView) ;
-    
+
     // resume notifications
     this.endPropertyChanges();
     oldView.endPropertyChanges();
-    view.endPropertyChanges(); 
-    
+    view.endPropertyChanges();
+
     return this;
   },
-  
+
   /**
-    Replaces the current array of child views with the new array of child 
+    Replaces the current array of child views with the new array of child
     views.
-    
+
     @param {Array} views views you want to add
     @returns {SC.View} receiver
   */
   replaceAllChildren: function(views) {
     var len = views.get('length'), idx;
-    
+
     this.beginPropertyChanges();
     this.destroyLayer().removeAllChildren();
     for(idx=0;idx<len;idx++) this.appendChild(views.objectAt(idx));
     this.replaceLayer();
     this.endPropertyChanges();
-    
+
     return this ;
   },
-  
+
   /**
-    Appends the specified view to the end of the receivers childViews array.  
+    Appends the specified view to the end of the receivers childViews array.
     This is equivalent to calling insertBefore(view, null);
-    
+
     @param view {SC.View} the view to insert
-    @returns {SC.View} the receiver 
+    @returns {SC.View} the receiver
   */
   appendChild: function(view) {
     return this.insertBefore(view, null);
   },
-  
-  /** 
-    This method is called whenever the receiver's parentView has changed.  
-    The default implementation of this method marks the view's display 
+
+  /**
+    This method is called whenever the receiver's parentView has changed.
+    The default implementation of this method marks the view's display
     location as dirty so that it will update at the end of the run loop.
-    
+
     You will not usually need to override or call this method yourself, though
     if you manually patch the parentView hierarchy for some reason, you should
     call this method to notify the view that it's parentView has changed.
-    
+
     @returns {SC.View} receiver
   */
   parentViewDidChange: function() {
     this.recomputeIsVisibleInWindow() ;
-    
+
+    this.resetBuildState();
     this.set('layerLocationNeedsUpdate', YES) ;
     this.invokeOnce(this.updateLayerLocationIfNeeded) ;
-    
+
     // We also need to iterate down through the view hierarchy and invalidate
     // all our child view's caches for 'pane', since it could have changed.
     //
     // Note:  In theory we could try to avoid this invalidation if we
     //        do this only in cases where we "know" the 'pane' value might
     //        have changed, but those cases are few and far between.
-    
+
     this._invalidatePaneCacheForSelfAndAllChildViews();
-    
+
     return this ;
   },
-  
+
   /** @private
     We want to cache the 'pane' property, but it's impossible for us to
     declare a dependence on all properties that can affect the value.  (For
@@ -594,38 +752,38 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   _invalidatePaneCacheForSelfAndAllChildViews: function () {
     var childView, childViews = this.get('childViews'),
         len = childViews.length, idx ;
-        
+
     this.notifyPropertyChange('pane');
-    
+
     for (idx=0; idx<len; ++idx) {
       childView = childViews[idx];
       if (childView._invalidatePaneCacheForSelfAndAllChildViews) {
         childView._invalidatePaneCacheForSelfAndAllChildViews();
-      } 
+      }
     }
   },
-  
+
   // ..........................................................
   // LAYER SUPPORT
-  // 
-  
+  //
+
   /**
-    Returns the current layer for the view.  The layer for a view is only 
-    generated when the view first becomes visible in the window and even 
+    Returns the current layer for the view.  The layer for a view is only
+    generated when the view first becomes visible in the window and even
     then it will not be computed until you request this layer property.
-    
+
     If the layer is not actually set on the view itself, then the layer will
     be found by calling this.findLayerInParentLayer().
-    
+
     You can also set the layer by calling set on this property.
-    
+
     @property {DOMElement} the layer
   */
   layer: function(key, value) {
     if (value !== undefined) {
       this._view_layer = value ;
-      
-    // no layer...attempt to discover it...  
+
+    // no layer...attempt to discover it...
     } else {
       value = this._view_layer;
       if (!value) {
@@ -639,40 +797,40 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return value ;
   }.property('isVisibleInWindow').cacheable(),
-  
+
   /**
     Get a CoreQuery object for this view's layer, or pass in a selector string
     to get a CoreQuery object for a DOM node nested within this layer.
-    
+
     @param {String} sel a CoreQuery-compatible selector string
     @returns {SC.CoreQuery} the CoreQuery object for the DOM node
   */
   $: function(sel) {
     var ret, layer = this.get('layer') ;
-    // note: SC.$([]) returns an empty CoreQuery object.  SC.$() would 
+    // note: SC.$([]) returns an empty CoreQuery object.  SC.$() would
     // return an object selecting the document.
     ret = !layer ? SC.$([]) : (sel === undefined) ? SC.$(layer) : SC.$(sel, layer) ;
     layer = null ; // avoid memory leak
     return ret ;
   },
-  
+
   /**
     Returns the DOM element that should be used to hold child views when they
     are added/remove via DOM manipulation.  The default implementation simply
     returns the layer itself.  You can override this to return a DOM element
     within the layer.
-    
+
     @property {DOMElement} the container layer
   */
   containerLayer: function() {
     return this.get('layer') ;
-  }.property('layer').cacheable(), 
-  
+  }.property('layer').cacheable(),
+
   /**
     The ID to use when trying to locate the layer in the DOM.  If you do not
     set the layerId explicitly, then the view's GUID will be used instead.
     This ID must be set at the time the view is created.
-    
+
     @property {String}
     @readOnly
   */
@@ -681,7 +839,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (this._layerId) return this._layerId;
     return SC.guidFor(this) ;
   }.property().cacheable(),
-  
+
   _lastLayerId: null,
 
   /**
@@ -696,42 +854,42 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       if (lastId && SC.View.views[lastId] === this) {
         delete SC.View.views[lastId];
       }
-      
+
       // set the current one as the new old one
       this._lastLayerId = lid;
-      
+
       // and add the new one
       SC.View.views[lid] = this;
-      
+
       // and finally, set the actual layer id.
       if (layer) layer.id = lid;
     }
   }.observes("layerId"),
-  
+
   /**
-    Attempts to discover the layer in the parent layer.  The default 
+    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
     guid if layerId is null).  You can override this method to provide your
     own form of lookup.  For example, if you want to discover your layer using
     a CSS class name instead of an ID.
-    
+
     @param {DOMElement} parentLayer the parent's DOM layer
     @returns {DOMElement} the discovered layer
   */
   findLayerInParentLayer: function(parentLayer) {
     var layerId = this.get('layerId'),
         node, i, ilen, childNodes, elem, usedQuerySelector;
-    
+
     // first, let's try the fast path...
     elem = document.getElementById(layerId) ;
-    
+
     // TODO: use code generation to only really do this check on IE
     if (SC.browser.msie && elem && elem.id !== layerId) elem = null;
-    
+
     // if no element was found the fast way, search down the parentLayer for
     // the element.  This code should not be invoked very often.  Usually a
     // DOM element will be discovered by the first method above.
-    // This code uses a BFS algorithm as is expected to find the layer right 
+    // This code uses a BFS algorithm as is expected to find the layer right
     // below the parent.
     if (!elem) {
       elem = parentLayer.firstChild ;
@@ -747,73 +905,73 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
           q.push(childNodes[i]);
         }
       }
-      elem = null;  
+      elem = null;
     }
-    
+
     return elem;
   },
-  
+
   /**
-    Returns YES if the receiver is a subview of a given view or if it’s 
+    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 
+    This method is invoked whenever a display property changes.  It will set
     the layerNeedsUpdate method to YES.  If you need to perform additional
     setup whenever the display changes, you can override this method as well.
-    
+
     @returns {SC.View} receiver
   */
   displayDidChange: function() {
     this.set('layerNeedsUpdate', YES) ;
     return this;
   },
-  
+
   /**
-    Setting this property to YES will cause the updateLayerIfNeeded method to 
+    Setting this property to YES will cause the updateLayerIfNeeded method to
     be invoked at the end of the runloop.  You can also force a view to update
-    sooner by calling updateLayerIfNeeded() directly.  The method will update 
+    sooner by calling updateLayerIfNeeded() directly.  The method will update
     the layer only if this property is YES.
-    
+
     @property {Boolean}
     @test in updateLayer
   */
   layerNeedsUpdate: NO,
-  
+
   /** @private
     Schedules the updateLayerIfNeeded method to run at the end of the runloop
     if layerNeedsUpdate is set to YES.
-  */  
+  */
   _view_layerNeedsUpdateDidChange: function() {
     if (this.get('layerNeedsUpdate')) {
       this.invokeOnce(this.updateLayerIfNeeded) ;
     }
   }.observes('layerNeedsUpdate'),
-  
+
   /**
-    Updates the layer only if the view is visible onscreen and if 
+    Updates the layer only if the view is visible onscreen and if
     layerNeedsUpdate is set to YES.  Normally you will not invoke this method
     directly.  Instead you set the layerNeedsUpdate property to YES and this
     method will be called once at the end of the runloop.
-    
+
     If you need to update view's layer sooner than the end of the runloop, you
     can call this method directly.  If your view is not visible in the window
     but you want it to update anyway, then call this method, passing YES for
     the 'skipIsVisibleInWindowCheck' parameter.
-    
+
     You should not override this method.  Instead override updateLayer() or
     render().
-    
+
     @returns {SC.View} receiver
     @test in updateLayer
   */
@@ -832,27 +990,51 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
 
     return this ;
   },
-  
+
   /**
-    This is the core method invoked to update a view layer whenever it has 
-    changed.  This method simply creates a render context focused on the 
+    This is the core method invoked to update a view layer whenever it has
+    changed.  This method simply creates a render context focused on the
     layer element and then calls your render() method.
-    
+
     You will not usually call or override this method directly.  Instead you
     should set the layerNeedsUpdate property to YES to cause this method to
     run at the end of the run loop, or you can call updateLayerIfNeeded()
-    to force the layer to update immediately.  
-    
+    to force the layer to update immediately.
+
     Instead of overriding this method, consider overidding the render() method
     instead, which is called both when creating and updating a layer.  If you
     do not want your render() method called when updating a layer, then you
     should override this method instead.
-    
-    @returns {SC.View} receiver 
+
+    @param optionalContext provided only for backwards-compatibility.
+
+    @returns {SC.View} receiver
   */
-  updateLayer: function() {
-    var context = this.renderContext(this.get('layer')) ;
-    this.prepareContext(context, NO) ;
+  updateLayer: function(optionalContext) {
+    var mixins, idx, len, hasLegacyRenderMethod;
+
+    var context = optionalContext || this.renderContext(this.get('layer')) ;
+    this._renderLayerSettings(context, NO);
+
+    // If the render method takes two parameters, we assume that it is a
+    // legacy implementation that takes context and firstTime. If it has only
+    // one parameter, we assume it is the render delegates style that requires
+    // only context. Note that, for backwards compatibility, the default
+    // SC.View implementation of render uses the old style.
+    hasLegacyRenderMethod = !this.update;
+    // Call render with firstTime set to NO to indicate an update, rather than
+    // full re-render, should be performed.
+    if (hasLegacyRenderMethod) {
+      this.render(context, NO);
+    }
+    else {
+      this.update(context.$());
+    }
+    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');
@@ -871,51 +1053,57 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return this ;
   },
-  
+
   /**
     Creates a new renderContext with the passed tagName or element.  You
     can override this method to provide further customization to the context
     if needed.  Normally you will not need to call or override this method.
-    
+
     @returns {SC.RenderContext}
   */
   renderContext: function(tagNameOrElement) {
     return SC.RenderContext(tagNameOrElement) ;
   },
-  
+
   /**
     Creates the layer by creating a renderContext and invoking the view's
     render() method.  This will only create the layer if the layer does not
     already exist.
-    
+
     When you create a layer, it is expected that your render() method will
-    also render the HTML for all child views as well.  This method will 
+    also render the HTML for all child views as well.  This method will
     notify the view along with any of its childViews that its layer has been
     created.
-    
+
     @returns {SC.View} receiver
   */
   createLayer: function() {
     if (this.get('layer')) return this ; // nothing to do
-    
+
     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..
     this._notifyDidCreateLayer() ;
-    
+
     return this ;
   },
-  
-  /** @private - 
+
+  /** @private -
     Invokes the receivers didCreateLayer() method if it exists and then
     invokes the same on all child views.
   */
   _notifyDidCreateLayer: function() {
+    this.notifyPropertyChange("layer");
     if (this.didCreateLayer) this.didCreateLayer() ;
+
+    // Animation prep
+    if (SC.platform.supportsCSSTransitions) this.resetAnimation();
+
+    // and notify others
     var mixins = this.didCreateLayerMixin, len, idx,
         childViews = this.get('childViews'),
         childView;
@@ -923,7 +1111,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       len = mixins.length ;
       for (idx=0; idx<len; ++idx) mixins[idx].call(this) ;
     }
-    
+
     len = childViews.length ;
     for (idx=0; idx<len; ++idx) {
       childView = childViews[idx];
@@ -939,52 +1127,53 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       childView._notifyDidCreateLayer() ;
     }
   },
-  
+
   /**
-    Destroys any existing layer along with the layer for any child views as 
+    Destroys any existing layer along with the layer for any child views as
     well.  If the view does not currently have a layer, then this method will
     do nothing.
-    
-    If you implement willDestroyLayer() on your view or if any mixins 
+
+    If you implement willDestroyLayer() on your view or if any mixins
     implement willDestroLayerMixin(), then this method will be invoked on your
     view before your layer is destroyed to give you a chance to clean up any
     event handlers, etc.
-    
-    If you write a willDestroyLayer() handler, you can assume that your 
+
+    If you write a willDestroyLayer() handler, you can assume that your
     didCreateLayer() handler was called earlier for the same layer.
-    
+
     Normally you will not call or override this method yourself, but you may
     want to implement the above callbacks when it is run.
-    
+
     @returns {SC.View} receiver
   */
   destroyLayer: function() {
     var layer = this.get('layer') ;
     if (layer) {
+
       // Now notify the view and its child views.  It will also set the
       // layer property to null.
       this._notifyWillDestroyLayer() ;
-      
+
       // do final cleanup
       if (layer.parentNode) layer.parentNode.removeChild(layer) ;
       layer = null ;
     }
     return this ;
   },
-  
+
   /**
     Destroys and recreates the current layer.  This can be more efficient than
     modifying individual child views.
-    
+
     @returns {SC.View} receiver
   */
   replaceLayer: function() {
     this.destroyLayer();
-    this.set('layerLocationNeedsUpdate', YES) ;
-    this.invokeOnce(this.updateLayerLocationIfNeeded) ;
+    //this.set('layerLocationNeedsUpdate', YES) ;
+    this.invokeOnce(this.updateLayerLocation) ;
   },
-    
-  /** @private - 
+
+  /** @private -
     Invokes willDestroyLayer() on view and child views.  Then sets layer to
     null for receiver.
   */
@@ -996,88 +1185,150 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       len = mixins.length ;
       for (idx=0; idx<len; ++idx) mixins[idx].call(this) ;
     }
-    
+
     len = childViews.length ;
     for (idx=0; idx<len; ++idx) childViews[idx]._notifyWillDestroyLayer() ;
-    
+
     this.set('layer', null) ;
   },
-  
+
+
+
+  /**
+    @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.
+    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 hasLegacyRenderMethod, mixins, idx, len;
+
+    this.beginPropertyChanges() ;
+    this.set('layerNeedsUpdate', NO) ;
+
+    if (SC.none(firstTime)) firstTime = YES;
+
+    this._renderLayerSettings(context, firstTime);
+
+    // If the render method takes two parameters, we assume that it is a
+    // legacy implementation that takes context and firstTime. If it has only
+    // one parameter, we assume it is the render delegates style that requires
+    // only context. Note that, for backwards compatibility, the default
+    // SC.View implementation of render uses the old style.
+    hasLegacyRenderMethod = !this.update;
+
+    // Let the render method handle rendering. If we have a render delegate
+    // object set, it will be used there.
+    if (hasLegacyRenderMethod) {
+      this.render(context, firstTime);
+    }
+    // This view implements the render delegate protocol.
+    else {
+      if (firstTime) {
+        this.render(context);
+      } else {
+        this.update(context.$());
+      }
+    }
+
+    if (mixins = this.renderMixin) {
+      len = mixins.length;
+      for(idx=0; idx<len; ++idx) mixins[idx].call(this, context, firstTime) ;
+    }
+
+    this.endPropertyChanges() ;
+  },
+
+  _renderLayerSettings: function(context, firstTime) {
+    context.resetClassNames();
+    context.resetStyles();
+
+    var theme = this.get('theme');
+    var themeClassNames = theme.classNames, idx, len = themeClassNames.length;
+
+    for (idx = 0; idx < len; idx++) {
+      context.addClass(themeClassNames[idx]);
+    }
+
+    var renderDelegate = this.get('renderDelegate');
+    if (renderDelegate && renderDelegate.name) {
+      context.addClass(renderDelegate.name);
+    }
+
+    context.addClass(this.get('classNames'));
+
+    var cursor = this.get('cursor');
+    if (cursor) context.addClass(cursor.get('className'));
+
+    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');
+    if (this.get('useStaticLayout')) context.addClass('sc-static-layout');
+
+    context.id(this.get('layerId'));
+    context.attr('role', this.get('ariaRole'));
+    if (!this.get('isEnabled')) context.attr('aria-disabled', 'true');
+    if (this.get('backgroundColor')) {
+      context.css('backgroundColor', this.get('backgroundColor'));
+    }
+
+    this.renderLayout(context, firstTime);
+  },
+
   /**
+  @private
+
     Invoked by createLayer() and updateLayer() to actually render a context.
-    This method calls the render() method on your view along with any 
+    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, classNames;
-  
-    // 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...
-    classNames = [];
-    if (this.get('isTextSelectable')) classNames.push('allow-select') ;
-    if (!this.get('isEnabled')) classNames.push('disabled') ;
-    if (!this.get('isVisible')) classNames.push('hidden') ;
-    if (this.get('isFirstResponder')) classNames.push('focus');
-    if (this.get('useStaticLayout')) classNames.push('sc-static-layout');
-  
-    bgcolor = this.get('backgroundColor');
-    if (bgcolor) context.addStyle('backgroundColor', bgcolor);
-  
-    // Sets cursor class, if present.
-    cursor = this.get('cursor');
-    if (!cursor && this.get('shouldInheritCursor')) {
-      // If this view has no cursor and should inherit it from the parent, 
-      // then it sets its own cursor view.  This sets the cursor rather than 
-      // simply using the parent's cursor object so that its cursorless 
-      // childViews can also inherit it.
-      cursor = this.getPath('parentView.cursor');
-    }
-
-    if (SC.typeOf(cursor) === SC.T_STRING) {
-      cursor = SC.objectForPropertyPath(cursor);
-    }
-    
-    if (cursor instanceof SC.Cursor) {
-      classNames.push(cursor.get('className')) ;
-    }
-    
-    // Doing a single call to 'addClass' is faster than multiple.
-    context.addClass(classNames);
-  
-    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() ;
   },
-  
+
+  /**
+    [RO] Pass this object as the data source for render delegates. This proxy object
+    for the view relays requests for properties like 'title' to 'displayTitle'
+    as necessary.
+
+    If you ever communicate with your view's render delegate, you should pass this
+    object as the data source.
+
+    The proxy that forwards RenderDelegate requests for properties to the view,
+    handling display*, keeps track of the delegate's state, etc.
+  */
+  renderDelegateProxy: function() {
+    return SC.View._RenderDelegateProxy.createForView(this);
+  }.property('renderDelegate').cacheable(),
+
   /**
     Your render method should invoke this method to render any child views,
     especially if this is the first time the view will be rendered.  This will
     walk down the childView chain, rendering all of the children in a nested
     way.
-    
+
     @param {SC.RenderContext} context the context
     @param {Boolean} firstName true if the layer is being created
     @returns {SC.RenderContext} the render context
@@ -1089,42 +1340,114 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       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 ;  
+    return context;
   },
-  
+
+  /**
+    The object to which rendering and updating the HTML representation of this
+    view should be delegated.
+
+    By default, views are responsible for creating their own HTML
+    representation. In some cases, however, you may want to create an object
+    that is responsible for rendering all views of a certain type. For example,
+    you may want rendering of SC.ButtonView to be controlled by an object that
+    is specific to the current theme.
+
+    By setting a render delegate, the render and update methods will be called
+    on that object instead of the view itself.
+
+    For your convenience, the view will provide its displayProperties to the
+    RenderDelegate. In some cases, you may have a conflict between the RenderDelegate's
+    API and your view's. For instance, you may have a 'value' property that is
+    any number, but the render delegate expects a percentage. Make a 'displayValue'
+    property, add _it_ to displayProperties instead of 'value', and the Render Delegate
+    will automatically use that when it wants to find 'value.'
+
+    You can also set the render delegate by using the 'renderDelegateName' property.
+
+    @property {Object}
+  */
+  renderDelegate: function(key, value) {
+    if (value) this._setRenderDelegate = value;
+    if (this._setRenderDelegate) return this._setRenderDelegate;
+
+    // If this view does not have a render delegate but has
+    // renderDelegateName set, try to retrieve the render delegate from the
+    // theme.
+    var renderDelegateName = this.get('renderDelegateName'), renderDelegate;
+
+    if (renderDelegateName) {
+      renderDelegate = this.get('theme')[renderDelegateName];
+      if (!renderDelegate) {
+        throw "%@: Unable to locate render delegate \"%@\" in theme.".fmt(this, renderDelegateName);
+      }
+
+      return renderDelegate;
+    }
+
+    return null;
+  }.property('renderDelegateName', 'theme'),
+
+  /**
+    The name of the property of the current theme that contains the render
+    delegate to use for this view.
+
+    By default, views are responsible for creating their own HTML
+    representation. You can tell the view to instead delegate rendering to the
+    theme by setting this property to the name of the corresponding property
+    of the theme.
+
+    For example, to tell the view that it should render using the
+    SC.ButtonView render delegate, set this property to
+    'buttonRenderDelegate'. When the view is created, it will retrieve the
+    buttonRenderDelegate property from its theme and set the renderDelegate
+    property to that object.
+  */
+  renderDelegateName: null,
+
   /**
-    Invoked whenever your view needs to be rendered, including when the view's
-    layer is first created and any time in the future when it needs to be 
-    updated.
-    
-    You will normally override this method in your subclassed views to 
-    provide whatever drawing functionality you will need in order to 
+    Invoked whenever your view needs to create its HTML representation.
+
+    You will normally override this method in your subclassed views to
+    provide whatever drawing functionality you will need in order to
     render your content.
-    
-    You can use the passed firstTime property to determine whether or not 
-    you need to completely re-render the view or only update the surrounding
-    HTML.  
-    
-    The default implementation of this method simply calls renderChildViews()
-    if this is the first time you are rendering, or null otherwise.
-    
+
+    This method is usually only called once per view. After that, the update
+    method will be called to allow you to update the existing HTML
+    representation.
+
+
+    The default implementation of this method calls renderChildViews().
+
+    For backwards compatibility, this method will also call the appropriate
+    method on a render delegate object, if your view has one.
+
     @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 renderDelegate = this.get('renderDelegate');
+
+    if (renderDelegate) {
+      if (firstTime) {
+        renderDelegate.render(this.get('renderDelegateProxy'), context);
+      } else {
+        renderDelegate.update(this.get('renderDelegateProxy'), context.$());
+      }
+    }
+
+    if (firstTime) this.renderChildViews(context, firstTime);
   },
-  
-  
-  /** @private - 
+
+
+  /** @private -
     Invokes the receivers didAppendLayerToDocument() method if it exists and
-    then invokes the same on all child views. 
+    then invokes the same on all child views.
   */
-  
+
   _notifyDidAppendToDocument: function() {
     if (this.didAppendToDocument) this.didAppendToDocument();
 
@@ -1136,7 +1459,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       }
     }
   },
-  
+
   childViewsObserver: function(){
     var childViews = this.get('childViews'), i, iLen, child;
     for(i=0, iLen = childViews.length; i<iLen; i++){
@@ -1144,56 +1467,91 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       if(child._notifyDidAppendToDocument){
         child._notifyDidAppendToDocument();
       }
-    }    
+    }
   }.observes('childViews'),
-  
+
   // ..........................................................
   // STANDARD RENDER PROPERTIES
-  // 
-  
-  /** 
+  //
+
+  /**
     Tag name for the view's outer element.  The tag name is only used when
     a layer is first created.  If you change the tagName for an element, you
     must destroy and recreate the view layer.
-    
+
     @property {String}
   */
   tagName: 'div',
-  
+
+  /**
+    The WAI-ARIA role of the control represented by this view. For example, a
+    button may have a role of type 'button', or a pane may have a role of
+    type 'alertdialog'. This property is used by assistive software to help
+    visually challenged users navigate rich web applications.
+
+    The full list of valid WAI-ARIA roles is available at:
+    http://www.w3.org/TR/wai-aria/roles#roles_categorization
+
+    @property {String}
+  */
+  ariaRole: null,
+
   /**
-    Standard CSS class names to apply to the view's outer element.  This 
+    Standard CSS class names to apply to the view's outer element.  This
     property automatically inherits any class names defined by the view's
-    superclasses as well.  
-    
+    superclasses as well.
+
     @property {Array}
   */
   classNames: ['sc-view'],
-  
+
   /**
-    Tool tip property that will be set to the title attribute on the HTML 
+    Tool tip property that will be set to the title attribute on the HTML
     rendered element.
-    
+
     @property {String}
   */
   toolTip: null,
 
+  /**
+    The computed tooltip.  This is generated by localizing the toolTip
+    property if necessary.
+
+    @property {String}
+  */
+  displayToolTip: function() {
+    var ret = this.get('toolTip');
+    return (ret && this.get('localize')) ? ret.loc() : (ret || '');
+  }.property('toolTip','localize').cacheable(),
+
   /**
     Determines if the user can select text within the view.  Normally this is
     set to NO to disable text selection.  You should set this to YES if you
     are creating a view that includes editable text.  Otherwise, settings this
-    to YES will probably make your controls harder to use and it is not 
+    to YES will probably make your controls harder to use and it is not
     recommended.
-    
+
     @property {Boolean}
     @readOnly
   */
   isTextSelectable: NO,
-  
-  /** 
+
+  /**
     You can set this array to include any properties that should immediately
     invalidate the display.  The display will be automatically invalidated
     when one of these properties change.
 
+    These are the properties that will be visible to any Render Delegate.
+    When the RenderDelegate asks for a property it needs, the view checks the
+    displayProperties array. It first looks for the property name prefixed
+    by 'display'; for instance, if the render delegate needs a 'title',
+    the view will attempt to find 'displayTitle'. If there is no 'displayTitle'
+    in displayProperties, the view will then try 'title'. If 'title' is not
+    in displayProperties either, an error will be thrown.
+
+    This allows you to avoid collisions between your view's API and the Render
+    Delegate's API.
+
     Implementation note:  'isVisible' is also effectively a display property,
     but it is not declared as such because the same effect is implemented
     inside _sc_isVisibleDidChange().  This avoids having two observers on
@@ -1205,49 +1563,62 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @readOnly
   */
   displayProperties: ['isFirstResponder'],
-  
-  /**
-    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.)
-    
+
+  /**
+    You can set this to an SC.Cursor instance; whenever that SC.Cursor's
+    'cursorStyle' changes, the cursor for this view will automatically
+    be updated to match. This allows you to coordinate the cursors of
+    many views by making them all share the same cursor instance.
+
+    For example, SC.SplitView uses this ensure that it and all of its
+    children have the same cursor while dragging, so that whether you are
+    hovering over the divider or another child of the split view, the
+    proper cursor is visible.
+
     @property {SC.Cursor String}
   */
-  cursor: null,
-  
+  cursor: function(key, value) {
+    var parent;
+
+    if (value) this._setCursor = value;
+    if (this._setCursor !== undefined) return this._setCursor;
+
+    parent = this.get('parentView');
+    if (this.get('shouldInheritCursor') && parent) {
+      return parent.get('cursor');
+    }
+
+    return null;
+  }.property('parentView', 'shouldInheritCursor').cacheable(),
+
   /**
     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
-  // 
-  
+  //
+
   /**
-    Set to YES when the view's layer location is dirty.  You can call 
+    Set to YES when the view's layer location is dirty.  You can call
     updateLayerLocationIfNeeded() to clear this flag if it is set.
-    
+
     @property {Boolean}
   */
   layerLocationNeedsUpdate: NO,
-  
+
   /**
     Calls updateLayerLocation(), but only if the view's layer location
-    currently needs to be updated.  This method is called automatically at 
+    currently needs to be updated.  This method is called automatically at
     the end of a run loop if you have called parentViewDidChange() at some
     point.
-    
+
     @property {Boolean} force This property is ignored.
-    @returns {SC.View} receiver 
+    @returns {SC.View} receiver
     @test in updateLayerLocation
   */
   updateLayerLocationIfNeeded: function(force) {
@@ -1256,12 +1627,12 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return this ;
   },
-  
+
   /**
-    This method is called when a view changes its location in the view 
-    hierarchy.  This method will update the underlying DOM-location of the 
+    This method is called when a view changes its location in the view
+    hierarchy.  This method will update the underlying DOM-location of the
     layer so that it reflects the new location.
-    
+
     @returns {SC.View} receiver
   */
   updateLayerLocation: function() {
@@ -1270,17 +1641,17 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     var node = this.get('layer'),
         parentView = this.get('parentView'),
         parentNode = parentView ? parentView.get('containerLayer') : null ;
-    
-    // remove node from current parentNode if the node does not match the new 
+
+    // remove node from current parentNode if the node does not match the new
     // parent node.
     if (node && node.parentNode && node.parentNode !== parentNode) {
       node.parentNode.removeChild(node);
     }
-    
+
     // CASE 1: no new parentView.  just remove from parent (above).
     if (!parentView) {
       if (node && node.parentNode) node.parentNode.removeChild(node);
-      
+
     // CASE 2: parentView has no layer, view has layer.  destroy layer
     // CASE 3: parentView has no layer, view has no layer, nothing to do
     } else if (!parentNode) {
@@ -1288,7 +1659,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         if (node.parentNode) node.parentNode.removeChild(node);
         this.destroyLayer();
       }
-      
+
     // CASE 4: parentView has layer, view has no layer.  create layer & add
     // CASE 5: parentView has layer, view has layer.  move layer
     } else {
@@ -1297,34 +1668,34 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         node = this.get('layer') ;
         if (!node) return; // can't do anything without a node.
       }
-      
+
       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)) {
         nextView.updateLayerLocationIfNeeded() ;
         nextNode = nextView.get('layer') ;
       }
-      
+
       // add to parentNode if needed.
       if ((node.parentNode!==parentNode) || (node.nextSibling!==nextNode)) {
         parentNode.insertBefore(node, nextNode) ;
       }
     }
-    
+
     parentNode = parentView = node = nextNode = null ; // avoid memory leaks
 
     this.set('layerLocationNeedsUpdate', NO) ;
 
-    return this ; 
+    return this ;
   },
-  
+
   // .......................................................
   // SC.RESPONDER SUPPORT
   //
-  
+
   /** @property
     The nextResponder is usually the parentView.
   */
@@ -1332,65 +1703,65 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     return this.get('parentView') ;
   }.property('parentView').cacheable(),
 
-  
+
   /** @property
-    Set to YES if your view is willing to accept first responder status.  This 
+    Set to YES if your view is willing to accept first responder status.  This
     is used when calculcating key responder loop.
   */
   acceptsFirstResponder: NO,
 
   // ..........................................................
   // KEY RESPONDER
-  // 
-  
+  //
+
   /** @property
-    YES if the view is currently first responder and the pane the view belongs 
-    to is also key pane.  While this property is set, you should expect to 
+    YES if the view is currently first responder and the pane the view belongs
+    to is also key pane.  While this property is set, you should expect to
     receive keyboard events.
   */
   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 
+    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 
+    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 
+    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
   */
   willBecomeKeyResponderFrom: function(responder) {},
-  
+
   /**
     Invokved just after the responder loses key responder status.
   */
   didLoseKeyResponderTo: function(responder) {},
-  
+
   /**
     Invoked just after the responder gains key responder status.
   */
   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 
+    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
   */
@@ -1409,11 +1780,11 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         }
         return handler ;
       }
-    } 
+    }
 
     if (chr && this.respondsTo('insertText')) {
-      // if we haven't returned yet and there is plain text, then do an insert 
-      // of the text.  Since this is not an action, do not send it up the 
+      // if we haven't returned yet and there is plain text, then do an insert
+      // of the text.  Since this is not an action, do not send it up the
       // responder chain.
       ret = this.insertText(chr, event);
       return ret ? (ret===YES ? this : ret) : null ; // map YES|NO => this|nil
@@ -1421,29 +1792,29 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
 
     return null ; //nothing to do.
   },
-  
+
   /**
-    This method is invoked by interpretKeyEvents() when you receive a key 
-    event matching some plain text.  You can use this to actually insert the 
+    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
   */
   insertText: function(chr) {
     return NO ;
   },
-    
+
   /**
-    Recursively travels down the view hierarchy looking for a view that 
-    implements the key equivalent (returning to YES to indicate it handled 
-    the event).  You can override this method to handle specific key 
+    Recursively travels down the view hierarchy looking for a view that
+    implements the key equivalent (returning to YES to indicate it handled
+    the event).  You can override this method to handle specific key
     equivalents yourself.
-    
+
     The keystring is a string description of the key combination pressed.
     The evt is the event itself. If you handle the equivalent, return YES.
     Otherwise, you should just return sc_super.
-    
+
     @param {String} keystring
     @param {SC.Event} evt
     @returns {Boolean}
@@ -1458,43 +1829,43 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return ret ;
   },
-  
+
   /**
     Optionally points to the next key view that should gain focus when tabbing
     through an interface.  If this is not set, then the next key view will
     be set automatically to the next child.
   */
   nextKeyView: null,
-  
+
   /**
     Computes the next valid key view, possibly returning the receiver or null.
     This is the next key view that acceptsFirstResponder.
-    
+
     @property
     @type SC.View
   */
   nextValidKeyView: function() {
-    var seen = [], 
+    var seen = [],
         rootView = this.get('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) {
     var ret = this.get('nextKeyView'),
         children, i, childLen, child;
-    if(this !== currentView && seen.indexOf(currentView)!=-1 && 
+    if(this !== currentView && seen.indexOf(currentView)!=-1 &&
       this.get('acceptsFirstResponder') && this.get('isVisibleInWindow')){
       return this;
     }
     seen.push(this); // avoid cycles
-    
+
     // find next sibling
     if (!ret) {
       children = this.get('childViews');
@@ -1509,33 +1880,33 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return ret ;
   },
-  
+
   /**
     Optionally points to the previous key view that should gain focus when
-    tabbing through the interface. If this is not set then the previous 
+    tabbing through the interface. If this is not set then the previous
     key view will be set automatically to the previous child.
   */
   previousKeyView: null,
 
   /**
-    Computes the previous valid key view, possibly returning the receiver or 
+    Computes the previous valid key view, possibly returning the receiver or
     null.  This is the previous key view that acceptsFirstResponder.
-    
+
     @property
     @type SC.View
   */
   previousValidKeyView: function() {
     var seen = [],
-        rootView = this.pane(), ret = this.get('previousKeyView'); 
+        rootView = this.pane(), ret = this.get('previousKeyView');
     if(!ret) ret = rootView._computePreviousValidKeyView(this, seen);
     return ret ;
   }.property('previousKeyView'),
-  
-  _computePreviousValidKeyView: function(currentView, seen) {  
+
+  _computePreviousValidKeyView: function(currentView, seen) {
     var ret = this.get('previousKeyView'),
         children, i, child;
-        
-    if(this !== currentView && seen.indexOf(currentView)!=-1 && 
+
+    if(this !== currentView && seen.indexOf(currentView)!=-1 &&
       this.get('acceptsFirstResponder') && this.get('isVisibleInWindow')){
       return this;
     }
@@ -1559,52 +1930,64 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   // .......................................................
   // CORE DISPLAY METHODS
   //
-  
-  /** @private 
-    Setup a view, but do not finish waking it up. 
+
+  /** @private
+    Setup a view, but do not finish waking it up.
     - configure childViews
-    - generate DOM + plug in outlets/childViews unless rootElement is defined
-    - register the view with the global views hash, which is used for mgmt
+    - Determine the view's theme
+    - Fetch a render delegate from the theme, if necessary
+    - register the view with the global views hash, which is used for event
+      dispatch
   */
   init: function() {
-    var parentView, path, root, idx, len, lp, dp ;
-    
-    sc_super() ;
+    var parentView = this.get('parentView'),
+        theme = this.get('theme'),
+        path, root, idx, len, lp, dp ;
+
+    sc_super();
+
+    // TODO: This makes it impossible to override
+    this.layoutStyleCalculator = SC.View.LayoutStyleCalculator.create({ view: this });
 
-    // Register this view for event handling
-    SC.View.views[this.get('layerId')] = this ;
+    // Register the view for event handling. This hash is used by
+    // SC.RootResponder to dispatch incoming events.
+    SC.View.views[this.get('layerId')] = this;
 
     var childViews = this.get('childViews');
-    
+
     // 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 
-    dp = this.get('displayProperties') ; 
+    // TODO: Optimize into class setup
+    dp = this.get('displayProperties') ;
     idx = dp.length ;
     while (--idx >= 0) {
-      this.addObserver(dp[idx], this, this.displayDidChange) ;
+      this.addObserver(dp[idx], this, this.displayDidChange);
     }
-    
+
     // register for drags
     if (this.get('isDropTarget')) SC.Drag.addDropTarget(this) ;
-    
+
     // register scroll views for autoscroll during drags
     if (this.get('isScrollable')) SC.Drag.addScrollableView(this) ;
+
+    this._previousLayout = this.get('layout');
+    this._lastTheme = this.get('theme');
   },
-  
+
   /**
-    Wakes up the view. The default implementation immediately syncs any 
-    bindings, which may cause the view to need its display updated. You 
-    can override this method to perform any additional setup. Be sure to 
+    Wakes up the view. The default implementation immediately syncs any
+    bindings, which may cause the view to need its display updated. You
+    can override this method to perform any additional setup. Be sure to
     call sc_super to setup bindings and to call awake on childViews.
-    
+
     It is best to awake a view before you add it to the DOM.  This way when
     the DOM is generated, it will have the correct initial values and will
     not require any additional setup.
-    
+
     @returns {void}
   */
   awake: function() {
@@ -1613,83 +1996,83 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     for (idx=0; idx<len; ++idx) {
       if (!childViews[idx]) continue ;
       childViews[idx].awake() ;
-    } 
+    }
   },
-    
-  /** 
-    You must call this method on a view to destroy the view (and all of its 
-    child views). This will remove the view from any parent node, then make 
-    sure that the DOM element managed by the view can be released by the 
+
+  /**
+    You must call this method on a view to destroy the view (and all of its
+    child views). This will remove the view from any parent node, then make
+    sure that the DOM element managed by the view can be released by the
     memory manager.
   */
   destroy: function() {
     if (this.get('isDestroyed')) return this; // nothing to do
-    
+
     this._destroy(); // core destroy method
-    
+
     // remove from parent if found
     this.removeFromParent() ;
-    
+
     // 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
   },
-  
+
   _destroy: function() {
     if (this.get('isDestroyed')) return this ; // nothing to do
-    
-    // destroy the layer -- this will avoid each child view destroying 
+
+    // destroy the layer -- this will avoid each child view destroying
     // the layer over and over again...
-    this.destroyLayer() ; 
-    
+    this.destroyLayer() ;
+
     // first destroy any children.
     var childViews = this.get('childViews'), len = childViews.length, idx ;
     if (len) {
       childViews = childViews.slice() ;
       for (idx=0; idx<len; ++idx) childViews[idx].destroy() ;
     }
-    
+
     // next remove view from global hash
     delete SC.View.views[this.get('layerId')] ;
-    delete this._CQ ; 
+    delete this._CQ ;
     delete this.page ;
-    
+
     return this ;
   },
-  
-  /** 
-    This method is called when your view is first created to setup any  child 
-    views that are already defined on your class.  If any are found, it will 
+
+  /**
+    This method is called when your view is first created to setup any  child
+    views that are already defined on your class.  If any are found, it will
     instantiate them for you.
-    
-    The default implementation of this method simply steps through your 
-    childViews array, which is expects to either be empty or to contain View 
+
+    The default implementation of this method simply steps through your
+    childViews array, which is expects to either be empty or to contain View
     designs that can be instantiated
-    
-    Alternatively, you can implement this method yourself in your own 
+
+    Alternatively, you can implement this method yourself in your own
     subclasses to look for views defined on specific properties and then build
      a childViews array yourself.
-    
-    Note that when you implement this method yourself, you should never 
-    instantiate views directly.  Instead, you should use 
-    this.createChildView() method instead.  This method can be much faster in 
+
+    Note that when you implement this method yourself, you should never
+    instantiate views directly.  Instead, you should use
+    this.createChildView() method instead.  This method can be much faster in
     a production environment than creating views yourself.
-    
+
     @returns {SC.View} receiver
   */
   createChildViews: function() {
-    var childViews = this.get('childViews'), 
-        len        = childViews.length, 
+    var childViews = this.get('childViews'),
+        len        = childViews.length,
         idx, key, views, view ;
-    
+
     this.beginPropertyChanges() ;
-    
+
     // swap the array
     for (idx=0; idx<len; ++idx) {
       if (key = (view = childViews[idx])) {
@@ -1698,32 +2081,32 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         if (typeof key === SC.T_STRING) {
           view = this[key];
         } else key = null ;
-        
+
         if (!view) {
           console.error ("No view with name "+key+" has been found in "+this.toString());
           // skip this one.
           continue;
         }
-        
+
         if (view.isClass) {
           view = this.createChildView(view) ; // instantiate if needed
           if (key) this[key] = view ; // save on key name if passed
-        } 
+        }
       }
       childViews[idx] = view;
     }
-    
+
     this.endPropertyChanges() ;
     return this ;
   },
-  
+
   /**
-    Instantiates a view to be added to the childViews array during view 
-    initialization. You generally will not call this method directly unless 
-    you are overriding createChildViews(). Note that this method will 
-    automatically configure the correct settings on the new view instance to 
+    Instantiates a view to be added to the childViews array during view
+    initialization. You generally will not call this method directly unless
+    you are overriding createChildViews(). Note that this method will
+    automatically configure the correct settings on the new view instance to
     act as a child of the parent.
-    
+
     @param {Class} viewClass
     @param {Hash} attrs optional attributes to add
     @returns {SC.View} new instance
@@ -1732,15 +2115,18 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   createChildView: function(view, attrs) {
     // attrs should always exist...
     if (!attrs) attrs = {} ;
+    // clone the hash that was given so we dont pollute it if it's being reused
+    else attrs = SC.clone(attrs);
+
     attrs.owner = attrs.parentView = this ;
     attrs.isVisibleInWindow = this.get('isVisibleInWindow');
     if (!attrs.page) attrs.page = this.page ;
-    
+
     // Now add this to the attributes and create.
     view = view.create(attrs) ;
     return view ;
   },
-  
+
   // ...........................................
   // LAYOUT
   //
@@ -1751,7 +2137,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     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.
@@ -1760,10 +2146,10 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     // 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.
-    
-    // To allow layout to be a computed property, we check if any property has 
-    // changed and if layout is dependent on the property. 
-    // If it is we call layoutDidChange. 
+
+    // To allow layout to be a computed property, we check if any property has
+    // changed and if layout is dependent on the property.
+    // If it is we call layoutDidChange.
     var layoutChange=false;
     if(typeof this.layout === "function" && this._kvo_dependents) {
       var dependents = this._kvo_dependents[key];
@@ -1775,26 +2161,26 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   },
 
 
-  /** 
+  /**
     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
     yourself sometimes.
-    
+
     You can pass just a key/value pair or a hash with several pairs.  You can
     also pass a null value to delete a property.
-    
+
     This method will avoid actually setting the layout if the value you pass
     does not edit the layout.
-    
+
     @param {String|Hash} key
     @param {Object} value
     @returns {SC.View} receiver
   */
   adjust: function(key, value) {
     var layout = SC.clone(this.get('layout')), didChange = NO, cur ;
-    
+
     if (key === undefined) return this ; // nothing to do.
-    
+
     // handle string case
     if (SC.typeOf(key) === SC.T_STRING) {
       cur = layout[key] ;
@@ -1805,7 +2191,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         if (cur !== value) didChange = YES ;
         layout[key] = value ;
       }
-      
+
     // handle hash -- do it this way to avoid creating memory unless needed
     } else {
       var hash = key;
@@ -1813,7 +2199,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         if (!hash.hasOwnProperty(key)) continue;
         value = hash[key] ;
         cur = layout[key] ;
-        
+
         if (value === null) {
           if (cur !== undefined) didChange = YES ;
           delete layout[key] ;
@@ -1825,56 +2211,171 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     // now set adjusted layout
     if (didChange) this.set('layout', layout) ;
-    
+
     return this ;
   },
-  
-  /** 
-    The layout describes how you want your view to be positions on the 
+
+
+  /**
+    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 (typeof keyOrHash === SC.T_STRING) {
+      hash = {};
+      hash[keyOrHash] = valueOrOptions;
+      options = optionsOrCallback;
+    } else {
+      hash = keyOrHash;
+      options = valueOrOptions;
+      callback = optionsOrCallback;
+    }
+
+    var optionsType = SC.typeOf(options);
+    if (optionsType === SC.T_NUMBER) {
+      options = { duration: options };
+    } else if (optionsType !== SC.T_HASH) {
+      throw "Must provide options hash or duration!";
+    }
+
+    if (callback) options.callback = callback;
+
+    var timing = options.timing;
+    if (timing) {
+      if (typeof timing !== SC.T_STRING) {
+        options.timing = "cubic-bezier("+timing[0]+", "+timing[1]+", "+
+                                         timing[2]+", "+timing[3]+")";
+      }
+    } else {
+      options.timing = 'linear';
+    }
+
+    var layout = SC.clone(this.get('layout')), didChange = NO, value, cur, animValue, curAnim, key;
+
+    if (!layout.animate) layout.animate = {};
+
+    // Very similar to #adjust
+    for(key in hash) {
+      if (!hash.hasOwnProperty(key)) continue;
+      value = hash[key];
+      cur = layout[key];
+
+      if (cur !== value) { didChange = YES; }
+
+      if (SC.ANIMATABLE_PROPERTIES[key]) {
+        curAnim = layout.animate[key];
+
+        // loose comparison used instead of (value === null || value === undefined)
+        if (value == null) { throw "Can only animate to an actual value!"; }
+
+        // FIXME: We should check more than duration
+        if (curAnim && curAnim.duration !== options.duration) { didChange = YES; }
+
+        layout.animate[key] = options;
+      }
+
+      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'),
+        animations = layout.animate,
+        didChange = NO, key;
+
+    if (!animations) return;
+
+    var hasAnimations;
+
+    for (key in animations) {
+      didChange = YES;
+      delete animations[key];
+    }
+
+    if (didChange) {
+      this.set('layout', layout);
+      this.notifyPropertyChange('layout');
+    }
+
+    return this;
+  },
+
+  /**
+    Called when animation ends, should not usually be called manually
+  */
+  transitionDidEnd: function(evt){
+    // WARNING: Sometimes this will get called more than once for a property. Not sure why.
+    this.get('layoutStyleCalculator').transitionDidEnd(evt);
+  },
+
+
+  /**
+    The layout describes how you want your view to be positions on the
     screen.  You can define the following properties:
-    
+
     - left: the left edge
     - top: the top edge
     - right: the right edge
     - bottom: the bottom edge
     - height: the height
     - width: the width
-    - centerX: an offset from center X 
+    - centerX: an offset from center X
     - centerY: an offset from center Y
     - minWidth: a minimum width
     - minHeight: a minimum height
     - maxWidth: a maximum width
     - maxHeight: a maximum height
-    
-    Note that you can only use certain combinations to set layout.  For 
+
+    Note that you can only use certain combinations to set layout.  For
     example, you may set left/right or left/width, but not left/width/right,
     since that combination doesn't make sense.
-    
+
     Likewise, you may set a minWidth/minHeight, or maxWidth/maxHeight, but
     if you also set the width/height explicitly, then those constraints won't
     matter as much.
-    
-    Layout is designed to maximize reliance on the browser's rendering 
+
+    Layout is designed to maximize reliance on the browser's rendering
     engine to keep your app up to date.
-    
+
     @test in layoutStyle
   */
   layout: { top: 0, left: 0, bottom: 0, right: 0 },
-  
+
   /**
     Converts a frame from the receiver's offset to the target offset.  Both
     the receiver and the target must belong to the same pane.  If you pass
     null, the conversion will be to the pane level.
-    
+
     Note that the context of a view's frame is the view's parent frame.  In
     other words, if you want to convert the frame of your view to the global
     frame, then you should do:
-    
+
     {{{
       var pv = this.get('parentView'), frame = this.get('frame');
       var newFrame = pv ? pv.convertFrameToView(frame, null) : frame;
     }}}
-    
+
     @param {Rect} frame the source frame
     @param {SC.View} targetView the target view to convert to
     @returns {Rect} converted frame
@@ -1882,41 +2383,41 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   convertFrameToView: function(frame, targetView) {
     var myX=0, myY=0, targetX=0, targetY=0, view = this, f ;
-    
+
     // walk up this side
     while (view) {
       f = view.get('frame'); myX += f.x; myY += f.y ;
-      view = view.get('layoutView') ; 
+      view = view.get('layoutView') ;
     }
-    
+
     // walk up other size
     if (targetView) {
       view = targetView ;
       while (view) {
         f = view.get('frame'); targetX += f.x; targetY += f.y ;
-        view = view.get('layoutView') ; 
+        view = view.get('layoutView') ;
       }
     }
-    
+
     // now we can figure how to translate the origin.
     myX = frame.x + myX - targetX ;
     myY = frame.y + myY - targetY ;
     return { x: myX, y: myY, width: frame.width, height: frame.height } ;
   },
-  
+
   /**
-    Converts a frame offset in the coordinates of another view system to the 
+    Converts a frame offset in the coordinates of another view system to the
     receiver's view.
-    
-    Note that the convext of a view's frame is relative to the view's 
+
+    Note that the convext of a view's frame is relative to the view's
     parentFrame.  For example, if you want to convert the frame of view that
     belongs to another view to the receiver's frame you would do:
-    
+
     {{{
       var frame = view.get('frame');
       var newFrame = this.convertFrameFromView(frame, view.get('parentView'));
     }}}
-    
+
     @param {Rect} frame the source frame
     @param {SC.View} targetView the target view to convert to
     @returns {Rect} converted frame
@@ -1924,72 +2425,72 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   convertFrameFromView: function(frame, targetView) {
     var myX=0, myY=0, targetX=0, targetY=0, view = this, f ;
-    
+
     // walk up this side
     //Note: Intentional assignment of variable f
     while (view && (f = view.get('frame'))) {
       myX += f.x; myY += f.y ;
-      view = view.get('parentView') ; 
+      view = view.get('parentView') ;
     }
-    
+
     // walk up other size
     if (targetView) {
       view = targetView ;
       while(view) {
         f = view.get('frame'); targetX += f.x; targetY += f.y ;
-        view = view.get('parentView') ; 
+        view = view.get('parentView') ;
       }
     }
-    
+
     // now we can figure how to translate the origin.
     myX = frame.x - myX + targetX ;
     myY = frame.y - myY + targetY ;
     return { x: myX, y: myY, width: frame.width, height: frame.height } ;
   },
-  
+
   /**
     Attempt to scroll the view to visible.  This will walk up the parent
-    view hierarchy looking looking for a scrollable view.  It will then 
+    view hierarchy looking looking for a scrollable view.  It will then
     call scrollToVisible() on it.
-    
+
     Returns YES if an actual scroll took place, no otherwise.
-    
-    @returns {Boolean} 
+
+    @returns {Boolean}
   */
   scrollToVisible: function() {
     var pv = this.get('parentView');
     while(pv && !pv.get('isScrollable')) pv = pv.get('parentView');
-    
+
     // found view, first make it scroll itself visible then scroll this.
     if (pv) {
       pv.scrollToVisible();
       return pv.scrollToVisible(this);
     } else return NO ;
   },
-  
+
   /**
     Frame describes the current bounding rect for your view.  This is always
     measured from the top-left corner of the parent view.
-    
+
     @property {Rect}
     @test in layoutStyle
   */
   frame: function() {
     return this.computeFrameWithParentFrame(null) ;
   }.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
     to the passed dimensions.  You can use this method to project the size of
     a frame based on the resize behavior of the parent.
-    
-    This method is used especially by the scroll view to automatically 
+
+    This method is used especially by the scroll view to automatically
     calculate when scrollviews should be visible.
-  
-    Passing null for the parent dimensions will use the actual current 
+
+    Passing null for the parent dimensions will use the actual current
     parent dimensions.  This is the same method used to calculate the current
     frame when it changes.
-    
+
     @param {Rect} pdim the projected parent dimensions
     @returns {Rect} the computed frame
   */
@@ -2000,13 +2501,13 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         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, 
+        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 &&
@@ -2017,7 +2518,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       console.error(error.toString()) ;
       throw error ;
     }
-    
+
     if (lH !== undefined &&
         lH === SC.LAYOUT_AUTO &&
         stLayout !== undefined && !stLayout) {
@@ -2026,13 +2527,13 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
        console.error(error.toString())  ;
       throw error ;
     }
-    
+
     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
         */
@@ -2042,14 +2543,13 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       }
       return null; // can't compute
     }
-    
+
 
     if (!pdim) pdim = this.computeParentDimensions(layout) ;
     dH = pdim.height;
     dW = pdim.width;
-    
-    
-    // handle left aligned and left/right 
+
+    // handle left aligned and left/right
     if (!SC.none(lL)) {
       if(SC.isPercentage(lL)){
         f.x = dW*lL;
@@ -2080,7 +2580,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         if (SC.isPercentage(lW)) f.x = dW - (lR*dW) - f.width ;
         else f.x = dW - lR - f.width ;
       }
-      
+
     // handle centered
     } else if (!SC.none(lcX)) {
       if(lW === AUTO) f.width = AUTO ;
@@ -2098,8 +2598,8 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         else f.width = (lW || 0) ;
       }
     }
-    
-    // handle top aligned and top/bottom 
+
+    // handle top aligned and top/bottom
     if (!SC.none(lT)) {
       if(SC.isPercentage(lT)) f.y = lT*dH ;
       else f.y = lT ;
@@ -2111,7 +2611,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         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(lB)) {
       if (SC.none(lH)) {
@@ -2125,7 +2625,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         if (SC.isPercentage(lB)) f.y = dH - (lB*dH) - f.height ;
         else f.y = dH - lB - f.height ;
       }
-      
+
     // handle centered
     } else if (!SC.none(lcY)) {
       if(lH === AUTO) f.height = AUTO ;
@@ -2133,7 +2633,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       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
@@ -2145,26 +2645,26 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         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');
       if (f.height === AUTO) f.height = layer ? layer.clientHeight : 0;
       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');
+      borderTop = this.get('borderTop') || 0;
+      borderLeft = this.get('borderLeft') || 0;
+      f.height -= borderTop+ (this.get('borderBottom') || 0);
       f.y += borderTop;
-      f.width -= borderLeft+this.get('borderRight');
+      f.width -= borderLeft + (this.get('borderRight') || 0);
       f.x += borderLeft;
     }
 
@@ -2188,21 +2688,21 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (!SC.none(layout.maxWidth) && (f.width > layout.maxWidth)) {
       f.width = layout.maxWidth ;
     }
-    
+
     if (!SC.none(layout.minWidth) && (f.width < layout.minWidth)) {
       f.width = layout.minWidth ;
     }
-    
+
     // make sure width/height are never < 0
     if (f.height < 0) f.height = 0 ;
     if (f.width < 0) f.width = 0 ;
-    
+
     return f;
   },
-  
+
   computeParentDimensions: function(frame) {
     var ret, pv = this.get('parentView'), pf = (pv) ? pv.get('frame') : null ;
-    
+
     if (pf) {
       ret = { width: pf.width, height: pf.height };
     } else {
@@ -2214,15 +2714,15 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return ret ;
   },
-  
+
   /**
     The clipping frame returns the visible portion of the view, taking into
-    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 
+    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.  
+
+    Normally this will be calculated based on the intersection of your own
+    clippingFrame and your parentView's contentClippingFrame.
 
     @property {Rect}
   */
@@ -2230,29 +2730,29 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     var f = this.get('frame'),
         ret = f,
         pv, cf;
-    
+
     if (!f) return null;
     pv = this.get('parentView');
     if (pv) {
       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 
+    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() {
@@ -2267,30 +2767,30 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     var cvs = this.get('childViews'), len = cvs.length, idx, cv ;
     for (idx=0; idx<len; ++idx) {
       cv = cvs[idx] ;
-      
-      // In SC 1.0 views with static layout did not receive notifications 
+
+      // 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. 
+      // 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 
+      // 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.hasStaticLayout) {
+      //
+      if (!cv.useStaticLayout) {
         cv.notifyPropertyChange('clippingFrame') ;
         cv._sc_view_clippingFrameDidChange();
       }
     }
   },
-    
-  /** 
+
+  /**
     This method may be called on your view whenever the parent view resizes.
-    
-    The default version of this method will reset the frame and then call 
+
+    The default version of this method will reset the frame and then call
     viewDidResize().  You will not usually override this method, but you may
     override the viewDidResize() method.
-    
+
     @returns {void}
     @test in viewDidResize
   */
@@ -2305,7 +2805,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     else {
       layout = this.get('layout');
-    
+
       // only resizes if the layout does something other than left/top - fixed
       // size.
       isFixed = (
@@ -2318,11 +2818,11 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       // percentage of the parent.
       if (isFixed) {
         isPercentageFunc = SC.isPercentage;
-        isPercentage = (isPercentageFunc(layout.left) || 
+        isPercentage = (isPercentageFunc(layout.left) ||
                         isPercentageFunc(layout.top) ||
-                        isPercentageFunc(layout.width) || 
+                        isPercentageFunc(layout.width) ||
                         isPercentageFunc(layout.right) ||
-                        isPercentageFunc(layout.centerX) || 
+                        isPercentageFunc(layout.centerX) ||
                         isPercentageFunc(layout.centerY));
       }
 
@@ -2344,20 +2844,20 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     This method is invoked on your view when the view resizes due to a layout
     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 
+    to implement your own layout if you like, such as performing a grid
     layout.
-    
+
     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) {
+    var cv = this.childViews, len, idx, view ;
+    for (idx=0; idx<(len= cv.length); ++idx) {
       view = cv[idx];
       view.parentViewDidResize();
     }
@@ -2374,9 +2874,9 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     this._sc_view_clippingFrameDidChange();
   },
 
-  // Implementation note: As a general rule, paired method calls, such as 
+  // 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 
+  // should reverse the order when doing the final half of the call. This
   // ensures that the calls are propertly nested for any cleanup routines.
   //
   // -> View A.beginXXX()
@@ -2392,19 +2892,19 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   // <- View A.endXXX()
   //
   // See the two methods below for an example implementation.
-  
+
   /**
-    Call this method when you plan to begin a live resize.  This will 
+    Call this method when you plan to begin a live resize.  This will
     notify the receiver view and any of its children that are interested
     that the resize is about to begin.
-    
+
     @returns {SC.View} receiver
     @test in viewDidResize
   */
   beginLiveResize: function() {
     // call before children have been notified...
     if (this.willBeginLiveResize) this.willBeginLiveResize() ;
-    
+
     // notify children in order
     var ary = this.get('childViews'), len = ary.length, idx, view ;
     for (idx=0; idx<len; ++idx) {
@@ -2413,12 +2913,12 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return this ;
   },
-  
+
   /**
     Call this method when you are finished with a live resize.  This will
     notify the receiver view and any of its children that are interested
     that the live resize has ended.
-    
+
     @returns {SC.View} receiver
     @test in viewDidResize
   */
@@ -2429,272 +2929,93 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       view = ary[idx] ;
       if (view.endLiveResize) view.endLiveResize() ;
     }
-    
+
     // call *after* all children have been notified...
     if (this.didEndLiveResize) this.didEndLiveResize() ;
     return this ;
   },
 
   /**
-    Setting wantsAcceleratedLayer to YES will use 3d transforms to move the
-    layer when available.
+    Setting wantsAcceleratedLayer to YES will use transforms to move the
+    layer when available. On some platforms transforms are hardware accelerated.
   */
   wantsAcceleratedLayer: NO,
 
   /**
-    Specifies whether 3d transforms can be used to move the layer.
+    Specifies whether transforms can be used to move the layer.
   */
   hasAcceleratedLayer: function(){
-    return this.get('wantsAcceleratedLayer') && SC.platform.supportsAcceleratedLayers;
+    if (this.get('wantsAcceleratedLayer') && SC.platform.supportsAcceleratedLayers) {
+      var layout = this.get('layout'),
+          animations = layout.animate,
+          AUTO = SC.LAYOUT_AUTO,
+          key;
+
+      if (animations && (animations['top'] || animations['left'])) {
+        for (key in animations) {
+          // If we're animating other transforms at different speeds, don't use acceleratedLayer
+          if (
+            SC.CSS_TRANSFORM_MAP[key] &&
+            ((animations['top'] && animations['top'].duration !== animations[key].duration) ||
+             (animations['left'] && animations['left'].duration !== animations[key].duration))
+          ) {
+            return NO;
+          }
+        }
+      }
+
+      // loose comparison used instead of (layout.X === null || layout.X === undefined)
+      if (
+        layout.left != null && !SC.isPercentage(layout.left) && layout.left !== AUTO &&
+        layout.top != null && !SC.isPercentage(layout.top) && layout.top !== AUTO &&
+        layout.width != null && !SC.isPercentage(layout.width) && layout.width !== AUTO &&
+        layout.height != null && !SC.isPercentage(layout.height) && layout.height !== AUTO
+      ) {
+       return YES;
+      }
+    }
+    return NO;
   }.property('wantsAcceleratedLayer').cacheable(),
 
 
+  layoutStyleCalculator: null,
+
   /**
     layoutStyle describes the current styles to be written to your element
     based on the layout you defined.  Both layoutStyle and frame reset when
     you edit the layout property.  Both are read only.
-    
+
     Computes the layout style settings needed for the current anchor.
-    
+
     @property {Hash}
     @readOnly
   */
-  
-  
   layoutStyle: function() {
-    var layout = this.get('layout'), ret = {}, pdim = null, error, 
-        AUTO = SC.LAYOUT_AUTO,
-        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,
-        hasAcceleratedLayer = this.get('hasAcceleratedLayer'),
-        translateTop = 0,
-        translateLeft = 0;
-    if (lW !== undefined && lW === 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 ;
-    }
-    
-    if (lH !== undefined && lH === SC.LAYOUT_AUTO && !stLayout) {
-      error = SC.Error.desc("%@.layout() you cannot use height:auto if "+
-                "staticLayout is disabled".fmt(this),"%@".fmt(this),-1);  
-      console.error(error.toString()) ;
-      throw error ;
-    }
+    var props = {
+      layout:       this.get('layout'),
+      turbo:        this.get('hasAcceleratedLayer'),
+      staticLayout: this.get('useStaticLayout')
+    };
 
-    // X DIRECTION
-    
-    // handle left aligned and left/right
-    if (!SC.none(lL)) {
-      if(SC.isPercentage(lL)) {
-        ret.left = (lL*100)+"%";  //percentage left
-      } else if (hasAcceleratedLayer && !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 ;
-        if(lR && SC.isPercentage(lR)) ret.right = (lR*100)+"%"; //percentage right
-        else ret.right = Math.floor(lR || 0) ; //px right
-      }
-      
-    // handle right aligned
-    } 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(lW)) {
-        if (SC.none(lMW)) ret.left = 0;
-        ret.width = null;
-      } else {
-        ret.left = null ;
-        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(lcX)) {
-      ret.left = "50%";
-      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 usign both percentages or pixels");
-        ret.marginLeft = "50%";
-      }
-      ret.right = null ;
-    
-    // if width defined, assume top/left of zero
-    } else if (!SC.none(lW)) {
-      ret.left =  0;
-      ret.right = null;
-      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.
-    } else {
-      ret.left = 0;
-      ret.right = 0;
-      ret.width = null ;
-      ret.marginLeft= 0;
-    }
-    
-    
-    // handle min/max
-    ret.minWidth = (layout.minWidth === undefined) ? null : layout.minWidth ;
-    ret.maxWidth = (layout.maxWidth === undefined) ? null : layout.maxWidth ;
-    
-    // Y DIRECTION
-    
-    // handle top aligned and left/right
-    if (!SC.none(lT)) {
-      if(SC.isPercentage(lT)) {
-        ret.top = (lT*100)+"%";
-      } else if (hasAcceleratedLayer && !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 ;
-        if(lB && SC.isPercentage(lB)) ret.bottom = (lB*100)+"%" ;
-        else ret.bottom = Math.floor(lB || 0) ;
-      }
-      ret.marginTop = 0 ;
-      
-    // handle bottom aligned
-    } else if (!SC.none(lB)) {
-      ret.marginTop = 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(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(lcY)) {
-      ret.top = "50%";
-      ret.bottom = null ;
-      
-      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(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.
-    } else {
-      ret.top = 0;
-      ret.bottom = 0;
-      ret.height = null ;
-      ret.marginTop= 0;
-    }
-    
-    // handle min/max
-    ret.minHeight = (layout.minHeight === undefined) ?
-      null :
-      layout.minHeight ;
-    ret.maxHeight = (layout.maxHeight === undefined) ?
-      null :
-      layout.maxHeight ;
-    
-    // if zIndex is set, use it.  otherwise let default shine through
-    ret.zIndex = SC.none(layout.zIndex) ? null : layout.zIndex.toString();
-    
-    // if backgroundPosition is set, use it.
-    // otherwise let default shine through
-    ret.backgroundPosition = SC.none(layout.backgroundPosition) ?
-      null :
-      layout.backgroundPosition.toString() ;
-    
-    // set default values to null to allow built-in CSS to shine through
-    // currently applies only to marginLeft & marginTop
-    while(--loc >=0) {
-      x = dims[loc];
-      if (ret[x]===0) ret[x]=null;
-    }
-
-    if (hasAcceleratedLayer) {
-      var transform = 'translateX('+translateLeft+'px) translateY('+translateTop+'px)';
-      if (SC.platform.supportsCSS3DTransforms) transform += ' translateZ(0px)'
-      ret[SC.platform.domCSSPrefix+'Transform'] = transform;
-    }
-
-    // convert any numbers into a number + "px".
-    for(key in ret) {
-      value = ret[key];
-      if (typeof value === SC.T_NUMBER) ret[key] = (value + "px");
-    }
-    return ret ;
+    var calculator = this.get('layoutStyleCalculator');
+    calculator.set(props);
+
+    return calculator.calculate();
   }.property().cacheable(),
-  
+
+
+
   /**
-    The view responsible for laying out this view.  The default version 
+    The view responsible for laying out this view.  The default version
     returns the current parent view.
   */
   layoutView: function() {
     return this.get('parentView') ;
   }.property('parentView').cacheable(),
-  
+
   /**
-    This method is called whenever a property changes that invalidates the 
-    layout of the view.  Changing the layout will do this automatically, but 
+    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
@@ -2702,7 +3023,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     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() {
@@ -2713,6 +3034,35 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         didResize      = YES,
         previousWidth, previousHeight, currentWidth, currentHeight;
 
+
+    // Handle old style rotation
+    if (!SC.none(currentLayout.rotate)) {
+      if (SC.none(currentLayout.rotateX)) {
+        currentLayout.rotateX = currentLayout.rotate;
+        console.warn('Please set rotateX instead of rotate');
+      }
+    }
+    if (!SC.none(currentLayout.rotateX)) {
+      currentLayout.rotate = currentLayout.rotateX;
+    } else {
+      delete currentLayout.rotate;
+    }
+
+    var animations = currentLayout.animations;
+    if (animations) {
+      if (!SC.none(animations.rotate)) {
+        if (SC.none(animations.rotateX)) {
+          animations.rotateX = animations.rotate;
+          console.warn('Please animate rotateX instead of rotate');
+        }
+      }
+      if (!SC.none(animations.rotateX)) {
+        animations.rotate = animations.rotateX;
+      } else {
+        delete animations.rotate;
+      }
+    }
+
     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
@@ -2732,6 +3082,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
 
     this.beginPropertyChanges() ;
+    this.notifyPropertyChange('hasAcceleratedLayer');
     this.notifyPropertyChange('layoutStyle') ;
     if (didResize) {
       this.viewDidResize();
@@ -2742,7 +3093,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       this._viewFrameDidChange();
     }
     this.endPropertyChanges() ;
-    
+
     // notify layoutView...
     var layoutView = this.get('layoutView');
     if (layoutView) {
@@ -2752,35 +3103,37 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         layoutView.invokeOnce(layoutView.layoutChildViewsIfNeeded);
       }
     }
-    
+
+    this._previousLayout = currentLayout;
+
     return this ;
   },
-  
+
   /**
     This this property to YES whenever the view needs to layout its child
     views.  Normally this property is set automatically whenever the layout
     property for a child view changes.
-    
+
     @property {Boolean}
   */
   childViewsNeedLayout: NO,
-  
+
   /**
-    One of two methods that are invoked whenever one of your childViews 
+    One of two methods that are invoked whenever one of your childViews
     layout changes.  This method is invoked everytime a child view's layout
     changes to give you a chance to record the information about the view.
-      
+
     Since this method may be called many times during a single run loop, you
     should keep this method pretty short.  The other method called when layout
-    changes, layoutChildViews(), is invoked only once at the end of 
+    changes, layoutChildViews(), is invoked only once at the end of
     the run loop.  You should do any expensive operations (including changing
     a childView's actual layer) in this other method.
-    
+
     Note that if as a result of running this method you decide that you do not
-    need your layoutChildViews() method run later, you can set the 
-    childViewsNeedsLayout property to NO from this method and the layout 
+    need your layoutChildViews() method run later, you can set the
+    childViewsNeedsLayout property to NO from this method and the layout
     method will not be called layer.
-     
+
     @param {SC.View} childView the view whose layout has changed.
     @returns {void}
   */
@@ -2789,11 +3142,11 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (!set) set = this._needLayoutViews = SC.CoreSet.create();
     set.add(childView);
   },
-  
+
   /**
     Called your layout method if the view currently needs to layout some
     child views.
-    
+
     @param {Boolean} isVisible if true assume view is visible even if it is not.
     @returns {SC.View} receiver
     @test in layoutChildViews
@@ -2806,16 +3159,16 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return this ;
   },
-  
+
   /**
     Applies the current layout to the layer.  This method is usually only
-    called once per runloop.  You can override this method to provide your 
+    called once per runloop.  You can override this method to provide your
     own layout updating method if you want, though usually the better option
     is to override the layout method from the parent view.
-    
+
     The default implementation of this method simply calls the renderLayout()
     method on the views that need layout.
-    
+
     @returns {void}
   */
   layoutChildViews: function() {
@@ -2827,16 +3180,16 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     set.clear(); // reset & reuse
   },
-  
+
   /**
-    Invoked by the layoutChildViews method to update the layout on a 
-    particular view.  This method creates a render context and calls the 
-    renderLayout() method, which is probably what you want to override instead 
+    Invoked by the layoutChildViews method to update the layout on a
+    particular view.  This method creates a render context and calls the
+    renderLayout() method, which is probably what you want to override instead
     of this.
-    
-    You will not usually override this method, but you may call it if you 
+
+    You will not usually override this method, but you may call it if you
     implement layoutChildViews() in a view yourself.
-    
+
     @returns {SC.View} receiver
     @test in layoutChildViews
   */
@@ -2844,7 +3197,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     var layer = this.get('layer'), context;
     if (layer) {
       context = this.renderContext(layer);
-      this.renderLayout(context);
+      this.renderLayout(context, NO);
       context.update();
 
       // If this view uses static layout, then notify if the frame changed.
@@ -2854,48 +3207,50 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     layer = null ;
     return this ;
   },
-  
+
   /**
     Default method called by the layout view to actually apply the current
-    layout to the layer.  The default implementation simply assigns the 
+    layout to the layer.  The default implementation simply assigns the
     current layoutStyle to the layer.  This method is also called whenever
     the layer is first created.
-    
+
     @param {SC.RenderContext} the render context
     @returns {void}
     @test in layoutChildViews
   */
   renderLayout: function(context, firstTime) {
+    this.get('layoutStyleCalculator').willRenderAnimations();
     context.addStyle(this.get('layoutStyle'));
+    this.get('layoutStyleCalculator').didRenderAnimations();
   },
-  
+
   /** walk like a duck */
   isView: YES,
-  
+
   /**
-    Default method called when a selectstart event is triggered. This event is 
-    only supported by IE. Used in sproutcore to disable text selection and 
-    IE8 accelerators. The accelerators will be enabled only in 
+    Default method called when a selectstart event is triggered. This event is
+    only supported by IE. Used in sproutcore to disable text selection and
+    IE8 accelerators. The accelerators will be enabled only in
     text selectable views. In FF and Safari we use the css style 'allow-select'.
-    
+
     If you want to enable text selection in certain controls is recommended
-    to override this function to always return YES , instead of setting 
-    isTextSelectable to true. 
-    
+    to override this function to always return YES , instead of setting
+    isTextSelectable to true.
+
     For example in textfield you dont want to enable textSelection on the text
     hint only on the actual text you are entering. You can achieve that by
     only overriding this method.
-    
+
     @param evt {SC.Event} the selectstart event
     @returns YES if selectable
   */
   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
   */
@@ -2903,14 +3258,14 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     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.
@@ -2918,14 +3273,14 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   _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;
@@ -2936,7 +3291,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       x = 0;
       maxX = 1;
     }
-    
+
     if (y < f.y) {
       y = f.y - y;
       maxY = boundary.top;
@@ -2947,26 +3302,208 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       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 */ {
-  
+
   /** @private walk like a duck -- used by SC.Page */
   isViewClass: YES,
-  
+
   /**
     This method works just like extend() except that it will also preserve
-    the passed attributes in case you want to use a view builder later, if 
+    the passed attributes in case you want to use a view builder later, if
     needed.
-    
+
     @param {Hash} attrs Attributes to add to view
     @returns {Class} SC.View subclass to create
     @function
-  */ 
+  */
   design: function() {
     if (this.isDesign) return this; // only run design one time
     var ret = this.extend.apply(this, arguments);
@@ -2976,30 +3513,41 @@ SC.View.mixin(/** @scope SC.View */ {
     }
     return ret ;
   },
-  
+
+  extend: function() {
+    var last = arguments[arguments.length - 1];
+
+    if (last && !SC.none(last.theme)) {
+      last.themeName = last.theme;
+      delete last.theme;
+    }
+
+    return SC.Object.extend.apply(this, arguments);
+  },
+
   /**
-    Helper applies the layout to the prototype. 
+    Helper applies the layout to the prototype.
   */
   layout: function(layout) {
     this.prototype.layout = layout ;
     return this ;
   },
-  
+
   /**
     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},
         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, 
+        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(lL)) {
@@ -3016,21 +3564,21 @@ SC.View.mixin(/** @scope SC.View */ {
 
     // handle right aligned
     } else if (!SC.none(lR)) {
-      
+
       // if no width, calculate it from the parent frame
       if (SC.none(lW)) {
         ret.left = 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(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
-        else { 
+        else {
           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); 
+          else ret.left = pFW - (ret.width + lR);
         }
       }
 
@@ -3041,7 +3589,7 @@ SC.View.mixin(/** @scope SC.View */ {
       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(lW)) {
       ret.left =  0;
@@ -3059,8 +3607,8 @@ SC.View.mixin(/** @scope SC.View */ {
 
     // handle min/max
     if (layout.minWidth !== undefined) ret.minWidth = layout.minWidth ;
-    if (layout.maxWidth !== undefined) ret.maxWidth = layout.maxWidth ; 
-    
+    if (layout.maxWidth !== undefined) ret.maxWidth = layout.maxWidth ;
+
     // Y Conversion
     // handle left aligned and top/bottom
     if (!SC.none(lT)) {
@@ -3078,22 +3626,22 @@ SC.View.mixin(/** @scope SC.View */ {
 
     // handle bottom aligned
     } else if (!SC.none(lB)) {
-      
+
       // if no height, calculate it from the parent frame
       if (SC.none(lH)) {
         ret.top = 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(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
-        else { 
+        else {
           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; 
+          else ret.top = ret.top - lB;
         }
       }
 
@@ -3104,7 +3652,7 @@ SC.View.mixin(/** @scope SC.View */ {
       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(lH)) {
       ret.top =  0;
@@ -3117,7 +3665,7 @@ SC.View.mixin(/** @scope SC.View */ {
       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);
@@ -3128,17 +3676,17 @@ SC.View.mixin(/** @scope SC.View */ {
     // handle min/max
     if (layout.minHeight !== undefined) ret.minHeight = layout.minHeight ;
     if (layout.maxHeight !== undefined) ret.maxHeight = layout.maxHeight ;
-    
+
     return ret;
   },
-  
+
   /**
     For now can only convert Top/Left/Width/Height to a Custom Layout
   */
   convertLayoutToCustomLayout: function(layout, layoutParams, parentFrame){
     // TODO: [EG] Create Top/Left/Width/Height to a Custom Layout conversion
   },
-  
+
   /**
     Helper applies the classNames to the prototype
   */
@@ -3147,7 +3695,7 @@ SC.View.mixin(/** @scope SC.View */ {
     this.prototype.classNames = sc;
     return this ;
   },
-  
+
   /**
     Help applies the tagName
   */
@@ -3155,7 +3703,7 @@ SC.View.mixin(/** @scope SC.View */ {
     this.prototype.tagName = tg;
     return this ;
   },
-  
+
   /**
     Helper adds the childView
   */
@@ -3168,7 +3716,7 @@ SC.View.mixin(/** @scope SC.View */ {
     this.prototype.childViews = childViews;
     return this ;
   },
-  
+
   /**
     Helper adds a binding to a design
   */
@@ -3177,12 +3725,12 @@ SC.View.mixin(/** @scope SC.View */ {
     var bindings = p._bindings ;
     if (!bindings || bindings === s._bindings) {
       bindings = p._bindings = (bindings || []).slice() ;
-    }  
-    
+    }
+
     keyName = keyName + "Binding";
     p[keyName] = path ;
     bindings.push(keyName);
-    
+
     return this ;
   },
 
@@ -3193,23 +3741,23 @@ SC.View.mixin(/** @scope SC.View */ {
     this.prototype[keyName] = value;
     return this ;
   },
-  
+
   /**
     Used to construct a localization for a view.  The default implementation
     will simply return the passed attributes.
   */
-  localization: function(attrs, rootElement) { 
+  localization: function(attrs, rootElement) {
     // add rootElement
     if (rootElement) attrs.rootElement = SC.$(rootElement)[0];
-    return attrs; 
+    return attrs;
   },
-  
+
   /**
     Creates a view instance, first finding the DOM element you name and then
-    using that as the root element.  You should not use this method very 
-    often, but it is sometimes useful if you want to attach to already 
+    using that as the root element.  You should not use this method very
+    often, but it is sometimes useful if you want to attach to already
     existing HTML.
-    
+
     @param {String|Element} element
     @param {Hash} attrs
     @returns {SC.View} instance
@@ -3223,39 +3771,46 @@ SC.View.mixin(/** @scope SC.View */ {
     args = args[0] = null;
     return ret ;
   },
-    
+
   /**
-    Create a new view with the passed attributes hash.  If you have the 
+    Create a new view with the passed attributes hash.  If you have the
     Designer module loaded, this will also create a peer designer if needed.
   */
   create: function() {
-    var C=this, ret = new C(arguments); 
+    var last = arguments[arguments.length - 1];
+
+    if (last && last.theme) {
+      last.themeName = last.theme;
+      delete last.theme;
+    }
+
+    var C=this, ret = new C(arguments);
     if (SC.ViewDesigner) {
       SC.ViewDesigner.didCreateView(ret, SC.$A(arguments));
     }
-    return ret ; 
+    return ret ;
   },
-  
+
   /**
     Applies the passed localization hash to the component views.  Call this
     method before you call create().  Returns the receiver.  Typically you
     will do something like this:
-    
+
     view = SC.View.design({...}).loc(localizationHash).create();
-    
-    @param {Hash} loc 
+
+    @param {Hash} loc
     @param rootElement {String} optional rootElement with prepped HTML
     @returns {SC.View} receiver
   */
   loc: function(loc) {
     var childLocs = loc.childViews;
     delete loc.childViews; // clear out child views before applying to attrs
-    
+
     this.applyLocalizedAttributes(loc) ;
     if (SC.ViewDesigner) {
       SC.ViewDesigner.didLoadLocalization(this, SC.$A(arguments));
     }
-    
+
     // apply localization recursively to childViews
     var childViews = this.prototype.childViews, idx = childViews.length,
       viewClass;
@@ -3264,10 +3819,10 @@ SC.View.mixin(/** @scope SC.View */ {
       loc = childLocs[idx];
       if (loc && viewClass && viewClass.loc) viewClass.loc(loc) ;
     }
-    
+
     return this; // done!
   },
-  
+
   /**
     Internal method actually updates the localizated attributes on the view
     class.  This is overloaded in design mode to also save the attributes.
@@ -3275,18 +3830,18 @@ SC.View.mixin(/** @scope SC.View */ {
   applyLocalizedAttributes: function(loc) {
     SC.mixin(this.prototype, loc) ;
   },
-  
+
   views: {}
-    
+
 }) ;
 
 // .......................................................
 // OUTLET BUILDER
 //
 
-/** 
+/**
   Generates a computed property that will look up the passed property path
-  the first time you try to get the value.  Use this whenever you want to 
+  the first time you try to get the value.  Use this whenever you want to
   define an outlet that points to another view or object.  The root object
   used for the path will be the receiver.
 */
@@ -3306,8 +3861,143 @@ SC.View.unload = function() {
      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.runCallback 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);
+    }
+  }
+};
+
+/**
+  @class
+  @private
+  View Render Delegate Proxies are tool SC.Views use to:
+
+  a) limit properties the render delegate can access to the displayProperties
+  b) look up 'display*' ('displayTitle' instead of 'title') to help deal with
+     differences between the render delegate's API and the view's.
+
+  RenderDelegateProxies are fully valid data sources for render delegates. They
+  act as proxies to the view, interpreting the .get and .didChangeFor commands
+  based on the view's displayProperties.
+
+  This tool is not useful outside of SC.View itself, and as such, is private.
+*/
+SC.View._RenderDelegateProxy = {
+
+  // for testing:
+  isViewRenderDelegateProxy: YES,
+
+  /**
+   * Creates a View Render Delegate Proxy for the specified view.
+   *
+   * Implementation note: this creates a hash of the view's displayProperties
+   * array so that the proxy may quickly determine whether a property is a
+   * displayProperty or not. This could cause issues if the view's displayProperties
+   * array is modified after instantiation.
+   *
+   * @param {SC.View} view The view this proxy should proxy to.
+   * @returns SC.View._RenderDelegateProxy
+  */
+  createForView: function(view) {
+    var ret = SC.beget(this);
+
+    // set up displayProperty lookup for performance
+    var dp = view.get('displayProperties'), lookup = {};
+    for (var idx = 0, len = dp.length; idx < len; idx++) {
+      lookup[dp[idx]] = YES;
+    }
+
+    // also allow the few special properties through
+    lookup['theme'] = YES;
+
+    ret._displayPropertiesLookup = lookup;
+    ret.renderState = {};
+
+    ret.view = view;
+    return ret;
+  },
+
+
+  /**
+   * Provides the render delegate with any property it needs.
+   *
+   * This first looks up whether the property exists in the view's
+   * displayProperties, and whether it exists prefixed with 'display';
+   * for instance, if the render delegate asks for 'title', this will
+   * look for 'displayTitle' in the view's displayProperties array.
+   *
+   * @param {String} property The name of the property the render delegate needs.
+   * @returns The value.
+  */
+  get: function(property) {
+    if (this[property] !== undefined) return this[property];
+
+    var displayProperty = 'display' + property.capitalize();
+
+    if (this._displayPropertiesLookup[displayProperty]) {
+      return this.view.get(displayProperty);
+    } else if (this._displayPropertiesLookup[property]) {
+      return this.view.get(property);
+    }
+
+    return undefined;
+  },
+
+  /**
+   * Checks if any of the specified properties have changed.
+   *
+   * For each property passed, this first determines whether to use the
+   * 'display' prefix. Then, it calls view.didChangeFor with context and that
+   * property name.
+   *
+  */
+  didChangeFor: function(context) {
+    var len = arguments.length, idx;
+    for (idx = 1; idx < len; idx++) {
+      var property = arguments[idx],
+          displayProperty = 'display' + property.capitalize();
+
+      if (this._displayPropertiesLookup[displayProperty]) {
+        if (this.view.didChangeFor(context, displayProperty)) return YES;
+      } else if (this._displayPropertiesLookup[property]) {
+        if (this.view.didChangeFor(context, property)) return YES;
+      }
+    }
+
+    return NO;
+  }
+};
+
 //unload views for IE, trying to collect memory.
 if(SC.browser.msie) SC.Event.add(window, 'unload', SC.View, SC.View.unload) ;
+
+