sproutcore 0.9.1 → 0.9.2

data/frameworks/sproutcore/views/{button.js → button/button.js}

@@ -1,17 +1,17 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('views/view') ;
 require('views/label') ;
+require('mixins/control') ;
 
 // Constants
 SC.TOGGLE_BEHAVIOR = 'toggle';
 SC.PUSH_BEHAVIOR =   'push';
 SC.TOGGLE_ON_BEHAVIOR = "on";
 SC.TOGGLE_OFF_BEHAVIOR = "off" ;  
-SC.MIXED_STATE = '__MIXED__' ;
 
 /** @class
 
@@ -19,12 +19,15 @@ SC.MIXED_STATE = '__MIXED__' ;
   enabled or disabled state.
   
   @extends SC.View
+  @extends SC.Control
+  @author Charles Jolley
+  @version 1.0
+  
 */
-SC.ButtonView = SC.View.extend(
-  /** @scope SC.ButtonView.prototype */ 
-  {
+SC.ButtonView = SC.View.extend(SC.Control,
+/** @scope SC.ButtonView.prototype */ {
   
-  emptyElement: '<a href="javascript:;" class="regular"><span class="button-inner"><span class="label"></span></span></a>',
+  emptyElement: '<a href="javascript:;" class="sc-button-view regular"><span class="button-inner"><span class="label"></span></span></a>',
   
   // PROPERTIES
   
@@ -81,8 +84,7 @@ SC.ButtonView = SC.View.extend(
     should set a class name on the HTML with the same value to allow CSS 
     styling.
     
-    The default SproutCore theme supports "regular", "back", "checkbox", and
-    "radio"
+    The default SproutCore theme supports "regular", "checkbox", and "radio"
   */
   theme: 'regular',
   
@@ -113,71 +115,75 @@ SC.ButtonView = SC.View.extend(
   buttonBehavior: SC.PUSH_BEHAVIOR,
   
   /**
-    set to false to disable the button. clicks will be ignored.
+    If NO the button will be disabled. 
     
-    @type bool
+    @type Bool
   */  
-  isEnabled: true,
-  isEnabledBindingDefault: SC.Binding.OneWayBool,
+  isEnabled: YES,
   
   /**
-    this is the buttons selection state.  Returns true, false or SC.MIXED_STATE.
+    button's selection state.  Returns YES, NO, or SC.MIXED_STATE
   */
-  isSelected: false,
-  isSelectedBindingDefault: SC.Binding.OneWayBool,
+  isSelected: NO,
 
   /**
-    if set to true, then this button will be triggered when you hit return
-    while focused on a form view.  This will also apply the 'def' class name
-    to the button.
+    If YES, then this button will be triggered when you hit return.
+    
+    This is the same as setting the keyEquivalent to 'return'.  This will also
+    apply the "def" classname to the button.
   */
-  isDefault: false,
+  isDefault: NO,
   isDefaultBindingDefault: SC.Binding.OneWayBool,
   
   /**
-    is set to true, then this button will be triggered when you hit escape
-    inside a pane.
+    If YES, then this button will be triggered when you hit escape.
+    
+    This is the same as setting the keyEquivalent to 'escape'.
   */  
-  isCancel: false,
+  isCancel: NO,
   isCancelBindingDefault: SC.Binding.OneWayBool,
   
   /**
-    set to true if you want the internal element with the class name 
-    'label' to be localized on init.
+    If YES, then the title will be localized.
+  */
+  localize: NO,
+  
+  /**
+    The selector path to the element that contains the button title. 
+    
+    This property is only used if you try to get or set the title property.
   */
-  localize: false,
+  titleSelector: '.label',
   
   /**
-    this property can be used to edit the contents of the label element,
-    (if there is one).
+    The button title.
+    
+    This property is observable and bindable.
+    
+    @field {String}
   */
-  labelText: function(key, value) {
+  title: function(key, value) {
+    
     // set the value of the label text.  Possibly localize and set innerHTML.
     if (value !== undefined) {
-      if (this._labelText != value) {
-        var text = this._labelText = value ;
-        var lsel = this.get('labelSelector') ;
+      if (this._title != value) {
+        var text = this._title = value ;
+        var lsel = this.get('titleSelector') ;
         var el = (lsel) ? this.$sel(lsel) : this.rootElement ;
 
         if (this.get('localize')) text = text.loc() ;
-        if (el) Element.update(el, text) ;
-      }
-      
-      // lazily fetch the label text.  This only happens if localization is
-      // turned off.
-      if (!this._labelText) {
-        var el = this.$sel(this.labelSelector) ;
-        this._labelText = (el) ? el.innerHTML : '' ;
+        el.innerHTML = text ;
       }
-      return this._labelText ;
     }
-    
-    // return value.
-    return this._labelText ;
+
+    // lazily fetch the label text.
+    if (!this._title) {
+      var el = this.$sel(this.get('titleSelector')) ;
+      this._title = (el) ? el.innerHTML : '' ;
+    }
+    return this._title ;
   }.property(),
   
-  labelSelector: '.label',
-  
   /**
     The name of the action you want triggered when the button is pressed.  
     
@@ -244,8 +250,7 @@ SC.ButtonView = SC.View.extend(
     this.setClassName('active', true);
     this.didTriggerAction();
     this._action(evt);
-    var view = this;
-    setTimeout(function() { view.setClassName('active', false); }, 200);
+    this.invokeLater('setClassName', 200, 'active', false) ;
     return true;
   },
   
@@ -257,16 +262,20 @@ SC.ButtonView = SC.View.extend(
   /** @private */
   init: function() {
     arguments.callee.base.call(this) ;
-    this._updateClassForState() ;
     
+    // setup initial CSS clases
+    this._isDefaultOrCancelObserver() ;
+    
+    // If we need to localze, handle it...
     var el ;
-    var lsel = this.get('labelSelector') ;
-    if (this.get('localize') && (el = (lsel) ? this.$sel(lsel) : this.rootElement)) {
-      this._labelText = el.innerHTML.strip() ;
-      Element.update(el, this._labelText.loc()) ;
+    var sel = this.get('titleSelector') ;
+    if (this.get('localize') && sel && (el = this.$sel(sel))) {
+      this._title = (el.innerHTML || '').strip() ;
+      el.innerHTML = this._title.loc() ;
     }
   },
 
+  // determines the target selected state
   _selectedStateFromValue: function(value) {
     var targetValue = this.get('toggleOnValue') ;
     var state ;
@@ -275,7 +284,7 @@ SC.ButtonView = SC.View.extend(
       if (value.length == 1) {
         state = (value[0] == targetValue) ;
       } else {
-        state = (value.include(targetValue)) ? SC.MIXED_STATE : false ;
+        state = (value.indexOf(targetValue) >= 0) ? SC.MIXED_STATE : false ;
       }
     } else {
       state = (value == targetValue) ;
@@ -288,53 +297,46 @@ SC.ButtonView = SC.View.extend(
     if (target != this) return ;
 
     // handle changes to the value
-    if (key == 'value') {
+    switch(key) {
+
       // determine the new selection state.
-      value = this.get('value') ;
-      if (value == this._value) return ; // process value one time.
-      this._value = value ;
-      
-      // if the new selected state does not match the computed value, set it.
-      var state = this._selectedStateFromValue(value) ;
-      if (!(this.get('isSelected') == state)) {
-        this.set('isSelected', state) ;
-        this._updateClassForState() ;
-      }
-      
-    // handle changes to the selected state
-    // forward to value if needed...
-    } else if (key == "isSelected") {
-      var newState = this.get('isSelected') ;
-      var curState = this._selectedStateFromValue(this.get('value')) ;
-      if (curState != newState) {
-        var valueKey = (newState) ? 'toggleOnValue' : 'toggleOffValue' ;
-        this.set('value', this.get(valueKey)) ;
-      }
-      this._updateClassForState() ;
+      case 'value':
+        value = this.get('value') ;
+        if (value == this._value) return ; // process value one time.
+        this._value = value ;
       
-    // otherwise, handle changes to the isEnabled or isDefault states...
-    } else if ((key == 'isEnabled') || (key == 'isDefault')) {
-      this._updateClassForState() ;
+        // set the new selected state if it does not match
+        var state = this._selectedStateFromValue(value) ;
+        this.setIfChanged('isSelected', state) ;
+        break ;
+
+      // forward to value if needed.
+      case 'isSelected':
+        var newState = this.get('isSelected') ;
+        var curState = this._selectedStateFromValue(this.get('value')) ;
+        if (curState != newState) {
+          var valueKey = (newState) ? 'toggleOnValue' : 'toggleOffValue' ;
+          this.set('value', this.get(valueKey)) ;
+        }
+        break ;
+        
+      // otherwise do nothing
+      default:
+        break ;
     }
   },
   
-  _updateClassForState: function() {
-    var enabled = !!this.get('isEnabled') ; // force to bool.
-    var tagName = this.rootElement.tagName.toLowerCase() ;
-    if (tagName == "button") {
-      this.rootElement.disabled = !enabled ;
-    }
-    
-    this.setClassName('disabled', !enabled) ;
-    this.setClassName('def', this.get('isDefault')) ;
+  _isDefaultOrCancelObserver: function() {
+    var isDef = !!this.get('isDefault') ;
+    var isCancel = !isDef && this.get('isCancel') ;
+
+    this.setClassName('def', isDef) ;
+
+    var key = this.get('keyEquivalent') ;
+    if (isDef && key != 'return') this.set('keyEquivalent', 'return') ;
+    if (isCancel && key != 'escape') this.set('keyEquivalent', 'escape') ;
+  }.observes('isDefault', 'isCancel'),
     
-    // handle selected state.
-    var sel =this.get('isSelected') ;
-    var mixed = (sel == SC.MIXED_STATE) ;
-    this.setClassName('mixed', mixed) ;
-    this.setClassName('sel', ((mixed) ? false : sel)) ;
-  },
-  
   // on mouse down, set active only if enabled.  
   /** @private */
   mouseDown: function(evt) {

data/frameworks/sproutcore/views/button/checkbox.js

@@ -0,0 +1,29 @@
+// ==========================================================================
+// SC.CheckboxView
+// ==========================================================================
+
+require('views/button/button');
+
+/** @class
+
+  Renders a checkbox button view specifically.
+  
+  This view is basically a button view preconfigured to generate the correct
+  HTML and to set to use a TOGGLE_BEHAVIOR for its buttons.
+  
+  This view renders a simulated checkbox that can display a mixed state and 
+  has other features not found in platform-native controls.  If you want to 
+  use the platform native version instead, see SC.CheckboxFieldView.
+
+  @extends SC.ButtonView
+  @author    Charles Jolley 
+  @version 1.0
+*/
+SC.CheckboxView = SC.ButtonView.extend(
+/** @scope SC.CheckboxView.prototype */ {
+
+  emptyElement: '<a href="javascript:;" class="sc-checkbox-view sc-button-view button checkbox"><img src="%@" class="button" /><span class="label"></span></a>'.fmt(static_url('blank')),
+  
+  buttonBehavior: SC.TOGGLE_BEHAVIOR
+  
+}) ;

data/frameworks/sproutcore/views/button/disclosure.js

@@ -0,0 +1,42 @@
+// ==========================================================================
+// SC.CheckboxView
+// ==========================================================================
+
+require('views/button/button');
+
+/** @class
+
+  Disclosure triangle button.
+
+  @extends SC.ButtonView
+  @author    Charles Jolley 
+  @version 1.0
+*/
+SC.DisclosureView = SC.ButtonView.extend(
+/** @scope SC.DisclosureView.prototype */ {
+
+  emptyElement: '<a href="javascript:;" class="sc-disclosure-view sc-button-view button disclosure"><img src="%@" class="button" /><span class="label"></span></a>'.fmt(static_url('blank')),
+  
+  buttonBehavior: SC.TOGGLE_BEHAVIOR,
+
+  /**
+    This is the value that will be set when the disclosure triangle is toggled
+    open.
+  */
+  toggleOnValue: YES,
+  
+  /**
+    The value that will be set when the disclosure triangle is toggled closed.
+  */
+  toggleOffValue: NO,
+
+  valueBindingDefault: SC.Binding.Bool,
+  
+  init: function() {
+    arguments.callee.base.apply(this,arguments) ;
+    if (this.get('value') == this.get('toggleOnValue')) {
+      this.set('isSelected', true) ;
+    }
+  }
+  
+}) ;

data/frameworks/sproutcore/views/button/radio.js

@@ -0,0 +1,29 @@
+// ==========================================================================
+// SC.RadioView
+// ==========================================================================
+
+require('views/button/button');
+
+/** @class
+
+  Renders a radio button view.
+  
+  This view is basically a button view preconfigured to generate the correct
+  HTML and to set to use a TOGGLE_ON_BEHAVIOR.
+  
+  This view renders a simulated checkbox that can display a mixed state and 
+  has other features not found in platform-native controls.  If you want to 
+  use the platform native version instead, see SC.RadioFieldView.
+
+  @extends SC.ButtonView
+  @author    Charles Jolley 
+  @version 1.0
+*/
+SC.RadioView = SC.ButtonView.extend(
+/** @scope SC.RadioView.prototype */ {
+
+  emptyElement: '<a href="javascript:;" class="sc-radio-view sc-button-view button radio"><img src="%@" class="button" /><span class="label"></span></a>'.fmt(static_url('blank')),
+  
+  buttonBehavior: SC.TOGGLE_ON_BEHAVIOR
+  
+}) ;

data/frameworks/sproutcore/views/{collection.js → collection/collection.js}

@@ -1,11 +1,14 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('views/view') ;
 require('views/label') ;
 
+SC.BENCHMARK_UPDATE_CHILDREN = NO ;
+SC.VALIDATE_COLLECTION_CONSISTANCY = NO ;
+
 /** Indicates that selection points should be selected using horizontal 
   orientation.
 */
@@ -14,6 +17,14 @@ SC.HORIZONTAL_ORIENTATION = 'horizontal';
 /** Selection points should be selected using vertical orientation. */
 SC.VERTICAL_ORIENTATION = 'vertical' ;
 
+/** Enables an optimization using zombie group views.  This option is configurable for perf testing purposes.  You should not change it. */
+SC.ZOMBIE_GROUPS_ENABLED = YES ;
+
+/** Enables an optimization that removes the root element from the DOM during 
+a render and then readds it when complete.  This option is configurable for 
+perf testing purposes.  You should not change it. */
+SC.REMOVE_COLLECTION_ROOT_ELEMENT_DURING_RENDER = NO ;
+
 /**
   @class 
   
@@ -31,17 +42,6 @@ SC.VERTICAL_ORIENTATION = 'vertical' ;
   property if you want to monitor selection. (be sure to set the isEnabled
   property to allow selection.)
   
-  h4. INCREMENTAL RENDERING
-  
-  incremental rendering can be used in certain collection views to
-  display only the visible views in your collection.  This will yield
-  dramatically improved performance over the typical full-rendering
-  facility.
-  
-  to activate incremental rendering you need to override the two methods
-  below to return valid values and also implement layoutChildViewsFor()
-  above.  
-
   @extends SC.View
 */
 SC.CollectionView = SC.View.extend(
@@ -57,8 +57,8 @@ SC.CollectionView = SC.View.extend(
 
     This array should contain the content objects you want the collection view 
     to display.  An item view (based on the exampleView view class) will be 
-    created for each content object, in the order the content objects appear in
-    this array.
+    created for each content object, in the order the content objects appear 
+    in this array.
     
     If you make the collection editable, the collection view will also modify 
     this array using the observable array methods of SC.Array.
@@ -76,20 +76,20 @@ SC.CollectionView = SC.View.extend(
   /**  
     The array of currently selected objects.  
 
-    This array should contain the currently selected content objects.  
-    It is modified automatically by the collection view when the user 
-    changes the selection on the collection.
+    This array should contain the currently selected content objects.  It is 
+    modified automatically by the collection view when the user changes the 
+    selection on the collection.
 
-    Any item views representing content objects in this array will
-    have their isSelected property set to YES automatically.
+    Any item views representing content objects in this array will have their 
+    isSelected property set to YES automatically.
     
-    The CollectionView can deal with selection arrays that contain content
-    objects that do not belong to the content array itself.  Sometimes this
-    will happen if you share the same selection across multiple collection
+    The CollectionView can deal with selection arrays that contain content 
+    objects that do not belong to the content array itself.  Sometimes this 
+    will happen if you share the same selection across multiple collection 
     views.
     
-    Usually you will want to bind this property to a controller property
-    that actually manages the selection for your display.
+    Usually you will want to bind this property to a controller property that 
+    actually manages the selection for your display.
     
     @type Array
   */
@@ -105,7 +105,7 @@ SC.CollectionView = SC.View.extend(
     If you have items in your selection property, they will still be reflected
     visually.
     
-    @type Boolean
+    @type {Bool}
   */
   isSelectable: true,
   
@@ -120,7 +120,7 @@ SC.CollectionView = SC.View.extend(
     the collection view will also be not selectable or editable, regardless of the  
     settings for isEditable & isSelectable.
     
-    @type Boolean
+    @type {Bool}
   */
   isEnabled: true,
   
@@ -182,30 +182,6 @@ SC.CollectionView = SC.View.extend(
   */
   useToggleSelection: false,
 
-  /**
-    Delete views when the content object is removed from the content array.
-
-    Whenever you remove a content object from the content array, the collection view
-    will automatically remove the corresponding item view from the display.  If this
-    property is set to true, that view will be subsequently deleted as well.
-  
-    If you set this property to false, then the collection view will store these
-    unused views in a cache and reuse them later should the content object they 
-    represent reappear in the content array.
-  
-    In general, you want to leave this property to true in order to keep your 
-    memory usage under control.  However, if you are rendering a collection of 
-    views that will change often, adding and removing the same content objects,
-    then your collection view will be much faster if you set this to false.
-  
-    Most of the time, you will set this to false if you are rendering a collection
-    of objects that may be filtered based on search criteria and you want to update
-    the display very quickly.
-  
-    @type Boolean
-  */
-  flushUnusedViews: true,
-
   /**
     Trigger the action method on a single click.
   
@@ -335,7 +311,7 @@ SC.CollectionView = SC.View.extend(
     
     You can also set this to true yourself to be notified when it is completed.
   */
-  isDirty: true,
+  isDirty: false,
   
   /**
     The maximum time the collection view will spend updating its
@@ -349,28 +325,23 @@ SC.CollectionView = SC.View.extend(
   */
   maxRenderTime: 0,
 
-  /**  
-    Property returns all of the item views, regardless of group view.
-
-    @property
-    @returns {Array} the item views.
-  */
-  itemViews: function() {
-    var ret = [] ;
-    if (!this._itemViews) return ret ;
-    for(var key in this._itemViews) {
-      if (this._itemViews.hasOwnProperty(key)) ret.push(this._itemViews[key]);
-    }  
-    return ret;
-  }.property(),
-
   /** 
-    The property on content objects item views should display.
+    Property to on content items to use for display.
+
+    Built-in item views such as the LabelViews and ImageViews will use the
+    value of this property as a key on the content object to determine the
+    value they should display.
+    
+    For example, if you set contentValueKey to 'name' and set the 
+    exampleView to an SC.LabelView, then the label views created by the 
+    colleciton view will display the value of the content.name.
     
-    Most built-in item views will respect this property.  You can also use it when writing 
-    you own item views.
+    If you are writing your own custom item view for a collection, you can
+    get this behavior automatically by including the SC.Control mixin on your
+    view.  You can also ignore this property if you like.  The collection view
+    itself does not use this property to impact rendering.
   */
-  displayProperty: null,
+  contentValueKey: null,
 
   /**
     Enables keyboard-based navigate if set to true.
@@ -388,6 +359,54 @@ SC.CollectionView = SC.View.extend(
     to edit this property.
   */
   itemsPerRow: 1,
+
+  /**  
+    Property returns all of the item views, regardless of group view.
+
+    @field
+    @returns {Array} the item views.
+  */
+  itemViews: function() {
+    if (!this._itemViews) {
+      
+
+      var range = this.get('nowShowingRange') ;
+      var content = this.get('content') || [] ;
+      this._itemViews = [] ;
+      for(var idx=0;idx<range.length;idx++) {
+        var cur = content.objectAt(idx) ;
+        this._itemViews.push(this.itemViewForContent(cur)) ;
+      }
+    }
+    return this._itemViews;
+  }.property(),
+
+  /**
+    Property returns all of the rendered group views in order of their 
+    appearance with the content.
+  */
+  groupViews: function() {
+    if (!this._groupViews) {
+      var groupBy = this.get('groupBy') ;
+      if (groupBy) {
+        var range = this.get('nowShowingRange') ;
+        var content = this.get('content') || [] ;
+        var groupValue = undefined ;
+        this._groupViews = [] ;
+
+        for(var idx=0;idx<range.length;idx++) {
+          var cur = content.objectAt(idx) ;
+          var curGroupValue = (cur) ? cur.get(groupBy) : null ;
+          if (curGroupValue != groupValue) {
+            groupValue = curGroupValue ;
+            this._groupViews.push(this.groupViewForGroupValue(groupValue)) ;
+          }
+        }
+        
+      }
+    }
+    return this._groupViews; 
+  }.property(),
   
   /**
     Returns true if the passed view belongs to the collection.
@@ -401,624 +420,355 @@ SC.CollectionView = SC.View.extend(
     @returns {Boolean} True if the view is an item view in the receiver.
   */
   hasItemView: function(view) {
-    if (!this._itemViews) this._itemViews = {};
-    return !!this._itemViews[SC.getGUID(view)];
+    if (!this._itemViewsByGuid) this._itemViewsByGuid = {} ;
+    return !!this._itemViewsByGuid[SC.guidFor(view)] ;
   },
 
-  // ......................................
-  // FIRST RESPONDER
-  //
-
-  /**
-    Called whenever the collection becomes first responder. 
-    Adds the focused class to the element.
+  /** 
+    Find the item view underneath the passed mouse location.
+    
+    The default implementation of this method simply searches each item view's
+    frame to find one that includes the location.  If you are doing your own
+    layout, you may be able to perform this calculation more quickly.  If so,
+    consider overriding this method for better performance during drag 
+    operations.
+    
+    @param {Point} loc   The current mouse location in the coordinate of the 
+      collection view
+      
+    @returns {SC.View} The item view under the collection
   */
-  didBecomeFirstResponder: function() {
-    this.addClassName('focus') ;
-  },
-  
-  willLoseFirstResponder: function() {
-    this.removeClassName('focus');
+  itemViewAtLocation: function(loc) {
+    var itemView = this._itemViewRoot ;
+    while(itemView) {
+      var frame = itemView.get('frame');
+      if (SC.pointInRect(loc, frame)) return itemView ;
+    }
+    return null; // not in an itemView right now.
   },
   
-  // ......................................
-  // DRAG AND DROP SUPPORT
-  //
 
+  
   /** 
-    The insertion orientation.  This is used to determine which
-    dimension we should pay attention to when determining insertion point for
-    a mouse click.
+    Find the first content item view for the passed event.
     
-    {{{
-      SC.HORIZONTAL_ORIENTATION: look at the X dimension only
-      SC.VERTICAL_ORIENTATION: look at the Y dimension only
-    }}}
-  */
-  insertionOrientation: SC.HORIZONTAL_ORIENTATION,
-  
-  /**
-    Get the preferred insertion point for the given location, including 
-    an insertion preference of before or after the named index.
+    This method will go up the view chain, starting with the view that was the 
+    target of the passed event, looking for a child item.  This will become 
+    the view that is selected by the mouse event.
+    
+    This method only works for mouseDown & mouseUp events.  mouseMoved events 
+    do not have a target.
+    
+    @param {Event} evt An event
     
-    The default implementation will loop through the item views looking for 
-    the first view to "switch sides" in the orientation you specify.
   */
-  insertionIndexForLocation: function(loc) {  
-    var content = this.get('content') ;
-    var f, itemView, curSide, lastSide = null ;
-    var orient = this.get('insertionOrientation') ;
-    var ret=  null ;
-    for(var idx=0; ((ret == null) && (idx<content.length)); idx++) {
-      itemView = this.itemViewForContent(content.objectAt(idx));
-      f = this.convertFrameFromView(itemView.get('frame'), itemView) ;
-      
-      // if we are a horizontal orientation, look for the first item that 
-      // will "switch sides" on the x path an the maxY is greater than Y.
-      // This assumes you will flow top to bottom, but it should work if you
-      // flow LTR or RTL.
-      if (orient == SC.HORIZONTAL_ORIENTATION) {
-        if (SC.maxY(f) > loc.y) {
-          curSide = (SC.maxX(f) < loc.x) ? -1 : 1 ;
-        } else curSide = null ;
-        
-      // if we are a vertical orientation, look for the first item that
-      // will "swithc sides" on the y path and the maxX is greater than X.
-      // This assumes you will flow LTR, but it should work if you flow
-      // bottom to top or top to bottom.
-      } else {
-        if (SC.minX(f) < loc.x) {
-          curSide = (SC.maxY(f) < loc.y) ? -1 : 1 ;
-        } else curSide = null ;
-      } 
+  itemViewForEvent: function(evt)
+  {
+    var view = SC.window.firstViewForEvent( evt );
+    // work up the view hierarchy to find a match...
+    do {
+      // item clicked was the ContainerView itself... i.e. the user clicked outside the child items
+      // nothing to return...
+      if ( view == this ) return null;
       
-      // if we "switched" sides then return this item view.
-      if (curSide !== null) {
-        
-        // OK, we found an item view, while we have this data, decide if
-        // we should insert before or after the view
-        if ((lastSide !== null) && (curSide != lastSide)) {
-          ret = idx ;
-          if (orient == SC.HORIZONTAL_ORIENTATION) {
-            if (SC.midX(f) < loc.x) ret++ ;
-          } else {
-            if (SC.midY(f) < loc.y) ret++ ;
-          }
-        }
-        lastSide =curSide ;
-      }
-    }
-    
-    // Handle some edge cases
-    if ((ret == null) || (ret < 0)) ret = 0 ;
-    if (ret > content.length) ret = content.length ;
+      // sweet!... the view is not only in the collection, but it says we can hit it.
+      // hit it and quit it... 
+      if ( this.hasItemView(view) && (!view.hitTest || view.hitTest(evt)) ) return view;
+    } while ( view = view.get('parentNode') );
     
-    // Done. Phew.  Return.
-    return ret;
+    // nothing was found... 
+    return null;
   },
-  
-  /** 
-    Override to show the insertion point during a drag.
-    
-    Called during a drag to show the insertion point.  Passed value is the
-    item view that you should display the insertion point before.  If the
-    passed value is null, then you should show the insertion point AFTER that
-    last item view returned by the itemViews property.
+
+
+  /**
+    Returns the itemView that represents the passed content object.  
     
-    Once this method is called, you are guaranteed to also recieve a call to
-    hideInsertionPoint() at some point in the future.
+    If no item view is currently rendered for the object, this method will
+    return null.
     
-    The default implementation of this method does nothing.
+    @param {Object} obj The content object. 
+    @returns {SC.View} The item view or null
+  */
+  itemViewForContent: function(obj) {
+    var key = (obj) ? SC.guidFor(obj) : '0';
+    return this._itemViewsByContent[key];
+  },
+
+  /**
+    Returns the groupView that represents the passed group value.
     
-    @param {SC.View} itemView view the insertion point should appear directly before. If null, show insertion point at end.
+    If no group view is currently rendered for the gorup value, this method
+    will return null.  If grouping is disabled, this method will also return
+    null.
     
-    @returns {void}
+    @param {Object} value The group value.
+    @param {SC.View} The group view or null
   */
-  showInsertionPointBefore: function(itemView) {},
-  
+  groupViewForGroupValue: function(groupValue) {
+    return this._groupViewsByValue[groupValue] ;
+  },
+
   /**
-    Override to hide the insertion point when a drag ends.
-    
-    Called during a drag to hide the insertion point.  This will be called when the
-    user exits the view, cancels the drag or completes the drag.  It will not be 
-    called when the insertion point changes during a drag.
+    Returns the groupValue for the passed group view.
     
-    You should expect to receive one or more calls to showInsertionPointBefore()
-    during a drag followed by at least one call to this method at the end.  Your
-    method should not raise an error if it is called more than once.
+    Older-style groupViews expect the group value to be set directly on 
+    their labelView while newer groupViews expect their groupValue to be set.
+    This method takes into account both approaches.
     
-    @returns {void}
+    @param {SC.View} groupView the group view.
+    @returns {Object} the value of the group view or null.
   */
-  hideInsertionPoint: function() {},
-
+  groupValueForGroupView: function(groupView) {
+    if (!groupView) return null ;
+    var ret ;
+    if (groupView.groupValue === undefined) {
+      ret = groupView.get('content') ;
+    } else ret = groupView.get('groupValue') ;
+    return ret ;
+  },
+  
   /**
-    Override this method to provide your own ghost image for a drag.  
+    Expands the index into a range of content objects that have the same
+    group value.
     
-    Note that the only purpose of this view is to render a visible drag element.  It is
-    not critical that you make this element bindable, etc.
+    This method searches backward and forward through your content array for  
+    objects that have the same group value as the object at the index you 
+    pass in.  You can use this method when implementing layoutGroupView to 
+    determine the range of the content that belongs to the group.  
     
-    @param dragContent {Array} Array of content objects that will be used in the drag.
+    Since this method simply searches through the content array, it is really
+    only suitable for content arrays of a few hundred items or less.  If you
+    expect to have a larger size of content array, then you may need to do
+    something custom in your data model to calculate this range in less time.
+    
+    @param {Number} contentIndex index of a content object
+    @returns {Range} a range of objects
   */
-  ghostViewFor: function(dragContent) {
-    var view = SC.View.create() ;
-    view.set('frame', this.get('frame')) ;
-    view.set('isPositioned', true) ;
-    var idx = dragContent.length ;
-    var maxX = 0; var maxY = 0 ;
+  groupRangeForContentIndex: function(contentIndex) {
+    var groupBy = this.get('groupBy') ;
+    if (!groupBy) return { start: contentIndex, length: 1 } ;
+
+    var min = contentIndex, max = contentIndex ;
+    var content = Array.from(this.get('content')) ;
+    var len = content.get('length') ;
+    var cur = content.objectAt(contentIndex) ;
+    var groupValue = (cur) ? cur.get(groupBy) : null ;
+    
+    // find first item at bottom that does not match.  add one to get start
+    while(--min >= 0) {
+      var cur = content.objectAt(min) ;
+      var curGroupValue = (cur) ? cur.get(groupBy) : null ;
+      if (curGroupValue !== groupValue) break ;
+    }
+    min++ ;
     
-    while(--idx >= 0) {
-      var itemView = this.itemViewForContent(dragContent[idx]) ;
-      if (!itemView) continue ;
-      var f = itemView.get('frame') ;
-      var dom = itemView.rootElement ;
-      if (!dom) continue ;
-      
-      // save the maxX & maxY.  This will be used to trim the size 
-      // of the ghost view later.
-      if (SC.maxX(f) > maxX) maxX = SC.maxX(f) ;
-      if (SC.maxY(f) > maxY) maxY = SC.maxY(f) ;
-
-      // Clone the contents of this node.  We should probably apply the 
-      // computed style to the cloned nodes in order to make sure they match even if the 
-      // CSS styles do not match.  Make sure the items are properly 
-      // positioned.
-      dom = dom.cloneNode(true) ;
-      Element.setStyle(dom, { position: "absolute", left: "%@px".fmt(f.x), top: "%@px".fmt(f.y), width: "%@px".fmt(f.width), height: "%@px".fmt(f.height) }) ;
-      view.rootElement.appendChild(dom) ;
+    // find first item at top that does not match.  keep value to calc range
+    while(++max < len) {
+      var cur = content.objectAt(max) ;
+      var curGroupValue = (cur) ? cur.get(groupBy) : null ;
+      if (curGroupValue !== groupValue) break ;
     }
     
-    // Trim the size of the view to match the maxX & maxY as well as overflow
-    view.setStyle({ overflow: 'hidden', width: "%@px.".fmt(maxX+1), height: "%@px".fmt(maxY+1) }) ;
+    return { start: min, length: max-min } ;
+  },
 
-    return view ;
+  // Determines the group value at a specified index.
+  groupValueAtContentIndex: function(contentIndex) {
+    var groupBy = this.get('groupBy') ;
+    var content = Array.from(this.get('content')).objectAt(contentIndex) ;
+    return (groupBy && content && content.get) ? content.get(groupBy) : null;
   },
+    
+  // ......................................
+  // GENERATING CHILDREN
+  //
   
-  mouseDragged: function(ev) {
-    // Don't do anything unless the user has been dragging for 123msec
-    if ((Date.now() - this._mouseDownAt) < 123) return true ;
+  /**
+    Update the itemViews in the receiver to match the currently visible 
+    content objects.  Normally this method assumes the content objects 
+    themselves have not changed and only updates the views if the range of 
+    visible content has changed.  If you pass true to the fullUpdate property, 
+    then the entire set of itemViews will be revalidated in case any content 
+    objects have changed.
     
-    // OK, they must be serious, start a drag if possible. 
-    if (this.get('canReorderContent')) {
+    @param {Bool} fullUpdate (Optional) if set to true, assumes content has
+      changed and will perform a full update.
+    
+  */
+  updateChildren: function(fullUpdate) {
 
-      // we need to recalculate the frame at this point.
-      this.flushFrameCache();
-      
-      // First, get the selection to drag.  Drag an array of selected
-      // items appearing in this collection, in the order of the 
-      // collection.
-      var content = this.get('content') || [] ;
-      var dragContent = this.get('selection').sort(function(a,b) {
-        a = content.indexOf(a) ; b = content.indexOf(b) ;
-        return (a<b) ? -1 : ((a>b) ? 1 : 0) ;
-      });
+    var f ;
 
-      // Build the drag view to use for the ghost drag.  This 
-      // should essentially contain any visible drag items.
-      var view = this.ghostViewFor(dragContent) ;
-      
-      // Initiate the drag
-      SC.Drag.start({
-        event: this._mouseDownEvent,
-        source: this,
-        dragView: view,
-        ghost: NO,
-        slideBack: YES,
-        data: { "_mouseDownContent": dragContent }
-      }) ; 
-      
-      // Also use this opportunity to clean up since mouseUp won't 
-      // get called.
-      this._cleanupMouseDown() ;
-      this._lastInsertionIndex = null ;
-    }
-  },
-  
-  // Drop Source. 
-  dragEntered: function(drag, evt) {
-    if ((drag.get('source') == this) && this.get('canReorderContent')) {
-      return SC.DRAG_MOVE ;
-    } else {
-      return SC.DRAG_NONE ;
+    // if the collection is not presently visible in the window, then there is 
+    // really nothing to do here.  Just mark the view as dirty and return.
+    if (!this.get('isVisibleInWindow')) {
+      this.set('isDirty', true) ;
+      this._needsFullUpdate = this._needsFullUpdate || fullUpdate ;
+      return; 
     }
-  },
-  
-  // If reordering is allowed, then show insertion point
-  dragUpdated: function(drag, evt) {
-    if (this.get('canReorderContent')) {
-      var loc = drag.get('location') ;
-      loc = this.convertFrameFromView(loc, null) ;
-      
-      // get the insertion index for this location.  This can be computed
-      // by a subclass using whatever method.  This method is not expected to
-      // do any data valdidation, just to map the location to an insertion index.
-      var ret = this.insertionIndexForLocation(loc) ;
-
-      // now that we have an index, find the nearest index that we can actually
-      // insert at, or do not allow.
-      var objects = (drag.source == this) ? (drag.dataForType('_mouseDownContent') || []) : [];
-      var content = this.get('content') || [] ;
-
-      // if the insertion index is in between two items in the drag itself, then this is
-      // not allowed.  Either use the last insertion index or find the first index that is not 
-      // in between selections.
-      var isPreviousInDrag = (ret > 0) ? objects.indexOf(content.objectAt(ret-1)) : -1 ;
-      var isNextInDrag = (ret < content.get('length')-1) ? objects.indexOf(content.objectAt(ret)) : -1 ;
-      if (isPreviousInDrag>=0 && isNextInDrag>=0) {
-        if (this._lastInsertionIndex == null) {
-          while((ret > 0) && (objects.indexOf(content.objectAt(ret)) >= 0)) ret-- ;
-        } else ret = this._lastInsertionIndex ;
-      }
-      
-      // Now that we have verified that, check to see if a drop is allowed in the 
-      // insertion index with the delegate.
-      // TODO
 
-      if (this._lastInsertionIndex != ret) {
-        var itemView = this.itemViewForContent(this.get('content').objectAt(ret));
-        this.showInsertionPointBefore(itemView) ;
-      }
-      this._lastInsertionIndex = ret ;
-      
+    if (SC.BENCHMARK_UPDATE_CHILDREN) {
+      var bkey = '%@.updateChildren(%@)'.fmt(this, (fullUpdate) ? 'FULL' : 'FAST') ;
+      SC.Benchmark.start(bkey);
     }
-    return SC.DRAG_MOVE;  
-  },
-
-  dragExited: function() {
-    this.hideInsertionPoint() ;
-    this._lastInsertionIndex = null ;
-  },
-  
-  dragEnded: function() {
-    this.hideInsertionPoint() ;
-    this._lastInsertionIndex = null ;
-  },
-  
-  prepareForDragOperation: function(op, drag) { 
-    return SC.DRAG_ANY; 
-  },
-  
-  performDragOperation: function(op, drag) { 
-    
-    SC.Benchmark.start('%@ performDragOperation'.fmt(this._guid)) ;
-    
-    var loc = drag.get('location') ;
-    loc = this.convertFrameFromView(loc, null) ;
-    
-    // if op is MOVE or COPY, add item to view.
-    var objects = drag.dataForType('_mouseDownContent') ;
-    if (objects && (op == SC.DRAG_MOVE)) {
-
-      // find the index to for the new insertion 
-      var idx = this.insertionIndexForLocation(loc) ;
 
-      var content = this.get('content') ;
-      content.beginPropertyChanges(); // suspend notifications
-
-      // debugger ;
-      // find the old index and remove it.
-      var objectsIdx = objects.get('length') ;
-      while(--objectsIdx >= 0) {
-        var obj = objects.objectAt(objectsIdx) ;
-        var old = content.indexOf(obj) ;
-        if (old >= 0) content.removeAt(old) ;
-        if ((old >= 0) && (old < idx)) idx--; //adjust idx
-      }
-    
-      // now insert objects at new location
-      content.replace(idx, 0, objects) ;
-      content.endPropertyChanges(); // restart notifications
-    }
+    //console.log('updateChildren') ;
     
-    SC.Benchmark.end('%@ performDragOperation'.fmt(this._guid)) ;
-    console.log(SC.Benchmark.report()) ;
-    
-    return SC.DRAG_MOVE; 
-  },
-  
-  concludeDragOperation: function(op, drag) {
-    this.hideInsertionPoint() ;
-    this._lastInsertionIndex = null ;
-  },
+    this.beginPropertyChanges() ; // avoid sending notifications
     
-  
-
-  // ......................................
-  // GENERATING CHILDREN
-  //
-  
-  /**
-    Ensure that the displayed item views match the current set of content objects.
-  
-    This is the main entry point to the Collection View layout system.  It
-    compares the current set of item views to the content objects, adding, removing,
-    and reordering views as necessary to bring them in sync with the set of content
-    objects.
-  
-    Once it has finished running, this method will also call your layoutChildViewsFor()
-    method if you have implemented it.
+    // STEP 1: Update frame size if needed.  Required to compute the 
+    // clippingFrame.
+    var f ;
+    if ((f = this.computeFrame()) && !SC.rectsEqual(f, this.get('frame'))) {
+      var parent = this.get('parentNode') ;
+      if (parent) parent.viewFrameWillChange() ;
+      this.set('frame', f) ;
+      if (parent) parent.viewFrameDidChange() ;
+      
+      if ((f = this.computeFrame()) && !SC.rectsEqual(f, this.get('frame'))) {
+        this.set('frame', f) ;
+      } 
+    } 
 
-    This method is called automatically whenever the content array changes.  You will
-    not usually need to call it yourself.  If you want to refresh the item views,
-    called rebuildChildren() instead.
-  */
-  updateChildren: function()
-  {
-    var el = this.containerElement || this.rootElement;
+    // Save the current clipping frame.  If the frame methods are called again
+    // later but the frame has not actually changed, we don't want to run
+    // updateChildren again.
+    var clippingFrame = this._lastClippingFrame = this.get('clippingFrame') ;
     
-    SC.Benchmark.start('%@: updateChildren'.fmt(this._guid)) ;
-    // initial setup
-    if (this._firstUpdate)
-    {
-      el.innerHTML = '';
-      this._firstUpdate = false;
-    }
-
-    // before removing from parent, make sure we have retrieved the frame
-    // size so that layout can happen.
-    this.cacheFrame();
-
-    // viewsForContent will hold all the item views we currently have rendered
-    // keyed by content._guid.  We use this to quickly determine if a view can
-    // be reused.
-    if (!this._viewsForContent) this._viewsForContent = {};
-
-    // handle grouped items.  If items are grouped, then each childNode is
-    // a group, which contains a label and a div with the items themselves.
-    var groupBy = this.get('groupBy');
-    var content = this.get('content') || [];
-
-    // If the number of childViews differs from the content size, remove from
-    // DOM to improve performance while updating.
-    this._cachedParent = null;
-    this._cachedSibling = null;
-    if (content.get('length') != this.childNodes.get('length'))
-    {
-      this._cachedParent  = el.parentNode;
-      this._cachedSibling = el.nextSibling;
-      if (this._cachedParent) {
-        this._cachedParent.removeChild(el);
-      } else {
-        //debugger;
-      }
-    }
-
-    // this code path will render the collection of groups.  This creates 
-    // group views for each distinct group it encounters and then has it 
-    // render child views in each item.
-    if (groupBy)
-    {
-      var loc = 0;
-      var group = this.firstChild;
-      while (group || (loc < content.get('length')))
-      {
-        var groupValue = (loc < content.get('length')) ? content.objectAt(loc).get(groupBy) : null;
-        
-        // we are out of content, just remove any remaining groups (including
-        // child nodes)
-        if (loc >= content.get('length')) {
-          if (group) {
-            // this will clear out the item views in the group.
-            loc = this.updateChildrenInGroup(group.itemView, content, loc, groupBy, null);
-            // now remove the group.
-            var prev = group.previousSibling ;
-            this.removeChild(group) ;
-            group = prev ;
-          }
-          
-        // otherwise, make sure the current group matches the next group. If
-        // it doesn't, then add a new group.
-        } else if (!group || (group.get('groupValue') != groupValue)) {
-          
-          // create group view.
-          var newGroup = this.exampleGroupView.viewFor(null) ; 
-          newGroup.owner = this ;
-          newGroup.set('groupValue',groupValue) ;
-          
-          // add group label view.
-          if (newGroup.labelView) newGroup.labelView.set('content',groupValue);
-
-          // add item views to group.
-          loc = this.updateChildrenInGroup(newGroup.itemView,content,loc,
-                                           groupBy, groupValue) ;
-
-          // add the new group at this point
-          this.insertBefore(newGroup,group) ; 
-          group = newGroup ;
-          
-        // otherwise, if the current group does match the next group, just
-        // update its child nodes.
-        } else {
-          loc = this.updateChildrenInGroup(group.itemView,content,loc,
-                                            groupBy, groupValue) ;
-        }
-        
-        // go to the next group.  group will be nil if the first group was
-        // removed.
-        group = (group) ? group.nextSibling : this.firstChild ;
+    // STEP 2: Calculate the new range of content to display in 
+    // the clipping frame.  Determine if we need to do a full update or
+    // not.
+   
+    var range = this.contentRangeInFrame(clippingFrame) ;
+    var content = Array.from(this.get('content'));
+     
+    //make sure the range isn't greater than the content length 
+    //this will prevent trying to render items that aren't really there.
+    range.length = Math.min(SC.maxRange(range), content.get('length')) - range.start ;
+
+    var nowShowingRange = this.get('nowShowingRange') ;
+    fullUpdate = fullUpdate || (SC.intersectRanges(range, nowShowingRange).length <= 0) ;
+    this.set('nowShowingRange', range) ;
+
+    // STEP 3: Update item views.
+    var groupBy = this.get('groupBy') ;
+    var didChange = false ;
+    
+    // If this is a fullUpdate, then rebuild the itemViewsByContent hash
+    // from scratch.  This is necessary of the content of the visible range
+    // might have changed.
+    if (fullUpdate) {
+     
+      var itemViewsByContent = {} ; // this will replace the current hash.
+      
+      // iterate through all of the views and insert them.  If the view 
+      // already exists, it will simply be reused.
+      var idx = SC.maxRange(range) ;
+      while(--idx >= range.start) {
+        var c = content.objectAt(idx) ;
+        var key = SC.guidFor(c) ;
+        var itemView = this._insertItemViewFor(c, groupBy, idx) ;
+
+        // add item view to new hash and remove from old hash.
+        itemViewsByContent[key] = itemView;
+       
+        delete this._itemViewsByContent[key];
       }
       
-    // grouping is not turned on.
-    } else {
-      this.updateChildrenInGroup(this, content, 0, null, null) ;
-    }
-    
-    // Add back into DOM if optimization was used.
-    if (this._cachedParent) {
-      this._cachedParent.insertBefore(el,this._cachedSibling) ;
-    }
-    
-    this.updateSelectionStates() ;
-    this.flushFrameCache() ;
-    this.set('isDirty',false); 
-    SC.Benchmark.end('%@: updateChildren'.fmt(this._guid)) ;
-  },
-
-  /**
-    @private 
-  
-    Step through the child nodes in the parent to match them to
-    the content array, starting at the passed location.  It will go until it
-    runs out of content objects or until the content no longer belong to the
-    group indicated.
-  */  
-  updateChildrenInGroup: function(parent,content,loc,groupBy,groupValue) {
-    // cacheing content.get('length') for optimization.
-    var contentCount = content.get('length');
-    var child = parent.firstChild;
-    var inGroup = true ;
-
-    if (!this._itemViews) this._itemViews = {};
-    var itemViewsDidChange = false;
-    
-    this.updateComputedViewHeight(parent);
-
-    // if we aren't rendering groups, then this can expire.
-    var expired = false;
-    var canExpire = !groupBy && loc == 0 ; 
-    if (canExpire)
-    {
-      loc = this._lastRenderLoc ;
-      child = this._lastRenderChild || child;
-      this._resetRenderClock();
-    };
-
-    var firstChild = null ;
-    
-    // save the first child to be modified.  This will be
-    // passed to the layout method.
-    var firstModifiedChild = null;
-    
-    while (child || (inGroup && (loc < contentCount) && !expired)) {
+      // Now iterate through the old hash.  Any left over item views should
+      // be removed.
+      for(var key in this._itemViewsByContent) {
+        if (!this._itemViewsByContent.hasOwnProperty(key)) continue ;
+        var itemView = this._itemViewsByContent[key] ;
+        this._removeItemView(itemView, groupBy) ;
+      } ;
       
-      // get the content object.
-      var cur = (inGroup && (loc < contentCount)) ? content.objectAt(loc) : null;
+      // Swap out remaining content items.
+      this._itemViewsByContent = itemViewsByContent ;
+      didChange = true;
       
-      // verify the new cur is still in the group.
-      if (cur && groupBy && (cur.get(groupBy) != groupValue))
-      {
-        inGroup = false; 
-        cur = null;
+    // If a fullUpdate is not required, then we assume no content has changed
+    // and we just need to add or remove some views to bring the ranges up
+    // to date.
+    } else {
+      // Find changed range at the top.  Note that the length here may be 
+      // negative.  Negative means views should be removed.
+      var start = range.start ;
+      var length = (nowShowingRange.start - start) ;
+      if (length != 0) {
+        this._insertOrRemoveItemViewsInRange(start, length, groupBy) ;
+        didChange = true ;
       }
       
-      // we are out of content for this group, remaining children simply need 
-      // to be removed.
-      if (cur == null) {
-        if (child) {
-          if (this.flushUnusedViews) {
-            var viewContent = child.get('content') ;
-            if (viewContent) delete this._viewsForContent[SC.getGUID(viewContent)];
-            child.set('content',null) ;
-          }
-          var prev = child.previousSibling ;
-          parent.removeChild(child) ;
-          if (this._itemViews[SC.getGUID(child)]) {
-            itemViewsDidChange = true ;
-            delete this._itemViews[SC.getGUID(child)]; 
-          }
-          
-          child = prev;
-        }
-
-      // otherwise, make sure the current child matches the content object.
-      // if it doesn't, get the right view (or create it) and insert it here.
-      } else if (!child || (child.get('content') != cur)) {
-
-        // find the correct view.  If it doesn't exist, create it.
-        var newChild = this._viewsForContent[SC.getGUID(cur)] ;
-        if (!newChild) {
-          newChild = this.exampleView.viewFor(null) ;
-          newChild.owner = this ;
-          newChild._isChildView = true ;
-          newChild.set('content',cur) ;
-          this._viewsForContent[SC.getGUID(cur)] = newChild ;
-        }
-
-        // add the view at this point in the hierarchy and make the new child
-        // the current child.
-        parent.insertBefore(newChild,child);
-        this._itemViews[SC.getGUID(newChild)] = newChild;
-        itemViewsDidChange = true;
-        if (!firstModifiedChild) firstModifiedChild = newChild ;
-        child = newChild;
+      // Find the changed range at the bottom.  Note that the length here may
+      // also be negative. Negative means views should be removed.
+      var start = SC.maxRange(nowShowingRange) ;
+      var length = SC.maxRange(range) - start ;
+      if (length != 0) {
+        this._insertOrRemoveItemViewsInRange(start, length, groupBy) ;
+        didChange = true ;
       }
-
-      // go to next child and content object
-      // child would only be nil if the current child was first and was 
-      // removed
-      if (!firstChild) firstChild = child;
-      child = (child) ? child.nextSibling : ((inGroup) ? parent.firstChild : null);
+    }
+    
+    // Clean out some cached items and notify their changes.
+    if (didChange) {
+      this._flushZombieGroupViews() ;
+      this.updateSelectionStates() ;
       
-      // go to the next loc only if cur was used last time.
-      if (cur) loc++;
+      this._itemViews = null ;
+      this.notifyPropertyChange('itemViews') ;
       
-      expired = this._renderExpired();
+      this._groupViews = null ;
+      this.notifyPropertyChange('groupViews') ;
     }
 
-
-    // maybe save the current render loc and reschedule.
-    if (expired && (loc < contentCount)) {
-      this._lastRenderLoc = loc ;
-      this._lastRenderChild = child ;
-      setTimeout(this.updateChildren.bind(this),1) ; // do more later.
-    } else {
-      this._resetExpiredRender();
-    }
-    
-    // now let the collection view layout the views that changed (if 
-    // it is implemented.)
-    if (firstModifiedChild && this.layoutChildViewsFor) {
-      var el = this.containerElement || this.rootElement;
-      if (this._cachedParent) {
-        this._cachedParent.insertBefore(el,this._cachedSibling);
-      }   
-      this.layoutChildViewsFor(parent, firstModifiedChild);
-      if (this._cachedParent) {
-        this._cachedParent.removeChild(el);
-      }
-    }
-    
-    // notify itemViews change if applicable.
-    if (itemViewsDidChange) this.propertyDidChange('itemViews');
+    // Recache frames just in case this changed the scroll height.
+    this.recacheFrames() ;
     
-    return loc;
-  },
-
-
-  /**
-    Returns the itemView that represents the passed content object.  
     
-    If no item view is currently rendered for the object, this method will
-    return null.
+    // Set this to true once children have been rendered.  Whenever the 
+    // content changes, we don't want resize or clipping frame changes to 
+    // cause a refresh until the content has been rendered for the first time.
+    this._hasChildren = range.length>0 ;
     
-    @param {Object} obj The content object.  Should be a member of the content array.
-    @returns {SC.View} The item view for this object or null if no match could be found.
-  */
-  itemViewForContent: function( obj )
-  {
-    return this._viewsForContent[SC.getGUID(obj)];
+    this.set('isDirty',false); 
+    this.endPropertyChanges() ;
+    if (SC.BENCHMARK_UPDATE_CHILDREN) SC.Benchmark.end(bkey);    
   },
 
   /**
     Rebuild all the child item views in the collection view.
     
-    This will remove all the child views from the collection view and rebuild them
-    from scratch.  This method is generally expensive, but if you have made a
-    substantial number of changes to the content array and need to bring everything 
-    up to date, this is the best way to do it.
+    This will remove all the child views from the collection view and rebuild 
+    them from scratch.  This method is generally expensive, but if you have 
+    made a substantial number of changes to the content array, this may be the 
+    most efficient way to perform the update.
     
-    In general the collection view will automatically keep the item views in sync
-    with the content objects for you.  You should not need to call this method
-    very often.
+    In general the collection view will automatically keep the item views in 
+    sync with the content objects for you.  You should not need to call this 
+    method very often.
     
     @returns {void}
   */
   rebuildChildren: function() {
-    this.clear();
-    this._viewsForContent = {};
-    this._resetExpiredRender();
-    this.updateChildren();
+    
+    this.beginPropertyChanges() ;
+    
+    // iterate through itemViews and remove them
+    while(this._itemViewRoot) this._removeItemViewFromChain(this._itemViewRoot) ;
+    
+    // iterate through groupViews and remove them .. if grouping is disabled,
+    // _groupViewRoot will be null anyway.
+    while(this._groupViewRoot) this._removeGroupView(this._groupViewRoot) ;
+    
+    // now updateChildren.
+    this._hasChildren = false ;
+    this.updateChildren() ;
+    
+    this.endPropertyChanges() ;
   },
-
+  
   /**
     Update the selection state for the item views to reflect the selection array.
     
@@ -1031,120 +781,480 @@ SC.CollectionView = SC.View.extend(
   updateSelectionStates: function() {
     if (!this._itemViews) return ;
     var selection = this.get('selection') || [];
-    
+
     // First, for efficiency, turn the selection into a hash by GUID.  This 
     // way, we'll only have to perform a linear search over the children.
-    var selectionHash = {};
-    var numberOfSelectedItems = selection.get('length');
-    for( var i = 0;  i < numberOfSelectedItems;  i++ ) {
-      var item = selection.objectAt(i);
-      selectionHash[SC.getGUID(item)] = true;
+    // This hash is cached and flushed each time the selection changes.
+    var selectionHash = this._selectionHash ;
+    if (!selectionHash) {
+      selectionHash = {} ;
+      var idx = selection.get('length') ;
+      while(--idx >= 0) {
+        var cur = selection.objectAt(idx) ;
+        var key = SC.guidFor(cur) ;
+        selectionHash[key] = true ;
+      }
+      this._selectionHash = selectionHash ;
     }
 
-    for(var key in this._itemViews) {
-      if (!this._itemViews.hasOwnProperty(key)) continue ;
-      var child = this._itemViews[key] ;
-      var content = (child.get) ? child.get('content') : null;
-      var guid = (content) ? SC.getGUID(content) : null;
-    
-      if( !guid ) continue;
-      var childIsSelected = selectionHash[guid] ? true : false;
-    
-      // If the child's state has changed from before, set it to the new 
-      // state. Otherwise, don't bother setting the state to the same value 
-      // it used to have.
-      if( childIsSelected != child.get('isSelected') ) {
-        if (child.set) child.set('isSelected', childIsSelected);
+    // Iterate over the item views and set their selection property.
+    for(var key in this._itemViewsByContent) {
+      if (!this._itemViewsByContent.hasOwnProperty(key)) continue ;
+      var itemView = this._itemViewsByContent[key] ;
+      var isSelected = (key) ? selectionHash[key] : false ;
+      if (itemView.get('isSelected') != isSelected) {
+        itemView.set('isSelected', isSelected) ;
       }
     }
   },
     
-//  layoutChildViewsFor: function(parentView, startingView) { return false; },
   
+  /**
+    Calls updateChildren whenever the view is resized, unless you have not 
+    implemented custom layout or incremental rendering.
+    
+    UPDATE:
+    -- add/remove any children as needed
+    -- update layout on all itemViews unless you have a more efficient
+  */
   resizeChildrenWithOldSize: function(oldSize) {
-    if (this.layoutChildViewsFor && (this.layoutChildViewsFor(this, null))) {
-      this.updateComputedViewHeight(this) ;
-    } else {
-      arguments.callee.base.apply(this,arguments) ;
-    }
+    if (!this._hasChildren) return ;
+    this.updateChildren() ; // add/remove any new views.
+    this.layoutResize() ; // perform layout on all of the views if needed.
   },
-  
-  _firstUpdate: true,
-  
-  _lastRenderLoc: 0,
-  _renderStart: null,
-  _resetRenderClock: function() { this._renderStart = new Date().getTime(); },
 
-  _resetExpiredRender: function() { 
-    this._lastRenderLoc = 0; this._lastRenderChild = null;
+  /**
+    Whenever your clipping frame changes, determine new range to display.  If 
+    new range is a change, then it will update the children and relayout.
+    
+    UPDATE:
+    -- add/remove any children as needed
+    -- update layout on added children only
+  */
+  clippingFrameDidChange: function() {
+    if (!this._hasChildren) return ;
+    SC.Benchmark.start('%@.clippingFrameDidChange'.fmt(this.toString())) ;
+    if (!SC.rectsEqual(this._lastClippingFrame, this.get('clippingFrame'))) {
+          if (this._hasChildren) this.updateChildren() ;
+        }
+    SC.Benchmark.end('%@.clippingFrameDidChange'.fmt(this.toString())) ;
   },
+
+  /**
+    Override to return the computed frame dimensions of the collection view.
+    
+    These dimensions are automatically applied at the end of a call to  
+    updateChildren() if they change at all.  This method is critical for 
+    support of incremental rendering.
   
-  _renderExpired: function() {
-    var max = this.maxRenderTime ;
-    if ((this._renderStart == null) || (max == 0)) return false ;
-    return ((new Date().getTime()) - this._renderStart) > max ;
-  },
+    @returns {Rect} width and/or height you want this collection view to have.
+  */
+  computeFrame: function() { return null; },
   
   /**
     Override to return the range of items to render for a given frame.
+
+    You can override this method to implement support for incremenetal 
+    rendering.  The range you return here will be used to limit the number of 
+    actual item views that are created by the collection view.
     
-    The range you return will be used to limit the number of actual views that are
-    created for the collection view.  The passed frame is relative to the total frame 
-    of the groupView. 
-    
-    You should override this method if you want to support incremental rendering.
-    The default implementation does nothing.
-    
-    @param {SC.View} groupView The group view the requested items belong to.  If 
-      grouping is not used, this will always be null.
-      
-    @param {Frame} frame The frame you should use to determine the range.
+    @param {Rect} frame The frame you should use to determine the range.
     
-    @returns {Range} A hash that indicates the range of content objects to render.  ({ start: X, length: Y }) 
+    @returns {Range} A hash that indicates the range of content objects to 
+      render.  ({ start: X, length: Y }) 
   */  
-  itemRangeInFrame: function(groupView, frame) { return null; },
-  
-  /**  
-    Override to return a computed height of the collection.
+  contentRangeInFrame: function(frame) {
+    var content = this.get('content') ;
+    var len = ((content && content.get) ? content.get('length') : 0) || 0 ;
+    return { start: 0, length: len };
+  },
 
-    This will be used to set a dynamic scrollbar height if you support incremental
-    rendering.  The default implementation does nothing.
+
+  /**
+    This method is called whenever a group view is added or during the 
+    layoutResize() method.  You should use this method to size and position 
+    the group view.
+    
+    The included contentIndexHint can be used to help you determine the range
+    of content that should be included in the group.  If you are renderings a
+    list of items 100 or less, you can get the range of content belonging to
+    the group using the contentRangeForGroup() method.  If you are managing
+    a much larger set of content, you should probably implement your own 
+    data model.
+    
+    Your layout method should can optionally also use the firstLayout to 
+    further optimize itself.  Normally, you will want to only change a view's
+    actual frame if it does not match your calculated size.  However, if 
+    firstLayout is true, you can simply set the new layout without checking
+    first.
+    
+    @param {SC.View} groupView the view to size and position.
+    @param {Object} groupValue the value the groupView represents.
+    @param {Number} contentIndexHint the index of a content object.
+    @param {Bool} firstLayout True if this is the first the view has been laid out. 
+    
+  */
+  layoutGroupView: function(groupView, groupValue, contentIndexHint, firstLayout) {
+    
+  },
   
-    @param {SC.View} groupView The group view this request relates to.  If grouping is 
-      turned off, this parameter will be null.
+  /**
+    This method is called whenever an itemView is added or during the 
+    layoutResize() method.  You should use this method to size and position
+    the itemView.
     
-    @returns {Number} The view height in pixels.
+    @param {SC.View} itemViewthe item view to layout
+    @param {Number} contentIndex the index of the content this layout represents.
+    @param {Bool} firstLayout true if this is the first time it has been laid out.
   */
-  computedViewHeight: function(groupView) { return -1; },
+  layoutItemView: function(itemView, contentIndex, firstLayout) {
+    
+  },
   
-  // This will set the collection height.
-  updateComputedViewHeight: function(groupView) {
-    var height = this.computedViewHeight(groupView) ;
-    if (height >= 0) {
-      var f = this.get('frame') ;
-      if (Math.abs(f.height - height) > 0.1) {
-        f.height = height ;
-        this.set('frame', { height: height }) ;
+  /**
+    This method is called whenever the view is resized.  The default
+    implementation will simply iterate through the visible content range and
+    call layoutItemView() and layoutGroupView() on all the views.
+    
+    If you would like to provide a more efficient method for updating the
+    layout on a resize, you could override this method and do the iterating 
+    yourself.
+  */
+  layoutResize: function() {
+    if (!this._hasChildren) return ; // ignore calls before first render
+    var nowShowingRange = this.get('nowShowingRange') ;
+    var groupBy = this.get('groupBy') ;
+    var groupValue = undefined ;
+    var content = this.get('content') || [] ;
+    
+    var idx = SC.maxRange(nowShowingRange) ;
+    while(--idx >= nowShowingRange.start) {
+      var cur = content.objectAt(idx) ;
+      var itemView = this.itemViewForContent(cur) ;
+
+      // should never happen, but recover just in case.
+      if (!itemView) continue ; 
+      
+      // if grouping is enabled, get the group value and layout based on that.
+      if (groupBy && ((curGroupValue = (cur) ? cur.get(groupBy) : null) !== groupValue)) {
+        var groupView = this.groupViewForGroupValue(groupValue) ;
+        if (groupView) {
+          this.layoutGroupView(groupView, groupValue, idx, false) ;
+        }
       }
+      
+      // now layout the itemView itself.
+      this.layoutItemView(itemView, idx, false) ;
     }
   },
+    
   
-  // ......................................
-  // SELECTION
-  //
+  // Ordered array of item views currently on display.  This array 
+  // is reset whenever the item views are regenerated.
+  _itemViews: null,
 
-  _indexOfSelectionTop: function() {
-    var content = this.get('content');
-    var sel = this.get('selection');
-    if (!content || !sel) return - 1;
+  // Ordered array of group views currently in the display.  This array is
+  // reset whenever the group views are regenerated.
+  _groupViews: null,
+  
+  // Most recent content range on display.
+  _visibleContentRange: null,
+  
+  // Hash of itemViews to the content guids they current represent.  This
+  // only matches views in currently in the _visibleContentRange.
+  _itemViewsByContent: null,
 
-    // find the first item in the selection
-    var contentLength = content.get('length') ;
-    var indexOfSelected = contentLength ; var idx = sel.length ;
-    while(--idx >= 0) {
-      var curIndex = content.indexOf(sel[idx]) ;
-      if ((curIndex >= 0) && (curIndex < indexOfSelected)) indexOfSelected = curIndex ;
-    }
+  // Hash of groupViews to the group key they currently represent.
+  _groupViewsByValue: null,
+  
+  // Hash of counts of item views contained in a group view.  When the count
+  // of a group reaches zero, it will be removed.
+  _groupViewCounts: null,
+
+  // Array of unused itemViews.  Push/pop only.
+  _itemViewPool: null,
+  
+  // Array of unused groupViews.  Push/pop only.
+  _groupViewPool: null,
+  
+  // When a group view's item view count reaches zero, it is moved to this
+  // hash until updateChildren() completes.  During that time, if the group 
+  // is needed again, it can be reused.  At the end of updateChildren() this
+  // hash will be flushed and its members returned to the groupView pool.
+  //
+  _zombieGroupViews: null,
+  
+  /** @private
+    Finds or creates the itemView for the named content and inserts it into 
+    view under the correct group if needed.  Note that this method does not 
+    take into account the actual ORDER of item views in the hierarchy.  It 
+    assumes that manual layout will ensure the items appear visually in the 
+    proper order anyway.
+
+    @param {SC.View} itemView The item view to remove
+    @param {String} groupBy the value used for grouping or null if grouping is 
+      disabled.
+    
+    @returns {SC.View} the new itemView.
+  */
+  _insertItemViewFor: function(content, groupBy, contentIndex) {
+    
+    // first look for a matching record.
+    var key = SC.guidFor(content) ;
+    var ret = this._itemViewsByContent[key];
+    var firstLayout = false ;
+
+    // if no record was found, pull an item view from the pool or create one.
+    // set the content.
+    if (!ret) {
+      ret = this._itemViewPool.pop() || this.get('exampleView').create({ 
+        owner: this, displayDelegate: this 
+      }) ;
+      ret.addClassName('sc-collection-item') ; // add class name for display
+      
+      // set content and add to content hash
+      ret.set('content', content) ;
+      this._itemViewsByContent[key] = ret ;
+      this._itemViewsByGuid[SC.guidFor(ret)] = ret ;
+      firstLayout = true ;
+    }
+    if (!ret) throw "Could not create itemView for content: %@".fmt(content);
+
+    // Determine proper parent view and insert itemView if needed.
+    // Also update count of itemViews.  
+    var parentView = (groupBy && content) ? this._insertGroupViewFor(content.get(groupBy), contentIndex) : this ;
+    if (ret.get('parentNode') != parentView) {
+      parentView.appendChild(ret) ;
+      if (groupBy) this._groupViewCounts[SC.guidFor(parentView)]++ ;
+    }
+
+    // Layout itemView.
+    this.layoutItemView(ret, contentIndex, firstLayout) ;
+    return ret ;
+  },
+
+  /** @private
+    Removes the itemView from the receiver and returns it to the itemView pool 
+    for later reuse.  
+    
+    If the itemView belongs to a groupView and this leaves the groupView empty 
+    as well, then the groupView will be moved to the zombieGroupViews hash.
+    
+    @param {SC.View} itemView The item view to remove
+    @param {String} groupBy the value used for grouping or null if grouping is 
+      disabled.
+    
+    @returns {SC.View} The itemView that was removed.
+  */
+  _removeItemView: function(itemView, groupBy) {
+    
+    // If we are grouping, then decrement the groupViewCount.  If the new 
+    // count is zero, save groupView for later removal.
+    var groupView = null ; var groupValue ;
+    if (groupBy && (groupView = itemView.get('parentNode'))) {
+      if (--this._groupViewCounts[SC.guidFor(groupView)] > 0) groupView = null ; 
+      if (groupView) {
+        var content = itemView.get('content') ;
+        groupValue = (content) ? content.get(groupBy) : null ;
+      }
+    }
+    
+    // Remove itemView from parent and remove from content hash.
+    var content = itemView.get('content') ;
+    var key = SC.guidFor(content) ;
+    delete this._itemViewsByContent[key] ;
+    delete this._itemViewsByGuid[SC.guidFor(itemView)] ;
+    itemView.removeFromParent() ;
+    
+    // Clear content and return itemView to pool
+    itemView.set('content', null) ;
+    this._itemViewPool.push(itemView) ;
+    
+    // if a groupView is set, then it also needs to be returned to the pool
+    if (groupView) this._removeGroupView(groupView, groupValue) ;
+    
+    return itemView;
+  },
+  
+  /** @private
+    Adds or removes itemViews for the content in the specified range.
+    Note that this is not passed as a formal range because the length 
+    could be negative.  
+    
+    A negative length means views should be removed.
+  */
+  _insertOrRemoveItemViewsInRange: function(start, length, groupBy) {
+    // zero length means do nothing.
+    if (length == 0) return ;
+
+    var content = this.get('content') || [] ;
+    
+    // negative length == remove item views
+    if (length < 0) {
+      while(++length < 0) {
+        var c = content.objectAt(start + length) ;
+        var itemView = this.itemViewForContent(c) ;
+        if (itemView) this._removeItemView(itemView, groupBy) ;
+      }
+      
+    // positive length == add item views.
+    } else if (length > 0) {
+      while(--length >= 0) {
+        var idx = start + length ;
+        var c = content.objectAt(idx) ;
+        this._insertItemViewFor(c, groupBy, idx) ;
+      }  
+    }
+  },
+
+  /** @private
+    Finds or creates a groupView for the named group value and inserts it into
+    the receiver.  This method does not take into account the actual ORDER of
+    the groupViews in the hierarchy.  It assumes that manual layout will 
+    ensure the items appear visually in the proper order anyway.
+    
+    @returns {SC.View} the new groupView.
+  */
+  _insertGroupViewFor: function(groupValue, contentIndex) {
+    var ret =  this._groupViewsByValue[groupValue] ; 
+    // if (ret) return ret ; // nothing to do
+    
+    var firstLayout = false ;
+    
+    // if the group was not found, check the zombie pool.  If found in zombie
+    // pool, restore it to the regular group view hash.
+    if (!ret && this._zombieGroupViews) {
+      ret = this._zombieGroupViews[groupValue] ;
+      if (ret) {
+        delete this._zombieGroupViews[groupValue] ;
+        this._groupViewsByValue[groupValue] = ret ;
+        this._groupViewCounts[SC.guidFor(ret)] = 0 ;
+      }
+    }
+
+    // If groupValue still not found, create one.
+    if (!ret) {
+      ret = this._groupViewPool.pop() || this.get('exampleGroupView').create({
+         owner: this, displayDelegate: this 
+      });
+      ret.addClassName('sc-collection-group') ;
+
+      // set the groupValue on the groupView.  Older groupViews expect us to 
+      // set this directly on the labelView.  Newer groupViews should have a 
+      // groupValue property.
+      if (ret.groupValue !== undefined) {
+        ret.set('groupValue', groupValue) ;
+      } else ret.set('content', groupValue) ;
+      
+      // save in cache
+      this._groupViewsByValue[groupValue] = ret ;
+      this._groupViewCounts[SC.guidFor(ret)] = 0 ;
+      firstLayout = true; 
+    }
+    
+    // If the group view does not already belong to the receiver, add it.
+    if (!ret) throw "Could not create a groupView for value: %@".fmt(groupValue) ;
+    if (ret.get('parentNode') != this) this.appendChild(ret) ;
+    
+    // Layout the group View
+    this.layoutGroupView(ret, groupValue, contentIndex, firstLayout) ;
+    
+    return ret ;
+  },
+
+  /** @private
+    Called whenever a groupView is no longer being used.
+    
+    Theoretically, this method removes a group view from the receiver and 
+    stores it in the pool for later use.  In actuality, this will just moved 
+    the view to the zombieGroupView pool.  You must call 
+    _flushZombieGroupViews() to actually remove them from the receiver.
+  */
+  _removeGroupView: function(groupView, groupValue) {
+    if (SC.ZOMBIE_GROUPS_ENABLED) {
+      this._zombieGroupViews[groupValue] = groupView ;
+    } else {
+      this._finalRemoveGroupView(groupView) ;
+    }
+    
+    delete this._groupViewsByValue[groupValue] ;
+    delete this._groupViewCounts[SC.guidFor(groupView)] ;
+    return groupView ;
+  },
+  
+  /** @private
+    Flushes any zombie group views, removing them from their parent view and 
+    returning them to the groupView pool for later consumption.
+  */
+  _flushZombieGroupViews: function() {
+    if (!SC.ZOMBIE_GROUPS_ENABLED) return ; // nothing to do
+    
+    for(var key in this._zombieGroupViews) {
+      if (!this._zombieGroupViews.hasOwnProperty(key)) continue ;
+      var groupView = this._zombieGroupViews[key] ;
+      this._finalRemoveGroupView(groupView) ;
+    } 
+    this._zombieGroupViews = {} ; // reset
+  },
+  
+  /** @private
+    Final method to actually remove a groupView from its parent view and
+    return it to the groupView pool.
+  */
+  _finalRemoveGroupView: function(groupView) {
+    groupView.removeFromParent() ;
+
+    // set the groupValue on the groupView.  Older groupViews expect us to set 
+    // this directly on the labelView.  Newer groupViews should have a 
+    // groupValue property.
+    if (groupView.groupValue !== undefined) {
+      groupView.set('groupValue', null) ;
+    } else groupView.set('content', null) ;
+    
+    this._groupViewPool.push(groupView) ;
+    return groupView ;
+  },
+  
+  /** @private
+    Removes the rootElement from the DOM temporarily if needed to optimize performance.
+  */
+  _removeRootElementFromDom: function() {
+    if (!SC.REMOVE_COLLECTION_ROOT_ELEMENT_DURING_RENDER) return ;
+    if (this._cachedRootElementParent === undefined) {
+      var parent = this._cachedRootElementParent = this.rootElement.parentNode ;
+      this._cachedRootElementNextSibling = this.rootElement.nextSibling ;
+      if (parent) parent.removeChild(this.rootElement) ;
+    }
+  },
+  
+  /** @private
+    Re-adds root element into DOM if necessary.  Inverts _removeRootElementFromDom().
+  */
+  _restoreRootElementInDom: function() {
+    if (!SC.REMOVE_COLLECTION_ROOT_ELEMENT_DURING_RENDER) return ;
+    if (this._cachedRootElementParent) {
+      this._cachedRootElementParent.insertBefore(this.rootElement, this._cachedRootElementNextSibling);
+    }
+    this._cachedRootElementParent = this._cachedRootElementNextSibling = null ;
+  },
+  
+    
+  // ......................................
+  // SELECTION
+  //
+
+  _indexOfSelectionTop: function() {
+    var content = this.get('content');
+    var sel = this.get('selection');
+    if (!content || !sel) return - 1;
+
+    // find the first item in the selection
+    var contentLength = content.get('length') ;
+    var indexOfSelected = contentLength ; var idx = sel.length ;
+    while(--idx >= 0) {
+      var curIndex = content.indexOf(sel[idx]) ;
+      if ((curIndex >= 0) && (curIndex < indexOfSelected)) indexOfSelected = curIndex ;
+    }
     
     return (indexOfSelected >= contentLength) ? -1 : indexOfSelected ;
   },
@@ -1191,11 +1301,11 @@ SC.CollectionView = SC.View.extend(
 
       // If the selBottom is after the anchor, then reduce the selection
       if (selBottom > anchor) {
-        selBottom-- ;
+        selBottom = selBottom - numberOfItems ;
         
       // otherwise, select the previous item from the top 
       } else {
-        selTop-- ;
+        selTop = selTop - numberOfItems ;
       }
       
       // Ensure we are not out of bounds
@@ -1204,7 +1314,7 @@ SC.CollectionView = SC.View.extend(
       
     // if not extending, just select the item previous to the selTop
     } else {
-      selTop = this._indexOfSelectionTop() - 1;
+      selTop = this._indexOfSelectionTop() - numberOfItems;
       if (selTop < 0) selTop = 0 ;
       selBottom = selTop ;
       anchor = null ;
@@ -1218,7 +1328,7 @@ SC.CollectionView = SC.View.extend(
 
     // ensure that the item is visible and set the selection
     if (items.length > 0) {
-      this.scrollToItemRecord(items.first());
+      this.scrollToContent(items.first());
       this.selectItems(items);
     }
     
@@ -1253,11 +1363,11 @@ SC.CollectionView = SC.View.extend(
 
       // If the selTop is before the anchor, then reduce the selection
       if (selTop < anchor) {
-        selTop++ ;
+        selTop = selTop + numberOfItems ;
         
       // otherwise, select the next item after the top 
       } else {
-        selBottom++ ;
+        selBottom = selBottom + numberOfItems ;
       }
       
       // Ensure we are not out of bounds
@@ -1266,7 +1376,7 @@ SC.CollectionView = SC.View.extend(
       
     // if not extending, just select the item next to the selBottom
     } else {
-      selBottom = this._indexOfSelectionBottom() + 1;
+      selBottom = this._indexOfSelectionBottom() + numberOfItems;
       if (selBottom >= contentLength) selBottom = contentLength-1;
       selTop = selBottom ;
       anchor = null ;
@@ -1280,7 +1390,7 @@ SC.CollectionView = SC.View.extend(
 
     // ensure that the item is visible and set the selection
     if (items.length > 0) {
-      this.scrollToItemRecord(items.first());
+      this.scrollToContent(items.first());
       this.selectItems(items);
     }
     
@@ -1292,9 +1402,16 @@ SC.CollectionView = SC.View.extend(
   * @param {SC.Record} record The record to scroll to
   * @returns {void}
   */
-  scrollToItemRecord: function( record )
-  {
-    this.scrollToItemView( this.itemViewForContent(record) );
+  scrollToContent: function(record) {
+    // find the itemView.  if not present, add one.
+    var itemView = this.itemViewForContent(record) ;
+    if (!itemView) {
+      var content = Array.from(this.get('content')) ;
+      var contentIndex = content.indexOf(record) ;
+      var groupBy = this.get('groupBy');
+      itemView = this._insertItemViewFor(itemView, groupBy, contentIndex); 
+    }
+    if (itemView) this.scrollToItemView(itemView);
   },
   /**
   * Scroll the rootElement (if needed) to ensure that the item is visible.
@@ -1303,24 +1420,13 @@ SC.CollectionView = SC.View.extend(
   */
   scrollToItemView: function( view )
   {
-    var visible       = Element.extend(this.get('rootElement'));
-    var visibleTop    = visible.scrollTop;
-    var visibleBottom = visibleTop + visible.getHeight();
-    
-    visible.makePositioned();
-    
-    var item       = Element.extend(view.get('rootElement'));
-    var itemTop    = item.positionedOffset().top;
-    var itemBottom = itemTop + item.getHeight();
-
-    visible.undoPositioned();
-    
-    if (itemTop < visibleTop) {
-      visible.scrollTop = itemTop;
-    }
-    if (itemBottom > visibleBottom) {
-      visible.scrollTop += (itemBottom - visibleBottom);
+    // find first scrollable view.
+    var scrollable = this ;
+    while(scrollable && (scrollable != SC.window) && (!scrollable.get('isScrollable'))) {
+      scrollable = scrollable.get('parentNode') ;
     }
+    if (!scrollable || (scrollable == SC.window)) return ; // no scrollable!
+    scrollable.scrollToVisible(view) ;
   },
 
   /** 
@@ -1382,7 +1488,7 @@ SC.CollectionView = SC.View.extend(
     Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
   */
   moveLeft: function(sender, evt) {
-    if ((this.get('itemsPerRow') || 1) > 1) this.selectNextItem(false, 1) ;
+    if ((this.get('itemsPerRow') || 1) > 1) this.selectPreviousItem(false, 1) ;
     return true ;
   },
 
@@ -1390,7 +1496,7 @@ SC.CollectionView = SC.View.extend(
     Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
   */
   moveRight: function(sender, evt) {
-    if ((this.get('itemsPerRow') || 1) > 1) this.selectPreviousItem(false, 1) ;
+    if ((this.get('itemsPerRow') || 1) > 1) this.selectNextItem(false, 1) ;
     return true ;
   },
 
@@ -1408,7 +1514,7 @@ SC.CollectionView = SC.View.extend(
     Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
   */
   moveLeftAndModifySelection: function(sender, evt) {
-    if ((this.get('itemsPerRow') || 1) > 1) this.selectNextItem(true, 1) ;
+    if ((this.get('itemsPerRow') || 1) > 1) this.selectPreviousItem(true, 1) ;
     return true ;
   },
 
@@ -1416,82 +1522,12 @@ SC.CollectionView = SC.View.extend(
     Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
   */
   moveRightAndModifySelection: function(sender, evt) {
-    if ((this.get('itemsPerRow') || 1) > 1) this.selectPreviousItem(true, 1) ;
+    if ((this.get('itemsPerRow') || 1) > 1) this.selectNextItem(true, 1) ;
     return true ;
   },
 
-  
-  /** 
-    Find the item view underneath the passed mouse location.
-    
-    The default implementation of this method simply searches each item view's
-    frame to find one that includes the location.  If you are doing your own
-    layout, you may be able to perform this calculation more quickly.  If so,
-    consider overriding this method for better performance during drag operations.
-    
-    @param {Point} loc   The current mouse location in the coordinate of the 
-      collection view
-      
-    @returns {SC.View} The item view under the collection
-  */
-  itemViewAtLocation: function(loc) {
-    var content = this.get('content') ;
-    var idx = content.length;    
-    while(--idx >= 0) {
-      var itemView = this.itemViewForContent(content.objectAt(idx));
-      var frame = itemView.get('frame');
-      if (SC.pointInRect(loc, frame)) return itemView ;
-    }
-    return null; // not in an itemView right now.
-  },
-  
-
-  
-  /** 
-    Find the first content item view for the passed event.
-    
-    This method will go up the view chain, starting with the view that was the target
-    of the passed event, looking for a child item.  This will become the view that 
-    is selected by the mouse event.
-    
-    This method only works for mouseDown & mouseUp events.  mouseMoved events do
-    not have a target.
-    
-    @param {Event} evt An event
-    
-  */
-  itemViewForEvent: function(evt)
-  {
-    var view = SC.window.firstViewForEvent( evt );
-    // work up the view hierarchy to find a match...
-    do {
-      // item clicked was the ContainerView itself... i.e. the user clicked outside the child items
-      // nothing to return...
-      if ( view == this ) return null;
-      
-      // sweet!... the view is not only in the collection, but it says we can hit it.
-      // hit it and quit it... 
-      if ( this.hasItemView(view) && (!view.hitTest || view.hitTest(evt)) ) return view;
-    } while ( view = view.get('parentNode') );
-    
-    // nothing was found... 
-    return null;
-  },
-
-  
-  didMouseDown: function(ev) { 
-    console.warn("didMouseDown will be removed from CollectionView in the near future. Use mouseDown instead");
-    return this._mouseDown(ev, true); 
-  },
-  
   mouseDown: function(ev) {
-    // older code might still use didMouseDown.  Warn to give people some time to transition.
-    if (this.didMouseDown != SC.CollectionView.prototype.didMouseDown) {
-      return this.didMouseDown(ev) ;
-    } else return this._mouseDown(ev);
-  },
-    
-  _mouseDown: function(ev) {
+
     // save for drag opt
     this._mouseDownEvent = ev ;
 
@@ -1499,11 +1535,14 @@ SC.CollectionView = SC.View.extend(
     if (this.useToggleSelection) return true;
 
     // Make sure that saved mouseDown state is always reset in case we do
-    // not get a paired mouseUp. (Only happens if subclass does not call us like it should)
-    this._mouseDownAt = this._shouldDeselect = this._shouldReselect = this._refreshSelection = false;
+    // not get a paired mouseUp. (Only happens if subclass does not call us 
+    // like it should)
+    this._mouseDownAt = this._shouldDeselect = 
+      this._shouldReselect = this._refreshSelection = false;
 
     var mouseDownView    = this._mouseDownView = this.itemViewForEvent(ev);
-    var mouseDownContent = this._mouseDownContent = (mouseDownView) ? mouseDownView.get('content') : null;
+    var mouseDownContent = 
+      this._mouseDownContent = (mouseDownView) ? mouseDownView.get('content') : null;
 
     // become first responder if possible.
     this.becomeFirstResponder() ;
@@ -1540,176 +1579,463 @@ SC.CollectionView = SC.View.extend(
     } else if (!modifierKeyPressed && isSelected) {
       this._shouldReselect = mouseDownContent;
       
-    // Otherwise, simply select the clicked on item, adding it to the current
-    // selection if a modifier key was pressed.
-    } else {
-      this.selectItems(mouseDownContent, modifierKeyPressed);
+    // Otherwise, simply select the clicked on item, adding it to the current
+    // selection if a modifier key was pressed.
+    } else {
+      this.selectItems(mouseDownContent, modifierKeyPressed);
+    }
+
+    // saved for extend by shift ops.
+    this._previousMouseDownContent = mouseDownContent;
+    return true;
+  },
+  
+  mouseUp: function(ev) {
+    
+    var canAct = this.get('actOnSelect') ;
+    var view = this.itemViewForEvent(ev) ;
+    
+    if (this.useToggleSelection) {
+      if (!view) return ; // do nothing when clicked outside of elements
+      
+      // determine if item is selected. If so, then go on.
+      var selection = this.get('selection') || [] ;
+      var content = (view) ? view.get('content') : null ;
+      var isSelected = selection.include(content) ;
+      if (isSelected) {
+        this.deselectItems([content]) ;
+      } else this.selectItems([content],true) ;
+      
+    } else {
+      if (this._shouldDeselect) this.deselectItems(this._shouldDeselect);
+      if (this._shouldReselect) this.selectItems(this._shouldReselect,false) ;
+
+      // this is invoked if the user clicked on a checkbox.  If this is not 
+      // done then the checkbox might not update properly.
+      if (this._refreshSelection) {
+      }
+      this._cleanupMouseDown() ;
+    }
+
+    this._mouseDownEvent = null ;
+    if (canAct) this._action(ev, view) ;
+    
+    return false;  // bubble event to allow didDoubleClick to be called...
+  },
+  
+  _cleanupMouseDown: function() {
+    this._mouseDownAt = this._shouldDeselect = this._shouldReselect = this._refreshSelection = false;
+    this._mouseDownEvent = this._mouseDownContent = this._mouseDownView = null ;
+  },
+  
+  mouseMoved: function(ev) {
+    var view = this.itemViewForEvent(ev) ;
+    // handle hover events.
+    if(this._lastHoveredItem && ((view === null) || (view != this._lastHoveredItem)) && this._lastHoveredItem.mouseOut) {
+      this._lastHoveredItem.mouseOut(ev); 
+    }
+    this._lastHoveredItem = view ;
+    if (view && view.mouseOver) view.mouseOver(ev) ;
+  },
+
+  mouseOut: function(ev) {
+  
+    var view = this._lastHoveredItem ;
+    this._lastHoveredItem = null ;
+    if (view && view.didMouseOut) view.didMouseOut(ev) ;
+  },
+  
+  // invoked when the user double clicks on an item.
+  didDoubleClick: function(ev) {
+    console.warn("didDoubleClick will be removed from CollectionView in the near future. Use mouseOut instead");
+    return this._doubleClick(ev) ;
+  },
+  
+  doubleClick: function(ev) {
+    if (this.didDoubleClick != SC.CollectionView.prototype.didDoubleClick) {
+      return this.didDoubleClick(ev) ;
+    } else return this._doubleClick(ev) ;
+  },
+  
+  _doubleClick: function(ev) {
+    console.info('_doubleClick!') ;
+    var view = this.itemViewForEvent(ev) ;
+    if (view) {
+      this._action(view, ev) ;
+      return true ;
+    } else return false ;
+  },
+
+  _findSelectionExtendedByShift: function(selection, mouseDownContent) {
+    var collection = this.get('content');
+
+    // bounds of the collection...
+    var collectionLowerBounds = 0;
+    var collectionUpperBounds = (collection.get('length') - 1);
+
+    var selectionBeginIndex = collection.indexOf(selection.first());
+    var selectionEndIndex   = collection.indexOf(selection.last());
+
+    var previousMouseDownIndex = collection.indexOf(this._previousMouseDownContent);
+    // _previousMouseDownContent couldn't be found... either it hasn't been set yet or the record has been deleted by the user
+    // fall back to the first selected item.
+    if (previousMouseDownIndex == -1) previousMouseDownIndex = selectionBeginIndex;
+
+
+    var currentMouseDownIndex = collection.indexOf(mouseDownContent);
+    // sanity check...
+    if (currentMouseDownIndex == -1) throw "Unable to extend selection to an item that's not in the collection!";
+
+    // clicked before the current selection set... extend it's beginning...
+    if (currentMouseDownIndex < selectionBeginIndex) selectionBeginIndex = currentMouseDownIndex;
+    // clicked after the current selection set... extend it's ending...
+    if (currentMouseDownIndex > selectionEndIndex) selectionEndIndex = currentMouseDownIndex;
+    // clicked inside the selection set... need to determine where the las
+    if ((currentMouseDownIndex > selectionBeginIndex) && (currentMouseDownIndex < selectionEndIndex))
+    {
+      if (currentMouseDownIndex == previousMouseDownIndex) {
+        selectionBeginIndex = currentMouseDownIndex;
+        selectionEndIndex   = currentMouseDownIndex;
+      } else if (currentMouseDownIndex > previousMouseDownIndex) {
+        selectionBeginIndex = previousMouseDownIndex;
+        selectionEndIndex   = currentMouseDownIndex;
+      } else if (currentMouseDownIndex < previousMouseDownIndex){
+        selectionBeginIndex = currentMouseDownIndex;
+        selectionEndIndex   = previousMouseDownIndex;
+      }
+    }
+    // slice doesn't include the last index passed... silly..
+    selectionEndIndex++;
+
+    // shouldn't need to sanity check that the selection is in bounds due to the indexOf checks above...
+    // I'll have faith that indexOf hasn't lied to me...
+    return collection.slice(selectionBeginIndex, selectionEndIndex);
+  },
+  
+
+  // ......................................
+  // FIRST RESPONDER
+  //
+
+  /**
+    Called whenever the collection becomes first responder. 
+    Adds the focused class to the element.
+  */
+  didBecomeFirstResponder: function() {
+    this.addClassName('focus') ;
+  },
+  
+  willLoseFirstResponder: function() {
+    this.removeClassName('focus');
+  },
+  
+  // ......................................
+  // DRAG AND DROP SUPPORT
+  //
+
+  /** 
+    The insertion orientation.  This is used to determine which
+    dimension we should pay attention to when determining insertion point for
+    a mouse click.
+    
+    {{{
+      SC.HORIZONTAL_ORIENTATION: look at the X dimension only
+      SC.VERTICAL_ORIENTATION: look at the Y dimension only
+    }}}
+  */
+  insertionOrientation: SC.HORIZONTAL_ORIENTATION,
+  
+  /**
+    Get the preferred insertion point for the given location, including 
+    an insertion preference of before or after the named index.
+    
+    The default implementation will loop through the item views looking for 
+    the first view to "switch sides" in the orientation you specify.
+  */
+  insertionIndexForLocation: function(loc) {  
+    var content = this.get('content') ;
+    var f, itemView, curSide, lastSide = null ;
+    var orient = this.get('insertionOrientation') ;
+    var ret=  null ;
+    for(var idx=0; ((ret == null) && (idx<content.length)); idx++) {
+      itemView = this.itemViewForContent(content.objectAt(idx));
+      f = this.convertFrameFromView(itemView.get('frame'), itemView) ;
+      
+      // if we are a horizontal orientation, look for the first item that 
+      // will "switch sides" on the x path an the maxY is greater than Y.
+      // This assumes you will flow top to bottom, but it should work if you
+      // flow LTR or RTL.
+      if (orient == SC.HORIZONTAL_ORIENTATION) {
+        if (SC.maxY(f) > loc.y) {
+          curSide = (SC.maxX(f) < loc.x) ? -1 : 1 ;
+        } else curSide = null ;
+        
+      // if we are a vertical orientation, look for the first item that
+      // will "swithc sides" on the y path and the maxX is greater than X.
+      // This assumes you will flow LTR, but it should work if you flow
+      // bottom to top or top to bottom.
+      } else {
+        if (SC.minX(f) < loc.x) {
+          curSide = (SC.maxY(f) < loc.y) ? -1 : 1 ;
+        } else curSide = null ;
+      } 
+      
+      // if we "switched" sides then return this item view.
+      if (curSide !== null) {
+        
+        // OK, we found an item view, while we have this data, decide if
+        // we should insert before or after the view
+        if ((lastSide !== null) && (curSide != lastSide)) {
+          ret = idx ;
+          if (orient == SC.HORIZONTAL_ORIENTATION) {
+            if (SC.midX(f) < loc.x) ret++ ;
+          } else {
+            if (SC.midY(f) < loc.y) ret++ ;
+          }
+        }
+        lastSide =curSide ;
+      }
+    }
+    
+    // Handle some edge cases
+    if ((ret == null) || (ret < 0)) ret = 0 ;
+    if (ret > content.length) ret = content.length ;
+    
+    // Done. Phew.  Return.
+    return ret;
+  },
+  
+  /** 
+    Override to show the insertion point during a drag.
+    
+    Called during a drag to show the insertion point.  Passed value is the
+    item view that you should display the insertion point before.  If the
+    passed value is null, then you should show the insertion point AFTER that
+    last item view returned by the itemViews property.
+    
+    Once this method is called, you are guaranteed to also recieve a call to
+    hideInsertionPoint() at some point in the future.
+    
+    The default implementation of this method does nothing.
+    
+    @param {SC.View} itemView view the insertion point should appear directly before. If null, show insertion point at end.
+    
+    @returns {void}
+  */
+  showInsertionPointBefore: function(itemView) {},
+  
+  /**
+    Override to hide the insertion point when a drag ends.
+    
+    Called during a drag to hide the insertion point.  This will be called when the
+    user exits the view, cancels the drag or completes the drag.  It will not be 
+    called when the insertion point changes during a drag.
+    
+    You should expect to receive one or more calls to showInsertionPointBefore()
+    during a drag followed by at least one call to this method at the end.  Your
+    method should not raise an error if it is called more than once.
+    
+    @returns {void}
+  */
+  hideInsertionPoint: function() {},
+
+  /**
+    Override this method to provide your own ghost image for a drag.  
+    
+    Note that the only purpose of this view is to render a visible drag element.  It is
+    not critical that you make this element bindable, etc.
+    
+    @param dragContent {Array} Array of content objects that will be used in the drag.
+  */
+  ghostViewFor: function(dragContent) {
+    var view = SC.View.create() ;
+    view.setStyle({ position: 'absolute', overflow: 'hidden' });
+    
+    var viewFrame = this.convertFrameToView(this.get('frame'), null) ;
+    view.set('frame', viewFrame) ;
+    
+    var idx = dragContent.length ;
+    var maxX = 0; var maxY = 0 ; var minX =100000; var minY = 100000 ;
+    
+    while(--idx >= 0) {
+      var itemView = this.itemViewForContent(dragContent[idx]) ;
+      if (!itemView) continue ;
+      var f = itemView.get('frame') ;
+      var dom = itemView.rootElement ;
+      if (!dom) continue ;
+      
+      // save the maxX & maxY.  This will be used to trim the size 
+      // of the ghost view later.
+      if (SC.maxX(f) > maxX) maxX = SC.maxX(f) ;
+      if (SC.maxY(f) > maxY) maxY = SC.maxY(f) ;
+      if (SC.minX(f) < minX) minX = SC.minX(f) ;
+      if (SC.minY(f) < minY) minY = SC.minY(f) ;
+
+      // Clone the contents of this node.  We should probably apply the 
+      // computed style to the cloned nodes in order to make sure they match even if the 
+      // CSS styles do not match.  Make sure the items are properly 
+      // positioned.
+      dom = dom.cloneNode(true) ;
+      Element.setStyle(dom, { position: "absolute", left: "%@px".fmt(f.x), top: "%@px".fmt(f.y), width: "%@px".fmt(f.width), height: "%@px".fmt(f.height) }) ;
+      view.rootElement.appendChild(dom) ;
+    }
+
+    // Now we have a view, create another view that will wrap the other view and position it 
+    // inside.
+    var wrapper = SC.View.create() ;
+    wrapper.setStyle({ position: 'absolute', overflow: 'hidden' }) ;
+    wrapper.set('frame', { 
+      x: viewFrame.x+minX, y: viewFrame.y+minY, 
+      width: (maxX-minX+1), height: (maxY-minY+1) 
+    }) ;
+    wrapper.appendChild(view) ;
+    view.set('frame', { x: 0-minX, y: 0-minY }) ;
+    return wrapper ;
+  },
+  
+  mouseDragged: function(ev) {
+    // Don't do anything unless the user has been dragging for 123msec
+    if ((Date.now() - this._mouseDownAt) < 123) return true ;
+    
+    // OK, they must be serious, start a drag if possible. 
+    if (this.get('canReorderContent')) {
+
+      // First, get the selection to drag.  Drag an array of selected
+      // items appearing in this collection, in the order of the 
+      // collection.
+      var content = this.get('content') || [] ;
+      var dragContent = this.get('selection').sort(function(a,b) {
+        a = content.indexOf(a) ; b = content.indexOf(b) ;
+        return (a<b) ? -1 : ((a>b) ? 1 : 0) ;
+      });
+
+      // Build the drag view to use for the ghost drag.  This 
+      // should essentially contain any visible drag items.
+      var view = this.ghostViewFor(dragContent) ;
+      
+      // Initiate the drag
+      SC.Drag.start({
+        event: this._mouseDownEvent,
+        source: this,
+        dragView: view,
+        ghost: NO,
+        slideBack: YES,
+        data: { "_mouseDownContent": dragContent }
+      }) ; 
+      
+      // Also use this opportunity to clean up since mouseUp won't 
+      // get called.
+      this._cleanupMouseDown() ;
+      this._lastInsertionIndex = null ;
     }
-
-    // saved for extend by shift ops.
-    this._previousMouseDownContent = mouseDownContent;
-    return true;
   },
   
-  // invoked when the user releases the mouse.  based on the information saved
-  // during mouse down, we decide what to do.
-  didMouseUp: function(ev) { 
-    console.warn("didMouseUp will be removed from CollectionView in the near future. Use mouseUp instead");
-    return this._mouseUp(ev);
-  },
-  
-  mouseUp: function(ev) {
-    if (this.didMouseUp != SC.CollectionView.prototype.didMouseUp) {
-      return this.didMouseUp(ev) ;
-    } else return this._mouseUp(ev) ;
+  // Drop Source. 
+  dragEntered: function(drag, evt) {
+    if ((drag.get('source') == this) && this.get('canReorderContent')) {
+      return SC.DRAG_MOVE ;
+    } else {
+      return SC.DRAG_NONE ;
+    }
   },
   
-  _mouseUp: function(ev) {
-    
-    var canAct = this.get('actOnSelect') ;
-    var view = this.itemViewForEvent(ev) ;
-    
-    if (this.useToggleSelection) {
-      if (!view) return ; // do nothing when clicked outside of elements
-      
-      // determine if item is selected. If so, then go on.
-      var selection = this.get('selection') || [] ;
-      var content = (view) ? view.get('content') : null ;
-      var isSelected = selection.include(content) ;
-      if (isSelected) {
-        this.deselectItems([content]) ;
-      } else this.selectItems([content],true) ;
+  // If reordering is allowed, then show insertion point
+  dragUpdated: function(drag, evt) {
+    if (this.get('canReorderContent')) {
+      var loc = drag.get('location') ;
+      loc = this.convertFrameFromView(loc, null) ;
       
-    } else {
-      if (this._shouldDeselect) this.deselectItems(this._shouldDeselect);
-      if (this._shouldReselect) this.selectItems(this._shouldReselect,false) ;
+      // get the insertion index for this location.  This can be computed
+      // by a subclass using whatever method.  This method is not expected to
+      // do any data valdidation, just to map the location to an insertion index.
+      var ret = this.insertionIndexForLocation(loc) ;
 
-      // this is invoked if the user clicked on a checkbox.  If this is not 
-      // done then the checkbox might not update properly.
-      if (this._refreshSelection) {
+      // now that we have an index, find the nearest index that we can 
+      // actually insert at, or do not allow.
+      var objects = (drag.source == this) ? (drag.dataForType('_mouseDownContent') || []) : [];
+      var content = this.get('content') || [] ;
+
+      // if the insertion index is in between two items in the drag itself, 
+      // then this is not allowed.  Either use the last insertion index or 
+      // find the first index that is not in between selections.
+      var isPreviousInDrag = (ret > 0) ? objects.indexOf(content.objectAt(ret-1)) : -1 ;
+      var isNextInDrag = (ret < content.get('length')-1) ? objects.indexOf(content.objectAt(ret)) : -1 ;
+      if (isPreviousInDrag>=0 && isNextInDrag>=0) {
+        if (this._lastInsertionIndex == null) {
+          while((ret > 0) && (objects.indexOf(content.objectAt(ret)) >= 0)) ret-- ;
+        } else ret = this._lastInsertionIndex ;
       }
-      this._cleanupMouseDown() ;
-    }
+      
+      // Now that we have verified that, check to see if a drop is allowed in the 
+      // insertion index with the delegate.
+      // TODO
 
-    this._mouseDownEvent = null ;
-    if (canAct) this._action(ev, view) ;
-    
-    return false;  // bubble event to allow didDoubleClick to be called...
-  },
-  
-  _cleanupMouseDown: function() {
-    this._mouseDownAt = this._shouldDeselect = this._shouldReselect = this._refreshSelection = false;
-    this._mouseDownEvent = this._mouseDownContent = this._mouseDownView = null ;
-  },
-  
-  // this can be used to initiate a drag.  Only drags 100ms after mouseDown
-  // to avoid responding to clicks.
-  mouseDidMove: function(ev) {
-    console.warn("mouseDidMove will be removed from CollectionView in the near future. Use mouseMoved instead");
-    return this._mouseMoved(ev) ;
-  },
-  
-  mouseMoved: function(ev) {
-    if (this.mouseDidMove != SC.CollectionView.prototype.mouseDidMove) {
-      return this.mouseDidMove(ev) ;
-    } else return this._mouseMoved(ev) ;
-  },
-  
-  _mouseMoved: function(ev) {
-    var view = this.itemViewForEvent(ev) ;
-    // handle hover events.
-    if(this._lastHoveredItem && ((view === null) || (view != this._lastHoveredItem)) && this._lastHoveredItem.didMouseOut) {
-      this._lastHoveredItem.didMouseOut(ev); 
+      if (this._lastInsertionIndex != ret) {
+        var itemView = this.itemViewForContent(this.get('content').objectAt(ret));
+        this.showInsertionPointBefore(itemView) ;
+      }
+      this._lastInsertionIndex = ret ;
+      
     }
-    this._lastHoveredItem = view ;
-    if (view && view.didMouseOver) view.didMouseOver(ev) ;
+    return SC.DRAG_MOVE;  
   },
 
-  didMouseOut: function(ev) {
-    console.warn("didMouseOut will be removed from CollectionView in the near future. Use mouseOut instead");
-    return this._mouseOut(ev) ;
-  },
-  
-  mouseOut: function(ev) {
-    if (this.didMouseOut != SC.CollectionView.prototype.didMouseOut) {
-      return this.didMouseOut(ev) ;
-    } else return this._mouseOut(ev) ;
-  },
-  
-  _mouseOut: function(ev) {
-  
-    var view = this._lastHoveredItem ;
-    this._lastHoveredItem = null ;
-    if (view && view.didMouseOut) view.didMouseOut(ev) ;
+  dragExited: function() {
+    this.hideInsertionPoint() ;
+    this._lastInsertionIndex = null ;
   },
   
-  // invoked when the user double clicks on an item.
-  didDoubleClick: function(ev) {
-    console.warn("didDoubleClick will be removed from CollectionView in the near future. Use mouseOut instead");
-    return this._doubleClick(ev) ;
+  dragEnded: function() {
+    this.hideInsertionPoint() ;
+    this._lastInsertionIndex = null ;
   },
   
-  doubleClick: function(ev) {
-    if (this.didDoubleClick != SC.CollectionView.prototype.didDoubleClick) {
-      return this.didDoubleClick(ev) ;
-    } else return this._doubleClick(ev) ;
+  prepareForDragOperation: function(op, drag) { 
+    return SC.DRAG_ANY; 
   },
   
-  _doubleClick: function(ev) {
-    console.info('_doubleClick!') ;
-    var view = this.itemViewForEvent(ev) ;
-    if (view) {
-      this._action(view, ev) ;
-      return true ;
-    } else return false ;
-  },
-
-  _findSelectionExtendedByShift: function(selection, mouseDownContent) {
-    var collection = this.get('content');
-
-    // bounds of the collection...
-    var collectionLowerBounds = 0;
-    var collectionUpperBounds = (collection.get('length') - 1);
-
-    var selectionBeginIndex = collection.indexOf(selection.first());
-    var selectionEndIndex   = collection.indexOf(selection.last());
-
-    var previousMouseDownIndex = collection.indexOf(this._previousMouseDownContent);
-    // _previousMouseDownContent couldn't be found... either it hasn't been set yet or the record has been deleted by the user
-    // fall back to the first selected item.
-    if (previousMouseDownIndex == -1) previousMouseDownIndex = selectionBeginIndex;
+  performDragOperation: function(op, drag) { 
+    
+    SC.Benchmark.start('%@ performDragOperation'.fmt(SC.guidFor(this))) ;
+    
+    var loc = drag.get('location') ;
+    loc = this.convertFrameFromView(loc, null) ;
+    
+    // if op is MOVE or COPY, add item to view.
+    var objects = drag.dataForType('_mouseDownContent') ;
+    if (objects && (op == SC.DRAG_MOVE)) {
 
+      // find the index to for the new insertion 
+      var idx = this.insertionIndexForLocation(loc) ;
 
-    var currentMouseDownIndex = collection.indexOf(mouseDownContent);
-    // sanity check...
-    if (currentMouseDownIndex == -1) throw "Unable to extend selection to an item that's not in the collection!";
+      var content = this.get('content') ;
+      content.beginPropertyChanges(); // suspend notifications
 
-    // clicked before the current selection set... extend it's beginning...
-    if (currentMouseDownIndex < selectionBeginIndex) selectionBeginIndex = currentMouseDownIndex;
-    // clicked after the current selection set... extend it's ending...
-    if (currentMouseDownIndex > selectionEndIndex) selectionEndIndex = currentMouseDownIndex;
-    // clicked inside the selection set... need to determine where the las
-    if ((currentMouseDownIndex > selectionBeginIndex) && (currentMouseDownIndex < selectionEndIndex))
-    {
-      if (currentMouseDownIndex == previousMouseDownIndex) {
-        selectionBeginIndex = currentMouseDownIndex;
-        selectionEndIndex   = currentMouseDownIndex;
-      } else if (currentMouseDownIndex > previousMouseDownIndex) {
-        selectionBeginIndex = previousMouseDownIndex;
-        selectionEndIndex   = currentMouseDownIndex;
-      } else if (currentMouseDownIndex < previousMouseDownIndex){
-        selectionBeginIndex = currentMouseDownIndex;
-        selectionEndIndex   = previousMouseDownIndex;
+      // find the old index and remove it.
+      var objectsIdx = objects.get('length') ;
+      while(--objectsIdx >= 0) {
+        var obj = objects.objectAt(objectsIdx) ;
+        var old = content.indexOf(obj) ;
+        if (old >= 0) content.removeAt(old) ;
+        if ((old >= 0) && (old < idx)) idx--; //adjust idx
       }
+    
+      // now insert objects at new location
+      content.replace(idx, 0, objects) ;
+      content.endPropertyChanges(); // restart notifications
     }
-    // slice doesn't include the last index passed... silly..
-    selectionEndIndex++;
-
-    // shouldn't need to sanity check that the selection is in bounds due to the indexOf checks above...
-    // I'll have faith that indexOf hasn't lied to me...
-    return collection.slice(selectionBeginIndex, selectionEndIndex);
+    
+    SC.Benchmark.end('%@ performDragOperation'.fmt(SC.guidFor(this))) ;
+    console.log(SC.Benchmark.report()) ;
+    
+    return SC.DRAG_MOVE; 
   },
   
+  concludeDragOperation: function(op, drag) {
+    this.hideInsertionPoint() ;
+    this._lastInsertionIndex = null ;
+  },
+    
 
 
   // ......................................
@@ -1717,20 +2043,24 @@ SC.CollectionView = SC.View.extend(
   //
   
   init: function() {
+
+    // Initialize internal hashes and arrays.  Normally the best approach to this 
+    // is to initialize a property only when it is used.  However, these properties
+    // are critical to layout and therefore will always be needed so it is faster
+    // to do it once here.
+    this._itemViewsByContent= {};
+    this._groupViewsByValue= {};
+    this._groupViewCounts= {};
+    this._zombieGroupViews= {};
+    this._itemViewsByGuid = {} ;
+
+    this._itemViewPool= [];
+    this._groupViewPool= [];
+
     arguments.callee.base.apply(this, arguments) ;
     this._dropTargetObserver();
   },
 
-  // When canReorderContent changes, add or remove drop target as necessary.
-  _dropTargetObserver: function() {
-    var canDrop = this.get('canReorderContent') || this.get('isDropTarget') ;
-    if (canDrop) {
-      SC.Drag.addDropTarget(this) ;
-    } else {
-      SC.Drag.removeDropTarget(this) ;
-    }
-  }.observes('canReorderContent', 'isDropTarget'),
-  
   // Perform the action.  Supports legacy behavior as well as newer style
   // action dispatch.
   _action: function(view, evt) {
@@ -1759,76 +2089,93 @@ SC.CollectionView = SC.View.extend(
       return view.action(evt) ;
     }
   },
-  
-  _viewsForContent: null,
-  _content: [], // cached for changes.
-  propertyObserver: function(observing,target,key,value)
-  {
-    if (target == this)
-    {
-      // update children when content changes.
-      if (key == 'content')
-      {
-        // cache the observer binding
-        if (!this._boundObserver)
-        {
-          this._boundObserver = this._contentPropertyObserver.bind(this);
-        }
 
-        // don't update the content unless it has changed.  Note that if we
-        // get a new empty array, that doesn't count as a change from a prev
-        // empty array.
-        var isEqual = (
-                        ((value && this._content) && (value.get('length') == 0) && (this._content.get('length') == 0)) || 
-                        SC.isEqual( value, this._content)
-                      );
-
-        // remove and re-add the observer for "[]" before changing the content property
-        // this triggers a render of the child item views whenever the array is modified.
-        if (this._content && this._content.removeObserver) this._content.removeObserver('[]', this._boundObserver);
-        this._content = value;
-        if (this._content && this._content.addObserver) this._content.addObserver('[]', this._boundObserver);
-
-        // only re-render the collection if the content was actually changed to a new value.
-        if (!isEqual)
-        {
-          this._contentPropertyObserver(target,key,value);
-        }
-        
-      // update selection when selection changes.  set this as a timeout so 
-      // that a render can finish first.
-      } 
-      else if (key == 'selection')
-      {
-        if (!this._updatingSel)
-        {
-          this._updatingSel = this.invokeLater('_updateSelectionState',1);
-        }
-      }
+  /** Add/remove from drop targets as needed. */
+  _dropTargetObserver: function() {
+    var canDrop = this.get('canReorderContent') || this.get('isDropTarget') ;
+    if (canDrop) {
+      SC.Drag.addDropTarget(this) ;
+    } else {
+      SC.Drag.removeDropTarget(this) ;
     }
-  },
+  }.observes('canReorderContent', 'isDropTarget'),
+
+  /** @private
+    Whenever content changes, update children and also start observing
+    new [] property.
+  */
+  _contentObserver: function() {
+    var content = this.get('content') ;
+    if (SC.isEqual(content, this._content)) return ; // nothing to do
+
+    if (!this._boundContentPropertyObserver) {
+      this._boundContentPropertyObserver = this._contentPropertyObserver.bind(this) ;
+    }
+    var func = this._boundContentPropertyObserver ;
+
+    // remove old observer, add new observer, and trigger content property change
+    if (this._content) this._content.removeObserver('[]', func) ;
+    if (content) content.addObserver('[]', func) ;
+    this._content = content; //cache
+    this._contentPropertyRevision = null ;
+    this._contentPropertyObserver(this, '[]', content, content.propertyRevision) ; 
+  }.observes('content'),
+  
+  /** @private
+    Whenever the selection changes, update the itemViews.
+  */
+  _selectionObserver: function() {
+    var sel = this.get('selection') ;
+    if (SC.isEqual(sel, this._selection)) return ; // nothing to do
 
+    if (!this._boundSelectionPropertyObserver) {
+      this._boundSelectionPropertyObserver = this._selectionPropertyObserver.bind(this) ;
+    }
+    var func = this._boundSelectionPropertyObserver ;
+    
+    if (this._selection) this._selection.removeObserver('[]', func) ;
+    if (sel) sel.addObserver('[]', func) ;
+    this._selection = sel ;
+    this._selectionPropertyRevision = null ;
+    var propertyRevision = (sel) ? sel.propertyRevision : null;
+    this._selectionPropertyObserver(this, '[]', sel, propertyRevision) ;
+  }.observes('selection'),
+  
   // called on content change *and* content.[] change...
-  _contentPropertyObserver: function(target,key,value)
-  {
-    if (!this._updating) {
-      this._updating = true;
-      this.set('isDirty',true);
-      this._resetExpiredRender();
-      this.updateChildren();
-      this._updating = false;
+  // update children if this is a new propertyRevision
+  //
+  // UPDATE:
+  // -- recheck all item views, add/remove children as needed
+  // -- update layout on all item views.
+  // -- optional: determine the first item view that does not match.
+  //
+  _contentPropertyObserver: function(target, key, value, rev) {
+    if (!this._updatingContent && (!rev || (rev != this._contentPropertyRevision))) {
+      this._contentPropertyRevision = rev ;
+      this._updatingContent = true ;
+      this._hasChildren = false ;
+      this.updateChildren(true) ;
+      this._updatingContent = false ;
     }
   },
-
-  _updateSelectionState: function() {
-    try {
+  
+  // called on selection change and selection.[] change...
+  // update selection states if this is a new propertyRevision
+  _selectionPropertyObserver: function(target, key, value, rev) {
+    if (!this._updatingSel && (!rev || (rev != this._selectionPropertyRevision))) {
+      this._selectionPropertyRevision = rev ;
+      this._updatingSel = true ;
+      this._selectionHash = null ; // flush cache
       this.updateSelectionStates() ;
-    } catch(e) {
-      console.log('exception while updating selection states in %@: %@'.format(this,e)) ;
+      this._updatingSel = false ;
     }
-    this._updatingSel = null ;
   },
 
+  // If isVisibleInWindow status changes, updateChildren if we are dirty.
+  _isVisibleInWindowObserver: function() {
+    if (this.get('isDirty')) this.updateChildren() ;
+  }.observes('isVisibleInWindow'),
+  
   // ======================================================================
   // DEPRECATED APIS (Still available for compatibility)
   
@@ -1847,3 +2194,5 @@ SC.CollectionView = SC.View.extend(
   
   
 }) ;
+
+