sproutcore 1.0.1049.pre.2 → 1.4.0.rc

data/lib/frameworks/sproutcore/frameworks/foundation/validators/date_time.js

@@ -5,6 +5,8 @@
 // License:   Licened under MIT license (see license.js)
 // ==========================================================================
 
+require('validators/validator');
+
 /**
   This validates a SC.DateTime, used in SC.DateFieldView.
   

data/lib/frameworks/sproutcore/frameworks/foundation/views/field.js

@@ -102,9 +102,9 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   },
   
   _field_fieldValueDidChange: function(evt) {
-    SC.RunLoop.begin();
-    this.fieldValueDidChange(NO);
-    SC.RunLoop.end();  
+    SC.run(function() {
+      this.fieldValueDidChange(NO);      
+    }, this);
   },
   
   /**

data/lib/frameworks/sproutcore/frameworks/foundation/views/label.js

@@ -8,6 +8,10 @@
 sc_require('views/view') ;
 sc_require('mixins/control') ;
 
+SC.ALIGN_LEFT = 'left';
+SC.ALIGN_RIGHT = 'right';
+SC.ALIGN_CENTER = 'center';
+
 SC.REGULAR_WEIGHT = 'normal';
 SC.BOLD_WEIGHT = 'bold';
 
@@ -242,13 +246,6 @@ SC.LabelView = SC.View.extend(SC.Control,
     return SC.InlineTextFieldView.commitEditing() ;
   },
 
-  /** @private
-    Allow editing.
-  */
-  inlineEditorShouldBeginEditing: function(inlineEditor) {
-    return YES ;
-  },
-  
   /** @private
     Set editing to true so edits will no longer be allowed.
   */
@@ -293,19 +290,50 @@ SC.LabelView = SC.View.extend(SC.Control,
   
   _TEMPORARY_CLASS_HASH: {},
   
-  createRenderer: function(t) {
-    return t.label();
-  },
+  render: function(context, firstTime) {
+    var value = this.get('displayValue'),
+        icon = this.get('icon'),
+        hint = this.get('hintValue'),
+        classes, stylesHash, text,
+        iconChanged = false, textChanged = false;
+    
+    if (icon) {
+      var url = (icon.indexOf('/')>=0) ? icon : SC.BLANK_IMAGE_URL,
+          className = (url === icon) ? '' : icon ;
+      icon = '<img src="'+url+'" alt="" class="icon '+className+'" />';
+      if(icon!==this._iconCache) {
+        this._iconCache=icon;
+        iconChanged = true;
+      }
+    }
+    
+    if (hint && (!value || value === '')) {
+      text = '<span class="sc-hint">'+hint+'</span>';
+    }else{
+      text = value;
+    }
+    if(text!==this._textCache) {
+      this._textCache=text;
+      textChanged = true;
+    }
+        
+    if(firstTime || textChanged || iconChanged){
+      context.push(icon, text);
+    }
+    
+    // and setup alignment and font-weight on styles
+    stylesHash = { 
+      'text-align': this.get('textAlign'), 
+      'font-weight': this.get('fontWeight')
+    };
+           
+    // if we are editing, set the opacity to 0
+    if (this.get('isEditing')) stylesHash['opacity']=0;
+    context.addStyle(stylesHash);
+    
+    classes = this._TEMPORARY_CLASS_HASH;
+    classes.icon = !!this.get('icon');
+    context.setClass(classes);
+  }
   
-  updateRenderer: function(r) {
-    r.attr({
-      "value": this.get("displayValue"),
-      "icon": this.get("icon"),
-      "hint": this.get("hint"),
-      "escapeHTML": this.get("escapeHTML"),
-      "isEditing": this.get("isEditing"),
-      "textAlign": this.get("textAlign"),
-      "fontWeight": this.get("fontWeight")
-    });
-  }  
 });

data/lib/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -8,6 +8,7 @@
 sc_require('views/field') ;
 sc_require('system/text_selection') ;
 sc_require('mixins/static_layout') ;
+sc_require('mixins/editable');
 
 /**
   @class
@@ -24,6 +25,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
   tagName: 'label',
   classNames: ['sc-text-field-view'],
+  isTextField: YES,
 
   // ..........................................................
   // PROPERTIES
@@ -66,21 +68,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   */
   isContextMenuEnabled: YES,
 
