sproutit-sproutcore 1.0.0.20090416161445 → 1.0.0.20090720093355

data/frameworks/sproutcore/frameworks/desktop/tests/views/stacked/ui_comments.js

@@ -0,0 +1,231 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/* Test SC.StackedView with a Comments example. */
+
+htmlbody(["<style>",
+  '.sc-stacked-view { border-bottom: 1px red solid; }',
+  '.comment-view.sel { background-color: #ccc; }',
+  '.comment-view { margin: 0 10px; padding: 10px 0; border-bottom: 1px #ccc solid; }',
+  '.comment-view p { padding-top: 28px; padding-bottom: 32px; }',
+'</style>'].join("\n"));
+
+var CommentView = SC.View.extend(SC.StaticLayout, SC.Control, {
+  
+  useStaticLayout: YES,
+  
+  content: null,
+  
+  classNames: 'comment-view',
+
+  contentPropertyDidChange: function(target, key) {
+
+    // update everything!
+    if (key === '*') {      
+      this.updateFromLabel().updateCommentLabel();
+    } else if (key === 'from' || key === 'date') {
+      this.updateFromLabel();
+    } else if (key === 'comment') {
+      this.updateCommentLabel();
+    }
+    
+    if (this.owner && this.owner.updateHeight) this.owner.updateHeight();
+  },
+  
+  updateFromLabel: function() {
+    var content = this.get('content'),
+        from    = content ? content.get('from') : 'Anonymous',
+        date    = content ? content.get('date') : 'some date',
+        str     = "%@ wrote %@: ".fmt(from, date);
+    this.fromLabel.set('value', str);
+    return this ;
+  },
+  
+  updateCommentLabel: function() {
+    var content = this.get('content'),
+        comment = content ? content.get('comment') : '(No Comment)';
+    this.commentLabel.set('value', comment);
+  },
+
+  // ..........................................................
+  // BASE VIEWS
+  // 
+
+  childViews: 'fromLabel commentLabel editButton replyButton'.w(),
+  
+  fromLabel: SC.LabelView.extend({
+    tagName: "label",
+    layout: { left: 0, top: 0, right: 0, height: 18 }
+  }),
+  
+  commentLabel: SC.LabelView.extend(SC.StaticLayout, {
+    useStaticLayout: YES,
+    tagName: "p"
+  }),
+
+  editButton: SC.ButtonView.extend({
+    title: "Edit",
+    titleMinWidth: 0,
+    layout: { bottom: 4, right: 58, height: 21, width: 50 }
+  }),
+
+  replyButton: SC.ButtonView.extend({
+    title: "Reply",
+    titleMinWidth: 0,
+    layout: { bottom: 4, right: 4, height: 21, width: 50 }
+  })
+  
+});
+
+var content = [
+  SC.Object.create({ 
+    from: "Joe", 
+    date: "Today", 
+    comment: "I think this new class is a great idea!  I've always wanted less control but more flexibility."
+  }),
+  SC.Object.create({ 
+    from: "Joe", 
+    date: "Today", 
+    comment: "I think this new class is a great idea!  I've always wanted less control but more flexibility."
+  }),
+  SC.Object.create({ 
+    from: "Joe", 
+    date: "Today", 
+    comment: "I think this new class is a great idea!  I've always wanted less control but more flexibility."
+  }),
+  SC.Object.create({ 
+    from: "Joe", 
+    date: "Today", 
+    comment: "I think this new class is a great idea!  I've always wanted less control but more flexibility."
+  }),
+  SC.Object.create({ 
+    from: "Jane", 
+    date: "Yesterday", 
+    comment: "If only you would rewrite this in Flash.  Then I could get really excited about it.  I like it when Adobe controls my destiny."
+  })
+];
+
+var extra = SC.Object.create({
+  from: "Charles",
+  date: "Tomorrow",
+  comment: "Hello from the world of  tomorrow!"
+});
+
+var pane = SC.ControlTestPane.design()
+  .add("basic", SC.StackedView, {
+    layout: { top: 0, left: 0, right: 0, height: 600 },
+    content: content,
+    exampleView: CommentView
+  });
+  
+pane.show(); // add a test to show the test pane
+window.pane = pane ;
+
+// ..........................................................
+// BASIC TESTS
+// 
+module("Basic Tests", pane.standardSetup());
+
+test("removing an item should delete childView and adjust height", function() {
+  var view = pane.view('basic'),
+      item = content[0];
+      
+  equals(view.getPath('childViews.length'), content.length, 'precond - should have child views equal to current content');
+  var oldHeight = view.get('frame').height; // save height.
+  
+  SC.run(function() { content.removeAt(0); }); // remove first item
+
+
+  equals(view.getPath('childViews.length'), content.length, 'view should remove childView for removed content items');
+  var newHeight = view.get('frame').height; 
+  ok(newHeight < oldHeight, 'view height should adjust to reflect new content. (old height: %@ current height: %@)'.fmt(oldHeight, newHeight));
+  
+  // restore old content
+  SC.run(function() { content.insertAt(0, item); });
+  
+});
+
+window.content = content ;
+
+test("inserting an item should add childView and adjust height", function() {
+  var view = pane.view('basic'),
+      item = extra; // we will insert another one
+      
+  equals(view.getPath('childViews.length'), content.length, 'precond - should have child views equal to current content');
+  var oldHeight = view.get('frame').height; // save height.
+  
+  SC.run(function() { content.pushObject(item); }); // add another item
+
+
+  equals(view.getPath('childViews.length'), content.length, 'view should add childView for added content item');
+  var newHeight = view.get('frame').height; 
+  ok(newHeight > oldHeight, 'view height should adjust to reflect new content. (old height: %@ current height: %@)'.fmt(oldHeight, newHeight));
+
+  // restore
+  SC.run(function() { content.popObject(); });
+});
+
+
+test("editing an item should automatically adjust the height", function() {
+  var view = pane.view('basic'),
+      item = content[0],
+      childView = view.childViews[0], 
+      old = item.get('comment');
+  
+  ok(childView, 'stacked view should have child view');
+  equals(childView.get('content'), item, 'first childView should own first content item');
+
+  var height = view.get('frame').height;  // save old height
+
+  // change comment
+  SC.run(function() { item.set('comment', 'This is a new comment'); });
+  
+  // should have updated UI and adjusted height of collection
+  equals(childView.$().find('p').text(), 'This is a new comment', 'Item view should now contain comment');
+  
+  var newHeight = view.get('frame').height;
+  ok(newHeight < height, 'view height should adjust to reflect new content. (old height: %@ current height: %@)'.fmt(height, newHeight));
+
+  // restore
+  SC.run(function() { item.set('comment', old); });
+  
+  newHeight = view.get('frame').height;
+  equals(newHeight, height, 'view height should restore to old height when content is edited again. (old height: %@ current height: %@)'.fmt(height, newHeight));
+  
+});
+
+// ..........................................................
+// SPECIAL CASES
+// 
+
+// tests specific bug where a series of many edits strung together would 
+// cause the height to get out of sync.
+test("adding, removing then editing items should still keep height the same", function() {
+
+  var view = pane.view('basic'),
+      item = content[0],
+      old  = item.get('comment'),
+      height = view.get('frame').height; // save old height
+      
+  SC.run(function() { content.removeAt(0); });
+  SC.run(function() { content.insertAt(0, item); });
+  SC.run(function() { content.pushObject(extra); });
+  SC.run(function() { content.popObject(); });
+  
+  SC.run(function() { item.set('comment', 'Short comment'); });
+  SC.run(function() { item.set('comment', old); });
+  
+  var newHeight = view.get('frame').height;
+  equals(newHeight, height, 'view height should restore to old height when content is edited again. (old height: %@ current height: %@)'.fmt(height, newHeight));
+  
+});
+
+
+
+
+
+

data/frameworks/sproutcore/frameworks/desktop/tests/views/web/ui.js

@@ -83,7 +83,7 @@
     SC.Event.add(view.$('iframe')[0], 'load', this,
     function() {
       ok(view.$().height() > 150, "height of view should change based on content");
-      ok(view.$().width() > 250, "width of view should change based on content");
+      ok(view.$().width() > 200, "width of view should change based on content");
       start();
     });
   });

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

@@ -160,7 +160,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
   // display properties that should automatically cause a refresh.
   // isCancel and isDefault also cause a refresh but this is implemented as 
   // a separate observer (see below)
-  displayProperties: ['href', 'icon', 'title', 'value'],
+  displayProperties: ['href', 'icon', 'title', 'value', 'toolTip'],
 
   render: function(context, firstTime) {
     // add href attr if tagName is anchor...
@@ -169,6 +169,13 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       if (!href || (href.length === 0)) href = "javascript"+":;";
       context.attr('href', href);
     }
+
+    // If there is a toolTip set, grab it and localize if necessary.
+    var toolTip = this.get('toolTip') ;
+    if(SC.typeOf(toolTip) === SC.T_STRING) {
+        context.attr('title', this.get('localize') ? toolTip.loc() : toolTip) ;
+        context.attr('alt', this.get('localize') ? toolTip.loc() : toolTip) ;
+    }
     
     // add some standard attributes & classes.
     var classes = this._TEMPORARY_CLASS_HASH;
@@ -178,10 +185,14 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
     context.attr('role', 'button')
       .setClass(classes).addClass(this.get('theme'));
     // render inner html 
-    context = context.begin('span')
-      .addClass('sc-button-inner').addStyle('minWidth', this.get('titleMinWidth'));
+    if(firstTime){
+      context = context.push("<span class='sc-button-inner' style = 'min-width:%@px'>"
+          .fmt(this.get('titleMinWidth')));
       this.renderTitle(context, firstTime) ; // from button mixin
-    context = context.end();
+      context.push("</span>") ;
+    }else{
+      this.renderTitle(context, firstTime) ;
+    }
    },
   
   /** @private {String} used to store a previously defined key equiv */

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

