sproutit-sproutcore 1.0.0.20090416161445 → 1.0.0.20090720093355

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

@@ -99,7 +99,7 @@ SC.SourceListGroupView = SC.View.extend(SC.Control, SC.CollectionGroup,
     }
     
    // set the title if that changed.
-    var groupTitleKey = this.getDelegateProperty(this.displayDelegate, 'groupTitleKey') ;
+    var groupTitleKey = this.getDelegateProperty('groupTitleKey', this.displayDelegate) ;
     if ((key == '*') || (groupTitleKey && (key == groupTitleKey))) {
       var title = (content && content.get && groupTitleKey) ? content.get(groupTitleKey) : content;
       if (title != this._title) {
@@ -110,7 +110,7 @@ SC.SourceListGroupView = SC.View.extend(SC.Control, SC.CollectionGroup,
     }
     
     // set the group visibility if changed
-    var groupVisibleKey = this.getDelegateProperty(this.displayDelegate, 'groupVisibleKey') ;
+    var groupVisibleKey = this.getDelegateProperty('groupVisibleKey', this.displayDelegate) ;
     if ((key == '*') || (groupVisibleKey && (key == groupVisibleKey))) {
       if (groupVisibleKey) {
         labelView.removeClassName('no-disclosure') ;
@@ -134,7 +134,7 @@ SC.SourceListGroupView = SC.View.extend(SC.Control, SC.CollectionGroup,
     
     // update group if necessary
     var group = this.get('content') ;
-    var groupVisibleKey = this.getDelegateProperty(this.displayDelegate, 'groupVisibleKey') ;
+    var groupVisibleKey = this.getDelegateProperty('groupVisibleKey', this.displayDelegate) ;
     if (group && group.set && groupVisibleKey) {
       group.set(groupVisibleKey, newValue) ;
     }

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

@@ -119,9 +119,11 @@ SC.SplitView = SC.View.extend(
     A number less than one will be treated as a percentage, while a number 
     greater than one will be treated as a pixel width.
     
+    The thickness will be applied to the opposite view defined by autoresizeBehavior.
+    
     @property {Number}
   */
-  topLeftDefaultThickness: 0.5,
+  defaultThickness: 0.5,
   
   /**
     Yes, we're a split view.
@@ -133,6 +135,22 @@ SC.SplitView = SC.View.extend(
   dividerView: SC.SplitDividerView,
   bottomRightView: SC.View,
   
+  /**
+    The current thickness for the topLeftView
+  */
+  topLeftThickness: function() {
+    var view = this.get('topLeftView');
+    return view ? this.thicknessForView(view) : 0;
+  }.property('topLeftView').cacheable(),
+
+  /**
+    The current thickness for the bottomRightView
+  */
+  bottomRightThickness: function() {
+    var view = this.get('bottomRightView');
+    return view ? this.thicknessForView(view) : 0;
+  }.property('bottomRightView').cacheable(),
+  
   /**
     @property {SC.Cursor} the cursor thumb view should use for themselves
   */
@@ -355,6 +373,8 @@ SC.SplitView = SC.View.extend(
     // topLeftView.updateDisplayLayout();
     // dividerView.updateDisplayLayout();
     // bottomRightView.updateDisplayLayout();
+    this.notifyPropertyChange('topLeftThickness')
+        .notifyPropertyChange('bottomRightThickness');
   },
   
   /** @private */
@@ -366,15 +386,21 @@ SC.SplitView = SC.View.extend(
         this.set('thumbViewCursor', SC.Cursor.create()) ;
       }
       
-      var direction = this.get('layoutDirection') ;
-      var splitViewThickness = (direction == SC.LAYOUT_HORIZONTAL) ? this.get('frame').width : this.get('frame').height ;
+      var layoutDirection = this.get('layoutDirection') ;
+      var splitViewThickness = (layoutDirection == SC.LAYOUT_HORIZONTAL) ? this.get('frame').width : this.get('frame').height ;
+      var desiredThickness = this.get('defaultThickness') ;
+      var autoResizeBehavior = this.get('autoresizeBehavior') ;
       
-      // if topLeftDefaultThickness is < 1, treat as a percentage, otherwise
-      // treat as actual number.
-      var desired = this.get('topLeftDefaultThickness');
-      if (SC.none(desired) || (desired > 0 && desired < 1)) {
-        this._desiredTopLeftThickness =  Math.floor(splitViewThickness * (desired || 0.5)) ;
-      } else this._desiredTopLeftThickness = desired ;
+      // if default thickness is < 1, convert from percentage to absolute
+      if (SC.none(desiredThickness) || (desiredThickness > 0 && desiredThickness < 1)) {
+        desiredThickness =  Math.floor(splitViewThickness * (desiredThickness || 0.5)) ;
+      }
+      if (autoResizeBehavior === SC.RESIZE_BOTTOM_RIGHT) {
+        this._desiredTopLeftThickness = desiredThickness ;
+      } else { // (autoResizeBehavior === SC.RESIZE_TOP_LEFT)
+        var dividerThickness = this.get('dividerThickness') || 7 ;
+        this._desiredTopLeftThickness =  splitViewThickness - dividerThickness - desiredThickness ;
+      }
       
       // make sure we don't exceed our min and max values, and that collapse 
       // settings are respected

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

@@ -0,0 +1,101 @@
+// ==========================================================================
+// 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('views/collection') ;
+
+/**
+  @class 
+
+  A StackedView is a CollectionView that expects its content to use static 
+  layout to stack vertically.  This type of collection view is not designed 
+  for use with large size collections, but it can be very useful for 
+  collections with complex displays and variable heights such as comments or
+  small notification queues.
+  
+  h2. Static Layout
+  
+  This view makes no attempt to size or position your child views.  It assumes
+  you are using StaticLayout for your child views.  If you don't enable static
+  layout your views will probably overlay on top of eachother and will look 
+  incorrect.
+
+  Note also that the default layout for this view set's the height to "auto".
+  This is usually the behavior you will want. 
+  
+  @extends SC.CollectionView
+  @since SproutCore 0.9
+*/
+SC.StackedView = SC.CollectionView.extend( 
+/** SC.StackedView.prototype */ {
+  
+  classNames: ['sc-stacked-view'],
+  
+  /** 
+    Default layout for a stacked view will fill the parent view but auto-
+    adjust the height of the view.
+  */
+  layout: { top: 0, left: 0, right: 0, height: 1 },
+
+  /**
+    Updates the height of the stacked view to reflect the current content of 
+    the view.  This is called automatically whenever an item view is reloaded.
+    You can also call this method directly if the height of one of your views
+    has changed.
+    
+    The height will be recomputed based on the actual location and dimensions
+    of the last child view.
+    
+    Note that normally this method will defer actually updating the height
+    of the view until the end of the run loop.  You can force an immediate 
+    update by passing YES to the "immediately" parameter.
+    
+    @param {Boolean} immediately YES to update immedately
+    @returns {SC.StackedView} receiver
+  */
+  updateHeight: function(immediately) {
+    if (immediately) this._updateHeight();
+    else this.invokeLast(this._updateHeight);
+    // ^ use invokeLast() here because we need to wait until all rendering has 
+    //   completed.
+    
+    return this;
+  },
+  
+  _updateHeight: function() {
+    
+    var childViews = this.get('childViews'),
+        len        = childViews.get('length'),
+        view, layer, height;
+        
+    if (len === 0) {
+      height = 1; 
+    } else {
+      view = childViews.objectAt(len-1);
+      layer = view ? view.get('layer') : null ;
+      height = layer ? (layer.offsetTop + layer.offsetHeight) : 1 ;
+      layer = null ; // avoid memory leaks
+    }
+    this.adjust('height', height);
+  },
+  
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+
+  /** @private
+    Whenever the collection view reloads some views, reset the cache on the
+    frame as well so that it will recalculate.
+  */
+  didReload: function(set) { return this.updateHeight(); },
+
+  /** @private
+    When layer is first created, make sure we update the height using the 
+    newly calculated value.
+  */
+  didCreateLayer: function() { return this.updateHeight(); }
+  
+});

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

@@ -99,8 +99,19 @@ SC.TabView = SC.View.extend(
   },
   
   createChildViews: function() {
-    var childViews = [], view; 
-    view = this.containerView = this.createChildView(this.containerView, { 
+    var childViews = [], view, ContainerView ;
+    
+    if (this.get('tabLocation') === SC.TOP_LOCATION) {
+      ContainerView = this.containerView.extend({
+        layout: { top:12, left:0, right:0, bottom: 0 }
+      });
+    } else {
+      ContainerView = this.containerView.extend({
+        layout: { top:0, left:0, right:0, bottom: 12 }
+      });
+    }
+    
+    view = this.containerView = this.createChildView(ContainerView, { 
       rootElementPath: [0] 
     }) ;
     childViews.push(view);
@@ -109,7 +120,7 @@ SC.TabView = SC.View.extend(
       rootElementPath: [1] 
     }) ;
     childViews.push(view);
-
+    
     this.set('childViews', childViews);
     return this; 
   },
@@ -123,23 +134,7 @@ SC.TabView = SC.View.extend(
     custom container view.  You can access this view but you cannot change 
     it.
   */
-  containerView: SC.ContainerView.extend({
-    
-    /** @private
-      When we need to actually create a container, look for the tab loc from
-      the parent view and adjust the internal frame accordingly.
-    */
-    render: function(context, firstTime) {
-      var pv = this.get('parentView');
-      var tabLoc = (pv) ? pv.get('tabLocation') : SC.TOP_LOCATION ;
-      if (tabLoc === SC.TOP_LOCATION) {
-        context.addStyle('top', '11px');
-      } else {
-        context.addStyle('bottom', '11px');
-      }
-      this.renderChildViews(context, firstTime);
-    }
-  }),
+  containerView: SC.ContainerView,
   
   /**
     The segmentedView managed by this tab view.  Note that this TabView uses
@@ -147,14 +142,20 @@ SC.TabView = SC.View.extend(
     it.
   */
   segmentedView: SC.SegmentedView.extend({
-    layout: { left: 0, right: 0, height: 23 },
+    layout: { left: 0, right: 0, height: 24 },
 
     /** @private
       When the value changes, update the parentView's value as well.
     */
-    valueDidChange: function() {
+    _sc_tab_segmented_valueDidChange: function() {
       var pv = this.get('parentView');
       if (pv) pv.set('nowShowing', this.get('value'));
+      
+      // FIXME: why is this necessary? 'value' is a displayProperty and should
+      // automatically cause displayDidChange() to fire, which should cause 
+      // the two lines below to execute in the normal course of things...
+      this.set('layerNeedsUpdate', YES) ;
+      this.invokeOnce(this.updateLayerIfNeeded) ;
     }.observes('value'),
     
     /** @private

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

@@ -34,7 +34,7 @@ SC.ToolbarView = SC.View.extend(
   // 
   
   /** @private */
-  layout: { left: 0, height: 36, right: 0 },
+  layout: { left: 0, height: 32, right: 0 },
   
   /** @private */
   init: function() {

data/frameworks/sproutcore/frameworks/foundation/controllers/array.js

@@ -9,150 +9,95 @@ require('mixins/selection_support');
 
 /**
   @class
+
+  An ArrayController provides a way for you to publish an array of objects
+  for CollectionView or other controllers to work with.  To work with an 
+  ArrayController, set the content property to the array you want the 
+  controller to manage.  Then work directly with the controller object as if
+  it were the array itself.
   
-  An Array Controller provides a way to project the contents of an array
-  out to a view.  You can use this object any place you might use an
-  array.  Changes to the array will not propogate to the content array
-  until you call commitChanges().
-  
+  When you want to display an array of objects in a CollectionView, bind the
+  "arrangedObjects" of the array controller to the CollectionView's "content"
+  property.  This will automatically display the array in the collection view.
+
   @extends SC.Controller
   @extends SC.Array
   @extends SC.SelectionSupport
   @author Charles Jolley
-  @author Erich Ocean
-  @version 1.0
   @since SproutCore 1.0
 */
 SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
 /** @scope SC.ArrayController.prototype */ {
-  
-  /**
-    If YES the will return controllers for content objects.
-    
-    If you want to use an array controller to edit an array contents directly
-    but you do not want to wrap the values of the array in controller objects
-    then you should set this property to NO.
-    
-    @type Boolean
-  */
-  useControllersForContent: NO,
-  
-  /**
-    Provides compatibility with collection controllers.
-    
-    @property
-    @type SC.ArrayController
-  */
-  arrangedObjects: function() { return this; }.property('content'),
+
+  // ..........................................................
+  // PROPERTIES
+  // 
   
   /**
     The content array managed by this controller.  
     
-    In general you can treat an instance of ArrayController as if it were 
-    the array held in this property.  Any changes you make to the controller
-    that are not specifically implemented in the controller will pass through
-    to the Array.
+    You can set the content of the ArrayController to any object that 
+    implements SC.Array or SC.Enumerable.  If you set the content to an object
+    that implements SC.Enumerable only, you must also set the orderBy property
+    so that the ArrayController can order the enumerable for you.
     
-    Also if you set commitsChangesImmediately to NO, the controller will
-    buffer changes against this.
+    If you set the content to a non-enumerable and non-array object, then the
+    ArrayController will wrap the item in an array in an attempt to normalize
+    the result.
     
     @type SC.Array
   */
   content: null,
-  
-  /** @private */
-  contentBindingDefault: SC.Binding.multiple(),
-  
+
   /**
-    Set to YES if the controller has any content, even an empty array.
+    Makes the array editable or not.  If this is set to NO, then any attempts
+    at changing the array content itself will throw an exception.
     
     @property
     @type Boolean
   */
-  hasContent: function() {
-    return !SC.none(this.get('content')) ;
-  }.property('content'),
+  isEditable: YES,
   
   /**
-    Property key to use to group objects.
+    Used to sort the array.
     
-    If groupBy is set to a non-null value, then the array controller will
-    automatically partion the content array into groups based on the value of 
-    the passed property key.  The exampleGroup will be used to create the
-    objects in the groups array.
+    If you set this property to a key name, array of key names, or a function,
+    then then ArrayController will automatically reorder your content array
+    to match the sort order.  (If you set a function, the function will be
+    used to sort).
+
+    Normally, you should only use this property if you set the content of the
+    controller to an unordered enumerable such as SC.Set or SC.SelectionSet.
+    In this case the orderBy property is required in order for the controller
+    to property order the content for display.
     
-    If this property is set, you MUST ensure the items in the content array 
-    are already sorted by the group key.  Otherwise groups might appear more 
-    than once.
+    If you set the content to an array, it is usually best to maintain the 
+    array in the proper order that you want to display things rather than 
+    using this method to order the array since it requires an extra processing
+    step.  You can use this orderBy property, however, for displaying smaller 
+    arrays of content.
     
-    @type String
-  */
-  groupByKey: null,
-  
-  /**
-    When grouping, create objects using this class. SC.ArrayController will 
-    set 'value' to the value of the groupByKey, and 'itemRange' to an 
-    SC.Range of the item indexes in the group, and 'owner' to this array
-    controller.
+    Note that you can only to use addObject() to insert new objects into an
+    array that is ordered.  You cannot manually reorder or insert new objects
+    into specific locations because the order is managed by this property 
+    instead.
     
-    @type Class
-  */
-  exampleGroup: SC.Object,
-  
-  /**
-    The groups, if any, for the current content array.
+    If you pass a function, it should be suitable for use in compare().
     
-    @readOnly
     @property
-    @type SC.Array
+    @type String|Array|Function
   */
-  groups: function(key, val) {
-    if (val) throw "The SC.ArrayController groups property is read-only." ;
-    
-    var groupByKey = this.get('groupByKey') ;
-    if (!groupByKey) return SC.EMPTY_ARRAY ; // no groups
-    
-    var content = this.get('content') ;
-    if (!content || content.get('length') === 0) {
-      return SC.EMPTY_ARRAY ; // no groups...
-    }
-    
-    // okay, calculate the groups...
-    var previousGroup, currentGroup, groupStart = 0 ;
-    var obj, groups = [], GroupClass = this.get('exampleGroup') ;
-    
-    // initialize the discover groups loop
-    previousGroup = content.objectAt(0).get(groupByKey) ;
-    
-    // discover groups...
-    for (var idx=0, len=content.get('length'); idx<len; ++idx) {
-      obj = content.objectAt(idx) ;
-      currentGroup = obj.get(groupByKey) ;
-      
-      // did our group change?
-      if (previousGroup !== currentGroup) {
-        // save the current group
-        groups.push(GroupClass.create({
-          value: previousGroup,
-          itemRange: { start: groupStart, length: idx - groupStart },
-          owner: this
-        }));
-        
-        // and move on to the next group
-        previousGroup = currentGroup ;
-        groupStart = idx ;
-      }
-    }
+  orderBy: null,
     
-    // close the last and final group
-    groups.push(GroupClass.create({
-      value: previousGroup,
-      itemRange: { start: groupStart, length: idx - groupStart },
-      owner: this
-    }));
+  /**
+    Set to YES if you want the controller to wrap non-enumerable content    
+    in an array and publish it.  Otherwise, it will treat single content like 
+    null content.
     
-    return groups ;
-  }.property('content', 'groupByKey').cacheable(),
+    @property
+    @type Boolean
+  */
+  allowsSingleContent: YES,
   
   /**
     Set to YES if you want objects removed from the array to also be
@@ -166,325 +111,399 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
     @type {Boolean}
   */
   destroyOnRemoval: NO,
+
+  /**
+    Returns an SC.Array object suitable for use in a CollectionView.  
+    Depending on how you have your ArrayController configured, this property
+    may be one of several different values.  
+    
+    @property
+    @type SC.Array
+  */
+  arrangedObjects: function() {
+    return this;
+  }.property().cacheable(),
   
   /**
-    Defines the default class to use when creating new content. 
+    Computed property indicates whether or not the array controller can 
+    remove content.  You can delete content only if the content is not single
+    content and isEditable is YES.
     
-    This property should either contains a class or a string that resolves
-    to a class that responds to the newRecord() method.
+    @property
+    @type Boolean
+  */
+  canRemoveContent: function() {
+    var content = this.get('content'), ret;
+    ret = !!content && this.get('isEditable') && this.get('hasContent');
+    if (ret) {
+      return !content.isEnumerable || 
+             (SC.typeOf(content.removeObject) === SC.T_FUNCTION);
+    } else return NO ;
+  }.property('content', 'isEditable', 'hasContent'),
+  
+  /**
+    Computed property indicates whether you can reorder content.  You can
+    reorder content as long a the controller isEditable and the content is a
+    real SC.Array-like object.  You cannot reorder content when orderBy is
+    non-null.
     
-    @type {Class}
+    @property
+    @type Boolean
   */
-  exampleContentObject: null,
+  canReorderContent: function() {
+    var content = this.get('content'), ret;
+    ret = !!content && this.get('isEditable') && !this.get('orderBy');
+    return ret && !!content.isSCArray;
+  }.property('content', 'isEditable', 'orderBy'),
   
   /**
-    Creates a new record instance and adds it to the end of the current array.
+    Computed property insides whether you can add content.  You can add 
+    content as long as the controller isEditable and the content is not a 
+    single object.
     
-    This method works just like insertNewObjectAt() but always appends.
+    Note that the only way to simply add object to an ArrayController is to
+    use the addObject() or pushObject() methods.  All other methods imply 
+    reordering and will fail.
     
-    @param attributes {Hash} optional hash of attributes to pass to the new obejct.
-    @param objectType {Class} optional class of object to create.
-    @returns {Object} the newly created object (also added to the array)
+    @property
+    @type Boolean
   */
-  newObject: function(attributes, objectType) {
-    return this.insertNewObjectAt(null, attributes, objectType) ;
-  },
+  canAddContent: function() {
+    var content = this.get('content'), ret ;
+    ret = content && this.get('isEditable') && content.isEnumerable;
+    if (ret) {
+      return (SC.typeOf(content.addObject) === SC.T_FUNCTION) || 
+             (SC.typeOf(content.pushObject) === SC.T_FUNCTION); 
+    } else return NO ;
+  }.property('content', 'isEditable'),
   
   /**
-    Creates a new content object and inserts it at the passed index or appends
-    it at the end of the array if you pass null.
-    
-    This method takes an optional hash of attributes which will be set on
-    the new record.  You can also pass an optional objectType.  If you do 
-    not pass the objectType, you must instead set the exampleContentObject to 
-    the class of the object you want to use.  The object can be of any type 
-    but it must respond to the newRecord() method.
-    
-    Objects created using this method will be destroyed automatically if you
-    have set commitsChangesImmediately to false and call discardChanges().
-    
-    @param index {Number} the index to insert at or null to append.
-    @param attributes {Hash} optional hash of attributes to pass to the new obejct.
-    @param objectType {Class} optional class of object to create.
-    @returns {Object} the newly created object (also added to the array)
-  */
-  insertNewObjectAt: function(index, attributes, objectType) {
+    Set to YES if the controller has valid content that can be displayed,
+    even an empty array.  Returns NO if the content is null or not enumerable
+    and allowsSingleContent is NO.
     
-    // compute the objectType
-    if (!objectType) objectType = this.get('exampleContentObject') ;
-    if (SC.typeOf(objectType) === SC.T_STRING) {
-      objectType = SC.objectForPropertyPath(objectType) ;
-    }
-    if (SC.none(objectType)) {
-      throw "Invalid object type was provided" ;
-    }
+    @property
+    @type Boolean
+  */
+  hasContent: function() {
+    var content = this.get('content');
+    return !!content && 
+           (!!content.isEnumerable || !!this.get('allowsSingleContent'));
+  }.property('content', 'allowSingleContent'),
+
+  /**
+    The current load state of the RecordArray.  If the storeKeys has a state
+    property, then this property will return that value.  Otherwise it returns
+    SC.Record.READY.
+  */
+  state: function() {
+    var content = this.get('content'),
+        ret = content ? content.get('state') : null;
+    return ret ? ret : SC.Record.READY;
+  }.property().cacheable(),
+  
+  // ..........................................................
+  // METHODS
+  // 
+  
+  /**
+    Adds an object to the array.  If the content is ordered, this will add the 
+    object to the end of the content array.  The content is not ordered, the
+    location depends on the implementation of the content.
     
-    if (SC.typeOf(objectType.newObject) !== SC.T_FUNCTION) {
-      throw "content object type does not support newRecord()" ;
-    }
+    If the source content does not support adding an object, then this method 
+    will throw an exception.
     
-    // Create a new object...
-    var obj = objectType.newObject(attributes) ;
-    if (!this._createdObjects) this._createdObjects = [] ;
-    this._createdObjects.push(obj) ; // save for discard...
+    @param {Object} object the object to add
+    @returns {SC.ArrayController} receiver
+  */
+  addObject: function(object) {
+    if (!this.get('canAddContent')) throw "%@ cannot add content".fmt(this);
     
-    // Add to array.
-    if (index) {
-      this.insertAt(index, obj) ;
-    } else this.pushObject(obj) ;
+    var content = this.get('content');
+    if (content.isSCArray) content.pushObject(object);
+    else if (content.addObject) content.addObject(object);
+    else throw "%@.content does not support addObject".fmt(this);
     
-    return obj ;
+    return this;
   },
   
-  /** @private
-    Watches changes to the content property updates the contentClone.
-    
-    @observes content
-  */
-  _contentDidChange: function() {
-    var content = this.get('content') ;
-    if (SC.isEqual(content, this._content)) return ; // nothing to do
-    
-    var func = this._contentPropertyDidChange ;
+  /**
+    Removes the passed object from the array.  If the underyling content 
+    is a single object, then this simply sets the content to null.  Otherwise
+    it will call removeObject() on the content.
     
-    // remove old observer, add new observer, and trigger content property change
-    if (this._content && this._content.removeObserver) {
-      this._content.removeObserver('[]', this, func) ;
-    } 
+    Also, if destroyOnRemoval is YES, this will actually destroy the object.
     
-    if (content && content.addObserver) {
-      content.addObserver('[]', this, func) ;
+    @param {Object} object the object to remove
+    @returns {SC.ArrayController} receiver
+  */
+  removeObject: function(object) {
+    if (!this.get('canRemoveContent')) {
+      throw "%@ cannot remove content".fmt(this);
     }
     
-    this._content = content; //cache
-    this._contentPropertyRevision = null ;
-    
-    var rev = (content) ? content.propertyRevision : -1 ;
-    this._contentPropertyDidChange(content, '[]', content, rev) ; 
-  }.observes('content'),
-  
-  _contentPropertyDidChange: function(target, key, value, rev) {  
-     if (!this._updatingContent && (!rev || (rev != this._contentPropertyRevision))) {
-      this._contentPropertyRevision = rev ;
-      
-      this._updatingContent = true ;
-      
-      this.beginPropertyChanges();
-      this.contentCloneReset();
-      this.enumerableContentDidChange() ;
-      this.notifyPropertyChange('length') ;
-      this.updateSelectionAfterContentChange();
-      this.endPropertyChanges() ;
-      
-      this._updatingContent = false ;
+    var content = this.get('content');
+    if (content.isEnumerable) content.removeObject(object);
+    else {
+      this.set('content', null);
+      this.enumerableContentDidChange();
     }
+    
+    if (this.get('destroyOnRemoval') && object.destroy) object.destroy();
+    return this; 
   },
   
+  // ..........................................................
+  // SC.ARRAY SUPPORT
+  // 
+
   /**
-    The array content that (when committed) will be merged back into the 
-    content property. All array methods will take place on this object.
-    
-    @property
-    @type SC.Array
+    Compute the length of the array based on the observable content
   */
-  contentClone: null,
-  
-  /** @private
-    Clones the content property into the contentClone property.
+  length: function() {
+    var content = this._scac_observableContent();
+    return content ? content.get('length') : 0;
+  }.property().cacheable(),
+
+  /**
+    Returns the object at the specified index based on the observable content
   */
-  contentCloneReset: function() {
-    this._changelog = [];
-    this.set('contentClone', null);
+  objectAt: function(idx) {
+    var content = this._scac_observableContent();
+    return content ? content.objectAt(idx) : undefined ;    
   },
-
+  
   /**
-   SC.Array interface implementation.
-   
-   @param idx {Number} Starting index in the array to replace.  If idx >= 
-     length, then append to the end of the array.
-   
-   @param amt {Number} Number of elements that should be removed from the 
-     array, starting at *idx*.
-   
-   @param objects {Array} An array of zero or more objects that should be 
-     inserted into the array at *idx* 
+    Forwards a replace on to the content, but only if reordering is allowed.
   */
-  replace: function(idx, amt, objects) {
-    var content = this.get('content') ;
-    
-    // in case the passed objects are controllers, convert to source objects.
-    var copyIdx = objects.length ;
-    var sourceObjects = objects ;
-    if (copyIdx > 0) {
-      sourceObjects = [] ;
-      while(--copyIdx >= 0) {
-        sourceObjects[copyIdx] = this._sourceObjectFor(objects[copyIdx]) ;
+  replace: function(start, amt, objects) {
+    // check for various conditions before a replace is allowed
+    if (!objects || objects.get('length')===0) {
+      if (!this.get('canRemoveContent')) {
+        throw "%@ cannot remove objects from the current content".fmt(this);
       }
-    }
-    
-    // create clone of content array if needed
-    var contentClone = this.get('contentClone') ;
-    if (!contentClone) {
-      this.set('contentClone', contentClone = SC.$A(content)) ;
-    }
-    
-    // now, record the removed objects.  This may be used later.
-    if (this.get('destroyOnRemoval')) {
-      if (!this._deletions) this._deletions = [] ;
-      for (var i=0; i < amt; i++) {
-        this._deletions.push(content.objectAt(idx + i));
+    } else if (!this.get('canReorderContent')) {
+      throw "%@ cannot add or reorder the current content".fmt(this);
+    }    
+    
+    // if we can do this, then just forward the change.  This should fire
+    // updates back up the stack, updating rangeObservers, etc.
+    var content = this.get('content'); // note: use content, not observable
+    var objsToDestroy = [], i;
+    if (this.get('destroyOnRemoval')){
+      for(i=0; i<amt; i++){
+        objsToDestroy.push(content.objectAt(i+start));
       }
     }
     
-    // and record additions
-    if (!this._changelog) this._changelog = []; 
-    this._changelog.push({ idx: idx, amt: amt, objects: sourceObjects });
-    
-    // then actually perform the edit on the contentClone
-    contentClone.replace(idx, amt, sourceObjects);
-    
-    this.editorDidChange() ;
-    this.enumerableContentDidChange();
-    this.updateSelectionAfterContentChange();
+    if (content) content.replace(start, amt, objects);
+    for(i=0; i<objsToDestroy.length; i++){
+      
+      objsToDestroy[i].destroy();
+    }
+    objsToDestroy = null;
     
-    return this;
+    return this; 
   },
   
-  /**
-    SC.Array interface implimentation.
-    @param idx {Number} The index of the item to return.  If idx exceeds the 
-      current length, return null.
-  */
-  objectAt: function(idx) {
-    var obj = this._getSourceContent() ;
-    obj = (obj && obj.objectAt) ? obj.objectAt(idx) : null;
-    return this._objectControllerFor(obj) ;
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+  
+  init: function() {
+    sc_super();
+    this._scac_contentDidChange();
   },
-  /**
-    SC.Array interface implimentation.
-    @property
-    @type {integer}
+  
+  /** @private
+    Cached observable content property.  Set to NO to indicate cache is 
+    invalid.
   */
-  length: function( key, value ) {
-    var ret = this._getSourceContent() ;
-    return (ret && ret.get) ? (ret.get('length') || 0) : 0 ;
-  }.property(),
+  _scac_cached: NO,
   
   /**
-    Returns the index in the array of the specified object.
+    @private
     
-    This can handle both controller wrapper objects and source content objects.
-  */
-  indexOf: function(obj) {
-    return this._getSourceContent().indexOf(this._sourceObjectFor(obj)) ;
-  },
-  
-  _getSourceContent: function() {
-    return this.get('contentClone') || this.get('content') || [];
-  },
+    Returns the current array this controller is actually managing.  Usually
+    this should be the same as the content property, but sometimes we need to
+    generate something different because the content is not a regular array.
+    
+    Passing YES to the force parameter will force this value to be recomputed.
   
-  /** @private */
-  performCommitChanges: function() {
-    var content = this.get('content');
-    var ret     = true;
-    var idx ;
+    @returns {SC.Array} observable or null
+  */
+  _scac_observableContent: function() {
+    var ret = this._scac_cached;
+    if (ret !== NO) return ret;
     
-    // cannot commit changes to null content.  Return an error.
-    if (!content) {
-      return SC.$error("No Content");
-    }
+    var content = this.get('content'),
+        orderBy, func, t, len;
     
-    if (content.beginPropertyChanges) content.beginPropertyChanges();
+    // empty content
+    if (SC.none(content)) return this._scac_cached = [];
+
+    // wrap non-enumerables
+    if (!content.isEnumerable) {
+      ret = this.get('allowsSingleContent') ? [content] : [];
+      return (this._scac_cached = ret);
+    } 
     
-    // apply all the changes made to the clone
-    if (this._changelog) {
-      var changelog = this._changelog ;
-      var max = changelog.length;
-      for(idx=0;idx<max;idx++) {
-        var change = changelog[idx];
-        content.replace(change.idx, change.amt, change.objects) ;
-      }
-      this._changelog.length = 0 ; // reset changelog
+    // no-wrap
+    orderBy = this.get('orderBy');
+    if (!orderBy) {
+      if (content.isSCArray) return (this._scac_cached = content) ;
+      else throw "%@.orderBy is required for unordered content".fmt(this);     
     }
     
-    // finally, destroy any removed objects if necessary.  Make 
-    // sure the objects have not been re-added before doing this.
-    if (this.get('destroyOnRemoval') && this._deletions && this._deletions.length>0) {
-      idx = this._deletions.length;
-      while(--idx >= 0) {
-        var obj = this._deletions[idx] ;
-        if (obj && obj.destroy && (content.indexOf(obj) < 0)) {
-          obj.destroy() ; 
-        }
-      }
-      this._deletions.length = 0; // clear array
+    // all remaining enumerables must be sorted.
+    
+    // build array - then sort it
+    switch(SC.typeOf(orderBy)) {
+    case SC.T_STRING:
+      orderBy = [orderBy];
+      break;
+    case SC.T_FUNCTION:
+      func = orderBy ;
+      break;
+    case SC.T_ARRAY:
+      break;
+    default:
+      throw "%@.orderBy must be Array, String, or Function".fmt(this);
     }
     
-    // changes commited, clear any created objects from the internal array
-    if (this._createdObjects) this._createdObjects.length = 0 ;
-    
-     // finish commiting changes.
-    if (content.endPropertyChanges) content.endPropertyChanges();
-    if (content.commitChanges) ret = content.commitChanges();
+    len = orderBy.get('length');
     
-    if (SC.$ok(ret)) {
-      this.contentCloneReset();
-      this.editorDidClearChanges();
+    // generate comparison function if needed - use orderBy
+    if (!func) {
+      func = function(a,b) {
+        var idx=0, status=0, key, aValue, bValue;
+        for(idx=0;(idx<len)&&(status===0);idx++) {
+          key = orderBy.objectAt(idx);
+        
+          if (!a) aValue = a ;
+          else if (a.isObservable) aValue = a.get(key);
+          else aValue = a[key];
+
+          if (!b) bValue = b ;
+          else if (b.isObservable) bValue = b.get(key);
+          else bValue = b[key];
+        
+          status = SC.compare(aValue, bValue);
+        }
+        return status ; 
+      };
     }
+
+    ret = [];
+    content.forEach(function(o) { ret.push(o); });
+    ret.sort(func);
     
-    return ret;
+    func = null ; // avoid memory leaks
+    return (this._scac_cached = ret) ;
   },
   
-  /** @private */
-  performDiscardChanges: function() {
-    this.contentCloneReset();
-    this.editorDidClearChanges();
-    
-    // if any objects were created before the commit, destroy the objects 
-    // and reset the array.
-    if (this._createdObjects && this._createdObjects.length > 0) {
-      var idx = this._createdObjects.length ;
-      while(--idx >= 0) {
-        var obj = this._createdObjects[idx] ;
-        if (SC.typeOf(obj.destroy) === SC.T_FUNCTION) obj.destroy() ;
-      }
-      this._createdObjects.length = 0 ;
+  /**
+    Whenever content changes, setup and teardown observers on the content
+    as needed.
+  */
+  _scac_contentDidChange: function() {
+
+    this._scac_cached = NO; // invalidate observable content
+    
+    var cur    = this.get('content'),
+        orders = !!this.get('orderBy'),
+        last   = this._scac_content,
+        oldlen = this._scac_length || 0,
+        ro     = this._scac_rangeObserver,
+        func   = this._scac_rangeDidChange,
+        efunc  = this._scac_enumerableDidChange,
+        sfunc  = this._scac_contentStateDidChange,
+        newlen;
+        
+    if (last === cur) return this; // nothing to do
+
+    // teardown old observer
+    if (last) {
+      if (ro && last.isSCArray) last.removeRangeObserver(ro);
+      else if (last.isEnumerable) last.removeObserver('[]', this, efunc);
+      last.removeObserver('state', this, sfunc);
     }
     
-    return true;
-  },
+    ro = null;
+    
+    // save new cached values 
+    this._scac_cached = NO;
+    this._scac_content = cur ;
+    
+    // setup new observers
+    // also, calculate new length.  do it manually instead of using 
+    // get(length) because we want to avoid computed an ordered array.
+    if (cur) {
+      if (!orders && cur.isSCArray) ro = cur.addRangeObserver(null,this,func);
+      else if (cur.isEnumerable) cur.addObserver('[]', this, efunc);
+      newlen = cur.isEnumerable ? cur.get('length') : 1; 
+      cur.addObserver('state', this, sfunc);
+      
+    } else newlen = SC.none(cur) ? 0 : 1;
+
+    this._scac_rangeObserver = ro;
+    
+
+    // finally, notify enumerable content has changed.
+    this._scac_length = newlen;
+    this._scac_contentStateDidChange();
+    this.enumerableContentDidChange(0, newlen, newlen - oldlen);
+    this.updateSelectionAfterContentChange();
+  }.observes('content'),
   
-  /** @private
-    Returns the object controller for a source value.
+  /**
+    Whenever enumerable content changes, need to regenerate the 
+    observableContent and notify that the range has changed.  
+    
+    IMPORTANT: Assumes content is not null and is enumerable
   */
-  _objectControllerFor: function(obj) {
-    if (!this.useControllersForContent) return obj;
-    
-    var controllers = (this._objControllers = this._objControllers || {}) ;
-    var guid = SC.guidFor(obj) ;
-    var ret = controllers[guid] ;
-    if (!ret) {
-      ret = controllers[guid] = this.controllerForValue(obj) ;
-      if (ret) ret.__isArrayController = true ;
-    }
-    return ret ;
+  _scac_enumerableDidChange: function() {
+    var content = this.get('content'), // use content directly
+        newlen  = content.get('length'),
+        oldlen  = this._scac_length;
+        
+    this._scac_length = newlen;
+    this.beginPropertyChanges();
+    this._scac_cached = NO; // invalidate
+    this.enumerableContentDidChange(0, newlen, newlen-oldlen);
+    this.endPropertyChanges();
+    this.updateSelectionAfterContentChange();
   },
   
-  /** @private
-    Returns the source object for the passed value.  If the passed value is a 
-    controller, this will map back to the sourceo object.  Otherwise the 
-    object itself will be returned.
+  /**
+    Whenever array content changes, need to simply forward notification.
+    
+    Assumes that content is not null and is SC.Array.
   */
-  _sourceObjectFor: function(obj) {
-    return (obj && obj.kindOf && obj.kindOf(SC.Controller)) ?
-      obj.get('content') :
-      obj ;
+  _scac_rangeDidChange: function(array, objects, key, indexes) {
+    if (key !== '[]') return ; // nothing to do
+    
+    var content = this.get('content');
+    this._scac_length = content.get('length');
+    this._scac_cached = NO; // invalidate
+    
+    // if array length has changed, just notify every index from min up
+    if (indexes) {
+      this.beginPropertyChanges();
+      indexes.forEachRange(function(start, length) {
+        this.enumerableContentDidChange(start, length, 0);
+      }, this);
+      this.endPropertyChanges();
+      this.updateSelectionAfterContentChange();
+    }
   },
   
-  /** @private */
-  init: function() {
-    sc_super() ;
-    if (this.get('content')) this._contentDidChange() ;
+  /**
+    Whenver the content "state" property changes, relay out.
+  */
+  _scac_contentStateDidChange: function() {
+    this.notifyPropertyChange('state');
   }
   
 });