-  /**
-    If true, every change to the text in the text field updates 'value'.
-    If false, 'value' is only updated when commitEditing() is called (this
-    is called automatically when the text field loses focus), or whenever
-    the return key is pressed while editing the field.
-  */
-  continuouslyUpdatesValue: YES,
-
-  /**
-    If no, will not allow transform or validation errors (SC.Error objects)
-    to be passed to 'value'.  Upon focus lost, the text field will revert
-    to its previous value.
-  */
-  allowsErrorAsValue: YES,
-
   /**
     An optional view instance, or view class reference, which will be visible
     on the left side of the text field.  Visually the accessory view will look
@@ -396,10 +383,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     var hint = this.get('hint'), disabled, name, adjustmentStyle, type, 
         hintElements, element, paddingElementStyle, fieldClassNames,
         spellCheckEnabled=this.get('spellCheckEnabled'), spellCheckString,
-        maxLength = this.get('maxLength');
+        maxLength = this.get('maxLength'), isOldSafari;
         
     context.setClass('text-area', this.get('isTextArea'));
     
+    //Adding this to differentiate between older and newer versions of safari
+    //since the internal default field padding changed 
+    isOldSafari= (parseInt(SC.browser.safari,0)<532);
+    context.setClass('oldWebKitFieldPadding', isOldSafari);
+    
     spellCheckString = spellCheckEnabled ? ' spellcheck="true"' : ' spellcheck="false"';
     if (firstTime || this._forceRenderFirstTime) {
       this._forceRenderFirstTime = NO;
@@ -449,23 +441,26 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
     }
     else {
+      var input= this.$input();
       if(!this.get('_supportsPlaceHolder')){
         var val = this.get('value');
         if((!val || (val && val.length===0))){
           if(this.get('hintON') && !this.get('isFirstResponder')){
             //console.log('hint on render');
             context.setClass('sc-hint', YES);
-            this.$input().val(hint);
+            input.val(hint);
           }else{
             // console.log('removing hint on render');
             context.setClass('sc-hint', NO);
-            this.$input().val('');
+            input.val('');
           }
         }
+      }else{
+        input.attr('placeholder', hint);
       }
       
       // Enable/disable the actual input/textarea as appropriate.
-      element = this.$input()[0];
+      element = input[0];
       if (element) {
         if (!this.get('isEnabled')) {
           element.disabled = 'true' ;
@@ -613,15 +608,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   */
 
   _textField_fieldDidFocus: function(evt) {
-    SC.RunLoop.begin();
-    this.set('focused',YES);
-    this.fieldDidFocus(evt);
-    var val = this.get('value');
-    if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
-      // console.log('turn off hint');
-      this.set('hintON', NO);
-    }
-    SC.RunLoop.end();
+    SC.run(function() {
+      this.set('focused',YES);
+      this.fieldDidFocus(evt);
+      var val = this.get('value');
+      if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
+        // console.log('turn off hint');
+        this.set('hintON', NO);
+      }
+    }, this);
   },
 
   /**
@@ -629,43 +624,57 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   */
 
   _textField_fieldDidBlur: function(evt) {
-    SC.RunLoop.begin();
-    this.set('focused',NO);
-    // passing the original event here instead that was potentially set from
-    // loosing the responder on the inline text editor so that we can
-    // use it for the delegate to end editing
-    this.fieldDidBlur(this._origEvent);
-    var val = this.get('value');
-    if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
-      // console.log('turn on hint');
-      this.set('hintON', YES);
-    }
-    SC.RunLoop.end();
+    SC.run(function() {
+      this.set('focused',NO);
+      // passing the original event here instead that was potentially set from
+      // loosing the responder on the inline text editor so that we can
+      // use it for the delegate to end editing
+      this.fieldDidBlur(this._origEvent);
+      var val = this.get('value');
+      if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
+        // console.log('turn on hint');
+        this.set('hintON', YES);
+      }
+    }, this);
   },
   
   fieldDidFocus: function(evt) {
     this.beginEditing(evt);
     
-    // handle touch intercept
-    if (this.getPath("pane.usingTouchIntercept")) {
-      this.get("pane").hideTouchIntercept();
+    // We have to hide the intercept pane, as it blocks the events. 
+    // However, show any that we previously hid, first just in case something wacky happened.
+    if (this._didHideInterceptForPane) {
+      this._didHideInterceptForPane.showTouchIntercept();
+      this._didHideInterceptForPane = null;
+    }
+    
+    // now, hide the intercept on this pane if it has one
+    var pane = this.get('pane');
+    if (pane && pane.get("usingTouchIntercept")) {
+      // hide
+      pane.hideTouchIntercept();
+      
+      // and set our internal one so we can unhide it (even if the pane somehow changes)
+      this._didHideInterceptForPane = this.get("pane");
     }
   },
   
   fieldDidBlur: function(evt) {
     this.commitEditing(evt);
     
-    // handle touch intercept
-    if (this.getPath("pane.usingTouchIntercept")) {
-      this.get("pane").showTouchIntercept();
+    // get the pane we hid intercept pane for (if any)
+    var touchPane = this._didHideInterceptForPane;
+    if (touchPane) {
+      touchPane.showTouchIntercept();
+      touchPane = null;
     }
   },
   
   _field_fieldValueDidChange: function(evt) {
     if(this.get('focused')){
-      SC.RunLoop.begin();
-      this.fieldValueDidChange(NO);
-      SC.RunLoop.end();  
+      SC.run(function() {
+        this.fieldValueDidChange(NO);        
+      }, this);
     }
   },
 
@@ -794,6 +803,22 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   didLoseKeyResponderTo: function(keyView) {
     var el = this.$input()[0];
     if (el) el.blur();
+    
+    this.invokeLater("scrollToOriginIfNeeded", 100);
+  },
+  
+  /**
+    @private
+    Scrolls to origin if necessary (if the pane's current firstResponder is not a text field).
+  */
+  scrollToOriginIfNeeded: function() {
+    var pane = this.get("pane");
+    if (!pane) return;
+    
+    var first = pane.get("firstResponder");
+    if (!first || !first.get("isTextField")) {
+      document.body.scrollTop = document.body.scrollLeft = 0;
+    }
   },
 
   parentViewDidResize: function() {
@@ -812,20 +837,27 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // responder chain.
     // If the event is triggered by a return while entering IME input,
     // don't got through this path.
-    var which = evt.which;
+    var which = evt.which, maxLengthReached = false;
     if ((which === 13 && !evt.isIMEInput) && !this.get('isTextArea')) return NO ;
     if (which === 27) return NO ;
 
     // handle tab key
-    if (evt.which === 9 && this.get('defaultTabbingEnabled')) {
+    if (which === 9 && this.get('defaultTabbingEnabled')) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if (view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
     }
- 
+    // maxlength for textareas
+    if(!SC.browser.safari && this.get('isTextArea')){
+      var val = this.get('value');
+      if(val && evt.which>47 && (val.length >= this.get('maxLength'))) {
+        maxLengthReached = true;
+      }
+    }
     // validate keyDown...
-    if (this.performValidateKeyDown(evt)) {
+    // do not validate on touch, as it prevents return.
+    if ((this.performValidateKeyDown(evt) || SC.platform.touch) && !maxLengthReached) {
       this._isKeyDown = YES ;
       evt.allowDefault();
     } else {
@@ -894,7 +926,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return YES;
   },
   
-  
   /**
     This function is to notify if the browser supports the placeholder attribute
     or not. Currently is disabled as in webkit there is a bug where the color 

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

@@ -9,7 +9,6 @@ sc_require('system/browser');
 sc_require('system/event');
 sc_require('system/cursor');
 sc_require('system/responder') ;
-sc_require('system/theme');
 
 sc_require('mixins/string') ;
 
@@ -79,7 +78,7 @@ SC.LAYOUT_AUTO = 'auto';
 /**
   Default property to disable or enable by default the contextMenu
 */
-SC.CONTEXT_MENU_ENABLED = NO;
+SC.CONTEXT_MENU_ENABLED = YES;
 
 /**
   Default property to disable or enable if the focus can jump to the address
@@ -87,34 +86,10 @@ SC.CONTEXT_MENU_ENABLED = NO;
 */
 SC.TABBING_ONLY_INSIDE_DOCUMENT = YES;
 
-/**
-  Tells the property (when fetched with themed()) to get its value from the renderer (if any).
-*/
-SC.FROM_THEME = "__FROM_THEME__"; // doesn't really matter what it is, so long as it is unique. Readability is a plus.
-
 /** @private - custom array used for child views */
 SC.EMPTY_CHILD_VIEWS_ARRAY = [];
 SC.EMPTY_CHILD_VIEWS_ARRAY.needsClone = YES;
 
-/**
-  Map to CSS Transforms
-*/
-SC.CSS_TRANSFORM_MAP = {
-  rotate: function(val){
-    if (SC.typeOf(val) === SC.T_NUMBER || val === 0) val += 'deg';
-    return 'rotate('+val+')';
-  },
-  scale: function(val){
-    if (SC.typeOf(val) === SC.T_ARRAY) val = val.join(', ');
-    return 'scale('+val+')';
-  }
-};
-
-/**
-  Properties that can be animated
-*/
-SC.ANIMATABLE_PROPERTIES = ["top", "left", "bottom", "right", "width", "height", "centerX", "centerY", "opacity", "scale", "rotate"];
-
 /** 
   @class
   
@@ -170,7 +145,7 @@ SC.ANIMATABLE_PROPERTIES = ["top", "left", "bottom", "right", "width", "height",
 SC.View = SC.Responder.extend(SC.DelegateSupport,
 /** @scope SC.View.prototype */ {
   
-  concatenatedProperties: 'outlets displayProperties layoutProperties classNames renderMixin didCreateLayerMixin willDestroyLayerMixin createRendererMixin updateRendererMixin'.w(),
+  concatenatedProperties: 'outlets displayProperties layoutProperties classNames renderMixin didCreateLayerMixin willDestroyLayerMixin'.w(),
   
   /** 
     The current pane. 
@@ -217,184 +192,14 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   backgroundColor: null,
   
   /**
-    Activates use of brower's static layout. To activate, set this
+    Activates use of brower's static layout.  You can apply this mixin and
+    still use absolute positioning.  To activate static positioning, set this
     property to YES.
 
     @property {Boolean}
   */
   useStaticLayout: NO,  
   
-  // ..........................................................
-  // THEME SUPPORT
-  // 
-  
-  _baseThemeName: false,
-  
-  /**
-    The base theme to start from; the "theme" property looks in this theme.
-    baseTheme is inherited from parent's theme property.
-  */
-  baseTheme: null,
-  
-  /**
-    This sets the base theme 
-  */
-  _baseThemeProperty: function(key, value) {
-    if (SC.typeOf(value) === SC.T_STRING) {
-      this.set("_baseThemeName", value);
-    }
-    
-    // find the base theme by name if we have a name.
-    if (this.get("_baseThemeName")) {
-      var theme = SC.Theme.find(this.get("_baseThemeName"));
-      if (theme) return theme;
-    }
-    
-    // otherwise, return parent's theme.
-    var parent = this.get("parentView");
-    if (parent) return parent.get("theme");
-    
-    return SC.Theme.find("sc-base");
-  }.property().cacheable(),
-  
-  
-  _last_theme: null, // used to determine if theme has changed since last time the property was evaluated.
-  _themeName: false,
-  
-  // baseTheme is a "property"; since it gets set after extension of the view,
-  // we need an observer in addition to it to actually do notifications.
-  _baseThemeDidChange: function() {
-    this.notifyPropertyChange("theme");
-  }.observes("baseTheme"),
-  
-  _themeProperty: function(key, value) {
-    // if it is a string, set theme name
-    if (SC.typeOf(value) === SC.T_STRING) {
-      this.set("_themeName", value);
-    }
-    
-    // get the base theme
-    var base = this.get("baseTheme");
-    
-    // find theme, if possible
-    if (this.get("_themeName")) {
-      // Note: theme instance "find" function will search every parent
-      // _except_ global (which is not a parent)
-      var theme;
-      if (base) {
-        theme = base.find(this.get("_themeName"));
-        if (theme) return theme;
-      }
-      
-      theme = SC.Theme.find(this.get("_themeName"));
-      if (theme) return theme;
-    }
-    
-    // can't find anything, return base.
-    return base;
-  }.property().cacheable(),
-  
-  _notifyThemeDidChange: function() {
-    var len, idx, childViews = this.get("childViews");
-    len = childViews.length;
-    for (idx = 0; idx < len; idx++){
-      childViews[idx].notifyPropertyChange("baseTheme");
-      childViews[idx].notifyPropertyChange("theme");
-    }
-  },
-  
-  /**
-    The current theme. You may only set this to a string, and during runtime, the value
-    (from get()) will always be a theme object or null.
-  */
-  theme: null,
-  
-  /**
-    Detects when the theme changes. Replaces the layer if necessary.
-  */
-  _themeDidChange: function() {
-    var theme = this.get("theme");
-    if (theme === this._last_theme) return;
-    this._last_theme = theme;
-    
-    // replace the layer
-    if (this.get("layer")) this.replaceLayer();
-    
-    // notify child views
-    if (this._hasCreatedChildViews) this._notifyThemeDidChange();
-    
-    // and now, regenerate renderer
-    this._generateRenderer();
-  }.observes("theme"),
-  
-  /**
-    Like "get", but if the value is SC.FROM_THEME, it will find the value from the view's
-    renderer, if any; if none, then it will look for <property>Default and return that.
-  */
-  themed: function(property) {
-    var val = this.get(property);
-    if (val === SC.FROM_THEME) {
-      if (this.renderer) return this.renderer[property];
-      else return this.get(property + "Default");
-    }
-    return val;
-  },
-  
-  /**
-    @private
-    Generates the view's renderer (calling _destroyRenderer on any old ones if needed).
-  */
-  _generateRenderer: function() {
-    var theme = this.get("theme"); // renderers need a theme
-    
-    // reset the renderer (the theme changed, hello!)
-    this._destroyRenderer();
-    
-    // now, if we do have a theme, we can try to create the renderer.
-    if (theme && theme.isTheme) {
-      this._viewRenderer = theme.view();
-      
-      if (this.createRenderer) {
-        this.renderer = this.createRenderer(theme);
-
-        // the renderer was not necessarily successfully created.
-        if (this.renderer) {
-          var mixins, idx, len;
-          this.renderer.contentProvider = this; // set renderer's content provider to this (it will call renderContent, etc. as needed)
-          if (mixins = this.createRendererMixin) {
-            len = mixins.length;
-            for (idx = 0; idx < len; idx++) mixins[idx].call(this, theme);
-          }
-        }
-      }
-    }
-    
-    // update!
-    this._updateViewRenderer();
-    this._updateRenderer();
-  },
-  
-  /**
-    @private
-    Updates the view's renderer, if one exists, calling all mixins to renderer as well.
-  */
-  _updateRenderer: function() {
-    var mixins, idx, len;
-    if (this.renderer){
-      this.updateRenderer(this.renderer);
-      if (mixins = this.updateRendererMixin) {
-        len = mixins.length;
-        for (idx = 0; idx < len; idx++) mixins[idx].call(this, this.renderer);
-      }
-    }
-  },
-  
-  _destroyRenderer: function() {
-    if (!this.renderer) return;
-    this.renderer.destroy();
-    this.renderer = null;    
-  },
-  
   // ..........................................................
   // IS ENABLED SUPPORT
   // 
@@ -442,25 +247,6 @@ 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,
-  
-  /**
-    Whether to route touch events to mouse events (defaults to YES)
-  */
-  routeTouch: YES,
-  
   // ..........................................................
   // IS VISIBLE IN WINDOW SUPPORT
   // 
@@ -526,45 +312,44 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       }
       current = current && parentViewIsVisible;
     }
-    
+
     // If our visibility has changed, then set the new value and notify our
     // child views to update their value.
-    //if (previous !== current) {
-      this.set('isVisibleInWindow', current) ;
-      
+    if (previous !== current) {
+      this.set('isVisibleInWindow', current);
+
       var childViews = this.get('childViews'), len = childViews.length, idx;
       for(idx=0;idx<len;idx++) {
         childViews[idx].recomputeIsVisibleInWindow(current);
       }
 
-
-      // We'll also kick off some necessary work when the visibility changes.
-      // This more appropriately belongs in a 'isVisibleInWindow' observer or
-      // some such helper method because this work is not strictly related to
-      // computing the visibility, but view performance is critical, so
-      // avoiding the extra observer is worthwhile.
+      // For historical reasons, we'll also layout the child views if
+      // necessary.
       if (current) {
-        // If we just became visible, update layer + layout if needed...
-        this.displayDidChange();
-
-        if (this.get('childViewsNeedLayout')) {
-          this.invokeOnce(this.layoutChildViewsIfNeeded);
-        }
+        if (this.get('childViewsNeedLayout')) this.invokeOnce(this.layoutChildViewsIfNeeded);
       }
       else {
-        // We need to set some internal state to indicate that we went from
-        // visible to invisible.
-        //
-        // (Typically, invisible views are not updated for performance
-        // reasons, but if we went from visible to invisible, we need to
-        // update once.)
-        this._forceLayerUpdateDueToVisibilityChange = YES;
-        this.displayDidChange();
-
-        // Also, if we were previously 'firstResponder', resign it.
+        // Also, if we were previously visible and were the first responder,
+        // resign it.  This more appropriately belongs in a
+        // 'isVisibleInWindow' observer or some such helper method because
+        // this work is not strictly related to computing the visibility, but
+        // view performance is critical, so avoiding the extra observer is
+        // worthwhile.
         if (this.get('isFirstResponder')) this.resignFirstResponder();
       }
-    //}
+    }
+
+    // If we're in this function, then that means one of our ancestor views
+    // changed, or changed its 'isVisibleInWindow' value.  That means that if
+    // we are out of sync with the layer, then we need to update our state
+    // now.
+    //
+    // For example, say we're isVisible=NO, but we have not yet added the
+    // 'hidden' class to the layer because of the "don't update the layer if
+    // we're not visible in the window" check.  If any of our parent views
+    // became visible, our layer would incorrectly be shown!
+    this.updateLayerIfNeeded(YES);
+
     return this;
   },
 
@@ -572,9 +357,18 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   /** @private
     Whenever the view’s visibility changes, we need to recompute whether it is
     actually visible inside the window (a view is only visible in the window
-    if it is marked as visibile and its parent view is as well).
+    if it is marked as visibile and its parent view is as well), in addition
+    to updating the layer accordingly.
   */
   _sc_isVisibleDidChange: function() {
+    // 'isVisible' is effectively a displayProperty, but we'll call
+    // displayDidChange() manually here instead of declaring it as a
+    // displayProperty because that avoids having two observers on
+    // 'isVisible'.  A single observer is:
+    //   a.  More efficient
+    //   b.  More correct, because we can guarantee the order of operations
+    this.displayDidChange();
+
     this.recomputeIsVisibleInWindow();
   }.observes('isVisible'),
 
@@ -655,10 +449,6 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (view.parentView !== this) {
       throw "%@.removeChild(%@) must belong to parent".fmt(this,view);
     }
-
-    // Animation cleanup
-    if (SC.platform.supportsCSSTransitions) this.resetAnimation();
-
     // notify views
     if (view.willRemoveFromParent) view.willRemoveFromParent() ;
     if (this.willRemoveChild) this.willRemoveChild(view) ;
@@ -778,8 +568,6 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   parentViewDidChange: function() {
     this.recomputeIsVisibleInWindow() ;
     
-    this.resetBuildState();
-    this.notifyPropertyChange("baseTheme");
     this.set('layerLocationNeedsUpdate', YES) ;
     this.invokeOnce(this.updateLayerLocationIfNeeded) ;
     
@@ -888,28 +676,35 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @property {String}
     @readOnly
   */
-  layerId: function() {
+  layerId: function(key, value) {
+    if (value) this._layerId = value;
+    if (this._layerId) return this._layerId;
     return SC.guidFor(this) ;
   }.property().cacheable(),
   
   _lastLayerId: null,
+
   /**
     Handles changes in the layer id.
   */
   layerIdDidChange: function() {
-    var layer = this.get("layer");
-    if (layer && this.get("layerId") !== this._lastLayerId) {
+    var layer  = this.get("layer"),
+        lid    = this.get("layerId"),
+        lastId = this._lastLayerId;
+    if (lid !== lastId) {
       // if we had an earlier one, remove from view hash.
-      if (this._lastLayerId) delete SC.View.views[this._lastLayerId];
+      if (lastId && SC.View.views[lastId] === this) {
+        delete SC.View.views[lastId];
+      }
       
       // set the current one as the new old one
-      this._lastLayerId = this.get("layerId");
+      this._lastLayerId = lid;
       
       // and add the new one
-      SC.View.views[this.get("layerId")] = this;
+      SC.View.views[lid] = this;
       
       // and finally, set the actual layer id.
-      layer.id = this.get("layerId");
+      if (layer) layer.id = lid;
     }
   }.observes("layerId"),
   
@@ -925,20 +720,13 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   findLayerInParentLayer: function(parentLayer) {
     var layerId = this.get('layerId'),
-        node, i, ilen,found, elem;
+        node, i, ilen, childNodes, elem, usedQuerySelector;
     
     // first, let's try the fast path...
-    if(parentLayer.getElementById) elem = parentLayer.getElementById(layerId) ;
-    else elem = document.getElementById(layerId) ;
+    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 browser supports querySelector use that.
-    if (!elem && parentLayer.querySelector) {
-      // TODO: make querySelector work on all platforms...
-      elem = parentLayer.querySelector('#' + layerId);
-    }
+    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
@@ -947,21 +735,19 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     // below the parent.
     if (!elem) {
       elem = parentLayer.firstChild ;
-      var q=[];
+      var q = [];
       q.push(parentLayer);
-      while(q.length!==0){
-        node=q[0];
-        q.shift();
-        if(node.id===layerId){
-          found=true;
-          elem=node;
-          break;
-        } 
-        for(i=0, ilen=node.childNodes.length; i<ilen; i++){
-          q.push(node.childNodes[i]);
+      while (q.length !==0) {
+        node = q.shift();
+        if (node.id===layerId) {
+          return node;
+        }
+        childNodes = node.childNodes;
+        for (i=0, ilen=childNodes.length;  i < ilen;  ++i) {
+          q.push(childNodes[i]);
         }
       }
-      if(!found) elem=null;  
+      elem = null;  
     }
     
     return elem;
@@ -1023,7 +809,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     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 'force' parameter.
+    the 'skipIsVisibleInWindowCheck' parameter.
     
     You should not override this method.  Instead override updateLayer() or
     render().
@@ -1031,9 +817,9 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @returns {SC.View} receiver
     @test in updateLayer
   */
-  updateLayerIfNeeded: function() {
-    var force = this._forceLayerUpdateDueToVisibilityChange,
-        shouldUpdate = (force || this.get('isVisibleInWindow')) && this.get('layerNeedsUpdate');
+  updateLayerIfNeeded: function(skipIsVisibleInWindowCheck) {
+    var needsUpdate  = this.get('layerNeedsUpdate'),
+        shouldUpdate = needsUpdate  &&  (skipIsVisibleInWindowCheck || this.get('isVisibleInWindow'));
     if (shouldUpdate) {
       // only update a layer if it already exists
       if (this.get('layer')) {
@@ -1043,10 +829,6 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         this.endPropertyChanges() ;
       }
     }
-    else this.set('layerNeedsUpdate', NO) ;
-
-    // If we were forcing the layer update for this round, clear the flag.
-    this._forceLayerUpdateDueToVisibilityChange = NO;
 
     return this ;
   },
@@ -1066,42 +848,22 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     do not want your render() method called when updating a layer, then you
     should override this method instead.
     
-    @param optionalContext provided only for backwards-compatibility.
-    
     @returns {SC.View} receiver 
   */
-  updateLayer: function(optionalContext) {
-    var mixins, idx, len, renderer = this.renderer, viewRenderer = this._viewRenderer;
-    this.updateViewSettings();
-    
-    // make sure to update any renderers
-    this._updateViewRenderer();
-    this._updateRenderer();
-    
-    // Now, update using renderer if possible; render() otherwise
-    if (!this._useRenderFirst && this.createRenderer) {
-      if (renderer) renderer.update();
-      if (viewRenderer) viewRenderer.update();
-    } else {
-      var context = optionalContext || this.renderContext(this.get('layer')) ;
-      this.render(context, NO) ;
-      if (mixins = this.renderMixin) {
-        len = mixins.length;
-        for(idx=0; idx<len; ++idx) mixins[idx].call(this, context, NO) ;
-      }
-      
-      context.update() ;
-      if (context._innerHTMLReplaced) {
-        var pane = this.get('pane');
-        if(pane && pane.get('isPaneAttached')) {
-          this._notifyDidAppendToDocument();
-        }
+  updateLayer: function() {
+    var context = this.renderContext(this.get('layer')) ;
+    this.prepareContext(context, NO) ;
+    context.update() ;
+    if (context._innerHTMLReplaced) {
+      var pane = this.get('pane');
+      if(pane && pane.get('isPaneAttached')) {
+        this._notifyDidAppendToDocument();
       }
     }
 
-      // If this view uses static layout, then notify that the frame (likely)
-      // changed.
-      if (this.useStaticLayout) this.viewDidResize();
+    // If this view uses static layout, then notify that the frame (likely)
+    // changed.
+    if (this.useStaticLayout) this.viewDidResize();
 
     if (this.didUpdateLayer) this.didUpdateLayer(); // call to update DOM
     if(this.designer && this.designer.viewDidUpdateLayer) {
@@ -1139,7 +901,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     var context = this.renderContext(this.get('tagName')) ;
     
     // now prepare the content like normal.
-    this.renderToContext(context) ;
+    this.prepareContext(context, YES) ;
     this.set('layer', context.element()) ;
     
     // now notify the view and its child views..
@@ -1153,22 +915,10 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     invokes the same on all child views.
   */
   _notifyDidCreateLayer: function() {
-    // notify, not just the view, but also the view renderers
-    this.notifyPropertyChange("layer");
-    this._viewRenderer.attachLayer(this);
-    if (this.renderer) this.renderer.attachLayer(this);
     if (this.didCreateLayer) this.didCreateLayer() ;
-
-    // Animation prep
-    if (SC.platform.supportsCSSTransitions) {
-      this.resetAnimation();
-      SC.Event.add(this.get('layer'), SC.platform.cssPrefix+"TransitionEnd", this, this._scv_animationEnd);
-      SC.Event.add(this.get('layer'), "transitionEnd", this, this._scv_animationEnd);
-    }
-
-    // and notify others
     var mixins = this.didCreateLayerMixin, len, idx,
-        childViews = this.get('childViews');
+        childViews = this.get('childViews'),
+        childView;
     if (mixins) {
       len = mixins.length ;
       for (idx=0; idx<len; ++idx) mixins[idx].call(this) ;
@@ -1176,8 +926,17 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     
     len = childViews.length ;
     for (idx=0; idx<len; ++idx) {
-      if (!childViews[idx]) continue;
-      childViews[idx]._notifyDidCreateLayer() ;
+      childView = childViews[idx];
+      if (!childView) continue;
+
+      // A parent view creating a layer might result in the creation of a
+      // child view's DOM node being created via a render context without
+      // createLayer() being invoked on the child.  In such cases, if anyone
+      // had requested 'layer' and it was cached as null, we need to
+      // invalidate it.
+      childView.notifyPropertyChange('layer');
+
+      childView._notifyDidCreateLayer() ;
     }
   },
   
@@ -1202,26 +961,10 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   destroyLayer: function() {
     var layer = this.get('layer') ;
     if (layer) {
-
-      // Teardown animations
-      if (SC.platform.supportsCSSTransitions) {
-        SC.Event.remove(this.get('layer'), SC.platform.cssPrefix+"TransitionEnd", this, this._scv_animationEnd);
-        SC.Event.remove(this.get('layer'), "transitionEnd", this, this._scv_animationEnd);
-      }
-
       // Now notify the view and its child views.  It will also set the
       // layer property to null.
       this._notifyWillDestroyLayer() ;
       
-      if (this._viewRenderer) {
-        this._viewRenderer.detachLayer();
-      }
-      
-      // tell the renderer the layer has gone away
-      if (this.renderer) {
-        this.renderer.detachLayer();
-      }
-      
       // do final cleanup
       if (layer.parentNode) layer.parentNode.removeChild(layer) ;
       layer = null ;
@@ -1260,134 +1003,73 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     this.set('layer', null) ;
   },
   
-  
-  isLayerProvider: YES,
-  /**
-    @private (semi)
-    Returns the layer. Meant only for use from renderers and such—this is a layer provider function.
-  */
-  getLayer: function() {
-    return this.get("layer");
-  },
-  
   /**
-    @private
-    
-    Renders to a context.
-    Rendering only happens for the initial rendering. Further updates happen in updateLayer,
-    and are not done to contexts, but to layers.
-    
-    Both renderToContext and updateLayer will call render(context, firstTime) as needed
-    to maintain backwards compatibility, but prefer calling createRenderer.
-    
-    Note: You should not generally override nor directly call this method. This method is only
-    called by createLayer to set up the layer initially, and by renderChildViews, to write to
-    a context.
-    
-    @param {SC.RenderContext} context the render context.
-    @param {Boolean} firstTime Provided for compatibility when rendering legacy views only.
-  */
-  renderToContext: function(context, firstTime) {
-    var mixins, idx, len;
-    
-    this.beginPropertyChanges() ;
-    this.set('layerNeedsUpdate', NO) ;
-    
-    this.renderViewSettings(context);
-    
-    /* Now, the actual rendering, which will use a renderer if possible */
-    // the renderer will have been created when the theme was found; if it is around,
-    // we just need to ensure it is up-to-date
-    if (this.createRenderer) {
-      // our private version does mixins too! Yay!
-      this._updateRenderer();
-    }
-    
-    if (!this._useRenderFirst && this.createRenderer) {
-      if (this.renderer) this.renderer.render(context);
-    } else {
-      if (SC.none(firstTime)) firstTime = YES;
-      
-      this.render(context, firstTime);
-      if (mixins = this.renderMixin) {
-        len = mixins.length;
-        for(idx=0; idx<len; ++idx) mixins[idx].call(this, context, firstTime) ;
-      }
-    }
-    
-    this.endPropertyChanges() ;
-  },
-  
-  /**
-    @private
-    Updates the properties of the renderer used for the view
-  */
-  _updateViewRenderer: function() {
-    if (!this._viewRenderer) return;
-    
-    var classNames = this.get('classNames');
-    if (this.get('theme')) {
-      classNames = classNames.concat(this.get("theme").classNames);
-    }
-
-    this._scv_willRenderAnimations();
-
-    this._viewRenderer.attr({
-      layerId: this.layerId ? this.get('layerId') : SC.guidFor(this),
-      classNames: classNames,
-      backgroundColor: this.get('backgroundColor'),
-      cursor: this.get('cursor'),
-      layoutStyle: this.get('layoutStyle'),
-      isTextSelectable: this.get('isTextSelectable'),
-      isEnabled: this.get('isEnabled'),
-      isVisible: this.get('isVisible'),
-      isFirstResponder: this.get('isFirstResponder'),
-      hasStaticLayout: this.get('useStaticLayout')
-    });
-  },
-  
-  /**
-    @private
-    Renders view settings (class names and id, for instance) to the context.
-  */
-  renderViewSettings: function(context) {
-    this._updateViewRenderer();
-    this.renderLayout(context, YES); // provide backwards compatibility
-    this._viewRenderer.render(context);
-  },
-  
-  /**
-    @private
-    Updates view settings on the context (including class names).
-  */
-  updateViewSettings: function() {
-    this._updateViewRenderer();
-    this._viewRenderer.update();
-  },
-  
-  /**
-  @private
-  
     Invoked by createLayer() and updateLayer() to actually render a context.
     This method calls the render() method on your view along with any 
     renderMixin() methods supplied by mixins you might have added.
     
-    You should not override this method directly. Nor should you call it. It is OLD.
+    You should not override this method directly.  However, you might call
+    this method if you choose to override updateLayer() or createLayer().
     
     @param {SC.RenderContext} context the render context
     @param {Boolean} firstTime YES if this is creating a layer
     @returns {void}
   */
   prepareContext: function(context, firstTime) {
-    // 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 :)
+    var mixins, len, idx, layerId, bgcolor, cursor, classNames;
+  
+    // do some initial setup only needed at create time.
     if (firstTime) {
-      this.renderToContext(context);
-    } else {
-      this.updateLayer(context);
+      // 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.endPropertyChanges() ;
   },
   
   /**
@@ -1396,62 +1078,21 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     walk down the childView chain, rendering all of the children in a nested
     way.
     
-    If a context is provided, it is always assumed to be firstTime.
-    
-    @deprecated In SproutCore 1.1. Use renderContent and updateContent explicitly instead.
     @param {SC.RenderContext} context the context
     @param {Boolean} firstName true if the layer is being created
     @returns {SC.RenderContext} the render context
-    @test in render and renderer
+    @test in render
   */
   renderChildViews: function(context, firstTime) {
-    if (firstTime || context) {
-      // we pass along firstTime for compatibility. Some older (less wise) views may
-      // think it will work. Well, it wouldn't, but we'll make it work.
-      this.renderContent(context, firstTime);
-    } else {
-      this.updateContent(context);
-    }
-    return context;
-  },
-  
-  /**
-    @private
-    Views are content suppliers for renderers. That is, views pass themselves to renderers
-    for renderers' "content" properties. Content providers have two functions: renderContent and updateContent.
-    This is the first of those.
-    
-    @param {SC.RenderContext} context
-    @param {Boolean} firstTime For compatibility (do not use; if not first time, call updateContent).
-  */
-  renderContent: function(context, firstTime) {
     var cv = this.get('childViews'), len = cv.length, idx, view ;
     for (idx=0; idx<len; ++idx) {
       view = cv[idx] ;
       if (!view) continue;
       context = context.begin(view.get('tagName')) ;
-      view.renderToContext(context, firstTime);
+      view.prepareContext(context, firstTime) ;
       context = context.end() ;
     }
-  },
-  
-  /**
-    @private
-    Views are content suppliers for renderers. That is, views pass themselves to renderers
-    for renderers' "content" properties. Content providers have two functions: renderContent and updateContent.
-    This is the first of those.
-    
-    For old-style rendering, the render context created by the parent renderer is passed along
-    as well.
-  */
-  updateContent: function(optionalContext) {
-    var cv = this.get('childViews'), len = cv.length, idx, view ;
-    for (idx=0; idx<len; ++idx) {
-      view = cv[idx] ;
-      if (!view) continue;
-      
-      view.updateLayer(optionalContext);
-    }
+    return context ;  
   },
   
   /**
@@ -1473,18 +1114,9 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @param {SC.RenderContext} context the render context
     @param {Boolean} firstTime YES if this is creating a layer
     @returns {void}
-  */   
+  */
   render: function(context, firstTime) {
-    var renderer = this.renderer;
-    if (this.createRenderer && renderer) {
-      if (firstTime) { 
-        renderer.render(context);
-      } else {
-        renderer.update();
-      }
-    } else {
-      if (firstTime) this.renderChildViews(context, firstTime);
-    }
+    if (firstTime) this.renderChildViews(context, firstTime) ;
   },
   
   
@@ -1505,6 +1137,16 @@ 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++){
+      child = childViews[i];
+      if(child._notifyDidAppendToDocument){
+        child._notifyDidAppendToDocument();
+      }
+    }    
+  }.observes('childViews'),
+  
   // ..........................................................
   // STANDARD RENDER PROPERTIES
   // 
@@ -1551,11 +1193,18 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     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.
-    
+
+    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
+    'isVisible', which is:
+      a.  More efficient
+      b.  More correct, because we can guarantee the order of operations
+
     @property {Array}
     @readOnly
   */
-  displayProperties: ['isFirstResponder', 'isVisible'],
+  displayProperties: ['isFirstResponder'],
   
   /**
     You can set this to an SC.Cursor instance; its class name will 
@@ -1603,7 +1252,6 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   updateLayerLocationIfNeeded: function(force) {
     if (this.get('layerLocationNeedsUpdate')) {
-      this.set('layerLocationNeedsUpdate', NO) ;
       this.updateLayerLocation() ;
     }
     return this ;
@@ -1667,6 +1315,9 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     
     parentNode = parentView = node = nextNode = null ; // avoid memory leaks
+
+    this.set('layerLocationNeedsUpdate', NO) ;
+
     return this ; 
   },
   
@@ -1824,7 +1475,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   */
   nextValidKeyView: function() {
     var seen = [], 
-        rootView = this.pane(), ret = this.get('nextKeyView');
+        rootView = this.get('pane'), ret = this.get('nextKeyView');
     
     if(!ret) ret = rootView._computeNextValidKeyView(this, seen);
     
@@ -1889,7 +1540,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       return this;
     }
     seen.push(this); // avoid cycles
-    
+
     // find next sibling
     if (!ret) {
       children = this.get('childViews');
@@ -1904,7 +1555,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     }
     return ret ;
   },
-  
+
   // .......................................................
   // CORE DISPLAY METHODS
   //
@@ -1919,45 +1570,15 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     var parentView, path, root, idx, len, lp, dp ;
     
     sc_super() ;
-    
-    // set up theme
-    var baseTheme = this.baseTheme;
-    this.baseTheme = this._baseThemeProperty;
-    this.set("baseTheme", baseTheme);
-    
-    var theme = this.theme;
-    this.theme = this._themeProperty;
-    this.set("theme", theme);
-    
-    // find render path (to be removed in SC 2.0?)
-    var renderAge = -1, rendererAge = -1, currentAge = 0, c = this.constructor;
-    while (c && c.prototype.render) {
-      if (renderAge < 0 && c.prototype.render !== this.render) renderAge = currentAge;
-      if (rendererAge < 0 && c.prototype.createRenderer !== this.createRenderer) rendererAge = currentAge;
-      if (rendererAge >= 0 && renderAge >= 0) break;
-      currentAge = currentAge + 1;
-      c = c.superclass;
-    }
-    
-    // which one?
-    if (renderAge < rendererAge && renderAge >= 0) {
-      this._useRenderFirst = YES;
-    } else {
-      this._useRenderFirst = NO;
-    }
-    
-    // register for event handling now if we're not a materialized view
-    // (materialized views register themselves as needed)
-    if (!this.get('isMaterialized')) {
-      SC.View.views[this.get('layerId')] = this ;
-    }
-    
+
+    // Register this view for event handling
+    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 
@@ -2139,8 +1760,16 @@ 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.
-    if (key === 'layout') this.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];
+      if(dependents && dependents.indexOf('layout')!=-1) layoutChange = true;
+    }
+    if(key==='layout' || layoutChange) this.layoutDidChange();
     // Resume notification as usual.
     sc_super();
   },
@@ -2199,216 +1828,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     
     return this ;
   },
-
-
-  /**
-    Animate a given property using CSS animations.
-
-    Takes a key, value and either a duration, or a hash of options.
-    The options hash has the following parameters
-      - duration: Duration of animation in seconds
-      - callback: Callback method to run when animation completes
-      - timing: Animation timing function
-
-    @param {String|Hash} key
-    @param {Object} value
-    @params {Number|Hash} duration or options
-    @returns {SC.View} receiver
-  */
-  animate: function(keyOrHash, valueOrOptions, optionsOrCallback, callback) {
-    var hash, options;
-
-    if (SC.typeOf(keyOrHash) === SC.T_HASH) {
-      hash = keyOrHash;
-      options = valueOrOptions;
-      callback = optionsOrCallback;
-    } else {
-      hash = {};
-      hash[keyOrHash] = valueOrOptions;
-      options = optionsOrCallback;
-    }
-
-    if (SC.typeOf(options) === SC.T_NUMBER) {
-      options = { duration: options };
-    } else if (SC.typeOf(options) !== SC.T_HASH) {
-      throw "Must provide options hash or duration!";
-    }
-
-    if (callback) options.callback = callback;
-
-
-    var layout = SC.clone(this.get('layout')), didChange = NO, value, cur, animValue, curAnim;
-    
-    for(key in hash) {
-      if (!hash.hasOwnProperty(key)) continue;
-      value = hash[key];
-      cur = layout[key];
-
-      if (SC.ANIMATABLE_PROPERTIES.contains(key)) {
-        curAnim = layout['animate'+key.capitalize()];
-        
-        if (value === null || value === undefined) {
-          throw "Can only animate to an actual value!";
-        } else {
-          if (cur !== value) didChange = YES;
-
-          // FIXME: We should check more than duration
-          // Also, will we allow people to just set a number instead of a hash? If so, we have to account for that.
-          if (curAnim && curAnim.duration !== options.duration) didChange = YES ;
-
-          layout[key] = value ;
-          
-          // I'm pretty sure we want to be cloning this because we may be applying it
-          // to multiple properties which can be edited independently
-          layout['animate'+key.capitalize()] = SC.clone(options);
-        }
-      } else {
-        if (cur !== value) didChange = YES;
-        layout[key] = value;
-      }
-    }
-
-    // now set adjusted layout
-    if (didChange) this.set('layout', layout) ;
-    
-    return this ;
-  },
-
-  /**
-  Resets animation, stopping all existing animations.
-  */
-  resetAnimation: function() {
-    var layout = this.get('layout'), didChange = NO, key;
-    for (key in layout) {
-      if (key.substring(0,7) === 'animate') {
-        didChange = YES;
-        delete layout[key];
-      }
-    }
-    if (didChange) {
-      this.set('layout', layout);
-      this.notifyPropertyChange('layout');
-    }
-    return this;
-  },
-
-  _scv_willRenderAnimations: function(){
-    if (SC.platform.supportsCSSTransitions) {
-      var layer = this.get('layer'),
-          currentStyle = layer ? layer.style : null,
-          newStyle = this.get('layoutStyle'),
-          transitionStyle = newStyle[SC.platform.domCSSPrefix+"Transition"],
-          layout = this.get('layout'),
-          key;
-
-      // Handle existing animations
-      if (this._activeAnimations) {
-        for(key in this._activeAnimations){
-          // TODO: Check for more than duration
-          if (
-            newStyle[key] !== currentStyle[key] ||
-            !this._pendingAnimations || !this._pendingAnimations[key] ||
-            this._activeAnimations[key].duration !== this._pendingAnimations[key].duration
-          ) {
-            var callback = this._activeAnimations[key].callback;
-            if (callback) {
-              if (this._animatedTransforms && this._animatedTransforms.length > 0) {
-                for (idx=0; idx < this._animatedTransforms.length; idx++) {
-                  this._scv_runAnimationCallback(callback, null, this._animatedTransforms[idx], YES);
-                }
-                this._animatedTransforms = null;
-              } else {
-                this._scv_runAnimationCallback(callback, null, key, YES);
-              }
-            }
-
-            this._scv_removeAnimationFromLayout(key, YES);
-          }
-        }
-      }
-
-      this._activeAnimations = this._pendingAnimations;
-      this._pendingAnimations = null;
-    } else {
-      // Transitions not supported
-      var key;
-      for (key in this._pendingAnimations) {
-        var callback = this._pendingAnimations[key].callback;
-        if (callback) this._scv_runAnimationCallback(callback, null, key, NO);
-        this._scv_removeAnimationFromLayout(key, NO, YES);
-      }
-      this._activeAnimations = this._pendingAnimations = null;
-    }
-  },
-
-  _scv_removeAnimationFromLayout: function(propertyName, updateStyle, isPending) {
-
-    if (updateStyle) {
-      var layer = this.get('layer'),
-          updatedCSS = [], key;
-      for(key in this._activeAnimations) {
-        if (key !== propertyName) updatedCSS.push(this._activeAnimations[key].css);
-      }
-
-      // FIXME: Not really sure this is the right way to do it, but we don't want to trigger a layout update
-      layer.style[SC.platform.domCSSPrefix+"Transition"] = updatedCSS.join(', ');
-    }
-
-
-    var layout = this.get('layout');
-
-    if (propertyName === '-'+SC.platform.cssPrefix+'-transform' && this._animatedTransforms && this._animatedTransforms.length > 0) {
-      for(idx=0; idx < this._animatedTransforms.length; idx++) {
-        delete layout['animate'+this._animatedTransforms[idx].capitalize()];
-      }
-      this._animatedTransforms = null;
-    }
-    delete layout['animate'+propertyName.capitalize()];
-
-    if (!isPending) delete this._activeAnimations[propertyName];
-  },
-
-  _scv_runAnimationCallback: function(callback, evt, propertyName, cancelled) {
-    if (callback) {
-      if (SC.typeOf(callback) !== SC.T_HASH) callback = { action: callback };
-      callback.source = this;
-      if (!callback.target) callback.target = this;
-    }
-    SC.View.runCallback(callback, { event: evt, propertyName: propertyName, view: this, isCancelled: cancelled });
-  },
-
-  /**
-    Called when animation ends, should not usually be called manually
-  */
-  _scv_animationEnd: function(evt){
-    // WARNING: Sometimes this will get called more than once for a property. Not sure why.
-
-    var propertyName = evt.originalEvent.propertyName,
-        layout = this.get('layout'),
-        animation;
-
-    animation = this._activeAnimations ? this._activeAnimations[propertyName] : null;
-
-    if(animation) {
-      if (animation.callback) {
-        // Charles says this is a good idea
-        SC.RunLoop.begin();
-        // We're using invokeLater so we don't trigger any layout changes from the callbacks until the animations are done
-        if (this._animatedTransforms && this._animatedTransforms.length > 0) {
-          for (idx=0; idx < this._animatedTransforms.length; idx++) {
-            this.invokeLater('_scv_runAnimationCallback', 1, animation.callback, evt, this._animatedTransforms[idx], NO);
-          }
-        } else {
-          this.invokeLater('_scv_runAnimationCallback', 1, animation.callback, evt, propertyName, NO);
-        }
-        SC.RunLoop.end();
-      }
-
-      this._scv_removeAnimationFromLayout(propertyName, YES);
-    }
-  },
-
-
+  
   /** 
     The layout describes how you want your view to be positions on the 
     screen.  You can define the following properties:
@@ -2486,7 +1906,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   
   /**
     Converts a frame offset in the coordinates of another view system to the 
-    reciever's view.
+    receiver's view.
     
     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
@@ -2628,6 +2048,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     dH = pdim.height;
     dW = pdim.width;
     
+    
     // handle left aligned and left/right 
     if (!SC.none(lL)) {
       if(SC.isPercentage(lL)){
@@ -2647,7 +2068,9 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     // handle right aligned
     } else if (!SC.none(lR)) {
       if (SC.none(lW)) {
-        if (SC.isPercentage(lL)) f.width = dW - (dW*lR) ;
+        if (SC.isPercentage(lR)) {
+          f.width = dW - (dW*lR) ;
+        }
         else f.width = dW - lR ;
         f.x = 0 ;
       } else {
@@ -2833,7 +2256,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @property {Rect}
   */
   contentClippingFrame: function() {
-    return this.get("clippingFrame");
+    return this.get('clippingFrame');
   }.property('clippingFrame').cacheable(),
 
   /** @private
@@ -2854,7 +2277,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       // frame changes should be sent all the time unless this property is 
       // present to indicate that we want the old 1.0 API behavior instead.
       // 
-      if (!cv.useStaticLayout) {
+      if (!cv.hasStaticLayout) {
         cv.notifyPropertyChange('clippingFrame') ;
         cv._sc_view_clippingFrameDidChange();
       }
@@ -2872,25 +2295,42 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @test in viewDidResize
   */
   parentViewDidResize: function() {
-    var layout = this.get('layout'), isPercentageFunc, isPercentage, isFixed;
-    
-    // only resizes if the layout does something other than left/top - fixed
-    // size.
-    isFixed = (
-      (layout.left !== undefined) && (layout.top !== undefined) &&
-      (layout.width !== undefined) && (layout.height !== undefined)
-    );
+    var frameMayHaveChanged, layout, isFixed, isPercentageFunc, isPercentage;
+
+    // If this view uses static layout, our "do we think the frame changed?"
+    // logic is not applicable and we simply have to assume that the frame may
+    // have changed.
+    if (this.useStaticLayout) {
+      frameMayHaveChanged = YES;
+    }
+    else {
+      layout = this.get('layout');
+    
+      // only resizes if the layout does something other than left/top - fixed
+      // size.
+      isFixed = (
+        (layout.left !== undefined) && (layout.top !== undefined) &&
+        (layout.width !== undefined) && (layout.height !== undefined)
+      );
+
+
+      // If it's fixed, our frame still could have changed if it's fixed to a
+      // percentage of the parent.
+      if (isFixed) {
+        isPercentageFunc = SC.isPercentage;
+        isPercentage = (isPercentageFunc(layout.left) || 
+                        isPercentageFunc(layout.top) ||
+                        isPercentageFunc(layout.width) || 
+                        isPercentageFunc(layout.right) ||
+                        isPercentageFunc(layout.centerX) || 
+                        isPercentageFunc(layout.centerY));
+      }
 
-    isPercentageFunc = SC.isPercentage;
-    isPercentage = (isPercentageFunc(layout.left) || 
-                    isPercentageFunc(layout.top) ||
-                    isPercentageFunc(layout.width) || 
-                    isPercentageFunc(layout.right) ||
-                    isPercentageFunc(layout.centerX) || 
-                    isPercentageFunc(layout.centerY));
+      frameMayHaveChanged = (!isFixed || isPercentage);
+    }
 
     // Do we think there's a chance our frame will have changed as a result?
-    if (!isFixed || isPercentage) {
+    if (frameMayHaveChanged) {
       // There's a chance our frame changed.  Invoke viewDidResize(), which
       // will notify about our change to 'frame' (if it actually changed) and
       // appropriately notify our child views.
@@ -2996,16 +2436,16 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
   },
 
   /**
-    Setting wantsAcceleratedLayer to YES will use transforms to move the
-    layer when available. On some platforms transforms are hardware accelerated.
+    Setting wantsAcceleratedLayer to YES will use 3d transforms to move the
+    layer when available.
   */
   wantsAcceleratedLayer: NO,
 
   /**
-    Specifies whether transforms can be used to move the layer.
+    Specifies whether 3d transforms can be used to move the layer.
   */
   hasAcceleratedLayer: function(){
-    return this.get('wantsAcceleratedLayer') && SC.platform.supportsCSSTransforms;
+    return this.get('wantsAcceleratedLayer') && SC.platform.supportsAcceleratedLayers;
   }.property('wantsAcceleratedLayer').cacheable(),
 
 
@@ -3036,66 +2476,30 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         lMH = layout.maxHeight,
         lcX = layout.centerX, 
         lcY = layout.centerY,
-        canUseAcceleratedLayer = this.get('hasAcceleratedLayer'),
-        translateTop = null,
-        translateLeft = null;
+        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 ".fmt(this) +
-              "staticLayout is disabled","%@".fmt(this),-1);
+      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 ".fmt(this) +
-                "staticLayout is disabled","%@".fmt(this),-1);  
+      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 ;
     }
 
-    if (SC.platform.supportsCSSTransforms) {
-      // Check to see if we're using transforms
-      var animatingTransforms = NO, transformAnimationDuration;
-      for(key in layout){
-        if (key.substring(0,7) === 'animate') {
-          if (SC.CSS_TRANSFORM_MAP[key.substring(7).camelize()]) {
-            animatingTransforms = YES;
-
-            if (this._pendingAnimations && this._pendingAnimations['-'+SC.platform.cssPrefix+'-transform']) {
-              throw "Animations of transforms must be executed simultaneously!";
-            }
-
-            // TODO: If we want to allow it to be set as just a number for duration we need to add support here
-            if (transformAnimationDuration && layout[key].duration !== transformAnimationDuration) {
-              console.warn("Can't animate transforms with different durations! Using first duration specified.");
-              layout[key].duration = transformAnimationDuration;
-            }
-            transformAnimationDuration = layout[key].duration;
-
-            // FIXME: There will also be problems if we have conflicting timings and callbacks
-          }
-        }
-      }
-
-      // If we're animating other transforms at different speeds, don't use acceleratedLayer
-      if (
-        animatingTransforms &&
-        (
-          (layout['animateTop'] && layout['animateTop'].duration !== transformAnimationDuration) ||
-          (layout['animateLeft'] && layout['animateLeft'].duration !== transformAnimationDuration)
-        )
-      ) {
-        canUseAcceleratedLayer = NO;
-      }
-    }
-
     // X DIRECTION
-
+    
     // handle left aligned and left/right
     if (!SC.none(lL)) {
       if(SC.isPercentage(lL)) {
         ret.left = (lL*100)+"%";  //percentage left
-      } else if (canUseAcceleratedLayer && !SC.empty(lW)) {
+      } else if (hasAcceleratedLayer && SC.empty(lR)) {
         translateLeft = Math.floor(lL);
         ret.left = 0;
       } else {
@@ -3144,7 +2548,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
         ret.marginLeft = Math.floor(lcX - ret.width/2) ;
       }else {
         // This error message happens whenever width is not set.
-        console.warn("You have to set width and centerX using both percentages or pixels");
+        console.warn("You have to set width and centerX usign both percentages or pixels");
         ret.marginLeft = "50%";
       }
       ret.right = null ;
@@ -3177,7 +2581,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     if (!SC.none(lT)) {
       if(SC.isPercentage(lT)) {
         ret.top = (lT*100)+"%";
-      } else if (canUseAcceleratedLayer && !SC.empty(lH)) {
+      } else if (hasAcceleratedLayer && SC.empty(lB)) {
         translateTop = Math.floor(lT);
         ret.top = 0;
       } else {
@@ -3252,11 +2656,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     
     // if zIndex is set, use it.  otherwise let default shine through
     ret.zIndex = SC.none(layout.zIndex) ? null : layout.zIndex.toString();
-
-    // if opacity is set, use it. otherwise let default shine through
-    ret.opacity = SC.none(layout.opacity) ? null : layout.opacity.toString();
-    ret.mozOpacity = ret.opacity; // older Firefox?
-
+    
     // if backgroundPosition is set, use it.
     // otherwise let default shine through
     ret.backgroundPosition = SC.none(layout.backgroundPosition) ?
@@ -3270,114 +2670,17 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
       if (ret[x]===0) ret[x]=null;
     }
 
-    if (SC.platform.supportsCSSTransforms) {
-      // Handle transforms
-      var transformAttribute = SC.platform.domCSSPrefix+'Transform',
-          layer = this.get('layer'),
-          // FIXME: This is not the best way to do it, we should track these locally
-          currentTransforms = (layer ? layer.style[transformAttribute] : '').split(' '),
-          halTransforms, specialTransforms = [], idx;
-
-      if (canUseAcceleratedLayer) {
-        // Remove previous transforms
-        if (this._lastAcceleratedTransforms) currentTransforms.removeObjects(this._lastAcceleratedTransforms);
-
-        halTransforms = ['translateX('+(translateLeft || 0)+'px)', 'translateY('+(translateTop || 0)+'px)'];
-
-        // FIXME: This join.match is a bit hackish
-        if (SC.platform.supportsCSS3DTransforms && !currentTransforms.join(' ').match('translateZ')) {
-          halTransforms.push('translateZ(0px)');
-        }
-
-        // Store for next time
-        this._lastAcceleratedTransforms = halTransforms;
-      }
-
-      // Handle special CSS transform attributes
-      var specialTransforms = [], transformName;
-      for(transformName in SC.CSS_TRANSFORM_MAP) {
-        var cleanedTransforms = [], idx;
-        for(idx=0; idx < currentTransforms.length; idx++) {
-          if (!currentTransforms[idx].match(new RegExp('^'+transformName+'\\\('))) {
-            cleanedTransforms.push(currentTransforms[idx]);
-          }
-        }
-        currentTransforms = cleanedTransforms;
-
-        if (layout[transformName]) {
-          specialTransforms.push(SC.CSS_TRANSFORM_MAP[transformName](layout[transformName]));
-        } 
-      }
-      specialTransforms = specialTransforms.join(' ');
-
-      var allTransforms = currentTransforms.concat(halTransforms, specialTransforms).without(undefined).without('').join(' ');
-
-      // Set transform attribute
-      if (allTransforms !== '') ret[transformAttribute] = allTransforms;
-    }
-
-    // Temporary fix to not break SC.Animatable
-    if (!this.isAnimatable) {
-
-      // Handle animations
-      var transitions = [], animation, propertyKey;
-      this._animatedTransforms = [];
-
-      for(key in layout) {
-        if (key.substring(0,7) === 'animate') {
-          // FIXME: If we want to allow it to be set as just a number for duration we need to add support here
-          animation = layout[key];
-
-          if (animation.timing) {
-            if (SC.typeOf(animation.timing) != SC.T_STRING) {
-              animation.timing = "cubic-bezier("+animation.timing[0]+", "+animation.timing[1]+", "+
-                                                 animation.timing[2]+", "+animation.timing[3]+")";
-            }
-          } else {
-            animation.timing = 'linear';
-          }
-
-          propertyKey = key.substring(7).camelize();
-
-          // TODO: This is a weird conditional, we can probably clean it up
-          if (
-            SC.platform.supportsCSSTransforms &&
-            (
-              (
-                canUseAcceleratedLayer && (
-                  (propertyKey === 'top' && !SC.empty(translateTop)) ||
-                  (propertyKey === 'left' && !SC.empty(translateLeft))
-                )
-              ) ||
-              SC.CSS_TRANSFORM_MAP[propertyKey]
-            )
-          ) {
-            this._animatedTransforms.push(propertyKey);
-            propertyKey = '-'+SC.platform.cssPrefix+'-transform';
-          }
-
-          animation.css = propertyKey + " " + animation.duration + "s " + animation.timing;
-
-          // If it's a transform this may have already been set
-          if (!this._pendingAnimations) this._pendingAnimations = {};
-          if (!this._pendingAnimations[propertyKey]) {
-            this._pendingAnimations[propertyKey] = animation;
-            transitions.push(animation.css);
-          }
-        }
-      }
-
-      if (SC.platform.supportsCSSTransitions) ret[SC.platform.domCSSPrefix+"Transition"] = transitions.length > 0 ? transitions.join(", ") : null;
-
+    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 ;
   }.property().cacheable(),
   
@@ -3563,11 +2866,7 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     @test in layoutChildViews
   */
   renderLayout: function(context, firstTime) {
-    this._viewRenderer.attr({
-      layoutStyle: this.get('layoutStyle')
-    });
-    this._scv_willRenderAnimations();
-    this._viewRenderer.render(context);
+    context.addStyle(this.get('layoutStyle'));
   },
   
   /** walk like a duck */
@@ -3651,188 +2950,6 @@ SC.View = SC.Responder.extend(SC.DelegateSupport,
     
     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();
   }
 });
 
@@ -4192,40 +3309,5 @@ SC.View.unload = function() {
   }   
 } ;
 
-SC.View.runCallback = function(callback){
-  var additionalArgs = SC.$A(arguments).slice(1),
-      typeOfAction = SC.typeOf(callback.action);
-
-  // if the action is a function, just try to call it.
-  if (typeOfAction == SC.T_FUNCTION) {
-    callback.action.apply(callback.target, additionalArgs);
-
-  // otherwise, action should be a string.  If it has a period, treat it
-  // like a property path.
-  } else if (typeOfAction === SC.T_STRING) {
-    if (callback.action.indexOf('.') >= 0) {
-      var path = callback.action.split('.') ;
-      var property = path.pop() ;
-
-      var target = SC.objectForPropertyPath(path, window) ;
-      var action = target.get ? target.get(property) : target[property];
-      if (action && SC.typeOf(action) == SC.T_FUNCTION) {
-        action.apply(target, additionalArgs);
-      } else {
-        throw 'SC.Animator could not find a function at %@'.fmt(callback.action) ;
-      }
-
-    // otherwise, try to execute action direction on target or send down
-    // responder chain.
-    // FIXME: Add support for additionalArgs to this
-    // } else {
-    //  SC.RootResponder.responder.sendAction(callback.action, callback.target, callback.source, callback.source.get("pane"), null, callback.source);
-    }
-  }
-};
-
-
 //unload views for IE, trying to collect memory.
 if(SC.browser.msie) SC.Event.add(window, 'unload', SC.View, SC.View.unload) ;
-
-