@@ -26,7 +26,7 @@ SC.CheckboxView = SC.FieldView.extend(SC.StaticLayout, SC.Button,
   tagName: 'label',
 
   render: function(context, firstTime) {
-    var dt ;
+    var dt, elem ;
     
     // add checkbox -- set name to view guid to separate it from others
     if (firstTime) {
@@ -42,6 +42,13 @@ SC.CheckboxView = SC.FieldView.extend(SC.StaticLayout, SC.Button,
     // since we don't want to regenerate the contents each time 
     // actually search for and update the displayTitle.
     } else {
+      
+      if (elem = this.$input()[0]) {
+        if (this.get('isEnabled')) elem.disabled=NO;
+        else elem.disabled=YES;
+        elem = null ; // avoid memory leaks
+      }
+      
       dt = this.get('displayTitle');
       if (dt !== this._field_currentDisplayTitle) {
         this._field_currentDisplayTitle = dt;

data/frameworks/sproutcore/frameworks/desktop/views/collection.js

@@ -8,13 +8,6 @@
 sc_require('mixins/collection_view_delegate') ;
 sc_require('views/list_item');
 
-SC.BENCHMARK_UPDATE_CHILDREN = YES ;
-SC.BENCHMARK_RENDER = YES ;
-SC.ENABLE_COLLECTION_PARTIAL_RENDER = YES ;
-SC.DEBUG_PARTIAL_RENDER = NO ;
-SC.SANITY_CHECK_PARTIAL_RENDER = YES ;
-SC.VALIDATE_COLLECTION_CONSISTANCY = NO ;
-
 /**
   Special drag operation passed to delegate if the collection view proposes
   to perform a reorder event.
@@ -29,16 +22,12 @@ 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 ;
+SC.BENCHMARK_RELOAD = NO ;
 
 /**
   @class 
+
+  TODO: Document SC.CollectionView
   
   Renders a collection of views from a source array of model objects.
    
@@ -54,16 +43,20 @@ SC.REMOVE_COLLECTION_ROOT_ELEMENT_DURING_RENDER = NO ;
   property if you want to monitor selection. (be sure to set the isEnabled
   property to allow selection.)
   
-  @extends SC.ClassicView
+  @extends SC.View
   @extends SC.CollectionViewDelegate
-  
+  @extends SC.CollectionContent
+  @since SproutCore 0.9
 */
-SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
-/** @scope SC.CollectionView.prototype */
-{
+SC.CollectionView = SC.View.extend(
+  SC.CollectionViewDelegate,
+  SC.CollectionContent,
+/** @scope SC.CollectionView.prototype */ {
   
   classNames: ['sc-collection-view'],
   
+  ACTION_DELAY: 200,
+  
   // ......................................
   // PROPERTIES
   //
@@ -82,57 +75,62 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     Usually you will want to bind this property to a controller property 
     that actually contains the array of objects you to display.
     
-    @type SC.Array
+    @type {SC.Array}
   */
-  content: [],
+  content: null,
   
   /** @private */
   contentBindingDefault: SC.Binding.multiple(),
   
   /**
-    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.
+    The current length of the content.
     
-    Any item views representing content objects in this array will have their 
-    isSelected property set to YES automatically.
+    @property
+    @type {Numer}
+  */
+  length: 0,
+  
+  /**
+    The set of indexes that are currently tracked by the collection view.
+    This property is used to determine the range of items the collection view
+    should monitor for changes.
     
-    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.
+    The default implementation of this property returns an index set covering
+    the entire range of the content.  It changes automatically whenever the
+    length changes.
     
-    Usually you will want to bind this property to a controller property that 
-    actually manages the selection for your display.
+    Note that the returned index set for this property will always be frozen.
+    To change the nowShowing index set, you must create a new index set and 
+    apply it.
     
-    @type Array
+    @property
+    @type {SC.IndexSet}
   */
-  selection: [],
-  
-  /** @private */
-  selectionBindingDefault: SC.Binding.multiple(),
+  nowShowing: function() {
+    var ret = this.computeNowShowing();
+    return ret ? ret.frozenCopy() : null;
+  }.property('length', 'clippingFrame').cacheable(),
   
   /**
-    Delegate used to implement fine-grained control over collection view 
-    behaviors.
+    Indexes of selected content objects.  This SC.SelectionSet is modified 
+    automatically by the collection view when the user changes the selection 
+    on the collection.
     
-    You can assign a delegate object to this property that will be consulted
-    for various decisions regarding drag and drop, selection behavior, and
-    even rendering.  The object you place here must implement some or all of
-    the SC.CollectionViewDelegate mixin.
+    Any item views representing content objects in this set will have their 
+    isSelected property set to YES automatically.
+    
+    @type {SC.SelectionSet}
   */
-  delegate: null,
+  selection: null,
   
   /** 
     Allow user to select content using the mouse and keyboard.
     
     Set this property to NO to disallow the user from selecting items. If you 
-    have items in your selection property, they will still be reflected
+    have items in your selectedIndexes property, they will still be reflected
     visually.
     
-    @type Boolean
+    @type {Boolean}
   */
   isSelectable: YES,
   
@@ -144,10 +142,10 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     
     The collection view will set the isEnabled property of its item views to
     reflect the same view of this property.  Whenever isEnabled is false,
-    the collection view will also be not selectable or editable, regardless of the  
-    settings for isEditable & isSelectable.
+    the collection view will also be not selectable or editable, regardless of 
+    the settings for isEditable & isSelectable.
     
-    @type Boolean
+    @type {Boolean}
   */
   isEnabled: YES,
   
@@ -162,7 +160,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     the user will not be able to reorder, add, or delete items regardless of 
     the canReorderContent and canDeleteContent and isDropTarget properties.
     
-    @type Boolean
+    @type {Boolean}
   */
   isEditable: YES,
   
@@ -176,7 +174,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     If you also accept drops, this will allow the user to drop items into 
     specific points in the list.  Otherwise items will be added to the end.
     
-    @type Boolean
+    @type {Boolean}
   */
   canReorderContent: NO,
   
@@ -189,13 +187,25 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     If true the user will be allowed to delete selected items using the delete
     key.  Otherwise deletes will not be permitted.
     
-    @type Boolean
+    @type {Boolean}
   */
   canDeleteContent: NO,
   
   /** @private */
   canDeleteContentBindingDefault: SC.Binding.bool(),
   
+  /**
+    Allow user to edit the content by double clicking on it or hitting return.
+    This will only work if isEditable is YES and the item view implements 
+    the beginEditing() method.
+    
+    @type {Boolean}
+  */
+  canEditContent: NO,
+  
+  /** @private */
+  canEditContentBindingDefault: SC.Binding.bool(),
+  
   /**
     Accept drops for data other than reordering.
     
@@ -203,7 +213,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     cause it to be registered as a drop target, activating the other drop 
     machinery.
     
-    @type Boolean
+    @type {Boolean}
   */
   isDropTarget: NO,
   
@@ -212,9 +222,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     
     If set to true, then selection will use a toggle instead of the normal
     click behavior.  Command modifiers will be ignored and instead clicking
-    once will enable an item and clicking on it again will disable it.
+    once will select an item and clicking on it again will deselect it.
     
-    @type Boolean
+    @type {Boolean}
   */
   useToggleSelection: NO,
   
@@ -225,12 +235,12 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     object and double clicking will trigger the action method on the 
     collection view.
     
-    If you set this property to true, then clicking on a view will both select 
+    If you set this property to YES, then clicking on a view will both select 
     it (if isSelected is true) and trigger the action method.  
     
     Use this if you are using the collection view as a menu of items.
     
-    @type Boolean
+    @property {Boolean}
   */  
   actOnSelect: NO,
   
@@ -244,7 +254,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     the mouse is released, so you can perform, for instance, a drag operation
     without actually selecting the target item.  
     
-    @type Boolean
+    @property {Boolean}
   */  
   selectOnMouseDown: YES,
   
@@ -277,9 +287,34 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   
   /**
     If set, this key will be used to get the example view for a given
-    content object.
+    content object.  The exampleView property will be ignored.
+    
+    @property {String}
   */
   contentExampleViewKey: null,
+
+  /**
+    The view class to use when creating new group item views.
+    
+    The collection view will automatically create an instance of the view 
+    class you set here for each item in its content array.  You should provide 
+    your own subclass for this property to display the type of content you 
+    want.
+    
+    If you leave this set to null then the regular example view will be used
+    with the isGroupView property set to YES on the item view.
+    
+    @property {SC.View}
+  */
+  groupExampleView: null,
+  
+  /**
+    If set, this key will be used to get the example view for a given
+    content object.  The groupExampleView property will be ignored.
+    
+    @property {String}
+  */
+  contentGroupExampleViewKey: null,
   
   /**
     Invoked when the user double clicks on an item (or single clicks of 
@@ -317,19 +352,6 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   */
   target: null,
   
-  /**
-    Set to YES whenever the content needs to update its children.  If you 
-    set this property, it will cause the view to update its children at the
-    end of the runloop or the next time it becomes visible.
-    
-    Generally you will not need to change this property.  Instead you should
-    call methods such as contentPropertyDidChange() or updateChildren()
-    directly instead.
-    
-    @property {Boolean}
-  */
-  isDirty: NO,
-  
   /** 
     Property on content items to use for display.
     
@@ -355,20 +377,6 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   */
   acceptsFirstResponder: NO,
   
-  /**
-    If your layout uses a grid or horizontal-based layout, then make sure this 
-    property is always up to date with the current number of items per row.  
-    
-    The CollectionView will use this property to support keyboard navigation 
-    using the arrow keys.
-    
-    If your collection view is simply a vertical list of items then you do not 
-    need to change this property.
-    
-    @property {Number}
-  */
-  itemsPerRow: 1,
-  
   // ..........................................................
   // SUBCLASS METHODS
   // 
@@ -387,406 +395,1036 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   computeLayout: 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.
-    
-    If you do not want to support incremental rendering, just return null.
-    
-    @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 }) 
-  */  
-  contentRangeInFrame: function(frame) { return null; },
-  
-  /**
-    Override to adjust the position of the itemView's layout property at the
-    specified content index.
-    
-    Note: if useAdjust is NO, you should set the view's layout property in 
-    such a way that no change notifications are triggered. For example,
-    
-    {{{
-      var newLayout = this.myComputeLayoutForIndex(contentIndex) ;
-      if (useAdjust) itemView.adjust(newLayout) ;
-      else itemView.layout = newLayout ; // DON'T TRIGGER OBSERVERS!!!
-    }}}
+    Override to compute the layout of the itemView for the content at the 
+    specified index.  This layout will be applied to the view just before it
+    is rendered.
     
     @param {Number} contentIndex the index of content beind rendered by
       itemView
-    @returns {Rect} a layout rectangle
+    @returns {Hash} a view layout
   */
-  itemViewLayoutAtContentIndex: function(contentIndex) {},
-  
-  // ..........................................................
-  // CONTENT CHANGES
-  // 
+  layoutForContentIndex: function(contentIndex) {
+    return null ;
+  },
   
-  /** @private
-    Whenever content array changes, start observing the [] property.  Also 
-    set childrenNeedFullUpdate to YES, which will trigger an update.
-  */
-  _collection_contentDidChange: function() {
-    var content = this.get('content') ;
-    if (content === this._content) return this; // nothing to do
-    
-    var func = this._collection_contentPropertyDidChange ;
+  /**
+    Override to return an IndexSet with the indexes that are at least 
+    partially visible in the passed rectangle.  This method is used by the 
+    default implementation of computeNowShowing() to determine the new 
+    nowShowing range after a scroll.
     
-    // remove old observer, add new observer
-    if (this._content) this._content.removeObserver('[]', this, func) ;
-    if (content) content.addObserver('[]', this, func) ;
+    Override this method to implement incremental rendering.
     
-    // cache
-    this._content = content;
-    this._contentPropertyRevision = null ;
+    The default simply returns the current content length.
     
-    // trigger property change handler...
-    var rev = (content) ? content.propertyRevision : -1 ;
-    this._collection_contentPropertyDidChange(this, '[]', content, rev) ; 
-  }.observes('content'),
-  
-  /** @private
-    Called whenever the content array or any items in the content array 
-    changes.  update children if this is a new property revision.
-  */
-  _collection_contentPropertyDidChange: function(target, key, value, rev) {    
-    if (!this._updatingContent && (!rev || (rev != this._contentPropertyRevision))) {
-      this._contentPropertyRevision = rev ;
-      this._updatingContent = true ;
-      this.contentPropertyDidChange(target, key);
-      this._updatingContent = false ;
-    }
+    @param {Rect} rect the visible rect
+    @returns {SC.IndexSet} now showing indexes
+  */
+  contentIndexesInRect: function(rect) {
+    return SC.IndexSet.create(0, this.get('length'));    
   },
   
   /**
-    Invoked whenever a the content array changes.  The default implementation
-    will possibly recompute the view's layout size and the marks it as dirty
-    so that it can update its children.
-  */
-  contentPropertyDidChange: function(target, key) {
-    this.adjust(this.computeLayout()) ;
-    this.set('isDirty', YES) ;
-    this.invalidateNowShowingRange() ;
-    return this ;
+    Compute the nowShowing index set.  The default implementation simply 
+    returns the full range.  Override to implement incremental rendering.
+    
+    You should not normally call this method yourself.  Instead get the 
+    nowShowing property.
+    
+    @returns {SC.IndexSet} new now showing range
+  */
+  computeNowShowing: function() {
+    var r = this.contentIndexesInRect(this.get('clippingFrame')),
+        content = SC.makeArray(this.get('content')),
+        len     = content.get('length');
+         
+    // default show all.
+    if (!r) r = SC.IndexSet.create(0, len);
+
+    // make sure the index set doesn't contain any indexes greater than the
+    // actual content.
+    if (r.get('max') > len) r.remove(len, r.get('max')-len);
+    
+    return r ;
   },
   
-  /** @private
-    Anytime isDirty changes to YES or our visibility in window changes,
-    schedule a full update.
-  */
-  _collection_isDirtyDidChange: function() {
-    // don't test isVisibleInWindow here for a 10% perf gain
-    if (this.get('isDirty')) {
-      // using invokeOnce here doubles rendering speed!
-      this.invokeOnce(this.displayDidChange) ;
-    }
-  }.observes('isDirty', 'isVisibleInWindow'),
-  
-  // ..........................................................
-  // SELECTION CHANGES
-  // 
-  
-  /** @private
-    Whenever selection array changes, start observing the [] property.  Also 
-    set childrenNeedFullUpdate to YES, which will trigger an update.
-  */
-  _collection_selectionDidChange: function() {
-    var selection = this.get('selection') ;
-    if (selection === this._selection) return this; // nothing to do
+  /** 
+    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.
     
-    var func = this._collection_selectionPropertyDidChange ;
+    Once this method is called, you are guaranteed to also recieve a call to
+    hideInsertionPoint() at some point in the future.
     
-    // remove old observer, add new observer
-    if (this._selection) this._selection.removeObserver('[]', this, func) ;
-    if (selection) selection.addObserver('[]', this, func) ;
+    The default implementation of this method does nothing.
     
-    // cache
-    this._selection = selection;
-    this._selectionPropertyRevision = null ;
+    @param itemView {SC.ClassicView} view the insertion point should appear directly before. If null, show insertion point at end.
+    @param dropOperation {Number} the drop operation.  will be SC.DROP_BEFORE, SC.DROP_AFTER, or SC.DROP_ON
     
-    // trigger property change handler...
-    var rev = (selection) ? selection.propertyRevision : -1 ;
-    this._collection_selectionPropertyDidChange(this, '[]', selection, rev) ; 
-  }.observes('selection'),
-  
-  /** @private
-    Called whenever the content array or any items in the selection array 
-    changes.  update children if this is a new property revision.
-  */
-  _collection_selectionPropertyDidChange: function(target, key, value, rev) {    
-    if (!this._updatingSelection && (!rev || (rev != this._selectionPropertyRevision))) {
-      this._selectionPropertyRevision = rev ;
-      this._updatingSelection = true ;
-      this.selectionPropertyDidChange(target, key);
-      this._updatingSelection = false ;
-    }
+    @returns {void}
+  */
+  showInsertionPoint: function(itemView, dropOperation) {
   },
   
   /**
-    Invoked whenever a the selection array changes.  The default 
-    implementation will possibly recompute the view's layout size and the 
-    marks it as dirty so that it can update its children.
-  */
-  selectionPropertyDidChange: function(target, key) {
-    this.adjust(this.computeLayout()) ;
-    this.set('isDirty', YES) ;
-    this.invalidateNowShowingRange() ;
-    return this ;
+    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() {
   },
   
   // ..........................................................
-  // NOW SHOWING RANGE
+  // DELEGATE SUPPORT
   // 
   
+  
   /**
-    The currently visible range.  This is invalidated anytime the clipping
-    frame changes or anytime the view is resized.  This in turn may cause
-    the collection view to do a 'fast' revalidation of its content.
+    Delegate used to implement fine-grained control over collection view 
+    behaviors.
     
-    @property
-    @type Range
-  */
-  nowShowingRange: function() {
-    // console.log(this.get('clippingFrame'));
-    var r = this.contentRangeInFrame(this.get('clippingFrame')) ;
-    if (!r) r = { start: 0, length: 0 } ; // default
-     
-    // make sure the range isn't greater than the content length 
-    var content = SC.makeArray(this.get('content'));
-    r.length = Math.min(SC.maxRange(r), content.get('length')) - r.start ;
+    You can assign a delegate object to this property that will be consulted
+    for various decisions regarding drag and drop, selection behavior, and
+    even rendering.  The object you place here must implement some or all of
+    the SC.CollectionViewDelegate mixin.
     
-    return r ;
-  }.property('content', 'clippingFrame').cacheable(),
+    If you do not supply a delegate but the content object you set implements 
+    the SC.CollectionViewDelegate mixin, then the content will be 
+    automatically set as the delegate.  Usually you will work with a 
+    CollectionView in this way rather than setting a delegate explicitly.
+    
+    @type {SC.CollectionViewDelegate}
+  */
+  delegate: null,
   
   /**
-    Call this method if the nowShowingRange should be recalculated for some
-    reason.  Usually the nowShowingRange will invalidate and recalculate on 
-    its own but you can force the property to need an update if you 
-    prefer.
+    The delegate responsible for handling selection changes.  This property
+    will be either the delegate, content, or the collection view itself, 
+    whichever implements the SC.CollectionViewDelegate mixin.
+    
+    @property
+    @type {Object}
   */
-  invalidateNowShowingRange: function() {
-    this.notifyPropertyChange('nowShowingRange') ;
-  },
+  selectionDelegate: function() {
+    var del = this.get('delegate'), content = this.get('content');
+    return this.delegateFor('isCollectionViewDelegate', del, content);  
+  }.property('delegate', 'content').cacheable(),
   
-  /** @private
-    Observer triggers whenever the nowShowingRange changes.  If the range has
-    actually changed and we are on screen, then schedule fast update. 
-    Otherwise, just mark as dirty.
-  */
-  nowShowingRangeDidChange: function() {
-    var range = this.get('nowShowingRange') ;
-    var old = this._collection_nowShowingRange ;
-    if (!old || !SC.rangesEqual(range, old)) {
-      this._collection_nowShowingRange = range ;
-      if (this.get('isVisibleInWindow')) this.displayDidChange() ;
-      else this.set('isDirty', YES);
-    }
-  }.observes('nowShowingRange'),
+  /**
+    The delegate responsible for providing additional display information 
+    about the content.  If you bind a collection view to a controller, this
+    the content will usually also be the content delegate, though you 
+    could implement your own delegate if you prefer.
+    
+    @property
+    @type {Object}
+  */
+  contentDelegate: function() {
+    var del = this.get('delegate'), content = this.get('content');
+    return this.delegateFor('isCollectionContent', del, content);
+  }.property('delegate', 'content').cacheable(),
   
-  // ......................................
-  // RENDERING
-  //
+  // ..........................................................
+  // CONTENT CHANGES
+  // 
   
-  itemViewAtContentIndex: function(contentIndex) {
-    var range = this.get('nowShowingRange') ;
-    var itemView = this.createExampleView() ;
-    var key, content = SC.makeArray(this.get('content')) ;
-    var selection = SC.makeArray(this.get('selection')) ;
-    content = content.objectAt(contentIndex) ;
-    if (!content) return null ;
-    
-    var guids = this._itemViewGuids, guid;
-    if (!guids) this._itemViewGuids = guids = {};
-    
-    // use cache of item view guids to avoid creating temporary objects
-    guid = SC.guidFor(content);
-    if (!(key = guids[guid])) {
-      key = guids[guid] = SC.guidFor(this)+'_'+guid;
+  /**
+    Called whenever the content array or an item in the content array or a
+    property on an item in the content array changes.  Reloads the appropriate
+    item view when the content array itself changes or calls 
+    contentPropertyDidChange() if a property changes.
+    
+    Normally you will not call this method directly though you may override
+    it if you need to change the way changes to observed ranges are handled.
+    
+    @param {SC.Array} content the content array generating the change
+    @param {Object} object the changed object
+    @param {String} key the changed property or '[]' or an array change
+    @param {SC.IndexSet} indexes affected indexes or null for all items
+    @returns {void}
+  */
+  contentRangeDidChange: function(content, object, key, indexes) {
+    if (!object && (key === '[]')) {
+      this.reload(indexes); // note: if indexes == null, reloads all
+    } else {
+      this.contentPropertyDidChange(object, key, indexes);
     }
+  },
+
+  /**
+    Called whenever a property on an item in the content array changes.  This
+    is only called if you have set observesContentProperties to YES.
     
-    itemView.set('content', content) ;
-    itemView.layerId = key ; // NOTE: cannot use .set here, layerId is RO
-    itemView.set('isVisible', SC.valueInRange(contentIndex, range)) ;
-    itemView.set('isSelected', (selection.indexOf(content) == -1) ? NO : YES) ;
+    Override this property if you want to do some custom work whenever a 
+    property on a content object changes.
+
+    The default implementation does nothing.
     
-    // NOTE: *must* set the layout silently...
-    itemView.layout = this.itemViewLayoutAtContentIndex(contentIndex) ;
-    itemView.set('parentView', this) ;
-    return itemView ;
+    @param {Object} target the object that changed
+    @param {String} key the property that changed value
+    @param {SC.IndexSet} indexes the indexes in the content array affected
+    @returns {void}
+  */
+  contentPropertyDidChange: function(target, key, indexes) {
+    // Default Does Nothing
   },
   
-  /** 
-    Find the first content item view for the passed event.
+  /**
+    Called whenever the view needs to updates it's contentRangeObserver to 
+    reflect the current nowShowing index set.  You will not usually call this
+    method yourself but you may override it if you need to provide some 
+    custom range observer behavior.
+
+    Note that if you do implement this method, you are expected to maintain
+    the range observer object yourself.  If a range observer has not been
+    created yet, this method should create it.  If an observer already exists
+    this method should udpate it.
     
-    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.
+    When you create a new range observer, the oberver must eventually call
+    contentRangeDidChange() for the collection view to function properly.
     
-    This method only works for mouseDown & mouseUp events.  mouseMoved events 
-    do not have a target.
+    If you override this method you probably also need to override 
+    destroyRangeObserver() to cleanup any existing range observer.
     
-    @param {SC.Event} evt An event
-    @returns {SC.View} the item view or null
+    @returns {void}
   */
-  itemViewForEvent: function(evt) {
-    var responder = this.getPath('pane.rootResponder') ;
-    
-    if (!responder) return null ; // fast path
-    
-    // need to materialize an itemView under the mouse if possible
-    var baseGuid = SC.guidFor(this) ;
-    var baseGuidLen = baseGuid.length ;
-    var element = evt.target ;
-    var elementId = element.id.slice(0, baseGuidLen) ;
-    while (elementId !== baseGuid) {
-      element = element.parentNode ;
-      elementId = element.id.slice(0, baseGuidLen) ;
-    }
+  updateContentRangeObserver: function() {
+    var nowShowing = this.get('nowShowing'),
+        observer   = this._cv_contentRangeObserver,
+        content    = this.get('content');
     
-    if (element.id.length === baseGuidLen) {
-      return null ; // we found ourself, so we're not over a child view
-    }
+    if (!content) return ; // nothing to do
     
-    // okay, found the DOM node for the view, go ahead and create it
-    // first, find the content...
-    var contentGuid = element.id.slice(baseGuidLen+1) ;
-    var nowShowingRange = this.get('nowShowingRange') ;
-    var content = SC.makeArray(this.get('content')) ;
-    var idx = SC.minRange(nowShowingRange) ;
-    var max = SC.maxRange(nowShowingRange) ;
-    var c = content.objectAt(idx) ;
-    while (SC.guidFor(c) !== contentGuid) {
-      c = content.objectAt(idx++) ;
-      if (idx == max) return null ; // couldn't find the content...
+    if (observer) {
+      content.updateRangeObserver(observer, nowShowing);
+    } else {
+      var func = this.contentRangeDidChange;
+      observer = content.addRangeObserver(nowShowing, this, func, null);      
+      this._cv_contentRangeObserver = observer ;
     }
     
-    // then create the view for that content
-    var itemView = this.createExampleView() ;
-    var selection = SC.makeArray(this.get('selection')) ;
-    itemView.set('content', c) ;
-    itemView.layerId = element.id ; // cannot use .set here, layerId is RO
-    SC.View.views[itemView.layerId] = itemView ; // register for event handling
-    itemView.set('isVisible', SC.valueInRange(idx, nowShowingRange)) ;
-    itemView.set('isSelected', (selection.indexOf(c) == -1) ? NO : YES) ;
-    
-    // NOTE: *must* set the layout silently...
-    itemView.layout = this.itemViewLayoutAtContentIndex(idx) ;
-    itemView.set('parentView', this) ;
-    
-    // prevent normal, non-materialized view behavior
-    // TODO: isMaterialized should do this automatically in SC.View
-    itemView.layerLocationNeedsUpdate = NO ;
-    itemView.childViewsNeedLayout = NO ;
-    itemView.layerNeedsUpdate = NO ;
-    
-    // NOTE: still have to search for view, because itemView could contain
-    // nested views, and the mouseDown should go to them first...
-    var view = responder.targetViewForEvent(evt) ;
-    if (!view) return null ; // workaround for error on IE8, see Ticket #169
-    
-    // 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 (!view.hitTest || view.hitTest(evt)) return view ;
-    } while (view = view.get('parentView')) ;
-    
-    // nothing was found... 
-    return null ;
   },
   
-  createExampleView: function(content) {
-    var exampleViewKey = this.get('contentExampleViewKey') ;
-    var ExampleView = (exampleViewKey) ?
-      content.get(exampleViewKey) :
-      this.get('exampleView') ;
+  /**
+    Called whever the view needs to invalidate the current content range 
+    observer.  This is called whenever the content array changes.  You will 
+    not usually call this method yourself but you may override it if you 
+    provide your own range observer behavior.
+
+    Note that if you override this method you should probably also override
+    updateRangeObserver() to create or update a range oberver as needed.
     
-    if (ExampleView) {
-      return ExampleView.create({
-        classNames: ['sc-collection-item'],
-        owner: this,
-        displayDelegate: this,
-        parentView: this,
-        isVisible: YES,
-        isMaterialized: YES
-      });
-    } else throw "You must define an exampleView class to render collection items with" ;
-  },
-  
-  // ......................................
-  // SELECTION
-  //
-  
-  /** @private
-    Finds the smallest index of a content object in the selected array.
+    @returns {void}
   */
-  _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 ;
+  removeContentRangeObserver: function() {
+    var content  = this.get('content'),
+        observer = this._cv_contentRangeObserver ;
+        
+    if (observer) {
+      if (content) content.removeRangeObserver(observer);
+      this._cv_contentRangeObserver = null ;
     }
+  },
+    
+  /**
+    Called whenever the content length changes.  This will invalidate the 
+    length property of the view itself causing the nowShowing to recompute
+    which will in turn update the UI accordingly.
     
-    return (indexOfSelected >= contentLength) ? -1 : indexOfSelected ;
+    @returns {void}
+  */
+  contentLengthDidChange: function() {
+    var content = this.get('content');
+    this.set('length', content ? content.get('length') : 0);
   },
   
   /** @private
-    Finds the largest index of a content object in the selection array.
+    Whenever content property changes to a new value:
+    
+     - remove any old observers 
+     - setup new observers (maybe wait until end of runloop to do this?)
+     - recalc height/reload content
+     - set content as delegate if delegate was old content
+     - reset selection
+     
+    Whenever content array mutates:
+    
+     - possibly stop observing property changes on objects, observe new objs
+     - reload effected item views
+     - update layout for receiver
   */
-  _indexOfSelectionBottom: function() {
-    var content = this.get('content');
-    var sel = this.get('selection');
-    if (!content || !sel) return - 1;
+  _cv_contentDidChange: function() {
+    var content = this.get('content'),
+        lfunc   = this.contentLengthDidChange ;
+
+    if (content === this._content) return this; // nothing to do
+
+    // cleanup old content
+    this.removeContentRangeObserver();
+    if (this._content) {
+      this._content.removeObserver('length', this, lfunc);
+    }
     
-    var indexOfSelected = -1 ; var idx = sel.length ;
-    while(--idx >= 0) {
-      var curIndex = content.indexOf(sel[idx]) ;
-      if (curIndex > indexOfSelected) indexOfSelected = curIndex ;
+    // cache
+    this._content = content;
+    
+    // add new observers - range observer will be added lazily
+    if (content) {
+      content.addObserver('length', this, lfunc);
     }
     
-    return (indexOfSelected < 0) ? -1 : indexOfSelected ;
-  },
+    // notify all items changed
+    this.contentLengthDidChange();
+    this.contentRangeDidChange(content, null, '[]', null);
+    
+  }.observes('content'),
   
-  /**
-    Select one or more items before the current selection, optionally
-    extending the current selection.  Also scrolls the selected item into 
-    view.
+  // ..........................................................
+  // ITEM VIEWS
+  // 
+  
+  /** @private
+  
+    The indexes that need to be reloaded.  Must be one of YES, NO, or an
+    SC.IndexSet.
+  
+  */
+  _invalidIndexes: NO,
+  
+  /** 
+    Regenerates the item views for the content items at the specified indexes.
+    If you pass null instead of an index set, regenerates all item views.
     
-    Selection does not wrap around.
+    This method is called automatically whenever the content array changes in
+    an observable way, but you can call its yourself also if you need to 
+    refresh the collection view for some reason.
     
-    @param extend {Boolean} (Optional) If true, the selection will be extended 
-      instead of replaced.  Defaults to false.
-    @param numberOfItems {Integer} (Optional) The number of previous to be 
-      selected.  Defaults to 1
-    @returns {void}
+    Note that if the length of the content is shorter than the child views
+    and you call this method, then the child views will be removed no matter
+    what the index.
+    
+    @param {SC.IndexSet} indexes
+    @returns {SC.CollectionView} receiver
   */
-  selectPreviousItem: function(extend, numberOfItems) {
-    if (SC.none(numberOfItems)) numberOfItems = 1 ;
-    if (SC.none(extend)) extend = false ;
+  reload: function(indexes) {
+    var invalid = this._invalidIndexes ;
+    if (indexes && invalid !== YES) {
+      if (invalid) invalid.add(indexes);
+      else invalid = this._invalidIndexes = indexes.clone();
+
+    } else this._invalidIndexes = YES ; // force a total reload
     
-    var content  = this.get('content');
-    var contentLength = content.get('length') ;
+    if (this.get('isVisibleInWindow')) this.invokeOnce(this.reloadIfNeeded);
     
-    // if extending, then we need to do some fun stuff to build the array
-    var selTop, selBottom, anchor ;
-    if (extend) {
-      selTop = this._indexOfSelectionTop() ;
-      selBottom = this._indexOfSelectionBottom() ;
-      anchor = SC.none(this._selectionAnchor) ? selTop : this._selectionAnchor ;
-      this._selectionAnchor = anchor ;
+    return this ;
+  },
+
+  /** 
+    Invoked once per runloop to actually reload any needed item views.
+    You can call this method at any time to actually force the reload to
+    happen immediately if any item views need to be reloaded.
+    
+    Note that this method will also invoke two other callback methods if you
+    define them on your subclass:
+    
+    - *willReload()* is called just before the items are reloaded
+    - *didReload()* is called jsut after items are reloaded
+    
+    You can use these two methods to setup and teardown caching, which may
+    reduce overall cost of a reload.  Each method will be passed an index set
+    of items that are reloaded or null if all items are reloaded.
+    
+    @returns {SC.CollectionView} receiver
+  */
+  reloadIfNeeded: function() {
+    var invalid = this._invalidIndexes;
+    if (!invalid || !this.get('isVisibleInWindow')) return this ; // delay
+    this._invalidIndexes = NO ;
+    
+    var content = this.get('content'),
+        len     = content ? content.get('length'): 0,
+        layout  = this.computeLayout(),
+        bench   = SC.BENCHMARK_RELOAD,
+        nowShowing = this.get('nowShowing'),
+        itemViews  = this._sc_itemViews,
+        containerView = this.get('containerView') || this,
+        views, idx, cvlen, view, childViews, layer ;
+
+    // if the set is defined but it contains the entire nowShowing range, just
+    // replace
+    if (invalid.isIndexSet && invalid.contains(nowShowing)) invalid = YES ;
+    if (this.willReload) this.willReload(invalid === YES ? null : invalid);
+
+    // if an index set, just update indexes
+    if (invalid.isIndexSet) {
+      childViews = containerView.get('childViews');
+      cvlen = childViews.get('length');
+      
+      if (bench) {
+        SC.Benchmark.start(bench="%@#reloadIfNeeded (Partial)".fmt(this),YES);
+      }
+      
+      invalid.forEach(function(idx) {
+        
+        // get the existing item view, if there is one
+        var existing = itemViews ? itemViews[idx] : null;
+        
+        // if nowShowing, then reload the item view.
+        if (nowShowing.contains(idx)) {
+          view = this.itemViewForContentIndex(idx, YES);
+          if (existing && existing.parentView === containerView) {
+    
+            // if the existing view has a layer, remove it immediately from
+            // the parent.  This is necessary because the old and new views 
+            // will use the same layerId
+            layer = existing.get('layer');
+            if (layer && layer.parentNode) {
+              layer.parentNode.removeChild(layer);  
+            } 
+            layer = null ; // avoid leaks
+            
+            containerView.replaceChild(view, existing);
+          } else {
+            containerView.appendChild(view);
+          }
+          
+        // if not nowShowing, then remove the item view if needed
+        } else if (existing && existing.parentView === containerView) {
+          delete itemViews[idx];
+          containerView.removeChild(existing);
+        }
+      },this);
+
+      if (bench) SC.Benchmark.end(bench);
+      
+    // if set is NOT defined, replace entire content with nowShowing
+    } else {
+
+      if (bench) {
+        SC.Benchmark.start(bench="%@#reloadIfNeeded (Full)".fmt(this),YES);
+      }
+
+      // truncate cached item views since they will all be removed from the
+      // container anyway.
+      if (itemViews) itemViews.length = 0 ; 
+      
+      views = [];
+      nowShowing.forEach(function(idx) {
+        views.push(this.itemViewForContentIndex(idx, YES));
+      }, this);
+
+      // below is an optimized version of:
+      //this.replaceAllChildren(views);
+      containerView.beginPropertyChanges();
+      containerView.destroyLayer().removeAllChildren();
+      containerView.set('childViews', views); // quick swap
+      containerView.replaceLayer();
+      containerView.endPropertyChanges();
+      
+      if (bench) SC.Benchmark.end(bench);
+      
+    }
+    
+    // adjust my own layout if computed
+    if (layout) this.adjust(layout);
+    if (this.didReload) this.didReload(invalid === YES ? null : invalid);
+    
+    
+    return this ;
+  },
+  
+  displayProperties: 'isFirstResponder isEnabled isActive'.w(),
+  
+  /** @private
+    If we're asked to render the receiver view for the first time but the 
+    child views still need to be added, go ahead and add them.
+  */
+  render: function(context, firstTime) {
+    if (firstTime && this._needsReload) this.reloadIfNeeded ;
+    
+    // add classes for other state.
+    context.setClass('focus', this.get('isFirstResponder'));
+    context.setClass('disabled', !this.get('isEnabled'));
+    context.setClass('active', this.get('isActive'));
+
+    return sc_super();
+  },
+    
+
+  _TMP_ATTRS: {},
+  _COLLECTION_CLASS_NAMES: 'sc-collection-item'.w(),
+  _GROUP_COLLECTION_CLASS_NAMES: 'sc-collection-item sc-group-item'.w(),
+  
+  /**
+    Returns the item view for the content object at the specified index. Call
+    this method instead of accessing child views directly whenever you need 
+    to get the view associated with a content index.
+
+    Although this method take two parameters, you should almost always call
+    it with just the content index.  The other two parameters are used 
+    internally by the CollectionView.
+    
+    If you need to change the way the collection view manages item views
+    you can override this method as well.  If you just want to change the
+    default options used when creating item views, override createItemView()
+    instead.
+  
+    Note that if you override this method, then be sure to implement this 
+    method so that it uses a cache to return the same item view for a given
+    index unless "force" is YES.  In that case, generate a new item view and
+    replace the old item view in your cache with the new item view.
+
+    @param {Number} idx the content index
+    @param {Boolean} rebuild internal use only
+    @returns {SC.View} instantiated view
+  */
+  itemViewForContentIndex: function(idx, rebuild) {
+
+    // return from cache if possible
+    var content   = this.get('content'),
+        itemViews = this._sc_itemViews,
+        item = content.objectAt(idx),
+        del  = this.get('contentDelegate'),
+        groupIndexes = del.contentGroupIndexes(this, content),
+        isGroupView = NO,
+        key, ret, E, layout, layerId;
+
+    // use cache if available
+    if (!itemViews) itemViews = this._sc_itemViews = [] ;
+    if (!rebuild && (ret = itemViews[idx])) return ret ; 
+
+    // otherwise generate...
+    
+    // first, determine the class to use
+    isGroupView = groupIndexes && groupIndexes.contains(idx);
+    if (isGroupView) isGroupView = del.contentIndexIsGroup(this, content,idx);
+    if (isGroupView) {
+      key  = this.get('contentGroupExampleViewKey');
+      if (key && item) E = item.get(key);
+      if (!E) E = this.get('groupExampleView') || this.get('exampleView');
+
+    } else {
+      key  = this.get('contentExampleViewKey');
+      if (key && item) E = item.get(key);
+      if (!E) E = this.get('exampleView');
+    }
+
+    // collect some other state
+    var attrs = this._TMP_ATTRS;
+    attrs.contentIndex = idx;
+    attrs.content      = item ;
+    attrs.owner        = attrs.displayDelegate = this;
+    attrs.parentView   = this.get('containerView') || this ;
+    attrs.page         = this.page ;
+    attrs.layerId      = this.layerIdFor(idx, item);
+    attrs.isEnabled    = del.contentIndexIsEnabled(this, content, idx);
+    attrs.isSelected   = del.contentIndexIsSelected(this, content, idx);
+    attrs.outlineLevel = del.contentIndexOutlineLevel(this, content, idx);
+    attrs.disclosureState = del.contentIndexDisclosureState(this, content, idx);
+    attrs.isGroupView  = isGroupView;
+    attrs.isVisibleInWindow = this.isVisibleInWindow;
+    if (isGroupView) attrs.classNames = this._GROUP_COLLECTION_CLASS_NAMES;
+    else attrs.classNames = this._COLLECTION_CLASS_NAMES;
+    
+    layout = this.layoutForContentIndex(idx);
+    if (layout) {
+      attrs.layout = layout;
+    } else {
+      delete attrs.layout ;
+    }
+    
+    ret = this.createItemView(E, idx, attrs);
+    itemViews[idx] = ret ;
+    return ret ;
+  },
+  
+  _TMP_LAYERID: [],
+  
+  /**
+    Primitive to instantiate an item view.  You will be passed the class 
+    and a content index.  You can override this method to perform any other
+    one time setup.
+
+    Note that item views may be created somewhat frequently so keep this fast.
+
+    *IMPORTANT:* The attrs hash passed is reused each time this method is 
+    called.   If you add properties to this hash be sure to delete them before
+    returning from this method.
+    
+    @param {Class} exampleClass example view class
+    @param {Number} idx the content index
+    @param {Hash} attrs expected attributes
+    @returns {SC.View} item view instance
+  */ 
+  createItemView: function(exampleClass, idx, attrs) {
+    return exampleClass.create(attrs);
+  },
+
+  /**
+    Generates a layerId for the passed index and item.  Usually the default
+    implementation is suitable.
+    
+    @param {Number} idx the content index
+    @returns {String} layer id, must be suitable for use in HTML id attribute
+  */
+  layerIdFor: function(idx) {  
+    var ret = this._TMP_LAYERID;
+    ret[0] = SC.guidFor(this);
+    ret[1] = idx;
+    return ret.join('-');
+  },
+  
+  /**
+    Extracts the content index from the passed layerID.  If the layer id does
+    not belong to the receiver or if no value could be extracted, returns NO.
+    
+    @param {String} id the layer id
+  */
+  contentIndexForLayerId: function(id) {
+    if (!id || !(id = id.toString())) return null ; // nothing to do
+    
+    var base = this._baseLayerId;
+    if (!base) base = this._baseLayerId = SC.guidFor(this)+"-";
+    
+    // no match
+    if ((id.length <= base.length) || (id.indexOf(base) !== 0)) return null ; 
+    var ret = Number(id.slice(id.lastIndexOf('-')+1));
+    return isNaN(ret) ? null : ret ;
+  },
+  
+
+  /** 
+    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 {SC.Event} evt An event
+    @returns {SC.View} the item view or null
+  */
+  itemViewForEvent: function(evt) {
+    var responder = this.getPath('pane.rootResponder') ;
+    if (!responder) return null ; // fast path
+    
+    var base    = SC.guidFor(this) + '-',
+        baseLen = base.length,
+        element = evt.target,
+        layer   = this.get('layer'),
+        contentIndex = null,
+        id, itemView, ret ;
+        
+    // walk up the element hierarchy until we find this or an element with an
+    // id matching the base guid (i.e. a collection item)
+    while (element && element !== document && element !== layer) {
+      id = element ? element.getAttribute('id') : null ;
+      if (id && (contentIndex = this.contentIndexForLayerId(id)) !== null) {
+          break;
+      }
+      element = element.parentNode ; 
+    }
+    
+    // no matching element found? 
+    if (contentIndex===null || (element === layer)) {
+      element = layer = null; // avoid memory leaks 
+      return null;    
+    }
+    
+    // okay, found the DOM node for the view, go ahead and create it
+    // first, find the contentIndex
+    if (contentIndex >= this.get('length')) {
+      throw "layout for item view %@ was found when item view does not exist (%@)".fmt(id, this);
+    }
+    
+    return this.itemViewForContentIndex(contentIndex);
+  },
+  
+  // ..........................................................
+  // DISCLOSURE SUPPORT
+  // 
+  
+  /**
+    Expands any items in the passed selection array that have a disclosure
+    state.
+    
+    @param {SC.IndexSet} indexes the indexes to expand
+    @returns {SC.CollectionView} receiver
+  */
+  expand: function(indexes) {
+    if (!indexes) return this; // nothing to do
+    var del     = this.get('contentDelegate'),
+        content = this.get('content');
+        
+    indexes.forEach(function(i) { 
+      var state = del.contentIndexDisclosureState(this, content, i);
+      if (state === SC.BRANCH_CLOSED) del.contentIndexExpand(this,content,i);
+    }, this);
+    return this;
+  },
+
+  /**
+    Collapses any items in the passed selection array that have a disclosure
+    state.
+    
+    @param {SC.IndexSet} indexes the indexes to expand
+    @returns {SC.CollectionView} receiver
+  */
+  collapse: function(indexes) {
+    if (!indexes) return this; // nothing to do
+    var del     = this.get('contentDelegate'),
+        content = this.get('content');
+        
+    indexes.forEach(function(i) { 
+      var state = del.contentIndexDisclosureState(this, content, i);
+      if (state === SC.BRANCH_OPEN) del.contentIndexCollapse(this,content,i);
+    }, this);
+    return this;
+  },
+  
+  // ..........................................................
+  // SELECTION SUPPORT
+  // 
+  
+  /** @private 
+
+    Called whenever the selection object is changed to a new value.  Begins
+    observing the selection for changes.
+    
+  */
+  _cv_selectionDidChange: function() {  
+    var sel  = this.get('selection'),
+        last = this._cv_selection,
+        func = this._cv_selectionContentDidChange;
+        
+    if (sel === last) return this; // nothing to do
+    if (last) last.removeObserver('[]', this, func);
+    if (sel) sel.addObserver('[]', this, func);
+    
+    this._cv_selection = sel ;
+    this._cv_selectionContentDidChange();
+  }.observes('selection'),
+
+  /** @private
+  
+    Called whenever the selection object or its content changes.  This will
+    repaint any items that changed their selection state.
+  
+  */
+  _cv_selectionContentDidChange: function() {
+    var sel  = this.get('selection'),
+        last = this._cv_selindexes, // clone of last known indexes
+        content = this.get('content'),
+        diff ;
+
+    // save new last
+    this._cv_selindexes = sel ? sel.frozenCopy() : null;
+
+    // determine which indexes are now invalid
+    if (last) last = last.indexSetForSource(content);
+    if (sel) sel = sel.indexSetForSource(content);
+    
+    if (sel && last) diff = sel.without(last).add(last.without(sel));
+    else diff = sel || last;
+
+    if (diff && diff.get('length')>0) this.reloadSelectionIndexes(diff);
+  },
+  
+  /** @private
+    Contains the current item views that need their selection to be repainted.
+    This may be either NO, YES, or an IndexSet.
+  */
+  _invalidSelection: NO,
+  
+  /**
+    Called whenever the selection changes.  The passed index set will contain
+    any affected indexes including those indexes that were previously 
+    selected and now should be deselected.
+    
+    Pass null to reload the selection state for all items.
+    
+    @param {SC.IndexSet} indexes affected indexes
+    @returns {SC.CollectionView} reciever
+  */
+  reloadSelectionIndexes: function(indexes) {
+    var invalid = this._invalidSelection ;
+    if (indexes && (invalid !== YES)) {
+      if (invalid) invalid.add(indexes)
+      else invalid = this._invalidSelection = indexes.copy();
+
+    } else this._invalidSelection = YES ; // force a total reload
+    
+    if (this.get('isVisibleInWindow')) {
+      this.invokeOnce(this.reloadSelectionIndexesIfNeeded);
+    } 
+    
+    return this ;
+  },
+
+  /**
+    Reloads the selection state if needed on any dirty indexes.  Normally this
+    will run once at the end of the runloop, but you can force the item views
+    to reload their selection immediately by calling this method.
+    
+    You can also override this method if needed to change the way the 
+    selection is reloaded on item views.  The default behavior will simply
+    find any item views in the nowShowing range that are affected and 
+    modify them.
+    
+    @returns {SC.CollectionView} receiver
+  */
+  reloadSelectionIndexesIfNeeded: function() {
+    var invalid = this._invalidSelection;
+    if (!invalid || !this.get('isVisibleInWindow')) return this ; 
+
+    var nowShowing = this.get('nowShowing'),
+        reload     = this._invalidIndexes,
+        content    = this.get('content'),
+        sel        = this.get('selection');
+    
+    this._invalidSelection = NO; // reset invalid
+    
+    // fast path.  if we are going to reload everything anyway, just forget
+    // about it.  Also if we don't have a nowShowing, nothing to do.
+    if (reload === YES || !nowShowing) return this ;
+    
+    // if invalid is YES instead of index set, just reload everything 
+    if (invalid === YES) invalid = nowShowing;
+
+    // if we will reload some items anyway, don't bother
+    if (reload && reload.isIndexSet) invalid = invalid.without(reload);
+
+    // iterate through each item and set the isSelected state.
+    invalid.forEach(function(idx) {
+      if (!nowShowing.contains(idx)) return; // not showing
+      var view = this.itemViewForContentIndex(idx, NO);
+      if (view) view.set('isSelected', sel ? sel.contains(content, idx) : NO);
+    },this);
+    
+    return this ;
+  },
+  
+  /** 
+    Selection primitive.  Selects the passed IndexSet of items, optionally 
+    extending the current selection.  If extend is NO or not passed then this
+    will replace the selection with the passed value.  Otherwise the indexes
+    will be added to the current selection.
+    
+    @param {Number|SC.IndexSet} indexes index or indexes to select
+    @param extend {Boolean} optionally extend the selection
+    @returns {SC.CollectionView} receiver
+  */
+  select: function(indexes, extend) {
+
+    var content = this.get('content'),
+        del     = this.get('selectionDelegate'),
+        cdel    = this.get('contentDelegate'),
+        groupIndexes = cdel.contentGroupIndexes(this, content),
+        sel;
+
+    // normalize
+    if (SC.typeOf(indexes) === SC.T_NUMBER) {
+      indexes = SC.IndexSet.create(indexes, 1);
+    }
+
+    // if we are passed an empty index set or null, clear the selection.
+    if (indexes && indexes.get('length')>0) {
+
+      // first remove any group indexes - these can never be selected
+      if (groupIndexes && groupIndexes.get('length')>0) {
+        indexes = indexes.copy().remove(groupIndexes);
+      }
       
+      // give the delegate a chance to alter the items
+      indexes = del.collectionViewShouldSelectIndexes(this, indexes, extend);
+      if (!indexes || indexes.get('length')===0) return this; // nothing to do
+    
+    } else indexes = null;
+
+    // build the selection object, merging if needed
+    if (extend && (sel = this.get('selection'))) sel = sel.copy();
+    else sel = SC.SelectionSet.create();
+    if (indexes) sel.add(content, indexes);
+
+    // give delegate one last chance
+    sel = del.collectionViewSelectionForProposedSelection(this, sel);
+    if (!sel) sel = SC.SelectionSet.create(); // empty
+    
+    // if we're not extending the selection, clear the selection anchor
+    this._selectionAnchor = null ;
+    this.set('selection', sel.freeze()) ;  
+    return this;
+  },
+  
+  /** 
+    Primtive to remove the indexes from the selection.  
+    
+    @param {Number|SC.IndexSet} indexes index or indexes to select
+    @returns {SC.CollectionView} receiver
+  */
+  deselect: function(indexes) {
+
+    var sel     = this.get('selection'),
+        content = this.get('content'),
+        del     = this.get('selectionDelegate');
+        
+    if (!sel || sel.get('length')===0) return this; // nothing to do
+        
+    // normalize
+    if (SC.typeOf(indexes) === SC.T_NUMBER) {
+      indexes = SC.IndexSet.create(indexes, 1);
+    }
+
+    // give the delegate a chance to alter the items
+    indexes = del.collectionViewShouldDeselectIndexes(this, indexes) ;
+    if (!indexes || indexes.get('length')===0) return this; // nothing to do
+
+    // now merge change - note we expect sel && indexes to not be null
+    sel = sel.copy().remove(content, indexes);
+    sel = del.collectionViewSelectionForProposedSelection(this, sel);
+    if (!sel) sel = SC.SelectionSet.create(); // empty
+
+    this.set('selection', sel.freeze()) ;
+    return this ;
+  },
+  
+  /** @private
+   Finds the next selectable item, up to content length, by asking the
+   delegate. If a non-selectable item is found, the index is skipped. If
+   no item is found, selection index is returned unmodified.
+
+   Return value will always be in the range of the bottom of the current 
+   selection index and the proposed index.   
+   
+   @param {Number} proposedIndex the desired index to select
+   @param {Number} bottom optional bottom of selection use as fallback
+   @returns {Number} next selectable index. 
+  */
+  _findNextSelectableItemFromIndex: function(proposedIndex, bottom) {
+    
+    var lim     = this.get('length'),
+        range   = SC.IndexSet.create(), 
+        content = this.get('content'),
+        del     = this.get('selectionDelegate'),
+        cdel    = this.get('contentDelegate'),
+        groupIndexes = cdel.contentGroupIndexes(this, content),
+        ret, sel ;
+
+    // fast path
+    if (!groupIndexes && (del.collectionViewShouldSelectIndexes === this.collectionViewShouldSelectIndexes)) {
+      return proposedIndex;
+    }
+
+    // loop forwards looking for an index that is allowed by delegate
+    // we could alternatively just pass the whole range but this might be 
+    // slow for the delegate
+    while (proposedIndex < lim) {
+      if (!groupIndexes || !groupIndexes.contains(proposedIndex)) {
+        range.add(proposedIndex);
+        ret = del.collectionViewShouldSelectIndexes(this, range);
+        if (ret && ret.get('length') >= 1) return proposedIndex ;
+        range.remove(proposedIndex);
+      }
+      proposedIndex++;      
+    }
+
+    // if nothing was found, return top of selection
+    if (bottom === undefined) {
+      sel = this.get('selection');
+      bottom = sel ? sel.get('max') : -1 ;
+    }
+    return bottom ;
+  },
+  
+  /** @private
+   Finds the previous selectable item, up to the first item, by asking the
+   delegate. If a non-selectable item is found, the index is skipped. If
+   no item is found, selection index is returned unmodified.
+   
+   @param {Integer} proposedIndex the desired index to select
+   @returns {Integer} the previous selectable index. This will always be in the range of the top of the current selection index and the proposed index.
+   @private
+  */
+  _findPreviousSelectableItemFromIndex: function(proposedIndex, top) {
+    var range   = SC.IndexSet.create(), 
+        content = this.get('content'),
+        del     = this.get('selectionDelegate'),
+        cdel    = this.get('contentDelegate'),
+        groupIndexes = cdel.contentGroupIndexes(this, content),
+        ret ;
+
+    if (SC.none(proposedIndex)) proposedIndex = -1;
+    
+    // fast path
+    if (!groupIndexes && (del.collectionViewShouldSelectIndexes === this.collectionViewShouldSelectIndexes)) {
+      return proposedIndex;
+    }
+
+    // loop backwards looking for an index that is allowed by delegate
+    // we could alternatively just pass the whole range but this might be 
+    // slow for the delegate
+    while (proposedIndex >= 0) {
+      if (!groupIndexes || !groupIndexes.contains(proposedIndex)) {
+        range.add(proposedIndex);
+        ret = del.collectionViewShouldSelectIndexes(this, range);
+        if (ret && ret.get('length') >= 1) return proposedIndex ;
+        range.remove(proposedIndex);
+      }
+      proposedIndex--;      
+    }
+
+    // if nothing was found, return top of selection
+    if (top === undefined) {
+      var sel = this.get('selection');
+      top = sel ? sel.get('min') : -1 ;
+    }
+    if (SC.none(top)) top = -1;
+    return top ;
+  },
+  
+  /**
+    Select one or more items before the current selection, optionally
+    extending the current selection.  Also scrolls the selected item into 
+    view.
+    
+    Selection does not wrap around.
+    
+    @param extend {Boolean} (Optional) If true, the selection will be extended 
+      instead of replaced.  Defaults to false.
+    @param numberOfItems {Integer} (Optional) The number of previous to be 
+      selected.  Defaults to 1
+      @returns {SC.CollectionView} receiver
+  */
+  selectPreviousItem: function(extend, numberOfItems) {
+    if (SC.none(numberOfItems)) numberOfItems = 1 ;
+    if (SC.none(extend)) extend = false ;
+    
+    var sel     = this.get('selection'),
+        content = this.get('content');
+    if (sel) sel = sel.indexSetForSource(content);
+    
+    var selTop    = sel ? sel.get('min') : -1,
+        selBottom     = sel ? sel.get('max')-1 : -1,
+        anchor        = this._selectionAnchor;
+    if (SC.none(anchor)) anchor = selTop;
+
+    // if extending, then we need to do some fun stuff to build the array
+    if (extend) {
+
       // If the selBottom is after the anchor, then reduce the selection
       if (selBottom > anchor) {
         selBottom = selBottom - numberOfItems ;
@@ -797,30 +1435,27 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
       }
       
       // Ensure we are not out of bounds
-      if (selTop < 0) selTop = 0 ;
+      if (SC.none(selTop) || (selTop < 0)) selTop = 0 ;
       if (selBottom < selTop) selBottom = selTop ;
       
     // if not extending, just select the item previous to the selTop
     } else {
-      selTop = this._findPreviousSelectableItemFromIndex(this._indexOfSelectionTop() - numberOfItems);
-      if (selTop < 0) selTop = 0 ;
+      selTop = this._findPreviousSelectableItemFromIndex(selTop - numberOfItems);
+      if (SC.none(selTop) || (selTop < 0)) selTop = 0 ;
       selBottom = selTop ;
       anchor = null ;
     }
     
-    // now build array of new items to select
-    var items = [] ;
-    while(selTop <= selBottom) {
-      items[items.length] = content.objectAt(selTop++) ;
-    }
+    var scrollToIndex = selTop ;
     
-    // ensure that the item is visible and set the selection
-    if (items.length > 0) {
-      this.scrollToContent(items[0]);
-      this.selectItems(items);
-    }
+    // now build new selection
+    sel = SC.IndexSet.create(selTop, selBottom+1-selTop);
     
+    // ensure that the item is visible and set the selection
+    this.scrollToContentIndex(scrollToIndex) ;
+    this.select(sel) ;
     this._selectionAnchor = anchor ;
+    return this ;
   },
   
   /**
@@ -833,215 +1468,144 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
       instead of replaced.  Defaults to false.
     @param numberOfItems {Integer} (Optional) The number of items to be 
       selected.  Defaults to 1.
-    @returns {void}
+    @returns {SC.CollectionView} receiver
   */
   selectNextItem: function(extend, numberOfItems) {
     if (SC.none(numberOfItems)) numberOfItems = 1 ;
     if (SC.none(extend)) extend = false ;
-    
-    var content  = this.get('content');
-    var contentLength = content.get('length') ;
-    
+
+    var sel     = this.get('selection'),
+        content = this.get('content');
+    if (sel) sel = sel.indexSetForSource(content);
+    
+    var selTop    = sel ? sel.get('min') : -1,
+        selBottom = sel ? sel.get('max')-1 : -1,
+        anchor    = this._selectionAnchor,
+        lim       = this.get('length');
+        
+    if (SC.none(anchor)) anchor = selTop;
+
     // if extending, then we need to do some fun stuff to build the array
-    var selTop, selBottom, anchor ;
     if (extend) {
-      selTop = this._indexOfSelectionTop() ;
-      selBottom = this._indexOfSelectionBottom() ;
-      anchor = SC.none(this._selectionAnchor) ? selTop : this._selectionAnchor ;
-      this._selectionAnchor = anchor ;
       
       // If the selTop is before the anchor, then reduce the selection
       if (selTop < anchor) {
         selTop = selTop + numberOfItems ;
         
-      // otherwise, select the next item after the top 
+      // otherwise, select the next item after the bottom 
       } else {
-        selBottom = this._findNextSelectableItemFromIndex(selBottom + numberOfItems);
+        selBottom = this._findNextSelectableItemFromIndex(selBottom + numberOfItems, selBottom);
       }
       
       // Ensure we are not out of bounds
-      if (selBottom >= contentLength) selBottom = contentLength-1;
+      if (selBottom >= lim) selBottom = lim-1;
       if (selTop > selBottom) selTop = selBottom ;
       
     // if not extending, just select the item next to the selBottom
     } else {
-      selBottom = this._findNextSelectableItemFromIndex(this._indexOfSelectionBottom() + numberOfItems);
+      selBottom = this._findNextSelectableItemFromIndex(selBottom + numberOfItems, selBottom);
       
-      if (selBottom >= contentLength) selBottom = contentLength-1;
+      if (selBottom >= lim) selBottom = lim-1;
       selTop = selBottom ;
       anchor = null ;
     }
     
-    // now build array of new items to select
-    var items = [] ;
-    while(selTop <= selBottom) {
-      items[items.length] = content.objectAt(selTop++) ;
-    }
-
-    // ensure that the item is visible and set the selection
-    if (items.length > 0) {
-      this.scrollToContent(items[0]);
-      this.selectItems(items);
-    }
+    var scrollToIndex = selBottom ;
     
+    // now build new selection
+    sel = SC.IndexSet.create(selTop, selBottom-selTop+1);
+    
+    // ensure that the item is visible and set the selection
+    this.scrollToContentIndex(scrollToIndex) ;
+    this.select(sel) ;
     this._selectionAnchor = anchor ;
+    return this ;
   },
-  
-  /**
-    Scroll the rootElement (if needed) to ensure that the item is visible.
-    @param {SC.Record} record The record to scroll to
-    @returns {void}
-  */
-  scrollToContent: function(record) {
-    var content, itemView, contentIndex, groupBy;
     
-    // find the itemView.  if not present, add one.
-    content = SC.makeArray(this.get('content'));
-    if (content.indexOf(record) < 0) return ; // do nothing if not in content.
-    
-    itemView = this.itemViewForContent(record) ;
-    if (!itemView) {
-      content = SC.makeArray(this.get('content')) ;
-      contentIndex = content.indexOf(record) ;
-      groupBy = this.get('groupBy');
-      itemView = this._insertItemViewFor(record, groupBy, contentIndex); 
-    }
-    if (itemView) this.scrollToItemView(itemView);
-  },
-  
   /**
-    Scroll the rootElement (if needed) to ensure that the item is visible.
-    @param {SC.ClassicView} view The item view to scroll to
-    @returns {void}
-  */
-  scrollToItemView: function(view) {
-    // 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) ;
-  },
-  
-  /** 
-    Selects the passed array of items, optionally extending the
-    current selection.
+    Deletes the selected content if canDeleteContent is YES.  This will invoke 
+    delegate methods to provide fine-grained control.  Returns YES if the 
+    deletion was possible, even if none actually occurred.
     
-    @param items {Array} The item or items to select.
-    @param extendSelection {Boolean} If true, extends the selection instead of 
-      replacing it.
+    @returns {Boolean} YES if deletion is possible.
   */
-  selectItems: function(items, extendSelection) {
-    var base = (extendSelection) ? this.get('selection') : [] ;
-    var sel = [] ;
-    
-    items = SC.makeArray(items) ;
-    for (var i = 0, len = items.length; i < len; i++) {
-      if (this.invokeDelegateMethod(this.delegate, 'collectionViewShouldSelectItem', this, items[i])) {
-        sel.push(items[i]);
-      }
-    }
+  deleteSelection: function() {
     
-    var set = SC.Set.create(base), obj ;
-    set.addEach(sel) ; // sel contains selectable items
-    sel.length = 0 ; // we don't want duplicates in the selection, so clear it
-    while (obj = set.pop()) sel.push(obj) ; // now fill it back up..
+    // perform some basic checks...
+    if (!this.get('canDeleteContent')) return NO;  
+
+    var sel     = this.get('selection'),
+        content = this.get('content'),
+        del     = this.get('selectionDelegate'),
+        indexes = sel&&content ? sel.indexSetForSource(content) : null;
+        
+    if (!content || !indexes || indexes.get('length') === 0) return NO ;
     
-    // if we're not extending the selection, clear the selection anchor
-    this._selectionAnchor = null ;
-    this.set('selection', sel) ;  
-  },
-  
-  /** 
-    Removes the items from the selection.
-  */
-  deselectItems: function(items) {
-    var base = SC.makeArray(this.get('selection')) ;
-    var sel = [] ;
+    // let the delegate decide what to actually delete.  If this returns an
+    // empty index set or null, just do nothing.
+    indexes = del.collectionViewShouldDeleteIndexes(this, indexes);
+    if (!indexes || indexes.get('length') === 0) return NO ;
     
-    items = SC.makeArray(items) ;
+    // now have the delegate (or us) perform the deletion. The default 
+    // delegate implementation just uses standard SC.Array methods to do the
+    // right thing.
+    del.collectionViewDeleteContent(this, this.get('content'), indexes);
     
-    var set = SC.Set.create(base), obj ;
-    set.removeEach(items) ;
-    while (obj = set.pop()) sel.push(obj) ;
+    // also, fix up the selection by removing the actual items we removed
+    // set selection directly instead of calling select() since we are just
+    // fixing up the selection.
+    sel = this.get('selection').copy().remove(content, indexes);
+    this.set('selection', sel.freeze());
     
-    this.set('selection', sel) ;
+    return YES ;
   },
   
+  // ..........................................................
+  // SCROLLING
+  // 
+  
   /**
-    Deletes the selected content if canDeleteContent is YES.  
-    
-    This will invoke delegate methods to provide fine-grained control.
+    Scroll the rootElement (if needed) to ensure that the item is visible.
     
-    @returns {Boolean} YES if deletion is possible, even if none actually occurred.
+    @param {Number} contentIndex The index of the item to scroll to
+    @returns {SC.CollectionView} receiver
   */
-  deleteSelection: function() {
-    // console.log('deleteSelection called on %@'.fmt(this));
-    // perform some basic checks...
-    if (!this.get('canDeleteContent')) return NO;  
-    var sel = SC.makeArray(this.get('selection'));
-    if (!sel || sel.get('length') === 0) return NO ;
-    
-    // let the delegate decide what to actually delete.  If this returns an
-    // empty array or null, just do nothing.
-    sel = this.invokeDelegateMethod(this.delegate, 'collectionViewShouldDeleteContent', this, sel) ;
-    sel = SC.makeArray(sel) ; // ensure this is an array
-    if (!sel || sel.get('length') === 0) return YES ;
-    
-    // now have the delegate (or us) perform the deletion.  The collection
-    // view implements a default version of this method.
-    this.invokeDelegateMethod(this.delegate, 'collectionViewDeleteContent', this, sel) ;
-    return YES ;
+  scrollToContentIndex: function(contentIndex) {
+    var itemView = this.itemViewForContentIndex(contentIndex) ;
+    if (itemView) this.scrollToItemView(itemView) ;
+    return this; 
   },
-
+  
   /**
-    Default implementation of the delegate method.
-    
-    This method will delete the passed items from the content array using 
-    standard array methods.  This is often suitable if you are using an
-    array controller or a real array for your content.
-    
-    @param view {SC.CollectionView} this
-    @param sel {Array} the items to delete
-    @returns {Boolean} YES if the deletion was a success.
-  */
-  collectionViewDeleteContent: function(view, sel) {
-    
-    // get the content.  Bail if this cannot be used as an array.
-    var content = this.get('content') ; 
-    if (!content) return NO;  // nothing to do
-    
-    // determine the method to use
-    var hasDestroyObject = SC.$type(content.destroyObject) === SC.T_FUNCTION ;
-    var hasRemoveObject = SC.$type(content.removeObject) === SC.T_FUNCTION ;
-    if (!hasDestroyObject && !hasRemoveObject) return NO; // nothing to do
-    
-    // suspend property notifications and remove the objects...
-    if (content.beginPropertyChanges) content.beginPropertyChanges();
-    var idx = sel.get('length') ;
-    while(--idx >= 0) {
-      var item = sel.objectAt(idx) ;
-      if (hasDestroyObject) {
-        content.destroyObject(item);
-      } else {
-        content.removeObject(item);
-      }
+    Scroll to the passed item view.  If the item view is not visible on screen
+    this method will not work.
+
+    @param {SC.View} view The item view to scroll to
+    @returns {SC.CollectionView} receiver
+  */
+  scrollToItemView: function(view) {
+    if (!view.get('parentView')) return this; // nothing to do
+    if (!view.get('layer')) {
+      if (this.get('layer')) view.updateLayerLocation();
+      else return this; // nothing to do
     }
-    // begin notifying again...
-    if (content.endPropertyChanges) content.endPropertyChanges() ;
     
-    return YES ; // done!
+    var scrollable = this;
+    while (scrollable && !scrollable.isPane) {
+      if (scrollable.get('isScrollable')) scrollable.scrollToVisible(view);
+      scrollable = scrollable.get('parentView');
+    }
+    return this ;
   },
-  
-  // ......................................
-  // EVENT HANDLING
-  //
+
+  // ..........................................................
+  // KEYBOARD EVENTS
+  // 
   
   /** @private */
   keyDown: function(evt) {
-    // console.log('keyDown called on %@'.fmt(this));
-    return this.interpretKeyEvents(evt) ;
+    var ret = this.interpretKeyEvents(evt) ;
+    return !ret ? NO : ret ;
   },
   
   /** @private */
@@ -1051,8 +1615,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     Handle select all keyboard event.
   */
   selectAll: function(evt) {
-    var content = (this.get('content') || []).slice() ;
-    this.selectItems(content, NO) ;
+    var content = this.get('content'),
+        sel = content ? SC.IndexSet.create(0, content.get('length')) : null;
+    this.select(sel, NO) ;
     return YES ;
   },
   
@@ -1060,7 +1625,6 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     Handle delete keyboard event.
   */
   deleteBackward: function(evt) {
-    // console.log('deleteBackward called on %@ with evt %@'.fmt(this, evt));
     return this.deleteSelection() ;
   },
   
@@ -1068,7 +1632,6 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     Handle delete keyboard event.
   */
   deleteForward: function(evt) {
-    // console.log('deleteForward called on %@ with evt %@'.fmt(this, evt));
     return this.deleteSelection() ;
   },
   
@@ -1077,6 +1640,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   */
   moveDown: function(sender, evt) {
     this.selectNextItem(false, this.get('itemsPerRow') || 1) ;
+    this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
     return true ;
   },
   
@@ -1085,14 +1649,72 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   */
   moveUp: function(sender, evt) {
     this.selectPreviousItem(false, this.get('itemsPerRow') || 1) ;
+    this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
     return true ;
   },
 
   /** @private
     Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
+    If item is expandable, will collapse.
   */
   moveLeft: function(sender, evt) {
-    if ((this.get('itemsPerRow') || 1) > 1) this.selectPreviousItem(false, 1) ;
+    if ((this.get('itemsPerRow') || 1) > 1) {
+      this.selectPreviousItem(false, 1);
+      this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    
+    } else {
+      var sel     = this.get('selection'),
+          content = this.get('content'),
+          indexes = sel ? sel.indexSetForSource(content) : null;
+    
+      // Collapse the element if it is expanded.  However, if there is exactly
+      // one item selected and the item is already collapsed or is a leaf
+      // node, then select the (expanded) parent element instead as a
+      // convenience to the user.
+      if ( indexes ) {
+        var del          = undefined,     // We'll load it lazily
+            selectParent = false,
+            index        = undefined;
+
+        if ( indexes.get('length') === 1 ) {
+          index = indexes.get('firstObject');
+          del = this.get('contentDelegate');
+          var state = del.contentIndexDisclosureState(this, content, index);
+          if (state !== SC.BRANCH_OPEN) selectParent = true;
+        }
+    
+        if ( selectParent ) {
+          // TODO:  PERFORMANCE:  It would be great to have a function like
+          //        SC.CollectionView.selectParentItem() or something similar
+          //        for performance reasons.  But since we don't currently
+          //        have such a function, let's just iterate through the
+          //        previous items until we find the first one with a outline
+          //        level of one less than the selected item.
+          var desiredOutlineLevel = del.contentIndexOutlineLevel(this, content, index) - 1;
+          if ( desiredOutlineLevel >= 0 ) {
+            var parentIndex = -1;
+            while ( parentIndex < 0 ) {
+              var previousItemIndex = this._findPreviousSelectableItemFromIndex(index - 1);
+              if (previousItemIndex < 0 ) return false;    // Sanity-check.
+              index = previousItemIndex;
+              var outlineLevel = del.contentIndexOutlineLevel(this, content, index);
+              if ( outlineLevel === desiredOutlineLevel ) {
+                parentIndex = previousItemIndex;
+              }
+            }
+          
+            // If we found the parent, select it now.
+            if ( parentIndex !== -1 ) {
+              this.select(index);
+            }
+          }
+        }
+        else {
+          this.collapse(indexes);
+        }
+      }
+    }
+  
     return true ;
   },
   
@@ -1100,19 +1722,30 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
   */
   moveRight: function(sender, evt) {
-    if ((this.get('itemsPerRow') || 1) > 1) this.selectNextItem(false, 1) ;
+    if ((this.get('itemsPerRow') || 1) > 1) {
+      this.selectNextItem(false, 1) ;
+      this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    } else {
+      var sel     = this.get('selection'),
+          content = this.get('content'),
+          indexes = sel ? sel.indexSetForSource(content) : null;
+      if (indexes) this.expand(indexes);
+    }
+    
     return true ;
   },
   
   /** @private */
   moveDownAndModifySelection: function(sender, evt) {
     this.selectNextItem(true, this.get('itemsPerRow') || 1) ;
+    this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
     return true ;
   },
   
   /** @private */
   moveUpAndModifySelection: function(sender, evt) {
     this.selectPreviousItem(true, this.get('itemsPerRow') || 1) ;
+    this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
     return true ;
   },
   
@@ -1120,7 +1753,10 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
   */
   moveLeftAndModifySelection: function(sender, evt) {
-    if ((this.get('itemsPerRow') || 1) > 1) this.selectPreviousItem(true, 1) ;
+    if ((this.get('itemsPerRow') || 1) > 1) {
+      this.selectPreviousItem(true, 1) ;
+      this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    }
     return true ;
   },
 
@@ -1128,10 +1764,58 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
   */
   moveRightAndModifySelection: function(sender, evt) {
-    if ((this.get('itemsPerRow') || 1) > 1) this.selectNextItem(true, 1) ;
+    if ((this.get('itemsPerRow') || 1) > 1) {
+      this.selectNextItem(true, 1) ;
+      this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    }
     return true ;
   },
 
+  
+  
+  /** @private
+    if content value is editable and we have one item selected, then edit.
+    otherwise, invoke action.
+  */
+  insertNewline: function(sender, evt) {
+    var canEdit = this.get('isEditable') && this.get('canEditContent'),
+        sel, content, set, idx, itemView;
+    
+    // first make sure we have a single item selected; get idx 
+    if (canEdit) {
+      sel     = this.get('selection') ;
+      content = this.get('content');
+      if (sel && sel.get('length') === 1) {
+        set = sel.indexSetForSource(content);
+        idx = set ? set.get('min') : -1;
+        canEdit = idx>=0;
+      }
+    }
+    
+    // next find itemView and ensure it supports editing
+    if (canEdit) {
+      itemView = this.itemViewForContentIndex(idx);
+      canEdit = itemView && SC.typeOf(itemView.beginEditing)===SC.T_FUNCTION;
+    }
+      
+    // ok, we can edit..
+    if (canEdit) {
+      this.scrollToContentIndex(idx);
+      itemView = this.itemViewForContentIndex(idx); // just in case
+      itemView.beginEditing();
+      
+    // invoke action 
+    } else {
+      this.invokeLater(this._cv_action, 0, itemView, null) ;
+    }
+    
+    return YES ; // always handle
+  },
+
+  // ..........................................................
+  // MOUSE EVENTS
+  // 
+  
   /** @private
     Handles mouse down events on the collection view or on any of its 
     children.
@@ -1144,324 +1828,231 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     @returns {Boolean} Usually YES.
   */
   mouseDown: function(ev) {
-    // console.log('%@.mouseDown(%@)'.fmt(this, ev));
-    // console.log(ev.originalEvent);
     
     // When the user presses the mouse down, we don't do much just yet.
     // Instead, we just need to save a bunch of state about the mouse down
     // so we can choose the right thing to do later.
     
-    // save the original mouse down event for use in dragging.
-    this._mouseDownEvent = ev ;
-    
     // Toggle selection only triggers on mouse up.  Do nothing.
-    if (this.useToggleSelection) return true;
+    if (this.get('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._shouldSelect = this._shouldDeselect =
-      this._shouldReselect = this._refreshSelection = false;
-      
-    // debugger ;
     // find the actual view the mouse was pressed down on.  This will call
     // hitTest() on item views so they can implement non-square detection
     // modes. -- once we have an item view, get its content object as well.
-    var mouseDownView = (this._mouseDownView = this.itemViewForEvent(ev));
-    var mouseDownContent = 
-      (this._mouseDownContent = mouseDownView ? mouseDownView.get('content') : null);
+    var itemView      = this.itemViewForEvent(ev),
+        content       = this.get('content'),
+        contentIndex  = itemView ? itemView.get('contentIndex') : -1, 
+        info, anchor ;
+        
+    info = this.mouseDownInfo = {
+      event:        ev,  
+      itemView:     itemView,
+      contentIndex: contentIndex,
+      at:           Date.now()
+    };
       
     // become first responder if possible.
     this.becomeFirstResponder() ;
     
-    // console.log(mouseDownView);
-    
     // recieved a mouseDown on the collection element, but not on one of the 
     // childItems... unless we do not allow empty selections, set it to empty.
-    if (!mouseDownView) {
-      if (this.get('allowDeselectAll')) this.selectItems([], false);
-      return true ;
+    if (!itemView) {
+      if (this.get('allowDeselectAll')) this.select(null, false);
+      return YES ;
     }
     
     // collection some basic setup info
-    var selection  = this.get('selection') || [] ;
-    var isSelected = (selection.indexOf(mouseDownContent) !== -1) ;
-    var modifierKeyPressed = ev.ctrlKey || ev.metaKey ;
-    if (mouseDownView.checkboxView && (SC.Event.element(ev) == ev.checkboxView.rootElement)) {
-      modifierKeyPressed = true ;
-    }
-    this._modifierKeyPressed = modifierKeyPressed ;  
+    var sel = this.get('selection'), isSelected, modifierKeyPressed;
+    if (sel) sel = sel.indexSetForSource(content);
     
-    this._mouseDownAt = Date.now();
+    isSelected = sel ? sel.contains(contentIndex) : NO;
+    info.modifierKeyPressed = modifierKeyPressed = ev.ctrlKey || ev.metaKey ;
     
     // holding down a modifier key while clicking a selected item should 
     // deselect that item...deselect and bail.
     if (modifierKeyPressed && isSelected) {
-      this._shouldDeselect = mouseDownContent;
+      info.shouldDeselect = contentIndex >= 0;
+
     // if the shiftKey was pressed, then we want to extend the selection
     // from the last selected item
-    } else if (ev.shiftKey && selection.get('length') > 0) {
-      selection = this._findSelectionExtendedByShift(selection, mouseDownContent) ;
-      this.selectItems(selection) ;
+    } else if (ev.shiftKey && sel && sel.get('length') > 0) {
+      sel = this._findSelectionExtendedByShift(sel, contentIndex);
+      anchor = this._selectionAnchor ; 
+      this.select(sel) ;
+      this._selectionAnchor = anchor; //save the anchor
       
     // If no modifier key was pressed, then clicking on the selected item 
     // should clear the selection and reselect only the clicked on item.
     } else if (!modifierKeyPressed && isSelected) {
-      this._shouldReselect = mouseDownContent;
+      info.shouldReselect = contentIndex >= 0;
       
     // Otherwise, if selecting on mouse down,  simply select the clicked on 
     // item, adding it to the current selection if a modifier key was pressed.
     } else {
-      if (this.get("selectOnMouseDown")){
-         this.selectItems(mouseDownContent, modifierKeyPressed);
-      } else this._shouldSelect = mouseDownContent ;
+      if (this.get("selectOnMouseDown")) {
+        this.select(contentIndex, modifierKeyPressed);
+      } else {
+        info.shouldSelect = contentIndex >= 0 ;
+      }
     }
     
     // saved for extend by shift ops.
-    this._previousMouseDownContent = mouseDownContent;
+    info.previousContentIndex = contentIndex;
     
-    return true;
+    return YES;
   },
   
   /** @private */
   mouseUp: function(ev) {
     
-    var canAct = this.get('actOnSelect') ;
-    var view = this.itemViewForEvent(ev) ;
-    var content, selection;
+    var view   = this.itemViewForEvent(ev),
+        info   = this.mouseDownInfo,
+        idx    = info.contentIndex,
+        contentIndex, sel, isSelected, canEdit, itemView, content;
     
-    if (this.useToggleSelection) {
+    if (this.get('useToggleSelection')) {
       if (!view) return ; // do nothing when clicked outside of elements
       
       // determine if item is selected. If so, then go on.
-      selection = this.get('selection') || [] ;
-      content = (view) ? view.get('content') : null ;
-      var isSelected = selection.include(content) ;
-      if (isSelected) {
-        this.deselectItems([content]) ;
-      } else this.selectItems([content],true) ;
+      sel = this.get('selection') ;
+      contentIndex = (view) ? view.get('contentIndex') : -1 ;
+      isSelected = sel && sel.include(contentIndex) ;
+
+      if (isSelected) this.deselect(contentIndex) ;
+      else this.select(contentIndex, YES) ;
       
     } else {
-      content = (view) ? view.get('content') : null ;
+      contentIndex = (view) ? view.get('contentIndex') : -1 ;
       
       // this will be set if the user simply clicked on an unselected item and 
       // selectOnMouseDown was NO.
-      if (this._shouldSelect) this.selectItems(this._shouldSelect, this._modifierKeyPressed);
+      if (info.shouldSelect) this.select(idx, info.modifierKeyPressed);
       
       // This is true if the user clicked on a selected item with a modifier
       // key pressed.
-      if (this._shouldDeselect) this.deselectItems(this._shouldDeselect);
+      if (info.shouldDeselect) this.deselect(idx);
       
       // This is true if the user clicked on a selected item without a 
       // modifier-key pressed.  When this happens we try to begin editing 
       // on the content.  If that is not allowed, then simply clear the 
       // selection and reselect the clicked on item.
-      if (this._shouldReselect) {
+      if (info.shouldReselect) {
         
+        //debugger ;
         // - contentValueIsEditable is true
-        var canEdit = this.get('contentValueIsEditable') ;
+        canEdit = this.get('isEditable') && this.get('canEditContent') ;
         
         // - the user clicked on an item that was already selected
+        //   ^ this is the only way shouldReset is set to YES
+        
         // - is the only item selected
         if (canEdit) {
-          var sel = this.get('selection') ;
-          canEdit = sel && (sel.get('length') === 1) && (sel.objectAt(0) === this._shouldReselect) ;
+          sel = this.get('selection') ;
+          canEdit = sel && (sel.get('length') === 1);
         }
         
         // - the item view responds to contentHitTest() and returns YES.
         // - the item view responds to beginEditing and returns YES.
         if (canEdit) {
-          var itemView = this.itemViewForContent(this._shouldReselect) ;
+          itemView = this.itemViewForContentIndex(idx) ;
           canEdit = itemView && (!itemView.contentHitTest || itemView.contentHitTest(ev)) ;
           canEdit = (canEdit && itemView.beginEditing) ? itemView.beginEditing() : NO ;
         }
         
         // if cannot edit, just reselect
-        if (!canEdit) this.selectItems(this._shouldReselect,false) ;
+        if (!canEdit) this.select(idx, false) ;
       }
       
       this._cleanupMouseDown() ;
     }
+
+    // handle actions on editing
+    this._cv_performSelectAction(view, ev, 0, ev.clickCount);
     
-    this._mouseDownEvent = null ;
-    if (canAct) this._action(ev, view) ;
-    
-    return false;  // bubble event to allow didDoubleClick to be called...
+    return NO;  // bubble event to allow didDoubleClick to be called...
   },
   
   /** @private */
   _cleanupMouseDown: function() {
-    this._mouseDownAt = this._shouldDeselect = this._shouldReselect = this._refreshSelection = this._shouldSelect = false;
-    this._mouseDownEvent = this._mouseDownContent = this._mouseDownView = null ;
+    
+    // delete items explicitly to avoid leaks on IE
+    var info = this.mouseDownInfo, key;
+    if (info) {
+      for(key in info) {
+        if (!info.hasOwnProperty(key)) continue;
+        delete info[key];
+      }
+    }
+    this.mouseDownInfo = null;
   },
   
   /** @private */
   mouseMoved: function(ev) {
-    var view = this.itemViewForEvent(ev) ;
+    var view = this.itemViewForEvent(ev), 
+        last = this._lastHoveredItem ;
+
     // handle hover events.
-    if(this._lastHoveredItem && ((view === null) || (view != this._lastHoveredItem)) && this._lastHoveredItem.mouseOut) {
-      this._lastHoveredItem.mouseOut(ev); 
+    if (view !== last) {
+      if (last && last.mouseOut) last.mouseOut(ev);
+      if (view && view.mouseOver) view.mouseOver(ev);
     }
     this._lastHoveredItem = view ;
-    if (view && view.mouseOver) view.mouseOver(ev) ;
+
+    if (view && view.mouseMoved) view.mouseMoved(ev);
+    return YES;
   },
   
   /** @private */
   mouseOut: function(ev) {
-  
     var view = this._lastHoveredItem ;
     this._lastHoveredItem = null ;
-    if (view && view.didMouseOut) view.didMouseOut(ev) ;
-  },
-  
-  /** @private */
-  doubleClick: function(ev) {
-    var view = this.itemViewForEvent(ev) ;
-    if (view) {
-      this._action(view, ev) ;
-      return true ;
-    } else return false ;
+    if (view && view.mouseOut) view.mouseOut(ev) ;
+    return YES ;
   },
   
   /** @private */
-  _findSelectionExtendedByShift: function(selection, mouseDownContent) {
-    var content = this.get('content');
+  _findSelectionExtendedByShift: function(sel, contentIndex) {
     
-    // bounds of the collection...
-    var contentLowerBounds = 0;
-    var contentUpperBounds = (content.get('length') - 1);
-    
-    var selectionBeginIndex = content.indexOf(selection[0]) ;
-    var selectionEndIndex = content.indexOf(selection[selection.length-1]) ;
-    
-    var previousMouseDownIndex = content.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 = content.indexOf(mouseDownContent);
-    // sanity check...
-    if (currentMouseDownIndex == -1) throw "Unable to extend selection to an item that's not in the content array!";
+    // fast path.  if we don't have a selection, just select index
+    if (!sel || sel.get('length')===0) {
+      return SC.IndexSet.create(contentIndex);
+    }
     
+    // if we do have a selection, then figure out how to extend it.
+    var content = this.get('content'),
+        lim     = content.get('length')-1,
+        min     = sel.get('min'),
+        max     = sel.get('max')-1,
+        info    = this.mouseDownInfo,
+        anchor  = this._selectionAnchor ;
+    if (SC.none(anchor)) anchor = -1;
+
     // clicked before the current selection set... extend it's beginning...
-    if (currentMouseDownIndex < selectionBeginIndex) {
-      selectionBeginIndex = currentMouseDownIndex;
-    }
+    if (contentIndex < min) {
+      min = contentIndex;
+      if (anchor<0) this._selectionAnchor = anchor = max; //anchor at end
     
     // clicked after the current selection set... extend it's ending...
-    if (currentMouseDownIndex > selectionEndIndex) {
-      selectionEndIndex = currentMouseDownIndex;
-    }
+    } else if (contentIndex > max) {
+      max = contentIndex;
+      if (anchor<0) this._selectionAnchor = anchor = min; // anchor at start
     
     // clicked inside the selection set... need to determine where the last
     // selection was and use that as an anchor.
-    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 content.slice(selectionBeginIndex, selectionEndIndex);
-  },
-  
-  /** @private
-   Finds the next selectable item, up to content length, by asking the
-   delegate. If a non-selectable item is found, the index is skipped. If
-   no item is found, selection index is returned unmodified.
-   
-   @param {Integer} proposedIndex the desired index to select
-   @returns {Integer} the next selectable index. This will always be in the range of the bottom of the current selection index and the proposed index.
-   @private
-  */
-  _findNextSelectableItemFromIndex: function(proposedIndex) {
-    var content = this.get('content');
-    var contentLength = content.get('length');
-    var bottom = this._indexOfSelectionTop();
-    
-    while (proposedIndex < contentLength &&
-      this.invokeDelegateMethod(this.delegate, 'collectionViewShouldSelectItem', this, content.objectAt(proposedIndex)) === NO) {
-      proposedIndex++;
-    }
-    return (proposedIndex < contentLength) ? proposedIndex : bottom;
-  },
-  
-  /** @private
-   Finds the previous selectable item, up to the first item, by asking the
-   delegate. If a non-selectable item is found, the index is skipped. If
-   no item is found, selection index is returned unmodified.
-   
-   @param {Integer} proposedIndex the desired index to select
-   @returns {Integer} the previous selectable index. This will always be in the range of the top of the current selection index and the proposed index.
-   @private
-  */
-  _findPreviousSelectableItemFromIndex: function(proposedIndex) {
-    var content = this.get('content');
-    var contentLength = content.get('length');
-    var top = this._indexOfSelectionTop();
-    
-    while (proposedIndex >= 0 &&
-           this.invokeDelegateMethod(this.delegate, 'collectionViewShouldSelectItem', this, content.objectAt(proposedIndex)) === NO) {
-      proposedIndex--;
-    }
-    return (proposedIndex >= 0) ? proposedIndex : top ;
-  },
-  
-  /** @private
-    if content value is editable and we have one item selected, then edit.
-    otherwise, invoke action.
-  */
-  insertNewline: function() {
-    var sel, itemView;
-    if (this.get('contentValueIsEditable')) {
-      sel = this.get('selection') ;
-      if (sel && sel.get('length') === 1) {
-        itemView = this.itemViewForContent(sel.objectAt(0)) ;
-        if (itemView && itemView.beginEditing) {
-          this.scrollToItemView(itemView) ;
-          itemView.beginEditing() ;
-        }
-      }
+    } else if (contentIndex >= min && contentIndex <= max) {
+      if (anchor<0) this._selectionAnchor = anchor = min; //anchor at start
       
-    // invoke action!
-    } else {
-      sel = this.get('selection') ;
-      itemView = (sel && sel.get('length') === 1) ? this.itemViewForContent(sel.objectAt(0)) : null ;
-      this._action(itemView, null) ;
+      if (contentIndex === anchor) min = max = contentIndex ;
+      else if (contentIndex > anchor) {
+        min = anchor;
+        max = contentIndex ;
+      } else if (contentIndex < anchor) {
+        min = contentIndex;
+        max = anchor ;
+      }
     }
-    
-    return YES ; // always handle
-  },
-  
-  // ......................................
-  // FIRST RESPONDER
-  // 
-  
-  /** @private
-    Called whenever the collection becomes first responder. 
-    Adds the focused class to the element.
-  */
-  didBecomeFirstResponder: function() {
-    // console.log('didBecomeFirstResponder called on %@'.fmt(this));
-    this.$().addClass('focus') ;
-  },
-  
-  /** @private */
-  willLoseFirstResponder: function() {
-    // console.log('willLoseFirstResponder called on %@'.fmt(this));
-    this.$().removeClass('focus');
+
+    return SC.IndexSet.create(min, max - min + 1);
   },
   
   // ......................................
@@ -1482,22 +2073,21 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   }.property().cacheable(),
   
   /**
-    This property is set to the array of content objects that are the subject
-    of a drag whenever a drag is initiated on the collection view.  You can
-    consult this property when implementing your collection view delegate 
-    methods, but otherwise you should not use this property in your code.
-    
-    Note that drag content will always appear in the same order the content
-    appears in the source content array.
-    
-    @type Array
+    This property is set to the IndexSet of content objects that are the 
+    subject of a drag whenever a drag is initiated on the collection view.  
+    You can consult this property when implementing your collection view 
+    delegate  methods, but otherwise you should not use this property in your 
+    code.
+
+    @type SC.IndexSet
   */
   dragContent: null,
   
   /**
     This property is set to the proposed insertion index during a call to
-    collectionViewValidateDragOperation().  Your delegate implementations can change
-    the value of this property to enforce a drop some in some other location.
+    collectionViewValidateDragOperation().  Your delegate implementations can 
+    change the value of this property to enforce a drop some in some other 
+    location.
     
     @type Number
   */
@@ -1505,11 +2095,12 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   
   /**
     This property is set to the proposed drop operation during a call to
-    collectionViewValidateDragOperation().  Your delegate implementations can change
-    the value of this property to enforce a different type of drop operation.
+    collectionViewValidateDragOperation().  Your delegate implementations can 
+    change the value of this property to enforce a different type of drop 
+    operation.
     
     @type Number
-    @field
+    @property
   */
   proposedDropOperation: null,
   
@@ -1523,56 +2114,58 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     - a mouse down event was saved by the mouseDown method.
   */
   mouseDragged: function(ev) {
+    
+    var del     = this.get('selectionDelegate'),
+        content = this.get('content'),
+        sel     = this.get('selection'),
+        info    = this.mouseDownInfo,
+        dragContent, dragDataTypes, dragView;
+    
     // if the mouse down event was cleared, there is nothing to do; return.
-    if (this._mouseDownEvent === null) return YES ;
+    if (!info || info.contentIndex<0) return YES ;
     
     // Don't do anything unless the user has been dragging for 123msec
-    if ((Date.now() - this._mouseDownAt) < 123) return YES ;
+    if ((Date.now() - info.at) < 123) return YES ;
     
     // OK, they must be serious, decide if a drag will be allowed.
-    if (this.invokeDelegateMethod(this.delegate, 'collectionViewShouldBeginDrag', this)) {
+    if (del.collectionViewShouldBeginDrag(this)) {
       
       // First, get the selection to drag.  Drag an array of selected
       // items appearing in this collection, in the order of the 
       // collection.
       //
-      // Set this to the dragContent property.
-      var content = this.get('content') || [] ;
-      var dragContent;
-      
+      // Compute the dragContent - the indexes we will be dragging.      
       // if we don't select on mouse down, then the selection has not been 
       // updated to whatever the user clicked.  Instead use
       // mouse down content.
       if (!this.get("selectOnMouseDown")) {
-        dragContent = [this._mouseDownContent];
-      } else {
-        dragContent = this.get('selection').sort(function(a,b) {
-          a = content.indexOf(a) ;
-          b = content.indexOf(b) ;
-          return (a<b) ? -1 : ((a>b) ? 1 : 0) ;
-        });
-      }
+        dragContent = SC.IndexSet.create(info.contentIndex);
+      } else dragContent = sel ? sel.indexSetForSource(content) : null;
+      if (!dragContent) return YES; // nothing to drag
       
+      dragContent = { content: content, indexes: dragContent };
       this.set('dragContent', dragContent) ;
       
       // Get the set of data types supported by the delegate.  If this returns
       // a null or empty array and reordering content is not also supported
       // then do not start the drag.
-      if (this.get('dragDataTypes').get('length') > 0) {
+      dragDataTypes = this.get('dragDataTypes');
+      if (dragDataTypes && dragDataTypes.get('length') > 0) {
+        
         // Build the drag view to use for the ghost drag.  This 
         // should essentially contain any visible drag items.
-        // var view = this.ghostViewFor(dragContent) ;
-        var view = this.dragViewFor(dragContent) ;
+        dragView = del.collectionViewDragViewFor(this, dragContent.indexes);
+        if (!dragView) dragView = this._cv_dragViewFor(dragContent.indexes);
         
         // Initiate the drag
         SC.Drag.start({
-          event: this._mouseDownEvent,
+          event: info.event,
           source: this,
-          dragView: view,
+          dragView: dragView,
           ghost: NO,
           slideBack: YES,
           dataSource: this
-        }) ; 
+        }); 
         
         // Also use this opportunity to clean up since mouseUp won't 
         // get called.
@@ -1580,13 +2173,55 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
         this._lastInsertionIndex = null ;
         
       // Drag was not allowed by the delegate, so bail.
-      } else {
-        this.set('dragContent', null) ;
-      }
+      } else this.set('dragContent', null) ;
       
       return YES ;
     }
   },
+
+  /** @private
+    Compute a default drag view by grabbing the raw layers and inserting them
+    into a drag view.
+  */
+  _cv_dragViewFor: function(dragContent) {
+    // find only the indexes that are in both dragContent and nowShowing.
+    var indexes = this.get('nowShowing').without(dragContent);
+    indexes = this.get('nowShowing').without(indexes);
+    
+    var dragLayer = this.get('layer').cloneNode(false); 
+    var view = SC.View.create({ layer: dragLayer, parentView: this });
+
+    // cleanup weird stuff that might make the drag look out of place
+    SC.$(dragLayer).css('backgroundColor', 'transparent')
+      .css('border', 'none')
+      .css('top', 0).css('left', 0);
+    
+    indexes.forEach(function(i) {
+      var itemView = this.itemViewForContentIndex(i),
+          isSelected, layer;
+        
+      // render item view without isSelected state.  
+      if (itemView) {
+        isSelected = itemView.get('isSelected');
+        itemView.set('isSelected', NO);
+        
+        itemView.updateLayerIfNeeded();
+        layer = itemView.get('layer');
+        if (layer) layer = layer.cloneNode(true);
+        
+        itemView.set('isSelected', isSelected);
+        itemView.updateLayerIfNeeded();
+      }
+
+      if (layer) dragLayer.appendChild(layer);
+      layer = null;
+      
+    }, this);
+
+    dragLayer = null;
+    return view ;
+  },
+
   
   /**
     Implements the drag data source protocol for the collection view.  This
@@ -1597,26 +2232,18 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     @type Array
   */
   dragDataTypes: function() {
-    // console.log('dragDataTypes called on %@'.fmt(this));
-    
     // consult delegate.
-    var ret = this.invokeDelegateMethod(this.delegate, 'collectionViewDragDataTypes', this) ;
-    var canReorderContent = this.get('canReorderContent') ;
-    
-    // bail if ret returned null or empty array and cannot reorder.
-    if ((!ret || ret.get('length')===0) && !canReorderContent) return [];
-    
-    // add reorder type if needed.
-    if (canReorderContent) {
-      ret = (ret) ? ret.slice() : [] ;
-      
-      var key = this.get('reorderDataType') ;
-      if (ret.indexOf(key) < 0) ret.push(key) ;
+    var del = this.get('selectionDelegate'),
+        ret = del.collectionViewDragDataTypes(this),
+        key ;
+
+    if (this.get('canReorderContent')) {
+      ret = ret ? ret.copy() : [];
+      key = this.get('reorderDataType');
+      if (ret.indexOf(key) < 0) ret.push(key);          
     }
-    return ret ;
-    
-    //data: { "_mouseDownContent": dragContent }
-      
+        
+    return ret ? ret : [];
   }.property(),
   
   /**
@@ -1629,39 +2256,44 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     // if this is a reorder, then return drag content.
     if (this.get('canReorderContent')) {
       if (dataType === this.get('reorderDataType')) {
-        // console.log('dragContent is %@'.fmt(this.get('dragContent')));
         return this.get('dragContent') ;
       }
     }
     
-    // otherwise, just pass along to the delegate.
-    return this.invokeDelegateMethod(this.delegate, 'collectionViewDragDataForType', this, drag, dataType) ;
+    // otherwise, just pass along to the delegate
+    var del = this.get('selectionDelegate');
+    return del.collectionViewDragDataForType(this, drag, dataType);
   },
   
   /**
     Implements the SC.DropTarget interface.  The default implementation will
     consult the collection view delegate, if you implement those methods.
+    
+    This method is called once when the drag enters the view area.  It's 
+    return value will be stored on the drag object as allowedDragOperations,
+    possibly further constrained by the drag source.
+    
+    @param {SC.Drag} drag the drag object
+    @param {SC.Event} evt the event triggering this change, if available
+    @returns {Number} logical OR'd mask of allowed drag operations.
   */
   computeDragOperations: function(drag, evt) {
-    // console.log('computeDragOperations called on %@'.fmt(this));
-    
+
     // the proposed drag operation is DRAG_REORDER only if we can reorder
     // content and the drag contains reorder content.
-    var op = SC.DRAG_NONE ;
+    var op  = SC.DRAG_NONE,
+        del = this.get('selectionDelegate');
+
     if (this.get('canReorderContent')) {
-      var types = drag.get('dataTypes') ;
-      if (types.indexOf(this.get('reorderDataType')) >= 0) {
+      if (drag.get('dataTypes').indexOf(this.get('reorderDataType')) >= 0) {
         op = SC.DRAG_REORDER ;
       }
     }
     
     // Now pass this onto the delegate.
-    // op = this.invokeDelegateMethod(this.delegate, 'collectionViewValidateDrop', this, drag, SC.DROP_ANY, -1, op) ;
-    op = this.invokeDelegateMethod(this.delegate, 'collectionViewComputeDragOperations', this, drag, op) ;
-    
+    op = del.collectionViewComputeDragOperations(this, drag, op);
     if (op & SC.DRAG_REORDER) op = SC.DRAG_MOVE ;
     
-    // return
     return op ;
   },
   
@@ -1669,17 +2301,23 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     Determines the allowed drop operation insertion point, operation type,
     and the drag operation to be performed.  Used by dragUpdated() and 
     performDragOperation().
+
+    @param {SC.Drag} drag the drag object
+    @param {SC.Event} evt source of this request, if available
+    @param {Number} dragOp allowed drag operation mask
+    Returns three params: [drop index, drop operation, allowed drag ops]
   */
-  _computeDropOperationState: function(drag, evt) {
+  _computeDropOperationState: function(drag, evt, dragOp) {
     
     // 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 loc = drag.get('location') ;
-    loc = this.convertFrameFromView(loc, null) ;
-    var dropOp = SC.DROP_BEFORE ;
-    var dragOp = SC.DRAG_NONE ;
+    var loc    = this.convertFrameFromView(drag.get('location'), null),
+        dropOp = SC.DROP_BEFORE,
+        del    = this.get('selectionDelegate'),
+        canReorder = this.get('canReorderContent'),
+        objects, content, isPreviousInDrag, isNextInDrag, len;
     
     // STEP 1: Try with a DROP_ON option -- send straight to delegate if 
     // supported by view.
@@ -1687,7 +2325,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     // get the computed insertion index and possibly drop operation.
     // prefer to drop ON.
     var idx = this.insertionIndexForLocation(loc, SC.DROP_ON) ;
-    if (SC.$type(idx) === SC.T_ARRAY) {
+    if (SC.typeOf(idx) === SC.T_ARRAY) {
       dropOp = idx[1] ; // order matters here
       idx = idx[0] ;
     }
@@ -1696,64 +2334,63 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     // delegate method.  If the delegate method does not support dropping on,
     // then it will return DRAG_NONE, in which case we will try again with
     // drop before.
-    if (dropOp == SC.DROP_ON) {
-      // console.log('dropOp === SC.DROP_ON');
+    if (dropOp === SC.DROP_ON) {
       
       // Now save the insertion index and the dropOp.  This may be changed by
       // the collection delegate.
       this.set('proposedInsertionIndex', idx) ;
       this.set('proposedDropOperation', dropOp) ;
-      dragOp = this.invokeDelegateMethod(this.delegate, 'collectionViewValidateDragOperation', this, drag, dragOp, idx, dropOp) ;
+      dragOp = del.collectionViewValidateDragOperation(this, drag, dragOp, idx, dropOp) ;
       idx = this.get('proposedInsertionIndex') ;
       dropOp = this.get('proposedDropOperation') ;
       this._dropInsertionIndex = this._dropOperation = null ;
 
       // The delegate is OK with a drop on also, so just return.
-      if (dragOp !== SC.DRAG_NONE) {
-        // console.log('[idx, dropOp, dragOp] is [%@, %@, %@]'.fmt(idx, dropOp, dragOp));
-        return [idx, dropOp, dragOp] ;
+      if (dragOp !== SC.DRAG_NONE) return [idx, dropOp, dragOp] ;
         
       // The delegate is NOT OK with a drop on, try to get the insertion
       // index again, but this time prefer SC.DROP_BEFORE, then let the 
       // rest of the method run...
-      } else {
+      else {
         dropOp = SC.DROP_BEFORE ;
         idx = this.insertionIndexForLocation(loc, SC.DROP_BEFORE) ;
-        if (SC.$type(idx) === SC.T_ARRAY) {
+        if (SC.typeOf(idx) === SC.T_ARRAY) {
           dropOp = idx[1] ; // order matters here
           idx = idx[0] ;
         }
       }
     }
     
-    // console.log('this is a redorder drag, dropOp is %@'.fmt(dropOp)) ;
-    
     // if this is a reorder drag, set the proposed op to SC.DRAG_REORDER and
     // validate the insertion point.  This only works if the insertion point
-    // is DROP_BEFORE.  DROP_ON is not handled by reordering content.
-    if ((idx >= 0) && this.get('canReorderContent') && (dropOp === SC.DROP_BEFORE)) {
+    // is DROP_BEFORE or DROP_AFTER.  DROP_ON is not handled by reordering 
+    // content.
+    if ((idx >= 0) && canReorder && (dropOp !== SC.DROP_ON)) {
       
-      var objects = drag.dataForType(this.get('reorderDataType')) ;
+      objects = drag.dataForType(this.get('reorderDataType')) ;
       if (objects) {
-        // console.log('found objects');
-        var content = this.get('content') || [] ;
-        // console.log('objects is %@, content is %@'.fmt(objects, content));
+        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.  Stop when
         // we get to the beginning.
-        var previousContent = (idx > 0) ? content.objectAt(idx-1) : null ;
-        var nextContent = (idx < content.get('length')) ? content.objectAt(idx) : null;
-        
-        var isPreviousInDrag = (previousContent) ? objects.indexOf(previousContent)>=0 : NO;
-        var isNextInDrag = (nextContent) ? objects.indexOf(nextContent)>=0 : NO;
+        if (dropOp === SC.DROP_BEFORE) {
+          isPreviousInDrag = objects.indexes.contains(idx-1);
+          isNextInDrag     = objects.indexes.contains(idx);
+        } else {
+          isPreviousInDrag = objects.indexes.contains(idx);
+          isNextInDrag     = objects.indexes.contains(idx-1);
+        }
         
         if (isPreviousInDrag && isNextInDrag) {
           if (SC.none(this._lastInsertionIndex)) {
-            while((idx >= 0) && (objects.indexOf(content.objectAt(idx)) >= 0)) {
-              idx-- ;
-            } 
+            if (dropOp === SC.DROP_BEFORE) {
+              while ((idx >= 0) && objects.indexes.contains(idx)) idx--;
+            } else {
+              len = content ? content.get('length') : 0;
+              while ((idx < len) && objects.indexes.contains(idx)) idx++;
+            }
           } else idx = this._lastInsertionIndex ;
         }
         
@@ -1763,14 +2400,11 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
       }
     }
     
-    // console.log('the dragOp is %@'.fmt(dragOp)) ;
-    
     // Now save the insertion index and the dropOp.  This may be changed by
     // the collection delegate.
     this.set('proposedInsertionIndex', idx) ;
     this.set('proposedDropOperation', dropOp) ;
-    // dragOp = this.invokeDelegateMethod(this.delegate, 'collectionViewValidateDrop', this, drag, dropOp, idx, dragOp) ;
-    dragOp = this.invokeDelegateMethod(this.delegate, 'collectionViewValidateDragOperation', this, drag, dragOp, idx, dropOp) ;
+    dragOp = del.collectionViewValidateDragOperation(this, drag, dragOp, idx, dropOp) ;
     idx = this.get('proposedInsertionIndex') ;
     dropOp = this.get('proposedDropOperation') ;
     this._dropInsertionIndex = this._dropOperation = null ;
@@ -1786,15 +2420,16 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     content on its own.
   */
   dragUpdated: function(drag, evt) {
-    // console.log('dragUpdated called in %@'.fmt(this));
-    var state = this._computeDropOperationState(drag, evt) ;
-    // console.log('state is %@'.fmt(state));
-    var idx = state[0], dropOp = state[1], dragOp = state[2] ;
     
-    // if the insertion index or dropOp have changed, update the insertion point
+    var op     = drag.get('allowedDragOperations'),
+        state  = this._computeDropOperationState(drag, evt, op),
+        idx    = state[0], dropOp = state[1], dragOp = state[2];
+    
+    // if the insertion index or dropOp have changed, update the insertion 
+    // point
     if (dragOp !== SC.DRAG_NONE) {
       if ((this._lastInsertionIndex !== idx) || (this._lastDropOperation !== dropOp)) {
-        var itemView = this.itemViewForContent(this.get('content').objectAt(idx));
+        var itemView = this.itemViewForContentIndex(idx) ;
         this.showInsertionPoint(itemView, dropOp) ;
       }
       
@@ -1805,7 +2440,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
       this._lastInsertionIndex = this._lastDropOperation = null ;
     }
     
-    // Normalize drag operation to the standard kinds accepted by the drag system.
+    // Normalize drag operation to the standard kinds accepted by the drag 
+    // system.
     return (dragOp & SC.DRAG_REORDER) ? SC.DRAG_MOVE : dragOp;  
   },
   
@@ -1818,15 +2454,6 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     this._lastInsertionIndex = this._lastDropOperation = null ;
   },
   
-  // /**
-  //   Implements the SC.DropTarget protocol.  Hides any visible insertion 
-  //   point and clears some cached values.
-  // */
-  // dragEnded: function() {
-  //   this.hideInsertionPoint() ;
-  //   this._lastInsertionIndex = this._lastDropOperation = null ;
-  // },
-  
   /**
     Implements the SC.DropTarget protocol.
   */
@@ -1838,61 +2465,52 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     reordering content.
   */
   performDragOperation: function(drag, op) { 
-    // console.log('performDragOperation called on %@ with drag.dataTypes %@'.fmt(this, drag.get('dataTypes')));
-    // console.log('op is %@'.fmt(SC.Drag.inspectOperation(op)));
     // Get the correct insertion point, drop operation, etc.
-    var state = this._computeDropOperationState(drag, null, op) ;
-    var idx = state[0], dropOp = state[1], dragOp = state[2] ;
-    // console.log('dragOp is %@'.fmt(SC.Drag.inspectOperation(dragOp)));
-    
+    var state = this._computeDropOperationState(drag, null, op),
+        idx   = state[0], dropOp = state[1], dragOp = state[2],
+        del   = this.get('selectionDelegate'),
+        performed, objects, data, content, shift;
+        
     // The dragOp is the kinds of ops allowed.  The drag operation must 
     // be included in that set.
     if (dragOp & SC.DRAG_REORDER) {
       op = (op & SC.DRAG_MOVE) ? SC.DRAG_REORDER : SC.DRAG_NONE ;
-    } else {
-      op = op & dragOp ;
-    }
-    // console.log('after processing, op is %@'.fmt(SC.Drag.inspectOperation(op)));
+    } else op = op & dragOp ;
     
     // If no allowed drag operation could be found, just return.
     if (op === SC.DRAG_NONE) return op;
     
     // Some operation is allowed through, give the delegate a chance to
     // handle it.
-    // var performed = this.invokeDelegateMethod(this.delegate, 'collectionViewAcceptDrop', this, drag, dropOp, idx, op) ;
-    var performed = this.invokeDelegateMethod(this.delegate, 'collectionViewPerformDragOperation', this, drag, op, idx, dropOp) ;
+    performed = del.collectionViewPerformDragOperation(this, drag, op, idx, dropOp) ;
     
-    // console.log('performed is %@'.fmt(SC.Drag.inspectOperation(performed)));
     // If the delegate did not handle the drag (i.e. returned SC.DRAG_NONE),
     // and the op type is REORDER, then do the reorder here.
-    // console.log('performed & SC.DRAG_NONE is %@, op & SC.DRAG_REORDER is %@'.fmt((performed & SC.DRAG_NONE),(op & SC.DRAG_REORDER)));
     if ((performed === SC.DRAG_NONE) && (op & SC.DRAG_REORDER)) {
-      var objects = drag.dataForType(this.get('reorderDataType')) ;
-      // console.log('objects is %@'.fmt(objects));
-      if (!objects) return SC.DRAG_NONE ;
       
-      var content = this.get('content') ;
-      content.beginPropertyChanges(); // suspend notifications
+      data = drag.dataForType(this.get('reorderDataType')) ;
+      if (!data) return SC.DRAG_NONE ;
       
-      // find the old index and remove it.
-      var old ;
-      var objectsIdx = objects.get('length') ;
-      while(--objectsIdx >= 0) {
-        var obj = objects.objectAt(objectsIdx) ;
-        old = content.indexOf(obj) ;
-        if (old >= 0) content.removeAt(old) ;
-        if ((old >= 0) && (old < idx)) idx--; //adjust idx
-      }
+      content = this.get('content') ;
+      content.beginPropertyChanges(); // suspend notifications
+
+      // get each object, then remove it from the content. they will be 
+      // added again later.
+      objects = [];
+      shift = 0;
+      data.indexes.forEach(function(i) {  
+        objects.push(content.objectAt(i-shift));
+        content.removeAt(i-shift);
+        shift++;
+        if (i < idx) idx--;
+        if ((dropOp === SC.DROP_AFTER) && (i === idx)) idx--;
+      }, this);
       
-      // now insert objects at new location
-      content.replace(idx, 0, objects) ;
+      // now insert objects into new insertion locaiton
+      content.replace(idx, 0, objects);
+      this.select(SC.IndexSet.create(idx, objects.length));
       content.endPropertyChanges(); // restart notifications
-      
-      var outOfDateIndices = Math.min(old, idx) ;
-      if (outOfDateIndices < 0 ) outOfDateIndices = 0 ;
-      
-      this.rowHeightsDidChangeInRange({ start: outOfDateIndices, length: content.get('length')-outOfDateIndices }) ;
-      
+
       // make the op into its actual value
       op = SC.DRAG_MOVE ;
     }
@@ -1907,44 +2525,16 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
   collectionViewShouldBeginDrag: function(view) {
     return this.get('canReorderContent') ;
   },
+
   
-  // concludeDragOperation: function(op, drag) {
-  //   this.hideInsertionPoint() ;
-  //   this._lastInsertionIndex = null ;
-  // },
-  
-  /**
-    If some state changes that causes the row height for a range of rows 
-    then you should call this method to notify the view that it needs to
-    recalculate the row heights for the collection.
-    
-    Anytime your content array changes, the rows are invalidated 
-    automatically so you only need to use this for cases where your rows
-    heights may change without changing the content array itself.
-    
-    If all rows heights have changed, you can pass null to invalidate the
-    whole range.
-    
-    @param {Range} range or null.
-    @returns {SC.CollectionView} reciever
-  */
-  rowHeightsDidChangeInRange: function(range) {},
+  // ..........................................................
+  // INSERTION POINT
+  // 
   
-  /** 
-    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.
+    an insertion preference of before, after or on the named index.
     
     You can implement this method in a subclass if you like to perform a 
     more efficient check.  The default implementation will loop through the 
@@ -1953,12 +2543,12 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     
     This method should return an array with two values.  The first value is
     the insertion point index and the second value is the drop operation,
-    which should be one of SC.DROP_BEFORE or SC.DROP_ON. 
+    which should be one of SC.DROP_BEFORE, SC.DROP_AFTER, or SC.DROP_ON. 
     
     The preferred drop operation passed in should be used as a hint as to 
-    the type of operation the drag and drop could would prefer to receive.
-    If the dropOperaiton is SC.DROP_ON, then you should return a DROP_ON
-    mode if possible.  Otherwise, you should never return DROP_ON.
+    the type of operation the view would prefer to receive. If the 
+    dropOperation is SC.DROP_ON, then you should return a DROP_ON mode if 
+    possible.  Otherwise, you should never return DROP_ON.
     
     For compatibility, you can also return just the insertion index.  If you
     do this, then the collction view will assume the drop operation is 
@@ -1971,155 +2561,180 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
     @param dropOperation {DropOp} the preferred drop operation.
     @returns {Array} [proposed drop index, drop operation] 
   */
-  insertionIndexForLocation: function(loc, dropOperation) {  
-    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 ;
+  insertionIndexForLocation: function(loc, dropOperation) { 
+    var ret = 0 ;
+    
+    // var content    = this.get('content'),
+    //     nowShowing = this.get('nowShowing'),
+    //     orient     = this.get('insertionOrientation'),
+    //     lastSide   = null,
+    //     ret        = null,
+    //     itemView, curSide, f;
+    //     
+    // for(var idx=0; ((ret === null) && (idx<content.length)); idx++) {
+    //   // itemView = this.itemViewForContent(content.objectAt(idx));
+    //   itemView = this.itemViewForContentIndex(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 "switch 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 itemView {SC.ClassicView} view the insertion point should appear directly before. If null, show insertion point at end.
-    @param dropOperation {Number} the drop operation.  will be SC.DROP_BEFORE or SC.DROP_ON
-    
-    @returns {void}
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+
+  /** @private - when we become visible, reload if needed. */
+  _cv_isVisibleInWindowDidChange: function() {
+    if (this.get('isVisibleInWindow')) {
+      if (this._invalidIndexes) this.invokeOnce(this.reloadIfNeeded);
+      if (this._invalidSelection) {
+        this.invokeOnce(this.reloadSelectionIndexesIfNeeded);
+      } 
+    }
+  }.observes('isVisibleInWindow'),
+
+
+  /**
+    Default delegate method implementation, returns YES if isSelectable
+    is also true.
   */
-  showInsertionPoint: function(itemView, dropOperation) {
-    return (dropOperation === SC.DROP_BEFORE) ? this.showInsertionPointBefore(itemView) : this.hideInsertionPoint() ;
+  collectionViewShouldSelectItem: function(view, item) {
+    return this.get('isSelectable') ;
   },
   
-  /**
-    @deprecated
-    
-    Show the insertion point during a drag before the named item view.
-    
-    This method has been deprecated in favor of the more generic 
-    showInsertionPoint() which can be used to show drops occurring both on
-    and before an itemView.  If you do not implement showInsertionPoint() 
-    yourself, the default implementation will call this method whenever the
-    drop operation is SC.DROP_BEFORE.
-    
-    @param itemView {SC.ClassicView} the item view to show before.
-    @returns {void}
-  */
-  showInsertionPointBefore: function(itemView) {},
+  _TMP_DIFF1: SC.IndexSet.create(),
+  _TMP_DIFF2: SC.IndexSet.create(),
   
-  /**
-    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() {},
+  /** @private
   
-  dragViewFor: function(dragContent) {
-    var view = SC.View.create() ;
-    
-    var ary = dragContent ;
-    for (var idx=0, len=ary.length; idx<len; idx++) {
-      var itemView = this.itemViewForContent(ary[idx]) ;
-      if (itemView) view.$().append(itemView.rootElement.cloneNode(true)) ;
+    Whenever the nowShowing range changes, update the range observer on the 
+    content item and instruct the view to reload any indexes that are not in
+    the previous nowShowing range.
+
+  */
+  _cv_nowShowingDidChange: function() {
+    var nowShowing  = this.get('nowShowing'),
+        last        = this._sccv_lastNowShowing,
+        diff, diff1, diff2;
+
+    // find the differences between the two
+    // NOTE: reuse a TMP IndexSet object to avoid creating lots of objects
+    // during scrolling
+    if (last && nowShowing && (last !== nowShowing)) {
+      diff1 = this._TMP_DIFF1.add(last).remove(nowShowing);
+      diff2 = this._TMP_DIFF2.add(nowShowing).remove(last);
+      diff = diff1.add(diff2);
+    } else diff = last || nowShowing ;
+
+    // if nowShowing has actually changed, then update
+    if (diff && diff.get('length') > 0) {
+      this._sccv_lastNowShowing = nowShowing ? nowShowing.frozenCopy() : null;
+      this.updateContentRangeObserver();
+      this.reload(diff);
     }
     
-    var frame = this.convertFrameToView(this.get('clippingFrame'), null) ;
-    view.adjust({ top: frame.y, left: frame.x, width: frame.width, height: frame.height }) ;
-    return view ;
+    // cleanup tmp objects
+    if (diff1) diff1.clear();
+    if (diff2) diff2.clear();
+    
+  }.observes('nowShowing'),
+  
+  init: function() {
+     sc_super();
+     if (this.get('canReorderContent')) this._cv_canReorderContentDidChange();
+     this._sccv_lastNowShowing = this.get('nowShowing').clone();
+     if (this.content) this._cv_contentDidChange();
+     if (this.selection) this._cv_selectionDidChange();
   },
   
-  /**
-    Default delegate method implementation, returns YES if isSelectable
-    is also true.
+  /** @private
+    Become a drop target whenever reordering content is enabled.
   */
-  collectionViewShouldSelectItem: function(view, item) {
-    return this.get('isSelectable') ;
-  },
+  _cv_canReorderContentDidChange: function() {
+    if (this.get('canReorderContent')) {
+      if (!this.get('isDropTarget')) this.set('isDropTarget', YES);
+      SC.Drag.addDropTarget(this);
+    }
+  }.observes('canReorderContent'),
   
-  // ......................................
-  // INTERNAL
-  //
+  /** @private
+    Fires an action after a selection if enabled.
+    
+    if actOnSelect is YES, then try to invoke the action, passing the 
+    current selection (saved as a separate array so that a change in sel
+    in the meantime will not be lost)
+  */
+  _cv_performSelectAction: function(view, ev, delay, clickCount) {
+    var sel;
+    if (delay === undefined) delay = 0 ;
+    if (clickCount === undefined) clickCount = 1;
+    if ((clickCount>1) || this.get('actOnSelect')) {
+      sel = this.get('selection');
+      sel = sel ? sel.toArray() : [];
+      if (this._cv_actionTimer) this._cv_actionTimer.invalidate();
+      this._cv_actionTimer = this.invokeLater(this._cv_action, delay, view, ev, sel) ;
+    }
+  },
   
   /** @private
     Perform the action.  Supports legacy behavior as well as newer style
     action dispatch.
   */
-  _action: function(view, evt) {
-    // console.log('_action invoked on %@ with view %@, evt %@'.fmt(this, view, evt));
+  _cv_action: function(view, evt, context) {
     var action = this.get('action');
     var target = this.get('target') || null;
-    // console.log('action %@, target %@'.fmt(action, target));
+
+    this._cv_actionTimer = null;
     if (action) {
       // if the action is a function, just call it
-      if (SC.$type(action) == SC.T_FUNCTION) return this.action(view, evt) ;
+      if (SC.typeOf(action) === SC.T_FUNCTION) return this.action(view, evt) ;
       
       // otherwise, use the new sendAction style
       var pane = this.get('pane') ;
-      if (pane) pane.rootResponder.sendAction(action, target, this, pane);
+      if (pane) {
+        pane.rootResponder.sendAction(action, target, this, pane, context);
+      }
       // SC.app.sendAction(action, target, this) ;
       
     // if no action is specified, then trigger the support action,
@@ -2129,13 +2744,14 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate,
       
     // if the target view has its own internal action handler,
     // trigger that.
-    } else if (SC.$type(view._action) == SC.T_FUNCTION) {
+    } else if (SC.typeOf(view._action) == SC.T_FUNCTION) {
       return view._action(evt) ;
       
     // otherwise call the action method to support older styles.
-    } else if (SC.$type(view.action) == SC.T_FUNCTION) {
+    } else if (SC.typeOf(view.action) == SC.T_FUNCTION) {
       return view.action(evt) ;
     }
   }
   
+  
 });