sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

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

@@ -0,0 +1,105 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/** @class
+
+  Renders a checkbox button view specifically.
+  
+  This view is basically a button view preconfigured to generate the correct
+  HTML and to set to use a TOGGLE_BEHAVIOR for its buttons.
+  
+  This view renders a simulated checkbox that can display a mixed state and 
+  has other features not found in platform-native controls.  If you want to 
+  use the platform native version instead, see SC.CheckboxFieldView.
+
+  @extends SC.FieldView
+  @since SproutCore 1.0
+*/
+SC.CheckboxView = SC.FieldView.extend(SC.StaticLayout, SC.Button,
+  /** @scope SC.CheckboxView.prototype */ {
+
+  classNames: ['sc-checkbox-view'],
+  tagName: 'label',
+
+  render: function(context, firstTime) {
+    var dt, elem ;
+    
+    // add checkbox -- set name to view guid to separate it from others
+    if (firstTime) {
+      dt = this._field_currentDisplayTitle = this.get('displayTitle');
+
+      var blank = sc_static('blank');
+      var disabled = this.get('isEnabled') ? '' : 'disabled="disabled"';
+      context.push('<img src="', blank, '" class="button" />');
+      context.push('<input type="checkbox" name="%@" %@ />'.fmt(SC.guidFor(this),disabled));
+      context.push('<span class="label">', dt, '</span>');
+      context.attr('name', SC.guidFor(this));
+
+    // since we don't want to regenerate the contents each time 
+    // actually search for and update the displayTitle.
+    } else {
+      
+      if (elem = this.$input()[0]) {
+        if (this.get('isEnabled')) elem.disabled=NO;
+        else elem.disabled=YES;
+        elem = null ; // avoid memory leaks
+      }
+      
+      dt = this.get('displayTitle');
+      if (dt !== this._field_currentDisplayTitle) {
+        this._field_currentDisplayTitle = dt;
+        this.$('span.label').text(dt);
+      }
+    }
+  },
+  
+  // ..........................................
+  // SC.FIELD SUPPORT
+  //
+
+  /** @private - return the input tag */
+  $input: function() { return this.$('input'); },
+
+  /** @private - get the checked value from the input tag.  If the value is
+    unchecked and the last value set was mixed, then return mixed.  This
+    allows mixed states to remain unchanged. */
+  getFieldValue: function() { 
+    var ret = this.$input().attr('checked'); 
+    if (ret) {
+      this._lastFieldValue = null; // clear last field value since it changed
+      
+    // possibly return mixed state if that was the last value set and the 
+    // current checked value is still empty.
+    } else {
+      if (this._lastFieldValue === SC.MIXED_STATE) ret = SC.MIXED_STATE ;
+    }
+    return ret ;
+  },
+
+  /** @private - set the checked value on the input tag.  If the value is 
+    mixed, treat that as unchecked and save the value.  This way the mixed 
+    state can be retained.
+  */
+  setFieldValue: function(v) { 
+    this._lastFieldValue = v; 
+    this.$input().attr('checked', (v === SC.MIXED_STATE) ? NO : !!v); 
+  },
+  
+  /** @private - Converts the field value to the toggleOnValue or mixed */
+  fieldValueForObject: function(obj) {
+    return this.computeIsSelectedForValue(obj) ;
+  },
+
+  /** @private - Converts the field value to the toggleOffValue.  If the
+    value is MIXED_STATE, always return the current value */
+  objectForFieldValue: function(v) {
+    var ret = (v === SC.MIXED_STATE) ? this.get('value') : 
+      (!!v) ? this.get('toggleOnValue') : this.get('toggleOffValue'); 
+      return ret ;
+  }
+    
+}) ;

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

