sproutcore 1.10.3.1 → 1.11.0.rc1

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

@@ -410,7 +410,7 @@ SC.ButtonView = SC.View.extend(SC.Control,
     // Invoke the actual action method after a small delay to give the user a
     // chance to see the highlight. This is especially important if the button
     // closes a pane, for example.
-    this.invokeLater('triggerAction', 200, evt);
+    this.invokeLater('triggerAction', SC.ButtonView.TRIGGER_DELAY, evt);
     return YES;
   },
 
@@ -636,6 +636,9 @@ SC.ButtonView = SC.View.extend(SC.Control,
     On mouse down, set active only if enabled.
   */
   mouseDown: function(evt) {
+    // Fast path, reject secondary clicks.
+    if (evt.which !== 1) return false;
+
     var buttonBehavior = this.get('buttonBehavior');
 
     if (!this.get('isEnabledInPane')) return YES ; // handled event, but do nothing
@@ -880,7 +883,13 @@ SC.ButtonView = SC.View.extend(SC.Control,
 
 }) ;
 
+/**
+  How long to wait before triggering the action.
 
+  @constant
+  @type {Number}
+*/
+SC.ButtonView.TRIGGER_DELAY = 200;
 
 /**
   The delay after which "click" behavior should transition to "click and hold"

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

@@ -76,6 +76,9 @@ SC.CheckboxView = SC.ButtonView.extend(
 
   /** @private */
   mouseDown: function(evt) {
+    // Fast path, reject secondary clicks.
+    if (evt.which && evt.which !== 1) return false;
+
     if(!this.get('isEnabledInPane')) return YES;
     this.set('isActive', YES);
     this._isMouseDown = YES;

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

@@ -5,8 +5,7 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-sc_require('mixins/collection_view_delegate');
-sc_require('views/list_item');
+sc_require('mixins/collection_view_delegate') ;
 
 /**
   Special drag operation passed to delegate if the collection view proposes
@@ -60,6 +59,40 @@ SC.DRAG_REORDER = 0x0010;
 SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionContent,
 /** @scope SC.CollectionView.prototype */ {
 
+  /** @private */
+  _content: null,
+
+  /** @private */
+  _cv_actionTimer: null,
+
+  /** @private */
+  _cv_contentRangeObserver: null,
+
+  /** @private */
+  _cv_selection: null,
+
+  /** @private */
+  _pools: null,
+
+  /** @private Timer used to track time immediately after a mouse up event. */
+  _sc_clearMouseJustDownTimer: null,
+
+  /** @private Flag used to track when the mouse is pressed. */
+  _sc_isMouseDown: false,
+
+  /** @private Flag used to track when mouse was just down so that mousewheel events firing as the finger is lifted don't shoot the slider over. */
+  _sc_isMouseJustDown: false,
+
+  /** @private */
+  _sc_itemViews: null,
+
+
+  /** @private */
+  _TMP_DIFF1: SC.IndexSet.create(),
+
+  /** @private */
+  _TMP_DIFF2: SC.IndexSet.create(),
+
   /**
     @type Array
     @default ['sc-collection-view']
@@ -156,9 +189,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @observes length
     @observes clippingFrame
   */
-  nowShowing: function () {
+  nowShowing: function() {
     // If there is an in-scroll clipping frame, use it.
-    var clippingFrame = this._inScrollClippingFrame || this.get('clippingFrame');
+    var clippingFrame = this.get('clippingFrame');
 
     return this.computeNowShowing(clippingFrame);
   }.property('length', 'clippingFrame').cacheable(),
@@ -465,6 +498,33 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   */
   target: null,
 
+  /**
+    Invoked when the user single clicks on the right icon of an item.
+
+    Set this to the name of the action you want to send down the
+    responder chain when the user single clicks on the right icon of an item
+    You can optionally specify a specific target as
+    well using the rightIconTarget property.
+
+    @type String
+    @default null
+  */
+  rightIconAction: null,
+
+  /**
+    Optional target to send the action to when the user clicks on the right icon
+    of an item.
+
+    If you set the rightIconAction property to the name of an action, you can
+    optionally specify the target object you want the action to be sent to.
+    This can be either an actual object or a property path that will resolve
+    to an object at the time that the action is invoked.
+
+    @type String|Object
+    @default null
+  */
+  rightIconTarget: null,
+
   /**
     Property on content items to use for display.
 
@@ -503,25 +563,14 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   */
   isActive: NO,
 
-
-  /**
-    This property is used to store the calculated height to have
-    a consistent scrolling behavior due to the issues generated by using top
-    instead of `scrollTop`. We could look at the min-height set in the view, but
-    to avoid performance hits we simply store it and the scrollView will use it if
-    different than 0.
+  /** @deprecated Version 1.11.0.  SC.ScrollView observes the frame (height/width) of the collection.
 
     @type Number
     @default 0
   */
   calculatedHeight: 0,
 
-  /**
-    This property is used to store the calculated width to have
-    a consistent scrolling behavior due to the issues generated by using left
-    instead of `scrollLeft`. We could look at the min-width set in the view, but
-    to avoid performance hits we simply store it and the scrollView will use it if
-    different than 0.
+  /** @deprecated Version 1.11.0.  SC.ScrollView observes the frame (height/width) of the collection.
 
     @type Number
     @default 0
@@ -553,7 +602,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {Hash} layout properties
   */
-  computeLayout: function () {
+  computeLayout: function() {
     return null;
   },
 
@@ -566,7 +615,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       itemView
     @returns {Hash} a view layout
   */
-  layoutForContentIndex: function (contentIndex) {
+  layoutForContentIndex: function(contentIndex) {
     return null;
   },
 
@@ -580,7 +629,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @type SC.IndexSet
     @observes length
   */
-  allContentIndexes: function () {
+  allContentIndexes: function() {
     return SC.IndexSet.create(0, this.get('length')).freeze();
   }.property('length').cacheable(),
 
@@ -595,7 +644,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {Rect} rect the visible rect
     @returns {SC.IndexSet} now showing indexes
   */
-  contentIndexesInRect: function (rect) {
+  contentIndexesInRect: function(rect) {
     return null; // select all
   },
 
@@ -617,7 +666,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     else {
       var len = this.get('length'),
           max = r.get('max');
-      if (max > len) r = r.copy().remove(len, max - len).freeze();
+      if (max > len) r = r.copy().remove(len, max-len).freeze();
     }
 
     return r;
@@ -641,7 +690,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {void}
   */
-  showInsertionPoint: function (itemView, dropOperation) {},
+  showInsertionPoint: function(itemView, dropOperation) {},
 
   /**
     Override to hide the insertion point when a drag ends.
@@ -657,7 +706,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {void}
   */
-  hideInsertionPoint: function () {},
+  hideInsertionPoint: function() {},
 
 
   // ..........................................................
@@ -692,7 +741,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @field
     @type Object
   */
-  selectionDelegate: function () {
+  selectionDelegate: function() {
     var del = this.get('delegate'), content = this.get('content');
     return this.delegateFor('isCollectionViewDelegate', del, content);
   }.property('delegate', 'content').cacheable(),
@@ -706,7 +755,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @field
     @type Object
   */
-  contentDelegate: function () {
+  contentDelegate: function() {
     var del = this.get('delegate'), content = this.get('content');
     return this.delegateFor('isCollectionContent', del, content);
   }.property('delegate', 'content').cacheable(),
@@ -731,7 +780,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {SC.IndexSet} indexes affected indexes or null for all items
     @returns {void}
   */
-  contentRangeDidChange: function (content, object, key, indexes) {
+  contentRangeDidChange: function(content, object, key, indexes) {
     if (!object && (key === '[]')) {
       this.notifyPropertyChange('_contentGroupIndexes');
       this.reload(indexes); // note: if indexes == null, reloads all
@@ -754,7 +803,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {SC.IndexSet} indexes the indexes in the content array affected
     @returns {void}
   */
-  contentPropertyDidChange: function (target, key, indexes) {},
+  contentPropertyDidChange: function(target, key, indexes) {},
 
   /**
     Called whenever the view needs to updates its `contentRangeObserver` to
@@ -775,12 +824,12 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {void}
   */
-  updateContentRangeObserver: function () {
+  updateContentRangeObserver: function() {
     var nowShowing = this.get('nowShowing'),
         observer   = this._cv_contentRangeObserver,
         content    = this.get('content');
 
-    if (!content) return; // nothing to do
+    if (!content) return ; // nothing to do
 
     if (observer) {
       content.updateRangeObserver(observer, nowShowing);
@@ -789,7 +838,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       observer = content.addRangeObserver(nowShowing, this, func, null);
 
       // Cache the range observer so we can clean it up later.
-      this._cv_contentRangeObserver = observer;
+      this._cv_contentRangeObserver = observer ;
     }
 
   },
@@ -805,13 +854,13 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {void}
   */
-  removeContentRangeObserver: function () {
+  removeContentRangeObserver: function() {
     var content  = this.get('content'),
-        observer = this._cv_contentRangeObserver;
+        observer = this._cv_contentRangeObserver ;
 
     if (observer) {
       if (content) content.removeRangeObserver(observer);
-      this._cv_contentRangeObserver = null;
+      this._cv_contentRangeObserver = null ;
     }
   },
 
@@ -822,7 +871,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {void}
   */
-  contentLengthDidChange: function () {
+  contentLengthDidChange: function() {
     var content = this.get('content');
     this.set('length', content ? content.get('length') : 0);
     this.invokeOnce(this.adjustLayout);
@@ -843,9 +892,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       - reload effected item views
       - update layout for receiver
   */
-  _cv_contentDidChange: function () {
+  _cv_contentDidChange: function() {
     var content = this.get('content'),
-        lfunc   = this.contentLengthDidChange;
+        lfunc   = this.contentLengthDidChange ;
 
     if (content === this._content) return; // nothing to do
 
@@ -860,7 +909,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       for (var key in this._pools) {
         this._pools[key].invoke('destroy');
       }
-      delete this._pools;
+
+      this._pools = null;
     }
 
     // cache
@@ -910,20 +960,27 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {SC.IndexSet} indexes
     @returns {SC.CollectionView} receiver
   */
-  reload: function (indexes) {
-    var invalid = this._invalidIndexes;
+  reload: function(indexes) {
+    var invalid = this._invalidIndexes,
+      length;
+
     if (indexes && invalid !== YES) {
       if (invalid) invalid.add(indexes);
       else invalid = this._invalidIndexes = indexes.clone();
 
+      // If the last item in the list changes, we need to reload the previous last
+      // item also so that the isLast attribute updates appropriately.
+      length = this.get('length');
+      if (length > 1 && invalid.max === length) {
+        invalid.add(length - 2);
     }
-    else {
-      this._invalidIndexes = YES; // force a total reload
+    } else {
+      this._invalidIndexes = YES ; // force a total reload
     }
 
     if (this.get('isVisibleInWindow')) this.invokeOnce(this.reloadIfNeeded);
 
-    return this;
+    return this ;
   },
 
   /**
@@ -933,19 +990,19 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {SC.CollectionView} receiver
   */
-  reloadIfNeeded: function () {
+  reloadIfNeeded: function() {
     var invalid = this._invalidIndexes;
-    if (!invalid || !this.get('isVisibleInWindow')) return this; // delay
-    this._invalidIndexes = NO;
+    if (!invalid || !this.get('isVisibleInWindow')) return this ; // delay
+    this._invalidIndexes = NO ;
 
     var len, existing,
-      nowShowing = this.get('nowShowing'),
+        nowShowing = this.get('nowShowing'),
       itemViews = this._sc_itemViews || [],
       idx;
 
     // if the set is defined but it contains the entire nowShowing range, just
     // replace
-    if (invalid.isIndexSet && invalid.contains(nowShowing)) invalid = YES;
+    if (invalid.isIndexSet && invalid.contains(nowShowing)) invalid = YES ;
 
     // if an index set, just update indexes
     if (invalid.isIndexSet) {
@@ -954,7 +1011,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       // should be redrawn (exists and still showing), should be created (
       // doesn't exist and now showing) or should be destroyed (exists and no
       // longer showing).
-      invalid.forEach(function (idx) {
+      invalid.forEach(function(idx) {
         // Get the existing item view, if there is one.
         existing = itemViews[idx];
         if (existing) {
@@ -965,8 +1022,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
         // Create it (may fetch from pool).
         if (nowShowing.contains(idx)) {
           this.itemViewForContentIndex(idx, YES);
-        }
-      }, this);
+          }
+      },this);
 
     // if set is NOT defined, replace entire content with nowShowing
     } else {
@@ -977,27 +1034,33 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
         existing = itemViews ? itemViews[idx] : null;
         if (existing) {
           this._removeItemView(existing, idx);
+          }
         }
-      }
 
       // Only after the children are removed should we create the new views.
       // We do this in order to maximize the chance of re-use should the view
       // be marked as such.
-      nowShowing.forEach(function (idx) {
+      nowShowing.forEach(function(idx) {
         this.itemViewForContentIndex(idx, YES);
       }, this);
     }
 
-    return this;
+    return this ;
   },
 
-  /** @private */
+  /** @private Use a shared object so that we are not creating objects for every item view configuration. */
   _TMP_ATTRS: {},
 
-  /** @private */
+  /** @private
+    The item view classes, cached here for performance. Note that if these ever change, they may
+    also need to be updated in the isGroupView code block in _reconfigureItemView below.
+  */
   _COLLECTION_CLASS_NAMES: ['sc-collection-item', 'sc-item'],
 
-  /** @private */
+  /** @private
+    The group view classes, cached here for performance. Note that if these ever change, they may
+    also need to be updated in the isGroupView code block in _reconfigureItemView below.
+  */
   _GROUP_COLLECTION_CLASS_NAMES: ['sc-collection-item', 'sc-group-item'],
 
   /**
@@ -1023,10 +1086,23 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {Boolean} rebuild internal use only
     @returns {SC.View} instantiated view
   */
-  itemViewForContentIndex: function (idx, rebuild) {
+  itemViewForContentIndex: function(idx, rebuild) {
     var ret,
       views;
 
+    // Gatekeep! Since this method is often called directly by loops that may
+    // suffer from bounds issues, we should validate the idx and return nothing
+    // rather than returning an invalid item view.
+    if (SC.none(idx) || idx < 0 || idx >= this.get('length')) {
+      //@if(debug)
+      // Developer support
+      SC.warn("Developer Warning: %@ - itemViewForContentIndex(%@): The index, %@, is not within the range of the content.".fmt(this, idx, idx));
+      //@endif
+
+      return null; // FAST PATH!!
+    }
+
+
     // Initialize internal views cache.
     views = this._sc_itemViews;
     if (!views) { views = this._sc_itemViews = []; }
@@ -1037,9 +1113,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       if (rebuild) {
         ret.destroy();
         ret = null;
-      } else {
+    } else {
         return ret;
-      }
+    }
     }
 
     var attrs,
@@ -1072,26 +1148,30 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
         if (!ret.get('_isRendered')) {
           ret.invokeOnce(ret._doRender);
         }
+        }
       }
-    }
 
     // If we weren't able to re-use a view, then create a new one.
     if (!ret) {
       ret = this.createItemView(exampleView, idx, attrs);
       containerView.insertBefore(ret, null);   // Equivalent to 'append()', but avoids one more function call
-    }
+      }
 
     views[idx] = ret;
-    return ret;
+    return ret ;
   },
 
   /**
-    Helper method for getting the item view of a specific content object
+    Convenience method for getting the item view of a content object.
 
     @param {Object} object
   */
-  itemViewForContentObject: function (object) {
-    return this.itemViewForContentIndex(this.get('content').indexOf(object));
+  itemViewForContentObject: function(object) {
+    var content = this.get('content');
+    if (!content) return null;
+    var contentIndex = content.indexOf(object);
+    if (contentIndex === -1) return null;
+    return this.itemViewForContentIndex(contentIndex);
   },
 
   /** @private */
@@ -1113,7 +1193,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {Hash} attrs expected attributes
     @returns {SC.View} item view instance
   */
-  createItemView: function (exampleClass, idx, attrs) {
+  createItemView: function(exampleClass, idx, attrs) {
     return exampleClass.create(attrs);
   },
 
@@ -1124,9 +1204,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {Number} idx the content index
     @returns {String} layer id, must be suitable for use in HTML id attribute
   */
-  layerIdFor: function (idx) {
+  layerIdFor: function(idx) {
     var ret = this._TMP_LAYERID;
-    ret[0] = SC.guidFor(this);
+    ret[0] = this.get('layerId');
     ret[1] = idx;
     return ret.join('-');
   },
@@ -1137,16 +1217,15 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @param {String} id the layer id
   */
-  contentIndexForLayerId: function (id) {
-    if (!id || !(id = id.toString())) return null; // nothing to do
+  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) + "-";
+    var base = this.get('layerId') + '-';
 
     // 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;
+    if ((id.length <= base.length) || (id.indexOf(base) !== 0)) return null ;
+    var ret = Number(id.slice(id.lastIndexOf('-')+1));
+    return isNaN(ret) ? null : ret ;
   },
 
 
@@ -1163,9 +1242,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @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
+  itemViewForEvent: function(evt) {
+    var responder = this.getPath('pane.rootResponder') ;
+    if (!responder) return null ; // fast path
 
     var element = evt.target,
         layer   = this.get('layer'),
@@ -1175,15 +1254,15 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     // 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 ? SC.$(element).attr('id') : null;
+      id = element ? SC.$(element).attr('id') : null ;
       if (id && (contentIndex = this.contentIndexForLayerId(id)) !== null) {
-        break;
+          break;
       }
-      element = element.parentNode;
+      element = element.parentNode ;
     }
 
     // no matching element found?
-    if (contentIndex === null || (element === layer)) {
+    if (contentIndex===null || (element === layer)) {
       element = layer = null; // avoid memory leaks
       return null;
     }
@@ -1208,14 +1287,14 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {SC.IndexSet} indexes the indexes to expand
     @returns {SC.CollectionView} receiver
   */
-  expand: function (indexes) {
+  expand: function(indexes) {
     if (!indexes) return this; // nothing to do
     var del     = this.get('contentDelegate'),
         content = this.get('content');
 
-    indexes.forEach(function (i) {
+    indexes.forEach(function(i) {
       var state = del.contentIndexDisclosureState(this, content, i);
-      if (state === SC.BRANCH_CLOSED) del.contentIndexExpand(this, content, i);
+      if (state === SC.BRANCH_CLOSED) del.contentIndexExpand(this,content,i);
     }, this);
     return this;
   },
@@ -1227,14 +1306,14 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {SC.IndexSet} indexes the indexes to expand
     @returns {SC.CollectionView} receiver
   */
-  collapse: function (indexes) {
+  collapse: function(indexes) {
     if (!indexes) return this; // nothing to do
     var del     = this.get('contentDelegate'),
         content = this.get('content');
 
-    indexes.forEach(function (i) {
+    indexes.forEach(function(i) {
       var state = del.contentIndexDisclosureState(this, content, i);
-      if (state === SC.BRANCH_OPEN) del.contentIndexCollapse(this, content, i);
+      if (state === SC.BRANCH_OPEN) del.contentIndexCollapse(this,content,i);
     }, this);
     return this;
   },
@@ -1247,7 +1326,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     Called whenever the selection object is changed to a new value.  Begins
     observing the selection for changes.
   */
-  _cv_selectionDidChange: function () {
+  _cv_selectionDidChange: function() {
     var sel  = this.get('selection'),
         last = this._cv_selection,
         func = this._cv_selectionContentDidChange;
@@ -1256,7 +1335,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     if (last) last.removeObserver('[]', this, func);
     if (sel) sel.addObserver('[]', this, func);
 
-    this._cv_selection = sel;
+    this._cv_selection = sel ;
     this._cv_selectionContentDidChange();
   }.observes('selection'),
 
@@ -1264,11 +1343,11 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     Called whenever the selection object or its content changes.  This will
     repaint any items that changed their selection state.
   */
-  _cv_selectionContentDidChange: function () {
+  _cv_selectionContentDidChange: function() {
     var sel  = this.get('selection'),
         last = this._cv_selindexes, // clone of last known indexes
         content = this.get('content'),
-        diff;
+        diff ;
 
     // save new last
     this._cv_selindexes = sel ? sel.frozenCopy() : null;
@@ -1280,7 +1359,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     if (sel && last) diff = sel.without(last).add(last.without(sel));
     else diff = sel || last;
 
-    if (diff && diff.get('length') > 0) this.reloadSelectionIndexes(diff);
+    if (diff && diff.get('length')>0) this.reloadSelectionIndexes(diff);
   },
 
   /** @private
@@ -1299,19 +1378,19 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {SC.IndexSet} indexes affected indexes
     @returns {SC.CollectionView} receiver
   */
-  reloadSelectionIndexes: function (indexes) {
-    var invalid = this._invalidSelection;
+  reloadSelectionIndexes: function(indexes) {
+    var invalid = this._invalidSelection ;
     if (indexes && (invalid !== YES)) {
-      if (invalid) { invalid.add(indexes); }
+      if (invalid) { invalid.add(indexes) ; }
       else { invalid = this._invalidSelection = indexes.copy(); }
 
-    } else this._invalidSelection = YES; // force a total reload
+    } else this._invalidSelection = YES ; // force a total reload
 
     if (this.get('isVisibleInWindow')) {
       this.invokeOnce(this.reloadSelectionIndexesIfNeeded);
     }
 
-    return this;
+    return this ;
   },
 
   /**
@@ -1326,9 +1405,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {SC.CollectionView} receiver
   */
-  reloadSelectionIndexesIfNeeded: function () {
+  reloadSelectionIndexesIfNeeded: function() {
     var invalid = this._invalidSelection;
-    if (!invalid || !this.get('isVisibleInWindow')) return this;
+    if (!invalid || !this.get('isVisibleInWindow')) return this ;
 
     var nowShowing = this.get('nowShowing'),
         reload     = this._invalidIndexes,
@@ -1339,7 +1418,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     // 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 (reload === YES || !nowShowing) return this ;
 
     // if invalid is YES instead of index set, just reload everything
     if (invalid === YES) invalid = nowShowing;
@@ -1348,13 +1427,13 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     if (reload && reload.isIndexSet) invalid = invalid.without(reload);
 
     // iterate through each item and set the isSelected state.
-    invalid.forEach(function (idx) {
+    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);
+    },this);
 
-    return this;
+    return this ;
   },
 
   /**
@@ -1367,7 +1446,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param extend {Boolean} optionally extend the selection
     @returns {SC.CollectionView} receiver
   */
-  select: function (indexes, extend) {
+  select: function(indexes, extend) {
     var content = this.get('content'),
         del     = this.get('selectionDelegate'),
         groupIndexes = this.get('_contentGroupIndexes'),
@@ -1381,16 +1460,16 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     }
 
     // if we are passed an empty index set or null, clear the selection.
-    if (indexes && indexes.get('length') > 0) {
+    if (indexes && indexes.get('length')>0) {
 
       // first remove any group indexes - these can never be selected
-      if (groupIndexes && groupIndexes.get('length') > 0) {
+      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
+      if (!indexes || indexes.get('length')===0) return this; // nothing to do
 
     } else indexes = null;
 
@@ -1398,10 +1477,10 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     if (extend && (sel = this.get('selection'))) sel = sel.copy();
     else sel = SC.SelectionSet.create();
 
-    if (indexes && indexes.get('length') > 0) {
+    if (indexes && indexes.get('length')>0) {
 
       // when selecting only one item, always select by content
-      if (indexes.get('length') === 1) {
+      if (indexes.get('length') === 1 && !this.get('allowDuplicateItems')) {
         sel.addObject(content.objectAt(indexes.get('firstObject')));
 
       // otherwise select an index range
@@ -1414,8 +1493,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     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());
+    this._selectionAnchor = null ;
+    this.set('selection', sel.freeze()) ;
     return this;
   },
 
@@ -1425,13 +1504,13 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {Number|SC.IndexSet} indexes index or indexes to deselect
     @returns {SC.CollectionView} receiver
   */
-  deselect: function (indexes) {
+  deselect: function(indexes) {
     var sel     = this.get('selection'),
         content = this.get('content'),
         del     = this.get('selectionDelegate');
 
     if (!this.get('isSelectable') || !this.get('isEnabledInPane')) return this;
-    if (!sel || sel.get('length') === 0) return this; // nothing to do
+    if (!sel || sel.get('length')===0) return this; // nothing to do
 
     // normalize
     if (SC.typeOf(indexes) === SC.T_NUMBER) {
@@ -1439,16 +1518,16 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     }
 
     // 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
+    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;
+    this.set('selection', sel.freeze()) ;
+    return this ;
   },
 
   /** @private
@@ -1463,12 +1542,12 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
    @param {Number} bottom optional bottom of selection use as fallback
    @returns {Number} next selectable index.
   */
-  _findNextSelectableItemFromIndex: function (proposedIndex, bottom) {
+  _findNextSelectableItemFromIndex: function(proposedIndex, bottom) {
     var lim     = this.get('length'),
         range   = SC.IndexSet.create(),
         del     = this.get('selectionDelegate'),
         groupIndexes = this.get('_contentGroupIndexes'),
-        ret, sel;
+        ret, sel ;
 
     // fast path
     if (!groupIndexes && (del.collectionViewShouldSelectIndexes === this.collectionViewShouldSelectIndexes)) {
@@ -1482,7 +1561,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       if (!groupIndexes || !groupIndexes.contains(proposedIndex)) {
         range.add(proposedIndex);
         ret = del.collectionViewShouldSelectIndexes(this, range);
-        if (ret && ret.get('length') >= 1) return proposedIndex;
+        if (ret && ret.get('length') >= 1) return proposedIndex ;
         range.remove(proposedIndex);
       }
       proposedIndex++;
@@ -1491,9 +1570,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     // if nothing was found, return top of selection
     if (bottom === undefined) {
       sel = this.get('selection');
-      bottom = sel ? sel.get('max') : -1;
+      bottom = sel ? sel.get('max') : -1 ;
     }
-    return bottom;
+    return bottom ;
   },
 
   /** @private
@@ -1504,11 +1583,11 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
    @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.
   */
-  _findPreviousSelectableItemFromIndex: function (proposedIndex, top) {
+  _findPreviousSelectableItemFromIndex: function(proposedIndex, top) {
     var range   = SC.IndexSet.create(),
         del     = this.get('selectionDelegate'),
         groupIndexes = this.get('_contentGroupIndexes'),
-        ret;
+        ret ;
 
     if (SC.none(proposedIndex)) proposedIndex = -1;
 
@@ -1524,7 +1603,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       if (!groupIndexes || !groupIndexes.contains(proposedIndex)) {
         range.add(proposedIndex);
         ret = del.collectionViewShouldSelectIndexes(this, range);
-        if (ret && ret.get('length') >= 1) return proposedIndex;
+        if (ret && ret.get('length') >= 1) return proposedIndex ;
         range.remove(proposedIndex);
       }
       proposedIndex--;
@@ -1533,10 +1612,10 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     // if nothing was found, return top of selection
     if (top === undefined) {
       var sel = this.get('selection');
-      top = sel ? sel.get('min') : -1;
+      top = sel ? sel.get('min') : -1 ;
     }
     if (SC.none(top)) top = -1;
-    return top;
+    return top ;
   },
 
   /**
@@ -1552,7 +1631,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       selected.  Defaults to 1
     @returns {SC.CollectionView} receiver
   */
-  selectPreviousItem: function (extend, numberOfItems) {
+  selectPreviousItem: function(extend, numberOfItems) {
     if (SC.none(numberOfItems)) numberOfItems = 1;
     if (SC.none(extend)) extend = false;
 
@@ -1561,7 +1640,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     if (sel) sel = sel.indexSetForSource(content);
 
     var selTop    = sel ? sel.get('min') : -1,
-        selBottom     = sel ? sel.get('max') - 1 : -1,
+        selBottom     = sel ? sel.get('max')-1 : -1,
         anchor        = this._selectionAnchor;
     if (SC.none(anchor)) anchor = selTop;
 
@@ -1570,7 +1649,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
       // If the selBottom is after the anchor, then reduce the selection
       if (selBottom > anchor) {
-        selBottom = selBottom - numberOfItems;
+        selBottom = selBottom - numberOfItems ;
 
       // otherwise, select the previous item from the top
       } else {
@@ -1578,29 +1657,29 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       }
 
       // Ensure we are not out of bounds
-      if (SC.none(selTop) || (selTop < 0)) selTop = 0;
+      if (SC.none(selTop) || (selTop < 0)) selTop = 0 ;
       if (!content.objectAt(selTop)) selTop = sel ? sel.get('min') : -1;
-      if (selBottom < selTop) selBottom = selTop;
+      if (selBottom < selTop) selBottom = selTop ;
 
     // if not extending, just select the item previous to the selTop
     } else {
       selTop = this._findPreviousSelectableItemFromIndex(selTop - numberOfItems);
-      if (SC.none(selTop) || (selTop < 0)) selTop = 0;
+      if (SC.none(selTop) || (selTop < 0)) selTop = 0 ;
       if (!content.objectAt(selTop)) selTop = sel ? sel.get('min') : -1;
-      selBottom = selTop;
-      anchor = null;
+      selBottom = selTop ;
+      anchor = null ;
     }
 
-    var scrollToIndex = selTop;
+    var scrollToIndex = selTop ;
 
     // now build new selection
-    sel = SC.IndexSet.create(selTop, selBottom + 1 - selTop);
+    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;
+    this.scrollToContentIndex(scrollToIndex) ;
+    this.select(sel) ;
+    this._selectionAnchor = anchor ;
+    return this ;
   },
 
   /**
@@ -1615,16 +1694,16 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       selected. Defaults to 1.
     @returns {SC.CollectionView} receiver
   */
-  selectNextItem: function (extend, numberOfItems) {
-    if (SC.none(numberOfItems)) numberOfItems = 1;
-    if (SC.none(extend)) extend = false;
+  selectNextItem: 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,
+        selBottom = sel ? sel.get('max')-1 : -1,
         anchor    = this._selectionAnchor,
         lim       = this.get('length');
 
@@ -1635,7 +1714,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
       // If the selTop is before the anchor, then reduce the selection
       if (selTop < anchor) {
-        selTop = selTop + numberOfItems;
+        selTop = selTop + numberOfItems ;
 
       // otherwise, select the next item after the bottom
       } else {
@@ -1643,34 +1722,34 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       }
 
       // Ensure we are not out of bounds
-      if (selBottom >= lim) selBottom = lim - 1;
+      if (selBottom >= lim) selBottom = lim-1;
 
       // we also need to check that the item exists
       if (!content.objectAt(selBottom)) selBottom = sel ? sel.get('max') - 1 : -1;
 
       // and if top has eclipsed bottom, handle that too.
-      if (selTop > selBottom) selTop = selBottom;
+      if (selTop > selBottom) selTop = selBottom ;
 
     // if not extending, just select the item next to the selBottom
     } else {
       selBottom = this._findNextSelectableItemFromIndex(selBottom + numberOfItems, selBottom);
 
-      if (selBottom >= lim) selBottom = lim - 1;
+      if (selBottom >= lim) selBottom = lim-1;
       if (!content.objectAt(selBottom)) selBottom = sel ? sel.get('max') - 1 : -1;
-      selTop = selBottom;
-      anchor = null;
+      selTop = selBottom ;
+      anchor = null ;
     }
 
-    var scrollToIndex = selBottom;
+    var scrollToIndex = selBottom ;
 
     // now build new selection
-    sel = SC.IndexSet.create(selTop, selBottom - selTop + 1);
+    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;
+    this.scrollToContentIndex(scrollToIndex) ;
+    this.select(sel) ;
+    this._selectionAnchor = anchor ;
+    return this ;
   },
 
   /**
@@ -1680,28 +1759,28 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {Boolean} YES if deletion is possible.
   */
-  deleteSelection: function () {
+  deleteSelection: function() {
     // perform some basic checks...
     if (!this.get('isEditable') || !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;
+        indexes = sel&&content ? sel.indexSetForSource(content) : null;
 
-    if (!content || !indexes || indexes.get('length') === 0) return NO;
+    if (!content || !indexes || indexes.get('length') === 0) return NO ;
 
     // 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;
+    if (!indexes || indexes.get('length') === 0) return NO ;
 
     // 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);
 
-    return YES;
+    return YES ;
   },
 
   // ..........................................................
@@ -1714,9 +1793,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {Number} contentIndex The index of the item to scroll to
     @returns {SC.CollectionView} receiver
   */
-  scrollToContentIndex: function (contentIndex) {
-    var itemView = this.itemViewForContentIndex(contentIndex);
-    if (itemView) this.scrollToItemView(itemView);
+  scrollToContentIndex: function(contentIndex) {
+    var itemView = this.itemViewForContentIndex(contentIndex) ;
+    if (itemView) this.scrollToItemView(itemView) ;
     return this;
   },
 
@@ -1727,9 +1806,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {SC.View} view The item view to scroll to
     @returns {SC.CollectionView} receiver
   */
-  scrollToItemView: function (view) {
+  scrollToItemView: function(view) {
     if (view) view.scrollToVisible();
-    return this;
+    return this ;
   },
 
   // ..........................................................
@@ -1737,84 +1816,92 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   //
 
   /** @private */
-  keyDown: function (evt) {
-    var ret = this.interpretKeyEvents(evt);
-    return !ret ? NO : ret;
+  keyDown: function(evt) {
+    var ret = this.interpretKeyEvents(evt) ;
+    return !ret ? NO : ret ;
   },
 
   /** @private */
-  keyUp: function () { return true; },
+  keyUp: function() { return true; },
 
   /** @private
     Handle space key event.  Do action
   */
-  insertText: function (chr, evt) {
+  insertText: function(chr, evt) {
     if (chr === ' ') {
       var sel = this.get('selection');
-      if (sel && sel.get('length') > 0) {
+      if (sel && sel.get('length')>0) {
         this.invokeLater(this._cv_action, 0, null, evt);
       }
-      return YES;
-    } else return NO;
+      return YES ;
+    } else return NO ;
   },
 
   /** @private
     Handle select all keyboard event.
   */
-  selectAll: function (evt) {
+  selectAll: function(evt) {
     var content = this.get('content'),
-        sel = content ? SC.IndexSet.create(0, content.get('length')) : null;
-    this.select(sel, NO);
-    return YES;
+        del = this.delegateFor('allowsMultipleSelection', this.get('delegate'), content);
+
+    if (del && del.get('allowsMultipleSelection')) {
+      var sel = content ? SC.IndexSet.create(0, content.get('length')) : null;
+    this.select(sel, NO) ;
+    }
+    return YES ;
   },
 
   /** @private
     Remove selection of any selected items.
   */
-  deselectAll: function () {
+  deselectAll: function() {
     var content = this.get('content'),
-        sel = content ? SC.IndexSet.create(0, content.get('length')) : null;
-    this.deselect(sel, NO);
-    return YES;
+        del = this.delegateFor('allowsEmptySelection', this.get('delegate'), content);
+
+    if (del && del.get('allowsEmptySelection')) {
+      var sel = content ? SC.IndexSet.create(0, content.get('length')) : null;
+    this.deselect(sel, NO) ;
+    }
+    return YES ;
   },
 
   /** @private
     Handle delete keyboard event.
   */
-  deleteBackward: function (evt) {
-    return this.deleteSelection();
+  deleteBackward: function(evt) {
+    return this.deleteSelection() ;
   },
 
   /** @private
     Handle delete keyboard event.
   */
-  deleteForward: function (evt) {
-    return this.deleteSelection();
+  deleteForward: function(evt) {
+    return this.deleteSelection() ;
   },
 
   /** @private
     Selects the same item on the next row or moves down one if itemsPerRow = 1
   */
-  moveDown: function (sender, evt) {
-    this.selectNextItem(false, this.get('itemsPerRow') || 1);
+  moveDown: function(sender, evt) {
+    this.selectNextItem(false, this.get('itemsPerRow') || 1) ;
     this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
-    return true;
+    return true ;
   },
 
   /** @private
     Selects the same item on the next row or moves up one if itemsPerRow = 1
   */
-  moveUp: function (sender, evt) {
-    this.selectPreviousItem(false, this.get('itemsPerRow') || 1);
+  moveUp: function(sender, evt) {
+    this.selectPreviousItem(false, this.get('itemsPerRow') || 1) ;
     this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
-    return true;
+    return true ;
   },
 
   /** @private
     Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
     If item is expandable, will collapse.
   */
-  moveLeft: function (evt) {
+  moveLeft: function(evt) {
     // If the control key is down, this may be a browser shortcut and
     // we should not handle the arrow key.
     if (evt.ctrlKey || evt.metaKey) return NO;
@@ -1832,19 +1919,19 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       // 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) {
+      if ( indexes ) {
         var del,     // We'll load it lazily
             selectParent = false,
             index;
 
-        if (indexes.get('length') === 1) {
+        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) {
+        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
@@ -1852,20 +1939,20 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
           //        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) {
+          if ( desiredOutlineLevel >= 0 ) {
             var parentIndex = -1;
-            while (parentIndex < 0) {
+            while ( parentIndex < 0 ) {
               var previousItemIndex = this._findPreviousSelectableItemFromIndex(index - 1);
-              if (previousItemIndex < 0) return false;    // Sanity-check.
+              if (previousItemIndex < 0 ) return false;    // Sanity-check.
               index = previousItemIndex;
               var outlineLevel = del.contentIndexOutlineLevel(this, content, index);
-              if (outlineLevel === desiredOutlineLevel) {
+              if ( outlineLevel === desiredOutlineLevel ) {
                 parentIndex = previousItemIndex;
               }
             }
 
             // If we found the parent, select it now.
-            if (parentIndex !== -1) {
+            if ( parentIndex !== -1 ) {
               this.select(index);
             }
           }
@@ -1876,19 +1963,19 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       }
     }
 
-    return true;
+    return true ;
   },
 
   /** @private
     Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
   */
-  moveRight: function (evt) {
+  moveRight: function(evt) {
     // If the control key is down, this may be a browser shortcut and
     // we should not handle the arrow key.
     if (evt.ctrlKey || evt.metaKey) return NO;
 
     if ((this.get('itemsPerRow') || 1) > 1) {
-      this.selectNextItem(false, 1);
+      this.selectNextItem(false, 1) ;
       this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
     } else {
       var sel     = this.get('selection'),
@@ -1897,96 +1984,104 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       if (indexes) this.expand(indexes);
     }
 
-    return true;
+    return true ;
   },
 
   /** @private */
-  moveDownAndModifySelection: function (sender, evt) {
-    this.selectNextItem(true, this.get('itemsPerRow') || 1);
+  moveDownAndModifySelection: function(sender, evt) {
+    var content = this.get('content'),
+        del = this.delegateFor('allowsMultipleSelection', this.get('delegate'), content);
+
+    if (del && del.get('allowsMultipleSelection')) {
+    this.selectNextItem(true, this.get('itemsPerRow') || 1) ;
     this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
-    return true;
+    }
+    return true ;
   },
 
   /** @private */
-  moveUpAndModifySelection: function (sender, evt) {
-    this.selectPreviousItem(true, this.get('itemsPerRow') || 1);
+  moveUpAndModifySelection: function(sender, evt) {
+    var content = this.get('content'),
+        del = this.delegateFor('allowsMultipleSelection', this.get('delegate'), content);
+
+    if (del && del.get('allowsMultipleSelection')) {
+    this.selectPreviousItem(true, this.get('itemsPerRow') || 1) ;
     this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
-    return true;
+    }
+    return true ;
   },
 
   /** @private
     Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
   */
-  moveLeftAndModifySelection: function (sender, evt) {
+  moveLeftAndModifySelection: function(sender, evt) {
     if ((this.get('itemsPerRow') || 1) > 1) {
-      this.selectPreviousItem(true, 1);
+      this.selectPreviousItem(true, 1) ;
       this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
     }
-    return true;
+    return true ;
   },
 
   /** @private
     Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
   */
-  moveRightAndModifySelection: function (sender, evt) {
+  moveRightAndModifySelection: function(sender, evt) {
     if ((this.get('itemsPerRow') || 1) > 1) {
-      this.selectNextItem(true, 1);
+      this.selectNextItem(true, 1) ;
       this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
     }
-    return true;
+    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'),
+  insertNewline: function(sender, evt) {
+    var wantsEdit = this.get('isEditable') && this.get('canEditContent'),
+      canEdit = false,
         sel, content, set, idx, itemView;
 
-    // first make sure we have a single item selected; get idx
-    if (canEdit) {
-      sel     = this.get('selection');
+    // Make sure we have a single item selected and the item view supports beginEditing
+    if (wantsEdit) {
+      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;
+      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);
+      this.invokeLater(this._cv_action, 0, itemView, null) ;
     }
 
-    return YES; // always handle
+    return YES ; // always handle
   },
 
-  insertTab: function (evt) {
+  insertTab: function(evt) {
     var view = this.get('nextValidKeyView');
     if (view) view.becomeFirstResponder();
     else evt.allowDefault();
-    return YES; // handled
+    return YES ; // handled
   },
 
-  insertBacktab: function (evt) {
+  insertBacktab: function(evt) {
     var view = this.get('previousValidKeyView');
     if (view) view.becomeFirstResponder();
     else evt.allowDefault();
-    return YES; // handled
+    return YES ; // handled
   },
 
   // ..........................................................
@@ -2004,204 +2099,241 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param ev {Event} the mouse down event
     @returns {Boolean} Usually YES.
   */
-  mouseDown: function (ev) {
-    var content = this.get('content');
+  mouseDown: function(ev) {
+    var isEnabledInPane = this.get('isEnabledInPane'),
+        isSelectable = this.get('isSelectable'),
+        handled = false;
 
-    // Fast path!
-    if (!content) return this.get('isSelectable');
+    // If enabled and selectable, handle the event.
+    if (isEnabledInPane && isSelectable) {
+      var content = this.get('content');
 
-    var itemView      = this.itemViewForEvent(ev),
-        contentIndex  = itemView ? itemView.get('contentIndex') : -1,
-        info, anchor, sel, isSelected, modifierKeyPressed, didSelect = NO,
-        allowsMultipleSel = content.get('allowsMultipleSelection');
+      handled = true;
 
-    if (!this.get('isEnabledInPane')) return contentIndex > -1;
+      if (content) {
+        var itemView = this.itemViewForEvent(ev),
+            allowsMultipleSel = content.get('allowsMultipleSelection'),
+            didSelect = false,
+            sel, isSelected,
+            contentIndex;
 
-    if (!this.get('isSelectable')) return NO;
+        // Ensure that the view is first responder if possible.
+        this.becomeFirstResponder();
 
-    // become first responder if possible.
-    this.becomeFirstResponder();
+        // Determine the content index of the item view.
+        contentIndex = itemView ? itemView.get('contentIndex') : -1;
 
-    // Toggle the selection if selectOnMouseDown is true
-    if (this.get('useToggleSelection')) {
-      if (this.get('selectOnMouseDown')) {
-        if (!itemView) return; // do nothing when clicked outside of elements
+        // Toggle the selection if useToggleSelection is true.
+        if (this.get('useToggleSelection')) {
 
-        // determine if item is selected. If so, then go on.
-        sel = this.get('selection');
-        isSelected = sel && sel.containsObject(itemView.get('content'));
+          if (this.get('selectOnMouseDown') && itemView) {
+            // Determine if item is selected. If so, then go on.
+            sel = this.get('selection');
+
+            isSelected = sel && sel.contains(content, contentIndex, 1);
+            if (isSelected) {
+              this.deselect(contentIndex);
+            } else if (!allowsMultipleSel) {
+              this.select(contentIndex, false);
+              didSelect = true;
+            } else {
+              this.select(contentIndex, true);
+              didSelect = true;
+            }
+          }
 
-        if (isSelected) {
-          this.deselect(contentIndex);
-        } else if (!allowsMultipleSel) {
-          this.select(contentIndex, NO);
-          didSelect = YES;
+        // Normal selection behavior.
         } else {
-          this.select(contentIndex, YES);
-          didSelect = YES;
+          var info, anchor, modifierKeyPressed;
+
+          // Received a mouseDown on the view, but not on one of the item views.
+          if (!itemView) {
+            // Deselect all.
+            if (this.get('allowDeselectAll')) this.select(null, false);
+
+          } else {
+            // Collect some basic setup info.
+            sel = this.get('selection');
+            if (sel) sel = sel.indexSetForSource(content);
+
+            info = this.mouseDownInfo = {
+              event:        ev,
+              itemView:     itemView,
+              contentIndex: contentIndex,
+              at:           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) {
+              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 && sel && sel.get('length') > 0 && allowsMultipleSel) {
+              sel = this._findSelectionExtendedByShift(sel, contentIndex);
+              anchor = this._selectionAnchor;
+              this.select(sel) ;
+              didSelect = true;
+              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) {
+              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 ((ev.shiftKey || modifierKeyPressed) && !allowsMultipleSel) {
+                this.select(null, false);
+                didSelect = true;
+              }
+
+              if (this.get("selectOnMouseDown")) {
+                this.select(contentIndex, modifierKeyPressed);
+                didSelect = true;
+              } else {
+                info.shouldSelect = contentIndex >= 0;
+              }
+            }
+
+            // saved for extend by shift ops.
+            info.previousContentIndex = contentIndex;
+          }
         }
 
+        // Trigger select action if select occurred.
         if (didSelect && this.get('actOnSelect')) {
-          // handle actions on editing
           this._cv_performSelectAction(itemView, ev);
         }
       }
-
-      return YES;
-    }
-
-    // received 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 (!itemView) {
-      if (this.get('allowDeselectAll')) this.select(null, false);
-      return YES;
     }
 
-    // collection some basic setup info
-    sel = this.get('selection');
-    if (sel) sel = sel.indexSetForSource(content);
-
-    info = this.mouseDownInfo = {
-      event:        ev,
-      itemView:     itemView,
-      contentIndex: contentIndex,
-      at:           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) {
-      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 && sel && sel.get('length') > 0 && allowsMultipleSel) {
-      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) {
-      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 ((ev.shiftKey || modifierKeyPressed) && !allowsMultipleSel) {
-        this.select(null, false);
-      }
-
-      if (this.get("selectOnMouseDown")) {
-        this.select(contentIndex, modifierKeyPressed);
-      } else {
-        info.shouldSelect = contentIndex >= 0;
-      }
+    if (handled) {
+      // Track that mouse is down.
+      this._sc_isMouseDown = true;
     }
 
-    // saved for extend by shift ops.
-    info.previousContentIndex = contentIndex;
-
-    return YES;
+    return handled;
   },
 
   /** @private */
-  mouseUp: function (ev) {
-    var view = this.itemViewForEvent(ev),
-        info = this.mouseDownInfo,
-        content = this.get('content');
-
-    // Fast path!
-    if (!content) {
-      this._cleanupMouseDown();
-      return true;
-    }
-
-    var contentIndex = view ? view.get('contentIndex') : -1,
-      sel, isSelected, canEdit, itemView, idx,
-      allowsMultipleSel = content.get('allowsMultipleSelection');
-
-    if (!this.get('isEnabledInPane')) return contentIndex > -1;
-    if (!this.get('isSelectable')) return NO;
+  mouseUp: function(ev) {
+    var isEnabledInPane = this.get('isEnabledInPane'),
+        isSelectable = this.get('isSelectable');
+
+    // If enabled and selectable, handle the event.
+    if (isEnabledInPane && isSelectable) {
+      var content = this.get('content');
+
+      if (content) {
+        var itemView = this.itemViewForEvent(ev),
+            info = this.mouseDownInfo,
+            didSelect = false,
+            sel, isSelected,
+            contentIndex;
+
+        // Determine the content index of the item view.
+        contentIndex = itemView ? itemView.get('contentIndex') : -1;
 
-    if (this.get('useToggleSelection')) {
-      // Return if clicked outside of elements or if toggle was handled by mouseDown
-      if (!view || this.get('selectOnMouseDown')) return NO;
+        // Toggle the selection if useToggleSelection is true.
+        if (this.get('useToggleSelection')) {
+          // If the toggle wasn't done on mouse down, handle it now.
+          if (!this.get('selectOnMouseDown') && itemView) {
+            var allowsMultipleSel = content.get('allowsMultipleSelection');
+
+            // determine if item is selected. If so, then go on.
+            sel = this.get('selection') ;
+            isSelected = sel && sel.contains(content, contentIndex, 1);
+
+            if (isSelected) {
+              this.deselect(contentIndex) ;
+            } else if (!allowsMultipleSel) {
+              this.select(contentIndex, false);
+              didSelect = true;
+            } else {
+              this.select(contentIndex, true);
+              didSelect = true;
+            }
+          }
 
-      // determine if item is selected. If so, then go on.
-      sel = this.get('selection');
-      isSelected = sel && sel.containsObject(view.get('content'));
+        } else if (info) {
+          var idx = info.contentIndex;
 
-      if (isSelected) {
-        this.deselect(contentIndex);
-      } else if (!allowsMultipleSel) {
-        this.select(contentIndex, NO);
-      } else {
-        this.select(contentIndex, YES);
-      }
+          // this will be set if the user simply clicked on an unselected item and
+          // selectOnMouseDown was NO.
+          if (info.shouldSelect) {
+            this.select(idx, info.modifierKeyPressed);
+            didSelect = true;
+          }
 
-    } else if (info) {
-      idx = info.contentIndex;
-      contentIndex = (view) ? view.get('contentIndex') : -1;
+          // This is true if the user clicked on a selected item with a modifier
+          // key pressed.
+          if (info.shouldDeselect) this.deselect(idx);
 
-      // this will be set if the user simply clicked on an unselected item and
-      // selectOnMouseDown was NO.
-      if (info.shouldSelect) this.select(idx, info.modifierKeyPressed);
+          // 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 (info.shouldReselect) {
 
-      // This is true if the user clicked on a selected item with a modifier
-      // key pressed.
-      if (info.shouldDeselect) this.deselect(idx);
+            // - contentValueIsEditable is true
+            var canEdit = this.get('isEditable') && this.get('canEditContent') ;
 
-      // 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 (info.shouldReselect) {
+            // - the user clicked on an item that was already selected
+            //   ^ this is the only way shouldReset is set to YES
 
-        // - contentValueIsEditable is true
-        canEdit = this.get('isEditable') && this.get('canEditContent');
+            // - is the only item selected
+            if (canEdit) {
+              sel = this.get('selection') ;
+              canEdit = sel && (sel.get('length') === 1);
+            }
 
-        // - the user clicked on an item that was already selected
-        //   ^ this is the only way shouldReset is set to YES
+            // - the item view responds to contentHitTest() and returns YES.
+            // - the item view responds to beginEditing and returns YES.
+            if (canEdit) {
+              itemView = this.itemViewForContentIndex(idx) ;
+              canEdit = itemView && (!itemView.contentHitTest || itemView.contentHitTest(ev)) ;
+              canEdit = (canEdit && itemView.beginEditing) ? itemView.beginEditing() : NO ;
+            }
 
-        // - is the only item selected
-        if (canEdit) {
-          sel = this.get('selection');
-          canEdit = sel && (sel.get('length') === 1);
-        }
+            // if cannot edit, schedule a reselect (but give doubleClick a chance)
+            if (!canEdit) {
+              if (this._cv_reselectTimer) this._cv_reselectTimer.invalidate() ;
+              this._cv_reselectTimer = this.invokeLater(this.select, 300, idx, false) ;
+            }
+          }
 
-        // - the item view responds to contentHitTest() and returns YES.
-        // - the item view responds to beginEditing and returns YES.
-        if (canEdit) {
-          itemView = this.itemViewForContentIndex(idx);
-          canEdit = itemView && (!itemView.contentHitTest || itemView.contentHitTest(ev));
-          canEdit = (canEdit && itemView.beginEditing) ? itemView.beginEditing() : NO;
+          // Clean up.
+          this._cleanupMouseDown();
         }
 
-        // if cannot edit, schedule a reselect (but give doubleClick a chance)
-        if (!canEdit) {
-          if (this._cv_reselectTimer) this._cv_reselectTimer.invalidate();
-          this._cv_reselectTimer = this.invokeLater(this.select, 300, idx, false);
+        // Trigger select action if select occurred.
+        if (didSelect && this.get('actOnSelect')) {
+          this._cv_performSelectAction(itemView, ev);
         }
       }
 
-      this._cleanupMouseDown();
+      // To avoid annoying jitter from Magic Mouse (which sends mousewheel events while trying
+      // to lift your finger after a drag), capture mousewheel events for a small period of time.
+      this._sc_isMouseJustDown = true;
+      this._sc_clearMouseJustDownTimer = this.invokeLater(this._sc_clearMouseJustDown, 250);
     }
 
-    // handle actions on editing
-    this._cv_performSelectAction(view, ev, 0, ev.clickCount);
+    // Track that mouse is up no matter what (e.g. mouse went down and then view was disabled before mouse up).
+    this._sc_isMouseDown = false;
 
-    return NO;  // bubble event to allow didDoubleClick to be called...
+    return false;  // Bubble event to allow didDoubleClick to be called...
   },
 
   /** @private */
-  _cleanupMouseDown: function () {
+  _cleanupMouseDown: function() {
 
     // delete items explicitly to avoid leaks on IE
     var info = this.mouseDownInfo, key;
@@ -2215,27 +2347,35 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   },
 
   /** @private */
-  mouseMoved: function (ev) {
+  mouseMoved: function(ev) {
     var view = this.itemViewForEvent(ev),
-        last = this._lastHoveredItem;
+        last = this._lastHoveredItem ;
 
     // handle hover events.
     if (view !== last) {
       if (last && last.mouseExited) last.mouseExited(ev);
       if (view && view.mouseEntered) view.mouseEntered(ev);
     }
-    this._lastHoveredItem = view;
+    this._lastHoveredItem = view ;
 
     if (view && view.mouseMoved) view.mouseMoved(ev);
     return YES;
   },
 
   /** @private */
-  mouseExited: function (ev) {
-    var view = this._lastHoveredItem;
-    this._lastHoveredItem = null;
-    if (view && view.mouseExited) view.mouseExited(ev);
-    return YES;
+  mouseExited: function(ev) {
+    var view = this._lastHoveredItem ;
+    this._lastHoveredItem = null ;
+    if (view && view.mouseExited) view.mouseExited(ev) ;
+    return YES ;
+  },
+
+  /** @private We capture mouseWheel events while the mouse is pressed, this is to prevent jitter from slight mouse wheels while pressing
+    and lifting the finger (especially a problem with the Magic Mouse) */
+  mouseWheel: function (evt) {
+    // Capture mouse wheel events when mouse is pressed or immediately after a mouse up (to avoid
+    // excessive Magic Mouse wheel events while the person lifts their finger).
+    return this._sc_isMouseDown || this._sc_isMouseJustDown;
   },
 
   // ..........................................................
@@ -2243,14 +2383,14 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   //
 
   /** @private */
-  touchStart: function (touch, evt) {
+  touchStart: function(touch, evt) {
     var itemView = this.itemViewForEvent(touch),
         contentIndex = itemView ? itemView.get('contentIndex') : -1;
 
     if (!this.get('isEnabledInPane')) return contentIndex > -1;
 
     // become first responder if possible.
-    this.becomeFirstResponder();
+    this.becomeFirstResponder() ;
 
     this._touchSelectedView = itemView;
 
@@ -2266,8 +2406,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   },
 
   /** @private */
-  touchesDragged: function (evt, touches) {
-    touches.forEach(function (touch) {
+  touchesDragged: function(evt, touches) {
+    touches.forEach(function(touch){
       if (
         Math.abs(touch.pageX - touch.startX) > 5 ||
         Math.abs(touch.pageY - touch.startY) > 5
@@ -2280,7 +2420,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   },
 
   /** @private */
-  touchEnd: function (touch) {
+  touchEnd: function(touch) {
     /*
       TODO [CC] We should be using itemViewForEvent here, but because
             ListItemView re-renders itself once isSelected is called
@@ -2289,7 +2429,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
             fail when using touch events.
     */
     // var itemView = this.itemViewForEvent(touch),
-    var itemView = this._touchSelectedView,
+    var content = this.get('content'),
+        itemView = this._touchSelectedView,
         contentIndex = itemView ? itemView.get('contentIndex') : -1,
         isSelected = NO, sel, shouldSelect;
 
@@ -2298,7 +2439,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     if (contentIndex > -1) {
       if (this.get('useToggleSelection')) {
         sel = this.get('selection');
-        isSelected = sel && sel.containsObject(itemView.get('content'));
+        isSelected = sel && sel.contains(content, contentIndex, 1);
         shouldSelect = !isSelected;
       }
       else
@@ -2318,7 +2459,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   },
 
   /** @private */
-  touchCancelled: function (evt) {
+  touchCancelled: function(evt) {
     // Remove fake selection
     if (this._touchSelectedView) {
       this._touchSelectedView.set('isSelected', NO);
@@ -2327,41 +2468,41 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   },
 
   /** @private */
-  _findSelectionExtendedByShift: function (sel, contentIndex) {
+  _findSelectionExtendedByShift: function(sel, contentIndex) {
 
     // fast path.  if we don't have a selection, just select index
-    if (!sel || sel.get('length') === 0) {
+    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 min     = sel.get('min'),
-        max     = sel.get('max') - 1,
-        anchor  = this._selectionAnchor;
+        max     = sel.get('max')-1,
+        anchor  = this._selectionAnchor ;
     if (SC.none(anchor)) anchor = -1;
 
     // clicked before the current selection set... extend it's beginning...
     if (contentIndex < min) {
       min = contentIndex;
-      if (anchor < 0) this._selectionAnchor = anchor = max; //anchor at end
+      if (anchor<0) this._selectionAnchor = anchor = max; //anchor at end
 
     // clicked after the current selection set... extend it's ending...
     } else if (contentIndex > max) {
       max = contentIndex;
-      if (anchor < 0) this._selectionAnchor = anchor = min; // anchor at start
+      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.
     } else if (contentIndex >= min && contentIndex <= max) {
-      if (anchor < 0) this._selectionAnchor = anchor = min; //anchor at start
+      if (anchor<0) this._selectionAnchor = anchor = min; //anchor at start
 
-      if (contentIndex === anchor) min = max = contentIndex;
+      if (contentIndex === anchor) min = max = contentIndex ;
       else if (contentIndex > anchor) {
         min = anchor;
-        max = contentIndex;
+        max = contentIndex ;
       } else if (contentIndex < anchor) {
         min = contentIndex;
-        max = anchor;
+        max = anchor ;
       }
     }
 
@@ -2381,8 +2522,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @field
     @type String
   */
-  reorderDataType: function () {
-    return 'SC.CollectionView.Reorder.' + SC.guidFor(this);
+  reorderDataType: function() {
+    return 'SC.CollectionView.Reorder.'+SC.guidFor(this) ;
   }.property().cacheable(),
 
   /**
@@ -2437,10 +2578,10 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
         dragContent, dragDataTypes, dragView;
 
     // if the mouse down event was cleared, there is nothing to do; return.
-    if (!info || info.contentIndex < 0) return YES;
+    if (!info || info.contentIndex<0) return YES ;
 
     // Don't do anything unless the user has been dragging for 123msec
-    if ((Date.now() - info.at) < 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.get('isEditable') && del.collectionViewShouldBeginDrag(this)) {
@@ -2458,9 +2599,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       } else dragContent = sel ? sel.indexSetForSource(content) : null;
 
       // remove any group indexes.  groups cannot be dragged.
-      if (dragContent && groupIndexes && groupIndexes.get('length') > 0) {
+      if (dragContent && groupIndexes && groupIndexes.get('length')>0) {
         dragContent = dragContent.copy().remove(groupIndexes);
-        if (dragContent.get('length') === 0) dragContent = null;
+        if (dragContent.get('length')===0) dragContent = null;
         else dragContent.freeze();
       }
 
@@ -2468,7 +2609,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       else dragContent = dragContent.frozenCopy(); // so it doesn't change
 
       dragContent = { content: content, indexes: dragContent };
-      this.set('dragContent', 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
@@ -2494,13 +2635,13 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
         // Also use this opportunity to clean up since mouseUp won't
         // get called.
-        this._cleanupMouseDown();
-        this._lastInsertionIndex = null;
+        this._cleanupMouseDown() ;
+        this._lastInsertionIndex = null ;
 
       // Drag was not allowed by the delegate, so bail.
-      } else this.set('dragContent', null);
+      } else this.set('dragContent', null) ;
 
-      return YES;
+      return YES ;
     }
   },
 
@@ -2508,12 +2649,12 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     Compute a default drag view by grabbing the raw layers and inserting them
     into a drag view.
   */
-  _cv_dragViewFor: function (dragContent) {
+  _cv_dragViewFor: function(dragContent) {
     // find only the indexes that are in both dragContent and nowShowing.
     var indexes = this.get('nowShowing').without(dragContent),
         dragLayer = this.get('layer').cloneNode(false),
         view = SC.View.create({ layer: dragLayer, parentView: this }),
-        height = 0, layout;
+        height=0, layout;
 
     indexes = this.get('nowShowing').without(indexes);
 
@@ -2522,19 +2663,37 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       .css('border', 'none')
       .css('top', 0).css('left', 0);
 
-    indexes.forEach(function (i) {
+    indexes.forEach(function(i) {
       var itemView = this.itemViewForContentIndex(i),
-          isSelected, layer;
+          isSelected, itemViewLayer, layer;
 
-      // render item view without isSelected state.
       if (itemView) {
+      // render item view without isSelected state.
         isSelected = itemView.get('isSelected');
         itemView.set('isSelected', NO);
-
         itemView.updateLayerIfNeeded();
-        layer = itemView.get('layer');
-        if (layer) layer = layer.cloneNode(true);
+        itemViewLayer = itemView.get('layer');
+
+        if (itemViewLayer) {
+          layer = itemViewLayer.cloneNode(true);
+
+          // photocopy any canvas elements
+          var itemViewCanvasses = itemView.$().find('canvas');
+          if (itemViewCanvasses) {
+            var layerCanvasses = $(layer).find('canvas'),
+                len = itemViewCanvasses.length,
+                itemViewCanvas, layerCanvas;
+            for (i = 0; i < len; i++) {
+              itemViewCanvas = itemViewCanvasses[i];
+              layerCanvas = layerCanvasses[i];
+              layerCanvas.height = itemViewCanvas.height;
+              layerCanvas.width = itemViewCanvas.width;
+              layerCanvas.getContext('2d').drawImage(itemViewCanvas, 0, 0);
+            }
+          }
+        }
 
+        // reset item view
         itemView.set('isSelected', isSelected);
         itemView.updateLayerIfNeeded();
       }
@@ -2542,18 +2701,19 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       if (layer) {
         dragLayer.appendChild(layer);
         layout = itemView.get('layout');
-        if (layout.height + layout.top > height) {
-          height = layout.height + layout.top;
+        if(layout.height+layout.top>height){
+          height = layout.height+layout.top;
         }
       }
-      layer = null;
 
+      layer = null;
     }, this);
-    // we don't want to show the scrollbars, resize the dragview'
-    view.set('layout', { height: height });
+
+    // we don't want to show the scrollbars, resize the dragview
+    view.set('layout', {height:height});
 
     dragLayer = null;
-    return view;
+    return view ;
   },
 
 
@@ -2565,11 +2725,11 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @field
     @type Array
   */
-  dragDataTypes: function () {
+  dragDataTypes: function() {
     // consult delegate.
     var del = this.get('selectionDelegate'),
         ret = del.collectionViewDragDataTypes(this),
-        key;
+        key ;
 
     if (this.get('canReorderContent')) {
       ret = ret ? ret.copy() : [];
@@ -2585,12 +2745,12 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     this method will consult the collection view delegate if one has been
     provided.  It also respects the canReorderContent method.
   */
-  dragDataForType: function (drag, dataType) {
+  dragDataForType: function(drag, dataType) {
 
     // if this is a reorder, then return drag content.
     if (this.get('canReorderContent')) {
       if (dataType === this.get('reorderDataType')) {
-        return this.get('dragContent');
+        return this.get('dragContent') ;
       }
     }
 
@@ -2611,7 +2771,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @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) {
+  computeDragOperations: function(drag, evt) {
     // the proposed drag operation is DRAG_REORDER only if we can reorder
     // content and the drag contains reorder content.
     var op  = SC.DRAG_NONE,
@@ -2619,15 +2779,15 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     if (this.get('canReorderContent')) {
       if (drag.get('dataTypes').indexOf(this.get('reorderDataType')) >= 0) {
-        op = SC.DRAG_REORDER;
+        op = SC.DRAG_REORDER ;
       }
     }
 
     // Now pass this onto the delegate.
     op = del.collectionViewComputeDragOperations(this, drag, op);
-    if (op & SC.DRAG_REORDER) op = SC.DRAG_MOVE;
+    if (op & SC.DRAG_REORDER) op = SC.DRAG_MOVE ;
 
-    return op;
+    return op ;
   },
 
   /** @private
@@ -2640,7 +2800,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {Number} dragOp allowed drag operation mask
     Returns three params: [drop index, drop operation, allowed drag ops]
   */
-  _computeDropOperationState: function (drag, evt, dragOp) {
+  _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 validation, just to map the location to an insertion
@@ -2656,10 +2816,10 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     // get the computed insertion index and possibly drop operation.
     // prefer to drop ON.
-    var idx = this.insertionIndexForLocation(loc, SC.DROP_ON);
+    var idx = this.insertionIndexForLocation(loc, SC.DROP_ON) ;
     if (SC.typeOf(idx) === SC.T_ARRAY) {
-      dropOp = idx[1]; // order matters here
-      idx = idx[0];
+      dropOp = idx[1] ; // order matters here
+      idx = idx[0] ;
     }
 
     // if the return drop operation is DROP_ON, then just check it with the
@@ -2670,25 +2830,25 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
       // Now save the insertion index and the dropOp.  This may be changed by
       // the collection delegate.
-      this.set('proposedInsertionIndex', idx);
-      this.set('proposedDropOperation', dropOp);
-      tmp = del.collectionViewValidateDragOperation(this, drag, dragOp, idx, dropOp);
-      idx = this.get('proposedInsertionIndex');
-      dropOp = this.get('proposedDropOperation');
-      this._dropInsertionIndex = this._dropOperation = null;
+      this.set('proposedInsertionIndex', idx) ;
+      this.set('proposedDropOperation', dropOp) ;
+      tmp = 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 (tmp !== SC.DRAG_NONE) return [idx, dropOp, tmp];
+      if (tmp !== SC.DRAG_NONE) return [idx, dropOp, tmp] ;
 
       // 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 {
-        dropOp = SC.DROP_BEFORE;
-        idx = this.insertionIndexForLocation(loc, SC.DROP_BEFORE);
+        dropOp = SC.DROP_BEFORE ;
+        idx = this.insertionIndexForLocation(loc, SC.DROP_BEFORE) ;
         if (SC.typeOf(idx) === SC.T_ARRAY) {
-          dropOp = idx[1]; // order matters here
-          idx = idx[0];
+          dropOp = idx[1] ; // order matters here
+          idx = idx[0] ;
         }
       }
     }
@@ -2699,20 +2859,20 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     // content.
     if ((idx >= 0) && canReorder && (dropOp !== SC.DROP_ON)) {
 
-      objects = drag.dataForType(this.get('reorderDataType'));
+      objects = drag.dataForType(this.get('reorderDataType')) ;
       if (objects) {
-        content = this.get('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.
         if (dropOp === SC.DROP_BEFORE) {
-          isPreviousInDrag = objects.indexes.contains(idx - 1);
+          isPreviousInDrag = objects.indexes.contains(idx-1);
           isNextInDrag     = objects.indexes.contains(idx);
         } else {
           isPreviousInDrag = objects.indexes.contains(idx);
-          isNextInDrag     = objects.indexes.contains(idx - 1);
+          isNextInDrag     = objects.indexes.contains(idx-1);
         }
 
         if (isPreviousInDrag && isNextInDrag) {
@@ -2723,26 +2883,26 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
               len = content ? content.get('length') : 0;
               while ((idx < len) && objects.indexes.contains(idx)) idx++;
             }
-          } else idx = this._lastInsertionIndex;
+          } else idx = this._lastInsertionIndex ;
         }
 
         // If we found a valid insertion point to reorder at, then set the op
         // to custom DRAG_REORDER.
-        if (idx >= 0) dragOp = SC.DRAG_REORDER;
+        if (idx >= 0) dragOp = SC.DRAG_REORDER ;
       }
     }
 
     // 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 = del.collectionViewValidateDragOperation(this, drag, dragOp, idx, dropOp);
-    idx = this.get('proposedInsertionIndex');
-    dropOp = this.get('proposedDropOperation');
-    this._dropInsertionIndex = this._dropOperation = null;
+    this.set('proposedInsertionIndex', idx) ;
+    this.set('proposedDropOperation', dropOp) ;
+    dragOp = del.collectionViewValidateDragOperation(this, drag, dragOp, idx, dropOp) ;
+    idx = this.get('proposedInsertionIndex') ;
+    dropOp = this.get('proposedDropOperation') ;
+    this._dropInsertionIndex = this._dropOperation = null ;
 
     // return generated state
-    return [idx, dropOp, dragOp];
+    return [idx, dropOp, dragOp] ;
   },
 
   /**
@@ -2754,7 +2914,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {SC.Drag} drag The drag that was updated
     @param {SC.Event} evt The event for the drag
   */
-  dragUpdated: function (drag, evt) {
+  dragUpdated: function(drag, evt) {
     var op     = drag.get('allowedDragOperations'),
         state  = this._computeDropOperationState(drag, evt, op),
         idx    = state[0], dropOp = state[1], dragOp = state[2];
@@ -2763,15 +2923,15 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     // point
     if (dragOp !== SC.DRAG_NONE) {
       if ((this._lastInsertionIndex !== idx) || (this._lastDropOperation !== dropOp)) {
-        var itemView = this.itemViewForContentIndex(idx);
-        this.showInsertionPoint(itemView, dropOp);
+        var itemView = this.itemViewForContentIndex(idx) ;
+        this.showInsertionPoint(itemView, dropOp) ;
       }
 
-      this._lastInsertionIndex = idx;
-      this._lastDropOperation = dropOp;
+      this._lastInsertionIndex = idx ;
+      this._lastDropOperation = dropOp ;
     } else {
-      this.hideInsertionPoint();
-      this._lastInsertionIndex = this._lastDropOperation = null;
+      this.hideInsertionPoint() ;
+      this._lastInsertionIndex = this._lastDropOperation = null ;
     }
 
     // Normalize drag operation to the standard kinds accepted by the drag
@@ -2784,8 +2944,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     point and clears some cached values.
   */
   dragEnded: function () {
-    this.hideInsertionPoint();
-    this._lastInsertionIndex = this._lastDropOperation = null;
+    this.hideInsertionPoint() ;
+    this._lastInsertionIndex = this._lastDropOperation = null ;
   },
 
   /**
@@ -2793,7 +2953,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @returns {Boolean} YES
   */
-  acceptDragOperation: function (drag, op) {
+  acceptDragOperation: function(drag, op) {
     return YES;
   },
 
@@ -2806,7 +2966,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {Number} op The drag operation to perform
     @return {Number} The operation performed
   */
-  performDragOperation: function (drag, op) {
+  performDragOperation: function(drag, op) {
     // Get the correct insertion point, drop operation, etc.
     var state = this._computeDropOperationState(drag, null, op),
         idx   = state[0], dropOp = state[1], dragOp = state[2],
@@ -2816,32 +2976,32 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     // 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;
+      op = (op & SC.DRAG_MOVE) ? SC.DRAG_REORDER : SC.DRAG_NONE ;
+    } 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.
-    performed = del.collectionViewPerformDragOperation(this, drag, op, idx, dropOp);
+    performed = del.collectionViewPerformDragOperation(this, drag, op, idx, dropOp) ;
 
     // 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.
     if ((performed === SC.DRAG_NONE) && (op & SC.DRAG_REORDER)) {
 
-      data = drag.dataForType(this.get('reorderDataType'));
-      if (!data) return SC.DRAG_NONE;
+      data = drag.dataForType(this.get('reorderDataType')) ;
+      if (!data) return SC.DRAG_NONE ;
 
-      content = this.get('content');
+      content = this.get('content') ;
 
       // check for special case - inserting BEFORE ourself...
       // in this case just pretend the move happened since it's a no-op
       // anyway
       indexes = data.indexes;
-      if (indexes.get('length') === 1) {
+      if (indexes.get('length')===1) {
         if (((dropOp === SC.DROP_BEFORE) || (dropOp === SC.DROP_AFTER)) &&
-            (indexes.get('min') === idx)) return SC.DRAG_MOVE;
+            (indexes.get('min')===idx)) return SC.DRAG_MOVE;
       }
 
       content.beginPropertyChanges(); // suspend notifications
@@ -2850,9 +3010,9 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       // added again later.
       objects = [];
       shift = 0;
-      data.indexes.forEach(function (i) {
+      data.indexes.forEach(function(i) {
         objects.push(content.objectAt(i - shift));
-        content.removeAt(i - shift);
+        content.removeAt(i-shift);
         shift++;
         if (i < idx) idx--;
       }, this);
@@ -2864,7 +3024,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       content.endPropertyChanges(); // restart notifications
 
       // make the op into its actual value
-      op = SC.DRAG_MOVE;
+      op = SC.DRAG_MOVE ;
     }
 
     return op;
@@ -2876,7 +3036,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
 
     @param {SC.View} view
   */
-  collectionViewShouldBeginDrag: function (view) {
+  collectionViewShouldBeginDrag: function(view) {
     return this.get('canReorderContent');
   },
 
@@ -2915,63 +3075,19 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @param {DropOp} dropOperation the preferred drop operation.
     @returns {Array} format: [index, op]
   */
-  insertionIndexForLocation: function (loc, dropOperation) {
+  insertionIndexForLocation: function(loc, dropOperation) {
     return -1;
   },
 
   // ..........................................................
-  // SCROLLING
+  // INTERNAL SUPPORT
   //
 
-  /** @private SC.ScrollView */
-  touchScrollDidStart: function () {
-    var clippingFrame = this.get('clippingFrame');
-
-    // Create the in-scroll clipping frame that will be used while touch scrolling.
-    this._inScrollClippingFrame = {
-      x: clippingFrame.x,
-      y: clippingFrame.y,
-      width: clippingFrame.width,
-      height: clippingFrame.height
-    };
-  },
-
-  /* @private Internal property used to track the rate of touch scroll change events. */
-  _lastTouchScrollTime: null,
-
-  /** @private SC.ScrollView */
-  touchScrollDidChange: function (left, top) {
-    // Fast path!  Don't try to update too soon.
-    if (Date.now() - this._lastTouchScrollTime < 30) { return; }
-
-    var inScrollClippingFrame = this._inScrollClippingFrame;
-
-    // Update the in-scroll clipping frame with the new values.
-    inScrollClippingFrame.x = left;
-    inScrollClippingFrame.y = top;
-
-    // Indicate that nowShowing should be re-computed (this will use the
-    // in-scroll clipping frame when it does).
-    // TODO: perform a raw update that doesn't require the run loop.
-    SC.run(function () {
-    this.notifyPropertyChange('nowShowing');
-    this.invokeOnce('_cv_nowShowingDidChange');
-    }, this);
-
-    // Track the last time we updated.
-    this._lastTouchScrollTime = Date.now();
-  },
-
-  /** @private SC.ScrollView */
-  touchScrollDidEnd: function () {
-    // Clean up so that the regular clippingFrame is used again.
-    this._inScrollClippingFrame = null;
+  /** @private Clears the mouse just down flag. */
+  _sc_clearMouseJustDown: function () {
+    this._sc_isMouseJustDown = false;
   },
 
-  // ..........................................................
-  // INTERNAL SUPPORT
-  //
-
   /** @private - when we are about to become visible, reload if needed. */
   willShowInDocument: function () {
     if (this._invalidIndexes) this.invokeOnce(this.reloadIfNeeded);
@@ -2992,16 +3108,10 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     Default delegate method implementation, returns YES if isSelectable
     is also true.
   */
-  collectionViewShouldSelectItem: function (view, item) {
-    return this.get('isSelectable');
+  collectionViewShouldSelectItem: function(view, item) {
+    return this.get('isSelectable') ;
   },
 
-  /** @private */
-  _TMP_DIFF1: SC.IndexSet.create(),
-
-  /** @private */
-  _TMP_DIFF2: SC.IndexSet.create(),
-
   /** @private
 
     Whenever the nowShowing range changes, update the range observer on the
@@ -3009,7 +3119,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     the previous nowShowing range.
 
   */
-  _cv_nowShowingDidChange: function () {
+  _cv_nowShowingDidChange: function() {
     var nowShowing  = this.get('nowShowing'),
         last        = this._sccv_lastNowShowing,
         diff, diff1, diff2;
@@ -3022,7 +3132,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
         diff1 = this._TMP_DIFF1.add(last).remove(nowShowing);
         diff2 = this._TMP_DIFF2.add(nowShowing).remove(last);
         diff = diff1.add(diff2);
-      } else diff = last || nowShowing;
+      } else diff = last || nowShowing ;
     }
 
     // if nowShowing has actually changed, then update
@@ -3039,35 +3149,65 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   }.observes('nowShowing'),
 
   /** @private */
-  init: function () {
-    sc_super();
+  init: function() {
+     sc_super();
 
+    //@if (debug)
     if (this.useFastPath) {
-      //@if(debug)
       // Deprecation warning for those that were using SC.CollectionFastPath.
       SC.warn("Developer Warning: SC.CollectionView `useFastPath` has been deprecated.  The performance improvements have been integrated directly into SC.CollectionView as the default behavior.  Please disable the useFastPath property and refer to the SC.CollectionView documentation for more information.");
-      //@endif
-      this.mixin(SC.CollectionFastPath);
     }
+    //@endif
 
-    //@if(debug)
+    //@if (debug)
     if (this.willReload || this.didReload) {
       // Deprecation warning for willReload and didReload.  These don't seem to serve any purpose.
       SC.warn("Developer Warning: SC.CollectionView no longer calls willReload and didReload on its subclasses because it includes item view and layer pooling in itself by default.");
     }
     //@endif
 
-    if (this.get('canReorderContent')) this._cv_canReorderContentDidChange();
-    this._sccv_lastNowShowing = this.get('nowShowing').clone();
+     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();
+     if (this.content) this._cv_contentDidChange();
+     if (this.selection) this._cv_selectionDidChange();
+
+     // Set our initial layout. It's important that our computed layout exist on instantiation so that containing views
+     // understand in which way the collection will grow (e.g. if we compute height, then the container won't adjust height).
+     this.adjustLayout();
+  },
+
+  /** @private SC.View.prototype.destroy. */
+  destroy: function () {
+    sc_super();
+
+    // All manipulations made to objects we use must be reversed!
+    var content = this._content;
+    if (content) {
+      content.removeObserver('length', this, this.contentLengthDidChange);
+
+      this._content = null;
+    }
+
+    var sel = this._cv_selection;
+    if (sel) {
+      sel.removeObserver('[]', this, this._cv_selectionContentDidChange);
+
+      this._cv_selection = null;
+    }
+
+    var contentRangeObserver = this._cv_contentRangeObserver;
+    if (contentRangeObserver) {
+      if (content) content.removeRangeObserver(contentRangeObserver);
+
+      this._cv_contentRangeObserver = null;
+    }
   },
 
   /** @private
     Become a drop target whenever reordering content is enabled.
   */
-  _cv_canReorderContentDidChange: function () {
+  _cv_canReorderContentDidChange: function() {
     if (this.get('canReorderContent')) {
       if (!this.get('isDropTarget')) this.set('isDropTarget', YES);
       SC.Drag.addDropTarget(this);
@@ -3081,16 +3221,16 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     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) {
+  _cv_performSelectAction: function(view, ev, delay, clickCount) {
     var sel;
-    if (delay === undefined) delay = 0;
+    if (delay === undefined) delay = 0 ;
     if (clickCount === undefined) clickCount = 1;
-    if ((clickCount > 1) || this.get('actOnSelect')) {
-      if (this._cv_reselectTimer) this._cv_reselectTimer.invalidate();
+    if ((clickCount>1) || this.get('actOnSelect')) {
+      if (this._cv_reselectTimer) this._cv_reselectTimer.invalidate() ;
       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);
+      this._cv_actionTimer = this.invokeLater(this._cv_action, delay, view, ev, sel) ;
     }
   },
 
@@ -3098,17 +3238,17 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     Perform the action.  Supports legacy behavior as well as newer style
     action dispatch.
   */
-  _cv_action: function (view, evt, context) {
+  _cv_action: function(view, evt, context) {
     var action = this.get('action');
     var target = this.get('target') || null;
 
     this._cv_actionTimer = null;
     if (action) {
       // if the action is a function, just call it
-      if (SC.typeOf(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');
+      var pane = this.get('pane') ;
       if (pane) {
         pane.rootResponder.sendAction(action, target, this, pane, context);
       }
@@ -3116,21 +3256,22 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     // if no action is specified, then trigger the support action,
     // if supported.
     } else if (!view) {
-      return; // nothing to do
+      return ; // nothing to do
 
     // if the target view has its own internal action handler,
     // trigger that.
-    } else if (SC.typeOf(view._action) == SC.T_FUNCTION) {
-      return view._action(evt);
+    } 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.typeOf(view.action) == SC.T_FUNCTION) {
-      return view.action(evt);
+    } else if (SC.typeOf(view.action) === SC.T_FUNCTION) {
+      return view.action(evt) ;
     }
   },
 
+  /** @private */
   _attrsForContentIndex: function (idx) {
-    var attrs = this._TMP_ATTRS,
+    var attrs = this._TMP_ATTRS, // NOTE: This is a shared object so every property of it must be set for each use.
       del = this.get('contentDelegate'),
       items = this.get('content'),
       isGroupView = this._contentIndexIsGroup(idx),
@@ -3155,12 +3296,18 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     attrs.owner = attrs.displayDelegate = this;
     attrs.page = this.page;
     attrs.outlineLevel = outlineLevel;
+    attrs.isLast = idx === items.get('length') - 1;
 
     if (isGroupView) attrs.classNames = this._GROUP_COLLECTION_CLASS_NAMES;
     else attrs.classNames = this._COLLECTION_CLASS_NAMES;
 
-    attrs.layout = this.layoutForContentIndex(idx);
-    if (!attrs.layout) { attrs.layout = SC.View.prototype.layout; }
+    // Layout may be calculated by the collection view beforehand. If so,
+    // assign it to the attributes. If the collection view doesn't calculate
+    // layout or defers calculating layout, then we shouldn't force a layout
+    // on the child view.
+    var layout = this.layoutForContentIndex(idx);
+    if (layout) { attrs.layout = layout; }
+    else { delete attrs.layout; }
 
     return attrs;
   },
@@ -3190,7 +3337,7 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
       return del.contentIndexIsGroup(this, items, idx);
     } else {
       return false;
-    }
+  }
   },
 
   /** @private
@@ -3251,15 +3398,13 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     var layout = this.layoutForContentIndex(contentIndex);
 
     if (layout && layout.height) {
+      // Handle both top aligned and bottom aligned layouts.
       if (layout.top) { layout.top = -layout.height; }
       else { layout.bottom = -layout.height; }
     } else if (layout && layout.width) {
+      // Handle both left aligned and right aligned layouts.
       if (layout.left) { layout.left = -layout.width; }
       else { layout.right = -layout.width; }
-    } else {
-      // There is not really a valid layout for a collection.  Just shape it and
-      // place it out of view.
-      layout = { left: -100, width: 100, top: -100, height: 100 };
     }
 
     return layout;
@@ -3273,6 +3418,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   */
   _reconfigureItemView: function (itemView, attrs) {
     itemView.beginPropertyChanges();
+
+    // Update the view with the new properties.
     itemView.set('content', attrs.content);
     itemView.set('contentIndex', attrs.contentIndex);
     itemView.set('isEnabled', attrs.isEnabled);
@@ -3281,9 +3428,35 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     itemView.set('isDeletable', attrs.isDeletable);
     itemView.set('isSelected', attrs.isSelected);
     itemView.set('layerId', attrs.layerId);
-    itemView.set('layout', attrs.layout);
     itemView.set('outlineLevel', attrs.outlineLevel);
     itemView.set('disclosureState', attrs.disclosureState);
+    itemView.set('isLast', attrs.isLast);
+
+    // Don't assign null/undefined layouts.
+    if (attrs.layout) { itemView.set('layout', attrs.layout); }
+
+    // If the view's isGroupView property is changing, the associated CSS classes need to
+    // be updated.
+    var isCurrentlyGroupView = itemView.get('isGroupView'),
+        shouldBeGroupView = attrs.isGroupView;
+    if (isCurrentlyGroupView !== shouldBeGroupView) {
+      itemView.set('isGroupView', shouldBeGroupView);
+      var classNames = itemView.get('classNames'),
+          elem = itemView.$();
+      // Going from group view to item view...
+      if (isCurrentlyGroupView && !shouldBeGroupView) {
+        classNames.pushObject('sc-item');
+        classNames.removeObject('sc-group-item');
+        elem.setClass({ 'sc-item': YES, 'sc-group-item': NO });
+      }
+      // Going from item view to group view...
+      else {
+        classNames.removeObject('sc-item');
+        classNames.pushObject('sc-group-item');
+        elem.setClass({ 'sc-item': NO, 'sc-group-item': YES });
+      }
+    }
+    // Wrap up.
     itemView.endPropertyChanges();
   },
 
@@ -3293,7 +3466,8 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
   _removeItemView: function (itemView, idx) {
     var exampleView,
       items = this.get('content'),
-      layout,
+      canPoolView, canPoolLayer,
+      poolLayout,
       pool,
       prototype,
       wasPooled = false;
@@ -3304,11 +3478,13 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     if (items && itemView.get('content') === items.objectAt(idx)) {
 
       exampleView = this._exampleViewForContentIndex(idx);
-      if (SC.none(exampleView.prototype.isReusable) || exampleView.prototype.isReusable) {
+      prototype = exampleView.prototype;
+      canPoolView = SC.none(prototype.isReusable) || prototype.isReusable;
+      if (canPoolView) {
         // If the exampleView is reusable, send the view to its pool.
         pool = this._poolForExampleView(exampleView);
 
-        //@if(debug)
+        //@if (debug)
         // Add a bit of developer support if they are migrating over from SC.CollectionFastPath
         if (itemView.hibernateInPool) {
           SC.error("Developer Error: Item views that want to do clean up before being pooled should implement sleepInPool not hibernateInPool.  This will be temporarily fixed up for development mode only, but must be changed before production.");
@@ -3322,13 +3498,14 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
         pool.push(itemView);
 
         // If the exampleView's layer isn't reusable, destroy it.
-        prototype = exampleView.prototype;
-        if (!SC.none(prototype.isLayerReusable) && !prototype.isLayerReusable) {
-          itemView.destroyLayer();
-        } else {
+        poolLayout = this._poolLayoutForContentIndex(idx);
+        canPoolLayer = poolLayout && (SC.none(prototype.isLayerReusable) || prototype.isLayerReusable);
+        if (canPoolLayer) {
           // If the layer is sticking around, be sure to move it out of view.
-          layout = this._poolLayoutForContentIndex(idx);
-          itemView.set('layout', layout);
+          itemView.set('layout', poolLayout);
+        } else {
+          // We can't pool layers that are prohibited or that cannot be moved out of view (i.e. no poolLayout)
+          itemView.destroyLayer();
         }
 
         // Ensure that the id of views in the pool don't clash with ids that
@@ -3347,5 +3524,4 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     delete this._sc_itemViews[idx];
   }
 
-
 });