@@ -0,0 +1,2757 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('mixins/collection_view_delegate') ;
+sc_require('views/list_item');
+
+/**
+  Special drag operation passed to delegate if the collection view proposes
+  to perform a reorder event.
+*/
+SC.DRAG_REORDER = 0x0010 ;
+
+/** Indicates that selection points should be selected using horizontal 
+  orientation.
+*/
+SC.HORIZONTAL_ORIENTATION = 'horizontal';
+
+/** Selection points should be selected using vertical orientation. */
+SC.VERTICAL_ORIENTATION = 'vertical' ;
+
+SC.BENCHMARK_RELOAD = NO ;
+
+/**
+  @class 
+
+  TODO: Document SC.CollectionView
+  
+  Renders a collection of views from a source array of model objects.
+   
+  The CollectionView is the root view class for rendering collections of 
+  views based on a source array of objects.  It can automatically create the
+  and layout the views, including displaying them in groups.  It also 
+  handles event input for the entire collection.
+  
+  To use CollectionView, just create the view and set the 'content' property
+  to an array of objects.  (Note that if you setup a binding, it will 
+  always transform content to an array.)  The view will create instances of
+  exampleView to render the array.  You can also bind to the selection 
+  property if you want to monitor selection. (be sure to set the isEnabled
+  property to allow selection.)
+  
+  @extends SC.View
+  @extends SC.CollectionViewDelegate
+  @extends SC.CollectionContent
+  @since SproutCore 0.9
+*/
+SC.CollectionView = SC.View.extend(
+  SC.CollectionViewDelegate,
+  SC.CollectionContent,
+/** @scope SC.CollectionView.prototype */ {
+  
+  classNames: ['sc-collection-view'],
+  
+  ACTION_DELAY: 200,
+  
+  // ......................................
+  // PROPERTIES
+  //
+  
+  /**
+    An array of content objects
+    
+    This array should contain the content objects you want the collection view 
+    to display.  An item view (based on the exampleView view class) will be 
+    created for each content object, in the order the content objects appear 
+    in this array.
+    
+    If you make the collection editable, the collection view will also modify 
+    this array using the observable array methods of SC.Array.
+    
+    Usually you will want to bind this property to a controller property 
+    that actually contains the array of objects you to display.
+    
+    @type {SC.Array}
+  */
+  content: null,
+  
+  /** @private */
+  contentBindingDefault: SC.Binding.multiple(),
+  
+  /**
+    The current length of the content.
+    
+    @property
+    @type {Numer}
+  */
+  length: 0,
+  
+  /**
+    The set of indexes that are currently tracked by the collection view.
+    This property is used to determine the range of items the collection view
+    should monitor for changes.
+    
+    The default implementation of this property returns an index set covering
+    the entire range of the content.  It changes automatically whenever the
+    length changes.
+    
+    Note that the returned index set for this property will always be frozen.
+    To change the nowShowing index set, you must create a new index set and 
+    apply it.
+    
+    @property
+    @type {SC.IndexSet}
+  */
+  nowShowing: function() {
+    var ret = this.computeNowShowing();
+    return ret ? ret.frozenCopy() : null;
+  }.property('length', 'clippingFrame').cacheable(),
+  
+  /**
+    Indexes of selected content objects.  This SC.SelectionSet is modified 
+    automatically by the collection view when the user changes the selection 
+    on the collection.
+    
+    Any item views representing content objects in this set will have their 
+    isSelected property set to YES automatically.
+    
+    @type {SC.SelectionSet}
+  */
+  selection: null,
+  
+  /** 
+    Allow user to select content using the mouse and keyboard.
+    
+    Set this property to NO to disallow the user from selecting items. If you 
+    have items in your selectedIndexes property, they will still be reflected
+    visually.
+    
+    @type {Boolean}
+  */
+  isSelectable: YES,
+  
+  /** @private */
+  isSelectableBindingDefault: SC.Binding.bool(),
+  
+  /**
+    Enable or disable the view.  
+    
+    The collection view will set the isEnabled property of its item views to
+    reflect the same view of this property.  Whenever isEnabled is false,
+    the collection view will also be not selectable or editable, regardless of 
+    the settings for isEditable & isSelectable.
+    
+    @type {Boolean}
+  */
+  isEnabled: YES,
+  
+  /** @private */
+  isEnabledBindingDefault: SC.Binding.bool(),
+  
+  /**
+    Allow user to edit content views.
+    
+    The collection view will set the isEditable property on its item views to
+    reflect the same value of this property.  Whenever isEditable is false, 
+    the user will not be able to reorder, add, or delete items regardless of 
+    the canReorderContent and canDeleteContent and isDropTarget properties.
+    
+    @type {Boolean}
+  */
+  isEditable: YES,
+  
+  /** @private */
+  isEditableBindingDefault: SC.Binding.bool(),
+  
+  /**
+    Allow user to reorder items using drag and drop.
+    
+    If true, the user will can use drag and drop to reorder items in the list.
+    If you also accept drops, this will allow the user to drop items into 
+    specific points in the list.  Otherwise items will be added to the end.
+    
+    @type {Boolean}
+  */
+  canReorderContent: NO,
+  
+  /** @private */
+  canReorderContentBindingDefault: SC.Binding.bool(),
+  
+  /**
+    Allow the user to delete items using the delete key
+    
+    If true the user will be allowed to delete selected items using the delete
+    key.  Otherwise deletes will not be permitted.
+    
+    @type {Boolean}
+  */
+  canDeleteContent: NO,
+  
+  /** @private */
+  canDeleteContentBindingDefault: SC.Binding.bool(),
+  
+  /**
+    Allow user to edit the content by double clicking on it or hitting return.
+    This will only work if isEditable is YES and the item view implements 
+    the beginEditing() method.
+    
+    @type {Boolean}
+  */
+  canEditContent: NO,
+  
+  /** @private */
+  canEditContentBindingDefault: SC.Binding.bool(),
+  
+  /**
+    Accept drops for data other than reordering.
+    
+    Setting this property to return true when the view is instantiated will 
+    cause it to be registered as a drop target, activating the other drop 
+    machinery.
+    
+    @type {Boolean}
+  */
+  isDropTarget: NO,
+  
+  /**
+    Use toggle selection instead of normal click behavior.
+    
+    If set to true, then selection will use a toggle instead of the normal
+    click behavior.  Command modifiers will be ignored and instead clicking
+    once will select an item and clicking on it again will deselect it.
+    
+    @type {Boolean}
+  */
+  useToggleSelection: NO,
+  
+  /**
+    Trigger the action method on a single click.
+    
+    Normally, clicking on an item view in a collection will select the content 
+    object and double clicking will trigger the action method on the 
+    collection view.
+    
+    If you set this property to YES, then clicking on a view will both select 
+    it (if isSelected is true) and trigger the action method.  
+    
+    Use this if you are using the collection view as a menu of items.
+    
+    @property {Boolean}
+  */  
+  actOnSelect: NO,
+  
+  
+  /**
+    Select an item immediately on mouse down
+    
+    Normally as soon as you begin a click the item will be selected.
+    
+    In some UI scenarios, you might want to prevent selection until
+    the mouse is released, so you can perform, for instance, a drag operation
+    without actually selecting the target item.  
+    
+    @property {Boolean}
+  */  
+  selectOnMouseDown: YES,
+  
+  /**
+    The view class to use when creating new item views.
+    
+    The collection view will automatically create an instance of the view 
+    class you set here for each item in its content array.  You should provide 
+    your own subclass for this property to display the type of content you 
+    want.
+    
+    For best results, the view you set here should understand the following 
+    properties:
+    
+    - *content* The content object from the content array your view should display
+    - *isEnabled* True if the view should appear enabled
+    - *isSelected* True if the view should appear selected
+    
+    In general you do not want your child views to actually respond to mouse 
+    and keyboard events themselves.  It is better to let the collection view 
+    do that.
+    
+    If you do implement your own event handlers such as mouseDown or mouseUp, 
+    you should be sure to actually call the same method on the collection view 
+    to give it the chance to perform its own selection housekeeping.
+    
+    @property {SC.View}
+  */
+  exampleView: SC.ListItemView,
+  
+  /**
+    If set, this key will be used to get the example view for a given
+    content object.  The exampleView property will be ignored.
+    
+    @property {String}
+  */
+  contentExampleViewKey: null,
+
+  /**
+    The view class to use when creating new group item views.
+    
+    The collection view will automatically create an instance of the view 
+    class you set here for each item in its content array.  You should provide 
+    your own subclass for this property to display the type of content you 
+    want.
+    
+    If you leave this set to null then the regular example view will be used
+    with the isGroupView property set to YES on the item view.
+    
+    @property {SC.View}
+  */
+  groupExampleView: null,
+  
+  /**
+    If set, this key will be used to get the example view for a given
+    content object.  The groupExampleView property will be ignored.
+    
+    @property {String}
+  */
+  contentGroupExampleViewKey: null,
+  
+  /**
+    Invoked when the user double clicks on an item (or single clicks of 
+    actOnSelect is true)
+    
+    Set this to the name of the action you want to send down the
+    responder chain when the user double clicks on an item (or single clicks 
+    if actOnSelect is true).  You can optionally specify a specific target as 
+    well using the target property.
+    
+    If you do not specify an action, then the collection view will also try to 
+    invoke the action named on the target item view.
+    
+    Older versions of SproutCore expected the action property to contain an 
+    actual function that would be run.  This format is still supported but is 
+    deprecated for future use.  You should generally use the responder chain 
+    to handle your action for you.
+    
+    @property {String}
+  */  
+  action: null,
+  
+  /**
+    Optional target to send the action to when the user double clicks.
+    
+    If you set the action 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.  
+    
+    This property is ignored if you use the deprecated approach of making the
+    action property a function.
+    
+    @property {String|Object}
+  */
+  target: null,
+  
+  /** 
+    Property on content items to use for display.
+    
+    Built-in item views such as the LabelViews and ImageViews will use the
+    value of this property as a key on the content object to determine the
+    value they should display.
+    
+    For example, if you set contentValueKey to 'name' and set the 
+    exampleView to an SC.LabelView, then the label views created by the 
+    colleciton view will display the value of the content.name.
+    
+    If you are writing your own custom item view for a collection, you can
+    get this behavior automatically by including the SC.Control mixin on your
+    view.  You can also ignore this property if you like.  The collection view
+    itself does not use this property to impact rendering.
+    
+    @property {String}
+  */
+  contentValueKey: null,
+  
+  /**
+    Enables keyboard-based navigate, deletion, etc. if set to true.
+  */
+  acceptsFirstResponder: NO,
+  
+  // ..........................................................
+  // SUBCLASS METHODS
+  // 
+  
+  /**
+    Override to return the computed layout dimensions of the collection view.
+    You can omit any dimensions you don't care about setting in your 
+    computed value.
+    
+    This layout is automatically applied whenever the content changes.
+    
+    If you don't care about computing the layout at all, you can return null.
+    
+    @returns {Hash} layout properties
+  */
+  computeLayout: function() { return null; },
+  
+  /**
+    Override to compute the layout of the itemView for the content at the 
+    specified index.  This layout will be applied to the view just before it
+    is rendered.
+    
+    @param {Number} contentIndex the index of content beind rendered by
+      itemView
+    @returns {Hash} a view layout
+  */
+  layoutForContentIndex: function(contentIndex) {
+    return null ;
+  },
+  
+  /**
+    Override to return an IndexSet with the indexes that are at least 
+    partially visible in the passed rectangle.  This method is used by the 
+    default implementation of computeNowShowing() to determine the new 
+    nowShowing range after a scroll.
+    
+    Override this method to implement incremental rendering.
+    
+    The default simply returns the current content length.
+    
+    @param {Rect} rect the visible rect
+    @returns {SC.IndexSet} now showing indexes
+  */
+  contentIndexesInRect: function(rect) {
+    return SC.IndexSet.create(0, this.get('length'));    
+  },
+  
+  /**
+    Compute the nowShowing index set.  The default implementation simply 
+    returns the full range.  Override to implement incremental rendering.
+    
+    You should not normally call this method yourself.  Instead get the 
+    nowShowing property.
+    
+    @returns {SC.IndexSet} new now showing range
+  */
+  computeNowShowing: function() {
+    var r = this.contentIndexesInRect(this.get('clippingFrame')),
+        content = SC.makeArray(this.get('content')),
+        len     = content.get('length');
+         
+    // default show all.
+    if (!r) r = SC.IndexSet.create(0, len);
+
+    // make sure the index set doesn't contain any indexes greater than the
+    // actual content.
+    if (r.get('max') > len) r.remove(len, r.get('max')-len);
+    
+    return r ;
+  },
+  
+  /** 
+    Override to show the insertion point during a drag.
+    
+    Called during a drag to show the insertion point.  Passed value is the
+    item view that you should display the insertion point before.  If the
+    passed value is null, then you should show the insertion point AFTER that
+    last item view returned by the itemViews property.
+    
+    Once this method is called, you are guaranteed to also recieve a call to
+    hideInsertionPoint() at some point in the future.
+    
+    The default implementation of this method does nothing.
+    
+    @param itemView {SC.ClassicView} view the insertion point should appear directly before. If null, show insertion point at end.
+    @param dropOperation {Number} the drop operation.  will be SC.DROP_BEFORE, SC.DROP_AFTER, or SC.DROP_ON
+    
+    @returns {void}
+  */
+  showInsertionPoint: function(itemView, dropOperation) {
+  },
+  
+  /**
+    Override to hide the insertion point when a drag ends.
+    
+    Called during a drag to hide the insertion point.  This will be called 
+    when the user exits the view, cancels the drag or completes the drag.  It 
+    will not be called when the insertion point changes during a drag.
+    
+    You should expect to receive one or more calls to 
+    showInsertionPointBefore() during a drag followed by at least one call to 
+    this method at the end.  Your method should not raise an error if it is 
+    called more than once.
+    
+    @returns {void}
+  */
+  hideInsertionPoint: function() {
+  },
+  
+  // ..........................................................
+  // DELEGATE SUPPORT
+  // 
+  
+  
+  /**
+    Delegate used to implement fine-grained control over collection view 
+    behaviors.
+    
+    You can assign a delegate object to this property that will be consulted
+    for various decisions regarding drag and drop, selection behavior, and
+    even rendering.  The object you place here must implement some or all of
+    the SC.CollectionViewDelegate mixin.
+    
+    If you do not supply a delegate but the content object you set implements 
+    the SC.CollectionViewDelegate mixin, then the content will be 
+    automatically set as the delegate.  Usually you will work with a 
+    CollectionView in this way rather than setting a delegate explicitly.
+    
+    @type {SC.CollectionViewDelegate}
+  */
+  delegate: null,
+  
+  /**
+    The delegate responsible for handling selection changes.  This property
+    will be either the delegate, content, or the collection view itself, 
+    whichever implements the SC.CollectionViewDelegate mixin.
+    
+    @property
+    @type {Object}
+  */
+  selectionDelegate: function() {
+    var del = this.get('delegate'), content = this.get('content');
+    return this.delegateFor('isCollectionViewDelegate', del, content);  
+  }.property('delegate', 'content').cacheable(),
+  
+  /**
+    The delegate responsible for providing additional display information 
+    about the content.  If you bind a collection view to a controller, this
+    the content will usually also be the content delegate, though you 
+    could implement your own delegate if you prefer.
+    
+    @property
+    @type {Object}
+  */
+  contentDelegate: function() {
+    var del = this.get('delegate'), content = this.get('content');
+    return this.delegateFor('isCollectionContent', del, content);
+  }.property('delegate', 'content').cacheable(),
+  
+  // ..........................................................
+  // CONTENT CHANGES
+  // 
+  
+  /**
+    Called whenever the content array or an item in the content array or a
+    property on an item in the content array changes.  Reloads the appropriate
+    item view when the content array itself changes or calls 
+    contentPropertyDidChange() if a property changes.
+    
+    Normally you will not call this method directly though you may override
+    it if you need to change the way changes to observed ranges are handled.
+    
+    @param {SC.Array} content the content array generating the change
+    @param {Object} object the changed object
+    @param {String} key the changed property or '[]' or an array change
+    @param {SC.IndexSet} indexes affected indexes or null for all items
+    @returns {void}
+  */
+  contentRangeDidChange: function(content, object, key, indexes) {
+    if (!object && (key === '[]')) {
+      this.reload(indexes); // note: if indexes == null, reloads all
+    } else {
+      this.contentPropertyDidChange(object, key, indexes);
+    }
+  },
+
+  /**
+    Called whenever a property on an item in the content array changes.  This
+    is only called if you have set observesContentProperties to YES.
+    
+    Override this property if you want to do some custom work whenever a 
+    property on a content object changes.
+
+    The default implementation does nothing.
+    
+    @param {Object} target the object that changed
+    @param {String} key the property that changed value
+    @param {SC.IndexSet} indexes the indexes in the content array affected
+    @returns {void}
+  */
+  contentPropertyDidChange: function(target, key, indexes) {
+    // Default Does Nothing
+  },
+  
+  /**
+    Called whenever the view needs to updates it's contentRangeObserver to 
+    reflect the current nowShowing index set.  You will not usually call this
+    method yourself but you may override it if you need to provide some 
+    custom range observer behavior.
+
+    Note that if you do implement this method, you are expected to maintain
+    the range observer object yourself.  If a range observer has not been
+    created yet, this method should create it.  If an observer already exists
+    this method should udpate it.
+    
+    When you create a new range observer, the oberver must eventually call
+    contentRangeDidChange() for the collection view to function properly.
+    
+    If you override this method you probably also need to override 
+    destroyRangeObserver() to cleanup any existing range observer.
+    
+    @returns {void}
+  */
+  updateContentRangeObserver: function() {
+    var nowShowing = this.get('nowShowing'),
+        observer   = this._cv_contentRangeObserver,
+        content    = this.get('content');
+    
+    if (!content) return ; // nothing to do
+    
+    if (observer) {
+      content.updateRangeObserver(observer, nowShowing);
+    } else {
+      var func = this.contentRangeDidChange;
+      observer = content.addRangeObserver(nowShowing, this, func, null);      
+      this._cv_contentRangeObserver = observer ;
+    }
+    
+  },
+  
+  /**
+    Called whever the view needs to invalidate the current content range 
+    observer.  This is called whenever the content array changes.  You will 
+    not usually call this method yourself but you may override it if you 
+    provide your own range observer behavior.
+
+    Note that if you override this method you should probably also override
+    updateRangeObserver() to create or update a range oberver as needed.
+    
+    @returns {void}
+  */
+  removeContentRangeObserver: function() {
+    var content  = this.get('content'),
+        observer = this._cv_contentRangeObserver ;
+        
+    if (observer) {
+      if (content) content.removeRangeObserver(observer);
+      this._cv_contentRangeObserver = null ;
+    }
+  },
+    
+  /**
+    Called whenever the content length changes.  This will invalidate the 
+    length property of the view itself causing the nowShowing to recompute
+    which will in turn update the UI accordingly.
+    
+    @returns {void}
+  */
+  contentLengthDidChange: function() {
+    var content = this.get('content');
+    this.set('length', content ? content.get('length') : 0);
+  },
+  
+  /** @private
+    Whenever content property changes to a new value:
+    
+     - remove any old observers 
+     - setup new observers (maybe wait until end of runloop to do this?)
+     - recalc height/reload content
+     - set content as delegate if delegate was old content
+     - reset selection
+     
+    Whenever content array mutates:
+    
+     - possibly stop observing property changes on objects, observe new objs
+     - reload effected item views
+     - update layout for receiver
+  */
+  _cv_contentDidChange: function() {
+    var content = this.get('content'),
+        lfunc   = this.contentLengthDidChange ;
+
+    if (content === this._content) return this; // nothing to do
+
+    // cleanup old content
+    this.removeContentRangeObserver();
+    if (this._content) {
+      this._content.removeObserver('length', this, lfunc);
+    }
+    
+    // cache
+    this._content = content;
+    
+    // add new observers - range observer will be added lazily
+    if (content) {
+      content.addObserver('length', this, lfunc);
+    }
+    
+    // notify all items changed
+    this.contentLengthDidChange();
+    this.contentRangeDidChange(content, null, '[]', null);
+    
+  }.observes('content'),
+  
+  // ..........................................................
+  // ITEM VIEWS
+  // 
+  
+  /** @private
+  
+    The indexes that need to be reloaded.  Must be one of YES, NO, or an
+    SC.IndexSet.
+  
+  */
+  _invalidIndexes: NO,
+  
+  /** 
+    Regenerates the item views for the content items at the specified indexes.
+    If you pass null instead of an index set, regenerates all item views.
+    
+    This method is called automatically whenever the content array changes in
+    an observable way, but you can call its yourself also if you need to 
+    refresh the collection view for some reason.
+    
+    Note that if the length of the content is shorter than the child views
+    and you call this method, then the child views will be removed no matter
+    what the index.
+    
+    @param {SC.IndexSet} indexes
+    @returns {SC.CollectionView} receiver
+  */
+  reload: function(indexes) {
+    var invalid = this._invalidIndexes ;
+    if (indexes && invalid !== YES) {
+      if (invalid) invalid.add(indexes);
+      else invalid = this._invalidIndexes = indexes.clone();
+
+    } else this._invalidIndexes = YES ; // force a total reload
+    
+    if (this.get('isVisibleInWindow')) this.invokeOnce(this.reloadIfNeeded);
+    
+    return this ;
+  },
+
+  /** 
+    Invoked once per runloop to actually reload any needed item views.
+    You can call this method at any time to actually force the reload to
+    happen immediately if any item views need to be reloaded.
+    
+    Note that this method will also invoke two other callback methods if you
+    define them on your subclass:
+    
+    - *willReload()* is called just before the items are reloaded
+    - *didReload()* is called jsut after items are reloaded
+    
+    You can use these two methods to setup and teardown caching, which may
+    reduce overall cost of a reload.  Each method will be passed an index set
+    of items that are reloaded or null if all items are reloaded.
+    
+    @returns {SC.CollectionView} receiver
+  */
+  reloadIfNeeded: function() {
+    var invalid = this._invalidIndexes;
+    if (!invalid || !this.get('isVisibleInWindow')) return this ; // delay
+    this._invalidIndexes = NO ;
+    
+    var content = this.get('content'),
+        len     = content ? content.get('length'): 0,
+        layout  = this.computeLayout(),
+        bench   = SC.BENCHMARK_RELOAD,
+        nowShowing = this.get('nowShowing'),
+        itemViews  = this._sc_itemViews,
+        containerView = this.get('containerView') || this,
+        views, idx, cvlen, view, childViews, layer ;
+
+    // if the set is defined but it contains the entire nowShowing range, just
+    // replace
+    if (invalid.isIndexSet && invalid.contains(nowShowing)) invalid = YES ;
+    if (this.willReload) this.willReload(invalid === YES ? null : invalid);
+
+    // if an index set, just update indexes
+    if (invalid.isIndexSet) {
+      childViews = containerView.get('childViews');
+      cvlen = childViews.get('length');
+      
+      if (bench) {
+        SC.Benchmark.start(bench="%@#reloadIfNeeded (Partial)".fmt(this),YES);
+      }
+      
+      invalid.forEach(function(idx) {
+        
+        // get the existing item view, if there is one
+        var existing = itemViews ? itemViews[idx] : null;
+        
+        // if nowShowing, then reload the item view.
+        if (nowShowing.contains(idx)) {
+          view = this.itemViewForContentIndex(idx, YES);
+          if (existing && existing.parentView === containerView) {
+    
+            // if the existing view has a layer, remove it immediately from
+            // the parent.  This is necessary because the old and new views 
+            // will use the same layerId
+            layer = existing.get('layer');
+            if (layer && layer.parentNode) {
+              layer.parentNode.removeChild(layer);  
+            } 
+            layer = null ; // avoid leaks
+            
+            containerView.replaceChild(view, existing);
+          } else {
+            containerView.appendChild(view);
+          }
+          
+        // if not nowShowing, then remove the item view if needed
+        } else if (existing && existing.parentView === containerView) {
+          delete itemViews[idx];
+          containerView.removeChild(existing);
+        }
+      },this);
+
+      if (bench) SC.Benchmark.end(bench);
+      
+    // if set is NOT defined, replace entire content with nowShowing
+    } else {
+
+      if (bench) {
+        SC.Benchmark.start(bench="%@#reloadIfNeeded (Full)".fmt(this),YES);
+      }
+
+      // truncate cached item views since they will all be removed from the
+      // container anyway.
+      if (itemViews) itemViews.length = 0 ; 
+      
+      views = [];
+      nowShowing.forEach(function(idx) {
+        views.push(this.itemViewForContentIndex(idx, YES));
+      }, this);
+
+      // below is an optimized version of:
+      //this.replaceAllChildren(views);
+      containerView.beginPropertyChanges();
+      containerView.destroyLayer().removeAllChildren();
+      containerView.set('childViews', views); // quick swap
+      containerView.replaceLayer();
+      containerView.endPropertyChanges();
+      
+      if (bench) SC.Benchmark.end(bench);
+      
+    }
+    
+    // adjust my own layout if computed
+    if (layout) this.adjust(layout);
+    if (this.didReload) this.didReload(invalid === YES ? null : invalid);
+    
+    
+    return this ;
+  },
+  
+  displayProperties: 'isFirstResponder isEnabled isActive'.w(),
+  
+  /** @private
+    If we're asked to render the receiver view for the first time but the 
+    child views still need to be added, go ahead and add them.
+  */
+  render: function(context, firstTime) {
+    if (firstTime && this._needsReload) this.reloadIfNeeded ;
+    
+    // add classes for other state.
+    context.setClass('focus', this.get('isFirstResponder'));
+    context.setClass('disabled', !this.get('isEnabled'));
+    context.setClass('active', this.get('isActive'));
+
+    return sc_super();
+  },
+    
+
+  _TMP_ATTRS: {},
+  _COLLECTION_CLASS_NAMES: 'sc-collection-item'.w(),
+  _GROUP_COLLECTION_CLASS_NAMES: 'sc-collection-item sc-group-item'.w(),
+  
+  /**
+    Returns the item view for the content object at the specified index. Call
+    this method instead of accessing child views directly whenever you need 
+    to get the view associated with a content index.
+
+    Although this method take two parameters, you should almost always call
+    it with just the content index.  The other two parameters are used 
+    internally by the CollectionView.
+    
+    If you need to change the way the collection view manages item views
+    you can override this method as well.  If you just want to change the
+    default options used when creating item views, override createItemView()
+    instead.
+  
+    Note that if you override this method, then be sure to implement this 
+    method so that it uses a cache to return the same item view for a given
+    index unless "force" is YES.  In that case, generate a new item view and
+    replace the old item view in your cache with the new item view.
+
+    @param {Number} idx the content index
+    @param {Boolean} rebuild internal use only
+    @returns {SC.View} instantiated view
+  */
+  itemViewForContentIndex: function(idx, rebuild) {
+
+    // return from cache if possible
+    var content   = this.get('content'),
+        itemViews = this._sc_itemViews,
+        item = content.objectAt(idx),
+        del  = this.get('contentDelegate'),
+        groupIndexes = del.contentGroupIndexes(this, content),
+        isGroupView = NO,
+        key, ret, E, layout, layerId;
+
+    // use cache if available
+    if (!itemViews) itemViews = this._sc_itemViews = [] ;
+    if (!rebuild && (ret = itemViews[idx])) return ret ; 
+
+    // otherwise generate...
+    
+    // first, determine the class to use
+    isGroupView = groupIndexes && groupIndexes.contains(idx);
+    if (isGroupView) isGroupView = del.contentIndexIsGroup(this, content,idx);
+    if (isGroupView) {
+      key  = this.get('contentGroupExampleViewKey');
+      if (key && item) E = item.get(key);
+      if (!E) E = this.get('groupExampleView') || this.get('exampleView');
+
+    } else {
+      key  = this.get('contentExampleViewKey');
+      if (key && item) E = item.get(key);
+      if (!E) E = this.get('exampleView');
+    }
+
+    // collect some other state
+    var attrs = this._TMP_ATTRS;
+    attrs.contentIndex = idx;
+    attrs.content      = item ;
+    attrs.owner        = attrs.displayDelegate = this;
+    attrs.parentView   = this.get('containerView') || this ;
+    attrs.page         = this.page ;
+    attrs.layerId      = this.layerIdFor(idx, item);
+    attrs.isEnabled    = del.contentIndexIsEnabled(this, content, idx);
+    attrs.isSelected   = del.contentIndexIsSelected(this, content, idx);
+    attrs.outlineLevel = del.contentIndexOutlineLevel(this, content, idx);
+    attrs.disclosureState = del.contentIndexDisclosureState(this, content, idx);
+    attrs.isGroupView  = isGroupView;
+    attrs.isVisibleInWindow = this.isVisibleInWindow;
+    if (isGroupView) attrs.classNames = this._GROUP_COLLECTION_CLASS_NAMES;
+    else attrs.classNames = this._COLLECTION_CLASS_NAMES;
+    
+    layout = this.layoutForContentIndex(idx);
+    if (layout) {
+      attrs.layout = layout;
+    } else {
+      delete attrs.layout ;
+    }
+    
+    ret = this.createItemView(E, idx, attrs);
+    itemViews[idx] = ret ;
+    return ret ;
+  },
+  
+  _TMP_LAYERID: [],
+  
+  /**
+    Primitive to instantiate an item view.  You will be passed the class 
+    and a content index.  You can override this method to perform any other
+    one time setup.
+
+    Note that item views may be created somewhat frequently so keep this fast.
+
+    *IMPORTANT:* The attrs hash passed is reused each time this method is 
+    called.   If you add properties to this hash be sure to delete them before
+    returning from this method.
+    
+    @param {Class} exampleClass example view class
+    @param {Number} idx the content index
+    @param {Hash} attrs expected attributes
+    @returns {SC.View} item view instance
+  */ 
+  createItemView: function(exampleClass, idx, attrs) {
+    return exampleClass.create(attrs);
+  },
+
+  /**
+    Generates a layerId for the passed index and item.  Usually the default
+    implementation is suitable.
+    
+    @param {Number} idx the content index
+    @returns {String} layer id, must be suitable for use in HTML id attribute
+  */
+  layerIdFor: function(idx) {  
+    var ret = this._TMP_LAYERID;
+    ret[0] = SC.guidFor(this);
+    ret[1] = idx;
+    return ret.join('-');
+  },
+  
+  /**
+    Extracts the content index from the passed layerID.  If the layer id does
+    not belong to the receiver or if no value could be extracted, returns NO.
+    
+    @param {String} id the layer id
+  */
+  contentIndexForLayerId: function(id) {
+    if (!id || !(id = id.toString())) return null ; // nothing to do
+    
+    var base = this._baseLayerId;
+    if (!base) base = this._baseLayerId = SC.guidFor(this)+"-";
+    
+    // no match
+    if ((id.length <= base.length) || (id.indexOf(base) !== 0)) return null ; 
+    var ret = Number(id.slice(id.lastIndexOf('-')+1));
+    return isNaN(ret) ? null : ret ;
+  },
+  
+
+  /** 
+    Find the first content item view for the passed event.
+    
+    This method will go up the view chain, starting with the view that was the 
+    target of the passed event, looking for a child item.  This will become 
+    the view that is selected by the mouse event.
+    
+    This method only works for mouseDown & mouseUp events.  mouseMoved events 
+    do not have a target.
+    
+    @param {SC.Event} evt An event
+    @returns {SC.View} the item view or null
+  */
+  itemViewForEvent: function(evt) {
+    var responder = this.getPath('pane.rootResponder') ;
+    if (!responder) return null ; // fast path
+    
+    var base    = SC.guidFor(this) + '-',
+        baseLen = base.length,
+        element = evt.target,
+        layer   = this.get('layer'),
+        contentIndex = null,
+        id, itemView, ret ;
+        
+    // walk up the element hierarchy until we find this or an element with an
+    // id matching the base guid (i.e. a collection item)
+    while (element && element !== document && element !== layer) {
+      id = element ? element.getAttribute('id') : null ;
+      if (id && (contentIndex = this.contentIndexForLayerId(id)) !== null) {
+          break;
+      }
+      element = element.parentNode ; 
+    }
+    
+    // no matching element found? 
+    if (contentIndex===null || (element === layer)) {
+      element = layer = null; // avoid memory leaks 
+      return null;    
+    }
+    
+    // okay, found the DOM node for the view, go ahead and create it
+    // first, find the contentIndex
+    if (contentIndex >= this.get('length')) {
+      throw "layout for item view %@ was found when item view does not exist (%@)".fmt(id, this);
+    }
+    
+    return this.itemViewForContentIndex(contentIndex);
+  },
+  
+  // ..........................................................
+  // DISCLOSURE SUPPORT
+  // 
+  
+  /**
+    Expands any items in the passed selection array that have a disclosure
+    state.
+    
+    @param {SC.IndexSet} indexes the indexes to expand
+    @returns {SC.CollectionView} receiver
+  */
+  expand: function(indexes) {
+    if (!indexes) return this; // nothing to do
+    var del     = this.get('contentDelegate'),
+        content = this.get('content');
+        
+    indexes.forEach(function(i) { 
+      var state = del.contentIndexDisclosureState(this, content, i);
+      if (state === SC.BRANCH_CLOSED) del.contentIndexExpand(this,content,i);
+    }, this);
+    return this;
+  },
+
+  /**
+    Collapses any items in the passed selection array that have a disclosure
+    state.
+    
+    @param {SC.IndexSet} indexes the indexes to expand
+    @returns {SC.CollectionView} receiver
+  */
+  collapse: function(indexes) {
+    if (!indexes) return this; // nothing to do
+    var del     = this.get('contentDelegate'),
+        content = this.get('content');
+        
+    indexes.forEach(function(i) { 
+      var state = del.contentIndexDisclosureState(this, content, i);
+      if (state === SC.BRANCH_OPEN) del.contentIndexCollapse(this,content,i);
+    }, this);
+    return this;
+  },
+  
+  // ..........................................................
+  // SELECTION SUPPORT
+  // 
+  
+  /** @private 
+
+    Called whenever the selection object is changed to a new value.  Begins
+    observing the selection for changes.
+    
+  */
+  _cv_selectionDidChange: function() {  
+    var sel  = this.get('selection'),
+        last = this._cv_selection,
+        func = this._cv_selectionContentDidChange;
+        
+    if (sel === last) return this; // nothing to do
+    if (last) last.removeObserver('[]', this, func);
+    if (sel) sel.addObserver('[]', this, func);
+    
+    this._cv_selection = sel ;
+    this._cv_selectionContentDidChange();
+  }.observes('selection'),
+
+  /** @private
+  
+    Called whenever the selection object or its content changes.  This will
+    repaint any items that changed their selection state.
+  
+  */
+  _cv_selectionContentDidChange: function() {
+    var sel  = this.get('selection'),
+        last = this._cv_selindexes, // clone of last known indexes
+        content = this.get('content'),
+        diff ;
+
+    // save new last
+    this._cv_selindexes = sel ? sel.frozenCopy() : null;
+
+    // determine which indexes are now invalid
+    if (last) last = last.indexSetForSource(content);
+    if (sel) sel = sel.indexSetForSource(content);
+    
+    if (sel && last) diff = sel.without(last).add(last.without(sel));
+    else diff = sel || last;
+
+    if (diff && diff.get('length')>0) this.reloadSelectionIndexes(diff);
+  },
+  
+  /** @private
+    Contains the current item views that need their selection to be repainted.
+    This may be either NO, YES, or an IndexSet.
+  */
+  _invalidSelection: NO,
+  
+  /**
+    Called whenever the selection changes.  The passed index set will contain
+    any affected indexes including those indexes that were previously 
+    selected and now should be deselected.
+    
+    Pass null to reload the selection state for all items.
+    
+    @param {SC.IndexSet} indexes affected indexes
+    @returns {SC.CollectionView} reciever
+  */
+  reloadSelectionIndexes: function(indexes) {
+    var invalid = this._invalidSelection ;
+    if (indexes && (invalid !== YES)) {
+      if (invalid) invalid.add(indexes)
+      else invalid = this._invalidSelection = indexes.copy();
+
+    } else this._invalidSelection = YES ; // force a total reload
+    
+    if (this.get('isVisibleInWindow')) {
+      this.invokeOnce(this.reloadSelectionIndexesIfNeeded);
+    } 
+    
+    return this ;
+  },
+
+  /**
+    Reloads the selection state if needed on any dirty indexes.  Normally this
+    will run once at the end of the runloop, but you can force the item views
+    to reload their selection immediately by calling this method.
+    
+    You can also override this method if needed to change the way the 
+    selection is reloaded on item views.  The default behavior will simply
+    find any item views in the nowShowing range that are affected and 
+    modify them.
+    
+    @returns {SC.CollectionView} receiver
+  */
+  reloadSelectionIndexesIfNeeded: function() {
+    var invalid = this._invalidSelection;
+    if (!invalid || !this.get('isVisibleInWindow')) return this ; 
+
+    var nowShowing = this.get('nowShowing'),
+        reload     = this._invalidIndexes,
+        content    = this.get('content'),
+        sel        = this.get('selection');
+    
+    this._invalidSelection = NO; // reset invalid
+    
+    // fast path.  if we are going to reload everything anyway, just forget
+    // about it.  Also if we don't have a nowShowing, nothing to do.
+    if (reload === YES || !nowShowing) return this ;
+    
+    // if invalid is YES instead of index set, just reload everything 
+    if (invalid === YES) invalid = nowShowing;
+
+    // if we will reload some items anyway, don't bother
+    if (reload && reload.isIndexSet) invalid = invalid.without(reload);
+
+    // iterate through each item and set the isSelected state.
+    invalid.forEach(function(idx) {
+      if (!nowShowing.contains(idx)) return; // not showing
+      var view = this.itemViewForContentIndex(idx, NO);
+      if (view) view.set('isSelected', sel ? sel.contains(content, idx) : NO);
+    },this);
+    
+    return this ;
+  },
+  
+  /** 
+    Selection primitive.  Selects the passed IndexSet of items, optionally 
+    extending the current selection.  If extend is NO or not passed then this
+    will replace the selection with the passed value.  Otherwise the indexes
+    will be added to the current selection.
+    
+    @param {Number|SC.IndexSet} indexes index or indexes to select
+    @param extend {Boolean} optionally extend the selection
+    @returns {SC.CollectionView} receiver
+  */
+  select: function(indexes, extend) {
+
+    var content = this.get('content'),
+        del     = this.get('selectionDelegate'),
+        cdel    = this.get('contentDelegate'),
+        groupIndexes = cdel.contentGroupIndexes(this, content),
+        sel;
+
+    // normalize
+    if (SC.typeOf(indexes) === SC.T_NUMBER) {
+      indexes = SC.IndexSet.create(indexes, 1);
+    }
+
+    // if we are passed an empty index set or null, clear the selection.
+    if (indexes && indexes.get('length')>0) {
+
+      // first remove any group indexes - these can never be selected
+      if (groupIndexes && groupIndexes.get('length')>0) {
+        indexes = indexes.copy().remove(groupIndexes);
+      }
+      
+      // give the delegate a chance to alter the items
+      indexes = del.collectionViewShouldSelectIndexes(this, indexes, extend);
+      if (!indexes || indexes.get('length')===0) return this; // nothing to do
+    
+    } else indexes = null;
+
+    // build the selection object, merging if needed
+    if (extend && (sel = this.get('selection'))) sel = sel.copy();
+    else sel = SC.SelectionSet.create();
+    if (indexes) sel.add(content, indexes);
+
+    // give delegate one last chance
+    sel = del.collectionViewSelectionForProposedSelection(this, sel);
+    if (!sel) sel = SC.SelectionSet.create(); // empty
+    
+    // if we're not extending the selection, clear the selection anchor
+    this._selectionAnchor = null ;
+    this.set('selection', sel.freeze()) ;  
+    return this;
+  },
+  
+  /** 
+    Primtive to remove the indexes from the selection.  
+    
+    @param {Number|SC.IndexSet} indexes index or indexes to select
+    @returns {SC.CollectionView} receiver
+  */
+  deselect: function(indexes) {
+
+    var sel     = this.get('selection'),
+        content = this.get('content'),
+        del     = this.get('selectionDelegate');
+        
+    if (!sel || sel.get('length')===0) return this; // nothing to do
+        
+    // normalize
+    if (SC.typeOf(indexes) === SC.T_NUMBER) {
+      indexes = SC.IndexSet.create(indexes, 1);
+    }
+
+    // give the delegate a chance to alter the items
+    indexes = del.collectionViewShouldDeselectIndexes(this, indexes) ;
+    if (!indexes || indexes.get('length')===0) return this; // nothing to do
+
+    // now merge change - note we expect sel && indexes to not be null
+    sel = sel.copy().remove(content, indexes);
+    sel = del.collectionViewSelectionForProposedSelection(this, sel);
+    if (!sel) sel = SC.SelectionSet.create(); // empty
+
+    this.set('selection', sel.freeze()) ;
+    return this ;
+  },
+  
+  /** @private
+   Finds the next selectable item, up to content length, by asking the
+   delegate. If a non-selectable item is found, the index is skipped. If
+   no item is found, selection index is returned unmodified.
+
+   Return value will always be in the range of the bottom of the current 
+   selection index and the proposed index.   
+   
+   @param {Number} proposedIndex the desired index to select
+   @param {Number} bottom optional bottom of selection use as fallback
+   @returns {Number} next selectable index. 
+  */
+  _findNextSelectableItemFromIndex: function(proposedIndex, bottom) {
+    
+    var lim     = this.get('length'),
+        range   = SC.IndexSet.create(), 
+        content = this.get('content'),
+        del     = this.get('selectionDelegate'),
+        cdel    = this.get('contentDelegate'),
+        groupIndexes = cdel.contentGroupIndexes(this, content),
+        ret, sel ;
+
+    // fast path
+    if (!groupIndexes && (del.collectionViewShouldSelectIndexes === this.collectionViewShouldSelectIndexes)) {
+      return proposedIndex;
+    }
+
+    // loop forwards looking for an index that is allowed by delegate
+    // we could alternatively just pass the whole range but this might be 
+    // slow for the delegate
+    while (proposedIndex < lim) {
+      if (!groupIndexes || !groupIndexes.contains(proposedIndex)) {
+        range.add(proposedIndex);
+        ret = del.collectionViewShouldSelectIndexes(this, range);
+        if (ret && ret.get('length') >= 1) return proposedIndex ;
+        range.remove(proposedIndex);
+      }
+      proposedIndex++;      
+    }
+
+    // if nothing was found, return top of selection
+    if (bottom === undefined) {
+      sel = this.get('selection');
+      bottom = sel ? sel.get('max') : -1 ;
+    }
+    return bottom ;
+  },
+  
+  /** @private
+   Finds the previous selectable item, up to the first item, by asking the
+   delegate. If a non-selectable item is found, the index is skipped. If
+   no item is found, selection index is returned unmodified.
+   
+   @param {Integer} proposedIndex the desired index to select
+   @returns {Integer} the previous selectable index. This will always be in the range of the top of the current selection index and the proposed index.
+   @private
+  */
+  _findPreviousSelectableItemFromIndex: function(proposedIndex, top) {
+    var range   = SC.IndexSet.create(), 
+        content = this.get('content'),
+        del     = this.get('selectionDelegate'),
+        cdel    = this.get('contentDelegate'),
+        groupIndexes = cdel.contentGroupIndexes(this, content),
+        ret ;
+
+    if (SC.none(proposedIndex)) proposedIndex = -1;
+    
+    // fast path
+    if (!groupIndexes && (del.collectionViewShouldSelectIndexes === this.collectionViewShouldSelectIndexes)) {
+      return proposedIndex;
+    }
+
+    // loop backwards looking for an index that is allowed by delegate
+    // we could alternatively just pass the whole range but this might be 
+    // slow for the delegate
+    while (proposedIndex >= 0) {
+      if (!groupIndexes || !groupIndexes.contains(proposedIndex)) {
+        range.add(proposedIndex);
+        ret = del.collectionViewShouldSelectIndexes(this, range);
+        if (ret && ret.get('length') >= 1) return proposedIndex ;
+        range.remove(proposedIndex);
+      }
+      proposedIndex--;      
+    }
+
+    // if nothing was found, return top of selection
+    if (top === undefined) {
+      var sel = this.get('selection');
+      top = sel ? sel.get('min') : -1 ;
+    }
+    if (SC.none(top)) top = -1;
+    return top ;
+  },
+  
+  /**
+    Select one or more items before the current selection, optionally
+    extending the current selection.  Also scrolls the selected item into 
+    view.
+    
+    Selection does not wrap around.
+    
+    @param extend {Boolean} (Optional) If true, the selection will be extended 
+      instead of replaced.  Defaults to false.
+    @param numberOfItems {Integer} (Optional) The number of previous to be 
+      selected.  Defaults to 1
+      @returns {SC.CollectionView} receiver
+  */
+  selectPreviousItem: function(extend, numberOfItems) {
+    if (SC.none(numberOfItems)) numberOfItems = 1 ;
+    if (SC.none(extend)) extend = false ;
+    
+    var sel     = this.get('selection'),
+        content = this.get('content');
+    if (sel) sel = sel.indexSetForSource(content);
+    
+    var selTop    = sel ? sel.get('min') : -1,
+        selBottom     = sel ? sel.get('max')-1 : -1,
+        anchor        = this._selectionAnchor;
+    if (SC.none(anchor)) anchor = selTop;
+
+    // if extending, then we need to do some fun stuff to build the array
+    if (extend) {
+
+      // If the selBottom is after the anchor, then reduce the selection
+      if (selBottom > anchor) {
+        selBottom = selBottom - numberOfItems ;
+        
+      // otherwise, select the previous item from the top 
+      } else {
+        selTop = this._findPreviousSelectableItemFromIndex(selTop - numberOfItems);
+      }
+      
+      // Ensure we are not out of bounds
+      if (SC.none(selTop) || (selTop < 0)) selTop = 0 ;
+      if (selBottom < selTop) selBottom = selTop ;
+      
+    // if not extending, just select the item previous to the selTop
+    } else {
+      selTop = this._findPreviousSelectableItemFromIndex(selTop - numberOfItems);
+      if (SC.none(selTop) || (selTop < 0)) selTop = 0 ;
+      selBottom = selTop ;
+      anchor = null ;
+    }
+    
+    var scrollToIndex = selTop ;
+    
+    // now build new selection
+    sel = SC.IndexSet.create(selTop, selBottom+1-selTop);
+    
+    // ensure that the item is visible and set the selection
+    this.scrollToContentIndex(scrollToIndex) ;
+    this.select(sel) ;
+    this._selectionAnchor = anchor ;
+    return this ;
+  },
+  
+  /**
+    Select one or more items folling the current selection, optionally
+    extending the current selection.  Also scrolls to selected item.
+    
+    Selection does not wrap around.
+    
+    @param extend {Boolean} (Optional) If true, the selection will be extended 
+      instead of replaced.  Defaults to false.
+    @param numberOfItems {Integer} (Optional) The number of items to be 
+      selected.  Defaults to 1.
+    @returns {SC.CollectionView} receiver
+  */
+  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,
+        anchor    = this._selectionAnchor,
+        lim       = this.get('length');
+        
+    if (SC.none(anchor)) anchor = selTop;
+
+    // if extending, then we need to do some fun stuff to build the array
+    if (extend) {
+      
+      // If the selTop is before the anchor, then reduce the selection
+      if (selTop < anchor) {
+        selTop = selTop + numberOfItems ;
+        
+      // otherwise, select the next item after the bottom 
+      } else {
+        selBottom = this._findNextSelectableItemFromIndex(selBottom + numberOfItems, selBottom);
+      }
+      
+      // Ensure we are not out of bounds
+      if (selBottom >= lim) selBottom = lim-1;
+      if (selTop > selBottom) selTop = selBottom ;
+      
+    // if not extending, just select the item next to the selBottom
+    } else {
+      selBottom = this._findNextSelectableItemFromIndex(selBottom + numberOfItems, selBottom);
+      
+      if (selBottom >= lim) selBottom = lim-1;
+      selTop = selBottom ;
+      anchor = null ;
+    }
+    
+    var scrollToIndex = selBottom ;
+    
+    // now build new selection
+    sel = SC.IndexSet.create(selTop, selBottom-selTop+1);
+    
+    // ensure that the item is visible and set the selection
+    this.scrollToContentIndex(scrollToIndex) ;
+    this.select(sel) ;
+    this._selectionAnchor = anchor ;
+    return this ;
+  },
+    
+  /**
+    Deletes the selected content if canDeleteContent is YES.  This will invoke 
+    delegate methods to provide fine-grained control.  Returns YES if the 
+    deletion was possible, even if none actually occurred.
+    
+    @returns {Boolean} YES if deletion is possible.
+  */
+  deleteSelection: function() {
+    
+    // perform some basic checks...
+    if (!this.get('canDeleteContent')) return NO;  
+
+    var sel     = this.get('selection'),
+        content = this.get('content'),
+        del     = this.get('selectionDelegate'),
+        indexes = sel&&content ? sel.indexSetForSource(content) : null;
+        
+    if (!content || !indexes || indexes.get('length') === 0) return NO ;
+    
+    // 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 ;
+    
+    // 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);
+    
+    // also, fix up the selection by removing the actual items we removed
+    // set selection directly instead of calling select() since we are just
+    // fixing up the selection.
+    sel = this.get('selection').copy().remove(content, indexes);
+    this.set('selection', sel.freeze());
+    
+    return YES ;
+  },
+  
+  // ..........................................................
+  // SCROLLING
+  // 
+  
+  /**
+    Scroll the rootElement (if needed) to ensure that the item is visible.
+    
+    @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) ;
+    return this; 
+  },
+  
+  /**
+    Scroll to the passed item view.  If the item view is not visible on screen
+    this method will not work.
+
+    @param {SC.View} view The item view to scroll to
+    @returns {SC.CollectionView} receiver
+  */
+  scrollToItemView: function(view) {
+    if (!view.get('parentView')) return this; // nothing to do
+    if (!view.get('layer')) {
+      if (this.get('layer')) view.updateLayerLocation();
+      else return this; // nothing to do
+    }
+    
+    var scrollable = this;
+    while (scrollable && !scrollable.isPane) {
+      if (scrollable.get('isScrollable')) scrollable.scrollToVisible(view);
+      scrollable = scrollable.get('parentView');
+    }
+    return this ;
+  },
+
+  // ..........................................................
+  // KEYBOARD EVENTS
+  // 
+  
+  /** @private */
+  keyDown: function(evt) {
+    var ret = this.interpretKeyEvents(evt) ;
+    return !ret ? NO : ret ;
+  },
+  
+  /** @private */
+  keyUp: function() { return true; },
+  
+  /** @private
+    Handle select all keyboard event.
+  */
+  selectAll: function(evt) {
+    var content = this.get('content'),
+        sel = content ? SC.IndexSet.create(0, content.get('length')) : null;
+    this.select(sel, NO) ;
+    return YES ;
+  },
+  
+  /** @private
+    Handle delete keyboard event.
+  */
+  deleteBackward: function(evt) {
+    return this.deleteSelection() ;
+  },
+  
+  /** @private
+    Handle delete keyboard event.
+  */
+  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) ;
+    this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    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) ;
+    this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    return true ;
+  },
+
+  /** @private
+    Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
+    If item is expandable, will collapse.
+  */
+  moveLeft: function(sender, evt) {
+    if ((this.get('itemsPerRow') || 1) > 1) {
+      this.selectPreviousItem(false, 1);
+      this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    
+    } else {
+      var sel     = this.get('selection'),
+          content = this.get('content'),
+          indexes = sel ? sel.indexSetForSource(content) : null;
+    
+      // Collapse the element if it is expanded.  However, if there is exactly
+      // one item selected and the item is already collapsed or is a leaf
+      // node, then select the (expanded) parent element instead as a
+      // convenience to the user.
+      if ( indexes ) {
+        var del          = undefined,     // We'll load it lazily
+            selectParent = false,
+            index        = undefined;
+
+        if ( indexes.get('length') === 1 ) {
+          index = indexes.get('firstObject');
+          del = this.get('contentDelegate');
+          var state = del.contentIndexDisclosureState(this, content, index);
+          if (state !== SC.BRANCH_OPEN) selectParent = true;
+        }
+    
+        if ( selectParent ) {
+          // TODO:  PERFORMANCE:  It would be great to have a function like
+          //        SC.CollectionView.selectParentItem() or something similar
+          //        for performance reasons.  But since we don't currently
+          //        have such a function, let's just iterate through the
+          //        previous items until we find the first one with a outline
+          //        level of one less than the selected item.
+          var desiredOutlineLevel = del.contentIndexOutlineLevel(this, content, index) - 1;
+          if ( desiredOutlineLevel >= 0 ) {
+            var parentIndex = -1;
+            while ( parentIndex < 0 ) {
+              var previousItemIndex = this._findPreviousSelectableItemFromIndex(index - 1);
+              if (previousItemIndex < 0 ) return false;    // Sanity-check.
+              index = previousItemIndex;
+              var outlineLevel = del.contentIndexOutlineLevel(this, content, index);
+              if ( outlineLevel === desiredOutlineLevel ) {
+                parentIndex = previousItemIndex;
+              }
+            }
+          
+            // If we found the parent, select it now.
+            if ( parentIndex !== -1 ) {
+              this.select(index);
+            }
+          }
+        }
+        else {
+          this.collapse(indexes);
+        }
+      }
+    }
+  
+    return true ;
+  },
+  
+  /** @private
+    Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
+  */
+  moveRight: function(sender, evt) {
+    if ((this.get('itemsPerRow') || 1) > 1) {
+      this.selectNextItem(false, 1) ;
+      this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    } else {
+      var sel     = this.get('selection'),
+          content = this.get('content'),
+          indexes = sel ? sel.indexSetForSource(content) : null;
+      if (indexes) this.expand(indexes);
+    }
+    
+    return true ;
+  },
+  
+  /** @private */
+  moveDownAndModifySelection: function(sender, evt) {
+    this.selectNextItem(true, this.get('itemsPerRow') || 1) ;
+    this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    return true ;
+  },
+  
+  /** @private */
+  moveUpAndModifySelection: function(sender, evt) {
+    this.selectPreviousItem(true, this.get('itemsPerRow') || 1) ;
+    this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    return true ;
+  },
+  
+  /** @private
+    Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
+  */
+  moveLeftAndModifySelection: function(sender, evt) {
+    if ((this.get('itemsPerRow') || 1) > 1) {
+      this.selectPreviousItem(true, 1) ;
+      this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    }
+    return true ;
+  },
+
+  /** @private
+    Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
+  */
+  moveRightAndModifySelection: function(sender, evt) {
+    if ((this.get('itemsPerRow') || 1) > 1) {
+      this.selectNextItem(true, 1) ;
+      this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
+    }
+    return true ;
+  },
+
+  
+  
+  /** @private
+    if content value is editable and we have one item selected, then edit.
+    otherwise, invoke action.
+  */
+  insertNewline: function(sender, evt) {
+    var canEdit = this.get('isEditable') && this.get('canEditContent'),
+        sel, content, set, idx, itemView;
+    
+    // first make sure we have a single item selected; get idx 
+    if (canEdit) {
+      sel     = this.get('selection') ;
+      content = this.get('content');
+      if (sel && sel.get('length') === 1) {
+        set = sel.indexSetForSource(content);
+        idx = set ? set.get('min') : -1;
+        canEdit = idx>=0;
+      }
+    }
+    
+    // next find itemView and ensure it supports editing
+    if (canEdit) {
+      itemView = this.itemViewForContentIndex(idx);
+      canEdit = itemView && SC.typeOf(itemView.beginEditing)===SC.T_FUNCTION;
+    }
+      
+    // ok, we can edit..
+    if (canEdit) {
+      this.scrollToContentIndex(idx);
+      itemView = this.itemViewForContentIndex(idx); // just in case
+      itemView.beginEditing();
+      
+    // invoke action 
+    } else {
+      this.invokeLater(this._cv_action, 0, itemView, null) ;
+    }
+    
+    return YES ; // always handle
+  },
+
+  // ..........................................................
+  // MOUSE EVENTS
+  // 
+  
+  /** @private
+    Handles mouse down events on the collection view or on any of its 
+    children.
+    
+    The default implementation of this method can handle a wide variety
+    of user behaviors depending on how you have configured the various
+    options for the collection view.
+    
+    @param ev {Event} the mouse down event
+    @returns {Boolean} Usually YES.
+  */
+  mouseDown: function(ev) {
+    
+    // When the user presses the mouse down, we don't do much just yet.
+    // Instead, we just need to save a bunch of state about the mouse down
+    // so we can choose the right thing to do later.
+    
+    // Toggle selection only triggers on mouse up.  Do nothing.
+    if (this.get('useToggleSelection')) return true;
+    
+    // find the actual view the mouse was pressed down on.  This will call
+    // hitTest() on item views so they can implement non-square detection
+    // modes. -- once we have an item view, get its content object as well.
+    var itemView      = this.itemViewForEvent(ev),
+        content       = this.get('content'),
+        contentIndex  = itemView ? itemView.get('contentIndex') : -1, 
+        info, anchor ;
+        
+    info = this.mouseDownInfo = {
+      event:        ev,  
+      itemView:     itemView,
+      contentIndex: contentIndex,
+      at:           Date.now()
+    };
+      
+    // become first responder if possible.
+    this.becomeFirstResponder() ;
+    
+    // recieved a mouseDown on the collection element, but not on one of the 
+    // childItems... unless we do not allow empty selections, set it to empty.
+    if (!itemView) {
+      if (this.get('allowDeselectAll')) this.select(null, false);
+      return YES ;
+    }
+    
+    // collection some basic setup info
+    var sel = this.get('selection'), isSelected, modifierKeyPressed;
+    if (sel) sel = sel.indexSetForSource(content);
+    
+    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) {
+      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 (this.get("selectOnMouseDown")) {
+        this.select(contentIndex, modifierKeyPressed);
+      } else {
+        info.shouldSelect = contentIndex >= 0 ;
+      }
+    }
+    
+    // saved for extend by shift ops.
+    info.previousContentIndex = contentIndex;
+    
+    return YES;
+  },
+  
+  /** @private */
+  mouseUp: function(ev) {
+    
+    var view   = this.itemViewForEvent(ev),
+        info   = this.mouseDownInfo,
+        idx    = info.contentIndex,
+        contentIndex, sel, isSelected, canEdit, itemView, content;
+    
+    if (this.get('useToggleSelection')) {
+      if (!view) return ; // do nothing when clicked outside of elements
+      
+      // determine if item is selected. If so, then go on.
+      sel = this.get('selection') ;
+      contentIndex = (view) ? view.get('contentIndex') : -1 ;
+      isSelected = sel && sel.include(contentIndex) ;
+
+      if (isSelected) this.deselect(contentIndex) ;
+      else this.select(contentIndex, YES) ;
+      
+    } else {
+      contentIndex = (view) ? view.get('contentIndex') : -1 ;
+      
+      // 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 with a modifier
+      // key pressed.
+      if (info.shouldDeselect) this.deselect(idx);
+      
+      // This is true if the user clicked on a selected item without a 
+      // modifier-key pressed.  When this happens we try to begin editing 
+      // on the content.  If that is not allowed, then simply clear the 
+      // selection and reselect the clicked on item.
+      if (info.shouldReselect) {
+        
+        //debugger ;
+        // - contentValueIsEditable is true
+        canEdit = this.get('isEditable') && this.get('canEditContent') ;
+        
+        // - the user clicked on an item that was already selected
+        //   ^ this is the only way shouldReset is set to YES
+        
+        // - is the only item selected
+        if (canEdit) {
+          sel = this.get('selection') ;
+          canEdit = sel && (sel.get('length') === 1);
+        }
+        
+        // - the item view responds to contentHitTest() and returns YES.
+        // - the item view responds to beginEditing and returns YES.
+        if (canEdit) {
+          itemView = this.itemViewForContentIndex(idx) ;
+          canEdit = itemView && (!itemView.contentHitTest || itemView.contentHitTest(ev)) ;
+          canEdit = (canEdit && itemView.beginEditing) ? itemView.beginEditing() : NO ;
+        }
+        
+        // if cannot edit, just reselect
+        if (!canEdit) this.select(idx, false) ;
+      }
+      
+      this._cleanupMouseDown() ;
+    }
+
+    // handle actions on editing
+    this._cv_performSelectAction(view, ev, 0, ev.clickCount);
+    
+    return NO;  // bubble event to allow didDoubleClick to be called...
+  },
+  
+  /** @private */
+  _cleanupMouseDown: function() {
+    
+    // delete items explicitly to avoid leaks on IE
+    var info = this.mouseDownInfo, key;
+    if (info) {
+      for(key in info) {
+        if (!info.hasOwnProperty(key)) continue;
+        delete info[key];
+      }
+    }
+    this.mouseDownInfo = null;
+  },
+  
+  /** @private */
+  mouseMoved: function(ev) {
+    var view = this.itemViewForEvent(ev), 
+        last = this._lastHoveredItem ;
+
+    // handle hover events.
+    if (view !== last) {
+      if (last && last.mouseOut) last.mouseOut(ev);
+      if (view && view.mouseOver) view.mouseOver(ev);
+    }
+    this._lastHoveredItem = view ;
+
+    if (view && view.mouseMoved) view.mouseMoved(ev);
+    return YES;
+  },
+  
+  /** @private */
+  mouseOut: function(ev) {
+    var view = this._lastHoveredItem ;
+    this._lastHoveredItem = null ;
+    if (view && view.mouseOut) view.mouseOut(ev) ;
+    return YES ;
+  },
+  
+  /** @private */
+  _findSelectionExtendedByShift: function(sel, contentIndex) {
+    
+    // fast path.  if we don't have a selection, just select index
+    if (!sel || sel.get('length')===0) {
+      return SC.IndexSet.create(contentIndex);
+    }
+    
+    // if we do have a selection, then figure out how to extend it.
+    var content = this.get('content'),
+        lim     = content.get('length')-1,
+        min     = sel.get('min'),
+        max     = sel.get('max')-1,
+        info    = this.mouseDownInfo,
+        anchor  = this._selectionAnchor ;
+    if (SC.none(anchor)) anchor = -1;
+
+    // clicked before the current selection set... extend it's beginning...
+    if (contentIndex < min) {
+      min = contentIndex;
+      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
+    
+    // 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 (contentIndex === anchor) min = max = contentIndex ;
+      else if (contentIndex > anchor) {
+        min = anchor;
+        max = contentIndex ;
+      } else if (contentIndex < anchor) {
+        min = contentIndex;
+        max = anchor ;
+      }
+    }
+
+    return SC.IndexSet.create(min, max - min + 1);
+  },
+  
+  // ......................................
+  // DRAG AND DROP SUPPORT
+  //
+
+  /**
+    When reordering its content, the collection view will store its reorder
+    data using this special data type.  The data type is unique to each 
+    collection view instance.  You can use this data type to detect reorders
+    if necessary.
+    
+    @property
+    @type String
+  */
+  reorderDataType: function() {
+    return 'SC.CollectionView.Reorder.%@'.fmt(SC.guidFor(this)) ;
+  }.property().cacheable(),
+  
+  /**
+    This property is set to the IndexSet of content objects that are the 
+    subject of a drag whenever a drag is initiated on the collection view.  
+    You can consult this property when implementing your collection view 
+    delegate  methods, but otherwise you should not use this property in your 
+    code.
+
+    @type SC.IndexSet
+  */
+  dragContent: null,
+  
+  /**
+    This property is set to the proposed insertion index during a call to
+    collectionViewValidateDragOperation().  Your delegate implementations can 
+    change the value of this property to enforce a drop some in some other 
+    location.
+    
+    @type Number
+  */
+  proposedInsertionIndex: null,
+  
+  /**
+    This property is set to the proposed drop operation during a call to
+    collectionViewValidateDragOperation().  Your delegate implementations can 
+    change the value of this property to enforce a different type of drop 
+    operation.
+    
+    @type Number
+    @property
+  */
+  proposedDropOperation: null,
+  
+  /** @private
+    mouseDragged event handler.  Initiates a drag if the following conditions
+    are met:
+    
+    - collectionViewShouldBeginDrag() returns YES *OR*
+    - the above method is not implemented and canReorderContent is true.
+    - the dragDataTypes property returns a non-empty array
+    - a mouse down event was saved by the mouseDown method.
+  */
+  mouseDragged: function(ev) {
+    
+    var del     = this.get('selectionDelegate'),
+        content = this.get('content'),
+        sel     = this.get('selection'),
+        info    = this.mouseDownInfo,
+        dragContent, dragDataTypes, dragView;
+    
+    // if the mouse down event was cleared, there is nothing to do; return.
+    if (!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 ;
+    
+    // OK, they must be serious, decide if a drag will be allowed.
+    if (del.collectionViewShouldBeginDrag(this)) {
+      
+      // First, get the selection to drag.  Drag an array of selected
+      // items appearing in this collection, in the order of the 
+      // collection.
+      //
+      // Compute the dragContent - the indexes we will be dragging.      
+      // if we don't select on mouse down, then the selection has not been 
+      // updated to whatever the user clicked.  Instead use
+      // mouse down content.
+      if (!this.get("selectOnMouseDown")) {
+        dragContent = SC.IndexSet.create(info.contentIndex);
+      } else dragContent = sel ? sel.indexSetForSource(content) : null;
+      if (!dragContent) return YES; // nothing to drag
+      
+      dragContent = { content: content, indexes: dragContent };
+      this.set('dragContent', dragContent) ;
+      
+      // Get the set of data types supported by the delegate.  If this returns
+      // a null or empty array and reordering content is not also supported
+      // then do not start the drag.
+      dragDataTypes = this.get('dragDataTypes');
+      if (dragDataTypes && dragDataTypes.get('length') > 0) {
+        
+        // Build the drag view to use for the ghost drag.  This 
+        // should essentially contain any visible drag items.
+        dragView = del.collectionViewDragViewFor(this, dragContent.indexes);
+        if (!dragView) dragView = this._cv_dragViewFor(dragContent.indexes);
+        
+        // Initiate the drag
+        SC.Drag.start({
+          event: info.event,
+          source: this,
+          dragView: dragView,
+          ghost: NO,
+          slideBack: YES,
+          dataSource: this
+        }); 
+        
+        // Also use this opportunity to clean up since mouseUp won't 
+        // get called.
+        this._cleanupMouseDown() ;
+        this._lastInsertionIndex = null ;
+        
+      // Drag was not allowed by the delegate, so bail.
+      } else this.set('dragContent', null) ;
+      
+      return YES ;
+    }
+  },
+
+  /** @private
+    Compute a default drag view by grabbing the raw layers and inserting them
+    into a drag view.
+  */
+  _cv_dragViewFor: function(dragContent) {
+    // find only the indexes that are in both dragContent and nowShowing.
+    var indexes = this.get('nowShowing').without(dragContent);
+    indexes = this.get('nowShowing').without(indexes);
+    
+    var dragLayer = this.get('layer').cloneNode(false); 
+    var view = SC.View.create({ layer: dragLayer, parentView: this });
+
+    // cleanup weird stuff that might make the drag look out of place
+    SC.$(dragLayer).css('backgroundColor', 'transparent')
+      .css('border', 'none')
+      .css('top', 0).css('left', 0);
+    
+    indexes.forEach(function(i) {
+      var itemView = this.itemViewForContentIndex(i),
+          isSelected, layer;
+        
+      // render item view without isSelected state.  
+      if (itemView) {
+        isSelected = itemView.get('isSelected');
+        itemView.set('isSelected', NO);
+        
+        itemView.updateLayerIfNeeded();
+        layer = itemView.get('layer');
+        if (layer) layer = layer.cloneNode(true);
+        
+        itemView.set('isSelected', isSelected);
+        itemView.updateLayerIfNeeded();
+      }
+
+      if (layer) dragLayer.appendChild(layer);
+      layer = null;
+      
+    }, this);
+
+    dragLayer = null;
+    return view ;
+  },
+
+  
+  /**
+    Implements the drag data source protocol for the collection view.  This
+    property will consult the collection view delegate if one is provided. It
+    will also do the right thing if you have set canReorderContent to YES.
+    
+    @property 
+    @type Array
+  */
+  dragDataTypes: function() {
+    // consult delegate.
+    var del = this.get('selectionDelegate'),
+        ret = del.collectionViewDragDataTypes(this),
+        key ;
+
+    if (this.get('canReorderContent')) {
+      ret = ret ? ret.copy() : [];
+      key = this.get('reorderDataType');
+      if (ret.indexOf(key) < 0) ret.push(key);          
+    }
+        
+    return ret ? ret : [];
+  }.property(),
+  
+  /**
+    Implements the drag data source protocol method.  The implementation of
+    this method will consult the collection view delegate if one has been
+    provided.  It also respects the canReoderContent method.
+  */
+  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') ;
+      }
+    }
+    
+    // otherwise, just pass along to the delegate
+    var del = this.get('selectionDelegate');
+    return del.collectionViewDragDataForType(this, drag, dataType);
+  },
+  
+  /**
+    Implements the SC.DropTarget interface.  The default implementation will
+    consult the collection view delegate, if you implement those methods.
+    
+    This method is called once when the drag enters the view area.  It's 
+    return value will be stored on the drag object as allowedDragOperations,
+    possibly further constrained by the drag source.
+    
+    @param {SC.Drag} drag the drag object
+    @param {SC.Event} evt the event triggering this change, if available
+    @returns {Number} logical OR'd mask of allowed drag operations.
+  */
+  computeDragOperations: function(drag, evt) {
+
+    // the proposed drag operation is DRAG_REORDER only if we can reorder
+    // content and the drag contains reorder content.
+    var op  = SC.DRAG_NONE,
+        del = this.get('selectionDelegate');
+
+    if (this.get('canReorderContent')) {
+      if (drag.get('dataTypes').indexOf(this.get('reorderDataType')) >= 0) {
+        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 ;
+    
+    return op ;
+  },
+  
+  /** @private
+    Determines the allowed drop operation insertion point, operation type,
+    and the drag operation to be performed.  Used by dragUpdated() and 
+    performDragOperation().
+
+    @param {SC.Drag} drag the drag object
+    @param {SC.Event} evt source of this request, if available
+    @param {Number} dragOp allowed drag operation mask
+    Returns three params: [drop index, drop operation, allowed drag ops]
+  */
+  _computeDropOperationState: function(drag, evt, dragOp) {
+    
+    // get the insertion index for this location.  This can be computed
+    // by a subclass using whatever method.  This method is not expected to
+    // do any data valdidation, just to map the location to an insertion 
+    // index.
+    var loc    = this.convertFrameFromView(drag.get('location'), null),
+        dropOp = SC.DROP_BEFORE,
+        del    = this.get('selectionDelegate'),
+        canReorder = this.get('canReorderContent'),
+        objects, content, isPreviousInDrag, isNextInDrag, len;
+    
+    // STEP 1: Try with a DROP_ON option -- send straight to delegate if 
+    // supported by view.
+    
+    // get the computed insertion index and possibly drop operation.
+    // prefer to 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] ;
+    }
+    
+    // if the return drop operation is DROP_ON, then just check it with the
+    // delegate method.  If the delegate method does not support dropping on,
+    // then it will return DRAG_NONE, in which case we will try again with
+    // drop before.
+    if (dropOp === SC.DROP_ON) {
+      
+      // 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 ;
+
+      // The delegate is OK with a drop on also, so just return.
+      if (dragOp !== SC.DRAG_NONE) return [idx, dropOp, dragOp] ;
+        
+      // The delegate is NOT OK with a drop on, try to get the insertion
+      // index again, but this time prefer SC.DROP_BEFORE, then let the 
+      // rest of the method run...
+      else {
+        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] ;
+        }
+      }
+    }
+    
+    // if this is a reorder drag, set the proposed op to SC.DRAG_REORDER and
+    // validate the insertion point.  This only works if the insertion point
+    // is DROP_BEFORE or DROP_AFTER.  DROP_ON is not handled by reordering 
+    // content.
+    if ((idx >= 0) && canReorder && (dropOp !== SC.DROP_ON)) {
+      
+      objects = drag.dataForType(this.get('reorderDataType')) ;
+      if (objects) {
+        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);
+          isNextInDrag     = objects.indexes.contains(idx);
+        } else {
+          isPreviousInDrag = objects.indexes.contains(idx);
+          isNextInDrag     = objects.indexes.contains(idx-1);
+        }
+        
+        if (isPreviousInDrag && isNextInDrag) {
+          if (SC.none(this._lastInsertionIndex)) {
+            if (dropOp === SC.DROP_BEFORE) {
+              while ((idx >= 0) && objects.indexes.contains(idx)) idx--;
+            } else {
+              len = content ? content.get('length') : 0;
+              while ((idx < len) && objects.indexes.contains(idx)) idx++;
+            }
+          } else idx = this._lastInsertionIndex ;
+        }
+        
+        // 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 ;
+      }
+    }
+    
+    // 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 ;
+    
+    // return generated state
+    return [idx, dropOp, dragOp] ;
+  },
+  
+  /** 
+    Implements the SC.DropTarget interface.  The default implementation will
+    determine the drop location and then consult the collection view delegate
+    if you implement those methods.  Otherwise it will handle reordering
+    content on its own.
+  */
+  dragUpdated: function(drag, evt) {
+    
+    var op     = drag.get('allowedDragOperations'),
+        state  = this._computeDropOperationState(drag, evt, op),
+        idx    = state[0], dropOp = state[1], dragOp = state[2];
+    
+    // if the insertion index or dropOp have changed, update the insertion 
+    // point
+    if (dragOp !== SC.DRAG_NONE) {
+      if ((this._lastInsertionIndex !== idx) || (this._lastDropOperation !== dropOp)) {
+        var itemView = this.itemViewForContentIndex(idx) ;
+        this.showInsertionPoint(itemView, dropOp) ;
+      }
+      
+      this._lastInsertionIndex = idx ;
+      this._lastDropOperation = dropOp ;
+    } else {
+      this.hideInsertionPoint() ;
+      this._lastInsertionIndex = this._lastDropOperation = null ;
+    }
+    
+    // Normalize drag operation to the standard kinds accepted by the drag 
+    // system.
+    return (dragOp & SC.DRAG_REORDER) ? SC.DRAG_MOVE : dragOp;  
+  },
+  
+  /**
+    Implements the SC.DropTarget protocol.  Hides any visible insertion 
+    point and clears some cached values.
+  */
+  dragExited: function() {
+    this.hideInsertionPoint() ;
+    this._lastInsertionIndex = this._lastDropOperation = null ;
+  },
+  
+  /**
+    Implements the SC.DropTarget protocol.
+  */
+  acceptDragOperation: function(drag, op) { return YES; },
+  
+  /**
+    Implements the SC.DropTarget protocol.  Consults the collection view
+    delegate to actually perform the operation unless the operation is 
+    reordering content.
+  */
+  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],
+        del   = this.get('selectionDelegate'),
+        performed, objects, data, content, shift;
+        
+    // The dragOp is the kinds of ops allowed.  The drag operation must 
+    // be included in that set.
+    if (dragOp & SC.DRAG_REORDER) {
+      op = (op & SC.DRAG_MOVE) ? SC.DRAG_REORDER : SC.DRAG_NONE ;
+    } else op = op & dragOp ;
+    
+    // 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) ;
+    
+    // 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 ;
+      
+      content = this.get('content') ;
+      content.beginPropertyChanges(); // suspend notifications
+
+      // get each object, then remove it from the content. they will be 
+      // added again later.
+      objects = [];
+      shift = 0;
+      data.indexes.forEach(function(i) {  
+        objects.push(content.objectAt(i-shift));
+        content.removeAt(i-shift);
+        shift++;
+        if (i < idx) idx--;
+        if ((dropOp === SC.DROP_AFTER) && (i === idx)) idx--;
+      }, this);
+      
+      // now insert objects into new insertion locaiton
+      content.replace(idx, 0, objects);
+      this.select(SC.IndexSet.create(idx, objects.length));
+      content.endPropertyChanges(); // restart notifications
+
+      // make the op into its actual value
+      op = SC.DRAG_MOVE ;
+    }
+    
+    return op; 
+  },
+  
+  /**
+    Default delegate method implementation, returns YES if canReorderContent
+    is also true.
+  */
+  collectionViewShouldBeginDrag: function(view) {
+    return this.get('canReorderContent') ;
+  },
+
+  
+  // ..........................................................
+  // INSERTION POINT
+  // 
+  
+  
+  /**
+    Get the preferred insertion point for the given location, including 
+    an insertion preference of before, after or on the named index.
+    
+    You can implement this method in a subclass if you like to perform a 
+    more efficient check.  The default implementation will loop through the 
+    item views looking for the first view to "switch sides" in the orientation 
+    you specify.
+    
+    This method should return an array with two values.  The first value is
+    the insertion point index and the second value is the drop operation,
+    which should be one of SC.DROP_BEFORE, SC.DROP_AFTER, or SC.DROP_ON. 
+    
+    The preferred drop operation passed in should be used as a hint as to 
+    the type of operation the view would prefer to receive. If the 
+    dropOperation is SC.DROP_ON, then you should return a DROP_ON mode if 
+    possible.  Otherwise, you should never return DROP_ON.
+    
+    For compatibility, you can also return just the insertion index.  If you
+    do this, then the collction view will assume the drop operation is 
+    SC.DROP_BEFORE.
+    
+    If an insertion is NOT allowed, you should return -1 as the insertion 
+    point.  In this case, the drop operation will be ignored.
+    
+    @param loc {Point} the mouse location.
+    @param dropOperation {DropOp} the preferred drop operation.
+    @returns {Array} [proposed drop index, drop operation] 
+  */
+  insertionIndexForLocation: function(loc, dropOperation) { 
+    var ret = 0 ;
+    
+    // var content    = this.get('content'),
+    //     nowShowing = this.get('nowShowing'),
+    //     orient     = this.get('insertionOrientation'),
+    //     lastSide   = null,
+    //     ret        = null,
+    //     itemView, curSide, f;
+    //     
+    // for(var idx=0; ((ret === null) && (idx<content.length)); idx++) {
+    //   // itemView = this.itemViewForContent(content.objectAt(idx));
+    //   itemView = this.itemViewForContentIndex(idx);
+    //   f = this.convertFrameFromView(itemView.get('frame'), itemView) ;
+    //   
+    //   // if we are a horizontal orientation, look for the first item that 
+    //   // will "switch sides" on the x path an the maxY is greater than Y.
+    //   // This assumes you will flow top to bottom, but it should work if you
+    //   // flow LTR or RTL.
+    //   if (orient == SC.HORIZONTAL_ORIENTATION) {
+    //     if (SC.maxY(f) > loc.y) {
+    //       curSide = (SC.maxX(f) < loc.x) ? -1 : 1 ;
+    //     } else curSide = null ;
+    //     
+    //   // if we are a vertical orientation, look for the first item that
+    //   // will "switch sides" on the y path and the maxX is greater than X.
+    //   // This assumes you will flow LTR, but it should work if you flow
+    //   // bottom to top or top to bottom.
+    //   } else {
+    //     if (SC.minX(f) < loc.x) {
+    //       curSide = (SC.maxY(f) < loc.y) ? -1 : 1 ;
+    //     } else curSide = null ;
+    //   }
+    //   
+    //   // if we "switched" sides then return this item view.
+    //   if (curSide !== null) {
+    //     
+    //     // OK, we found an item view, while we have this data, decide if
+    //     // we should insert before or after the view
+    //     if ((lastSide !== null) && (curSide != lastSide)) {
+    //       ret = idx ;
+    //       if (orient == SC.HORIZONTAL_ORIENTATION) {
+    //         if (SC.midX(f) < loc.x) ret++ ;
+    //       } else {
+    //         if (SC.midY(f) < loc.y) ret++ ;
+    //       }
+    //     }
+    //     lastSide =curSide ;
+    //   }
+    // }
+    // 
+    // // Handle some edge cases
+    // if ((ret === null) || (ret < 0)) ret = 0 ;
+    // if (ret > content.length) ret = content.length ;
+    
+    // Done. Phew.  Return.
+    return ret;
+  },
+  
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+
+  /** @private - when we become visible, reload if needed. */
+  _cv_isVisibleInWindowDidChange: function() {
+    if (this.get('isVisibleInWindow')) {
+      if (this._invalidIndexes) this.invokeOnce(this.reloadIfNeeded);
+      if (this._invalidSelection) {
+        this.invokeOnce(this.reloadSelectionIndexesIfNeeded);
+      } 
+    }
+  }.observes('isVisibleInWindow'),
+
+
+  /**
+    Default delegate method implementation, returns YES if isSelectable
+    is also true.
+  */
+  collectionViewShouldSelectItem: function(view, item) {
+    return this.get('isSelectable') ;
+  },
+  
+  _TMP_DIFF1: SC.IndexSet.create(),
+  _TMP_DIFF2: SC.IndexSet.create(),
+  
+  /** @private
+  
+    Whenever the nowShowing range changes, update the range observer on the 
+    content item and instruct the view to reload any indexes that are not in
+    the previous nowShowing range.
+
+  */
+  _cv_nowShowingDidChange: function() {
+    var nowShowing  = this.get('nowShowing'),
+        last        = this._sccv_lastNowShowing,
+        diff, diff1, diff2;
+
+    // find the differences between the two
+    // NOTE: reuse a TMP IndexSet object to avoid creating lots of objects
+    // during scrolling
+    if (last && nowShowing && (last !== nowShowing)) {
+      diff1 = this._TMP_DIFF1.add(last).remove(nowShowing);
+      diff2 = this._TMP_DIFF2.add(nowShowing).remove(last);
+      diff = diff1.add(diff2);
+    } else diff = last || nowShowing ;
+
+    // if nowShowing has actually changed, then update
+    if (diff && diff.get('length') > 0) {
+      this._sccv_lastNowShowing = nowShowing ? nowShowing.frozenCopy() : null;
+      this.updateContentRangeObserver();
+      this.reload(diff);
+    }
+    
+    // cleanup tmp objects
+    if (diff1) diff1.clear();
+    if (diff2) diff2.clear();
+    
+  }.observes('nowShowing'),
+  
+  init: function() {
+     sc_super();
+     if (this.get('canReorderContent')) this._cv_canReorderContentDidChange();
+     this._sccv_lastNowShowing = this.get('nowShowing').clone();
+     if (this.content) this._cv_contentDidChange();
+     if (this.selection) this._cv_selectionDidChange();
+  },
+  
+  /** @private
+    Become a drop target whenever reordering content is enabled.
+  */
+  _cv_canReorderContentDidChange: function() {
+    if (this.get('canReorderContent')) {
+      if (!this.get('isDropTarget')) this.set('isDropTarget', YES);
+      SC.Drag.addDropTarget(this);
+    }
+  }.observes('canReorderContent'),
+  
+  /** @private
+    Fires an action after a selection if enabled.
+    
+    if actOnSelect is YES, then try to invoke the action, passing the 
+    current selection (saved as a separate array so that a change in sel
+    in the meantime will not be lost)
+  */
+  _cv_performSelectAction: function(view, ev, delay, clickCount) {
+    var sel;
+    if (delay === undefined) delay = 0 ;
+    if (clickCount === undefined) clickCount = 1;
+    if ((clickCount>1) || this.get('actOnSelect')) {
+      sel = this.get('selection');
+      sel = sel ? sel.toArray() : [];
+      if (this._cv_actionTimer) this._cv_actionTimer.invalidate();
+      this._cv_actionTimer = this.invokeLater(this._cv_action, delay, view, ev, sel) ;
+    }
+  },
+  
+  /** @private
+    Perform the action.  Supports legacy behavior as well as newer style
+    action dispatch.
+  */
+  _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) ;
+      
+      // otherwise, use the new sendAction style
+      var pane = this.get('pane') ;
+      if (pane) {
+        pane.rootResponder.sendAction(action, target, this, pane, context);
+      }
+      // SC.app.sendAction(action, target, this) ;
+      
+    // if no action is specified, then trigger the support action,
+    // if supported.
+    } else if (!view) {
+      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) ;
+      
+    // otherwise call the action method to support older styles.
+    } else if (SC.typeOf(view.action) == SC.T_FUNCTION) {
+      return view.action(evt) ;
+    }
+  }
+  
+  
+});