sproutcore 1.9.2 → 1.10.0.rc.1

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

@@ -7,14 +7,14 @@
 
 /** @class
 
-  A SliderView shows a horizontal slider control that you can use to set 
+  A SliderView shows a horizontal slider control that you can use to set
   variable values.
 
   You can use a slider view much like you would any other control.  Simply
-  set the value or content/contentValueKey to whatever value you want to 
-  display.  You can also set the maximumValue and minValue properties to 
+  set the value or content/contentValueKey to whatever value you want to
+  display.  You can also set the maximumValue and minValue properties to
   determine the mapping of the control to its children.
-  
+
   @extends SC.View
   @extends SC.Control
   @since SproutCore 1.0
@@ -22,40 +22,40 @@
 */
 SC.SliderView = SC.View.extend(SC.Control,
 /** @scope SC.SliderView.prototype */ {
-  
+
   classNames: 'sc-slider-view',
 
   /**
     The WAI-ARIA role for slider view. This property's value should not be
     changed.
 
-    @property {String}
+    @type String
   */
   ariaRole: 'slider',
 
   /**
-    Bind this to the current value of the progress bar.  Note that by default 
-    an empty value will disable the progress bar and a multiple value too make 
+    Bind this to the current value of the progress bar.  Note that by default
+    an empty value will disable the progress bar and a multiple value too make
     it indeterminate.
   */
   value: 0.50,
   valueBindingDefault: SC.Binding.single().notEmpty(),
-  
+
   /**
     The minimum value of the progress.
-  */ 
+  */
   minimum: 0,
   minimumBindingDefault: SC.Binding.single().notEmpty(),
 
   /**
-    Optionally specify the key used to extract the minimum progress value 
+    Optionally specify the key used to extract the minimum progress value
     from the content object.  If this is set to null then the minimum value
     will not be derived from the content object.
-    
-    @property {String}
+
+    @type String
   */
   contentMinimumKey: null,
-  
+
   /**
     The maximum value of the progress bar.
   */
@@ -63,25 +63,25 @@ SC.SliderView = SC.View.extend(SC.Control,
   maximumBindingDefault: SC.Binding.single().notEmpty(),
 
   /**
-    Optionally specify the key used to extract the maximum progress value 
+    Optionally specify the key used to extract the maximum progress value
     from the content object.  If this is set to null then the maximum value
     will not be derived from the content object.
-    
-    @property {String}
+
+    @type String
   */
   contentMaximumKey: null,
-  
+
   /**
     Optionally set to the minimum step size allowed.
-    
+
     All values will be rounded to this step size when displayed.
   */
   step: 0.1,
 
   // ..........................................................
   // INTERNAL PROPERTIES
-  // 
-  
+  //
+
   displayProperties: ['displayValue', 'ariaValue', 'minimum', 'maximum', 'step', 'frame'],
 
   /**
@@ -95,7 +95,7 @@ SC.SliderView = SC.View.extend(SC.Control,
   // The name of the render delegate which is creating and maintaining
   // the DOM associated with instances of this view
   renderDelegateName: 'sliderRenderDelegate',
-  
+
   displayValue: function() {
     var min = this.get('minimum'),
         max = this.get('maximum'),
@@ -109,27 +109,27 @@ SC.SliderView = SC.View.extend(SC.Control,
     if (!SC.none(step) && step !== 0) {
       value = Math.round(value / step) * step;
     }
-    
+
     // determine the percent across
     if(value!==0) value = Math.floor((value - min) / (max - min) * 100);
-    
+
     return value;
   }.property('value', 'minimum', 'maximum', 'step').cacheable(),
-  
+
   _isMouseDown: NO,
-  
+
   mouseDown: function(evt) {
-    if (!this.get('isEnabled')) return YES; // nothing to do...
+    if (!this.get('isEnabledInPane')) return YES; // nothing to do...
     this.set('isActive', YES);
     this._isMouseDown = YES ;
     return this._triggerHandle(evt, YES);
   },
-  
+
   // mouseDragged uses same technique as mouseDown.
-  mouseDragged: function(evt) { 
-    return this._isMouseDown ? this._triggerHandle(evt) : YES; 
+  mouseDragged: function(evt) {
+    return this._isMouseDown ? this._triggerHandle(evt) : YES;
   },
-  
+
   // remove active class
   mouseUp: function(evt) {
     if (this._isMouseDown) this.set('isActive', NO);
@@ -137,9 +137,9 @@ SC.SliderView = SC.View.extend(SC.Control,
     this._isMouseDown = NO;
     return ret ;
   },
-  
+
   mouseWheel: function(evt) {
-    if (!this.get('isEnabled')) return YES;
+    if (!this.get('isEnabledInPane')) return YES;
     var min = this.get('minimum'),
         max = this.get('maximum'),
         step = this.get('step'),
@@ -148,21 +148,21 @@ SC.SliderView = SC.View.extend(SC.Control,
     if (newVal< min) this.setIfChanged('value', min);
     else if (newVal> max) this.setIfChanged('value', max);
     else this.setIfChanged('value', newVal);
-    return YES ;  
+    return YES ;
   },
-  
+
   touchStart: function(evt){
     return this.mouseDown(evt);
   },
-  
+
   touchEnd: function(evt){
     return this.mouseUp(evt);
   },
-  
+
   touchesDragged: function(evt){
     return this.mouseDragged(evt);
   },
-  
+
   /** @private
     Updates the handle based on the mouse location of the handle in the
     event.
@@ -171,63 +171,63 @@ SC.SliderView = SC.View.extend(SC.Control,
     var width = this.get('frame').width,
         min = this.get('minimum'), max=this.get('maximum'),
         step = this.get('step'), v=this.get('value'), loc;
-        
-    if(firstEvent){    
+
+    if(firstEvent){
       loc = this.convertFrameFromView({ x: evt.pageX }).x;
       this._evtDiff = evt.pageX - loc;
     }else{
       loc = evt.pageX-this._evtDiff;
     }
-    
+
     // convert to percentage
     loc = Math.max(0, Math.min(loc / width, 1));
-    
+
     // if the location is NOT in the general vicinity of the slider, we assume
     // that the mouse pointer or touch is in the center of where the knob should be.
     // otherwise, if we are starting, we need to do extra to add an offset
     if (firstEvent) {
       var value = this.get("value");
       value = (value - min) / (max - min);
-      
+
       // if the value and the loc are within 16px
       if (Math.abs(value * width - loc * width) < 16) this._offset = value - loc;
       else this._offset = 0;
     }
-    
+
     // add offset and constrain
     loc = Math.max(0, Math.min(loc + this._offset, 1));
 
     // convert to value using minimum/maximum then constrain to steps
     loc = min + ((max-min)*loc);
     if (step !== 0) loc = Math.round(loc / step) * step ;
-    
+
     // if changes by more than a rounding amount, set v.
     if (Math.abs(v-loc)>=0.01) {
-      this.set('value', loc); // adjust 
+      this.set('value', loc); // adjust
     }
-    
+
     return YES ;
   },
-  
-  /** tied to the isEnabled state */
+
+  /** tied to the isEnabledInPane state */
   acceptsFirstResponder: function() {
-    if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabled'); }
+    if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabledInPane'); }
     return NO;
-  }.property('isEnabled'),
-  
+  }.property('isEnabledInPane'),
+
   keyDown: function(evt) {
      // handle tab key
      if (evt.which === 9 || evt.keyCode === 9) {
        var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
        if(view) view.becomeFirstResponder();
-       else evt.allowDefault(); 
+       else evt.allowDefault();
        return YES ; // handled
      }
      if (evt.which >= 33 && evt.which <= 40){
        var min = this.get('minimum'),max=this.get('maximum'),
           step = this.get('step'),
           size = max-min, val=0, calculateStep, current=this.get('value');
-     
+
        if (evt.which === 37 || evt.which === 38 || evt.which === 34 ){
          if(step === 0){
            if(size<100){
@@ -252,7 +252,7 @@ SC.SliderView = SC.View.extend(SC.Control,
               }
             }else{
               val = current+step;
-            }       
+            }
        }
        if (evt.which === 36){
          val=max;
@@ -265,7 +265,7 @@ SC.SliderView = SC.View.extend(SC.Control,
        evt.allowDefault();
        return NO;
      }
-     return YES; 
+     return YES;
    },
 
    contentKeys: {

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

@@ -1,891 +1,961 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
-// Copyright: ©2006-2011 Strobe Inc. and contributors.
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('views/split_divider');
 
-SC.RESIZE_BOTH = 'resize-both';
-SC.RESIZE_TOP_LEFT = 'resize-top-left';
-SC.RESIZE_BOTTOM_RIGHT = 'resize-bottom-right';
+/**
+  Prevents the view from getting resized when the SplitView is resized,
+  or the user resizes or moves an adjacent child view.
+*/
+SC.FIXED_SIZE = 'sc-fixed-size';
+
+/**
+  Prevents the view from getting resized when the SplitView is resized
+  (unless the SplitView has resized all other views), but allows it to
+  be resized when the user resizes or moves an adjacent child view.
+*/
+SC.RESIZE_MANUAL = 'sc-manual-size';
+
+/**
+  Allows the view to be resized when the SplitView is resized or due to
+  the user resizing or moving an adjacent child view.
+*/
+SC.RESIZE_AUTOMATIC = 'sc-automatic-resize';
+
 
 /**
   @class
 
-  A split view is used to show views that the user can resize or collapse.
-  To use a split view you need to set a topLeftView, a bottomRightView and,
-  optionally, a splitDividerView.  You can also set various other properties
-  to control the minimum and maximum thickness allowed for the flexible views.
+  SC.SplitView arranges multiple views side-by-side or on top of each
+  other.
 
-  ## Example
+  SplitView can resize its children to fit (the default behavior),
+  or resize itself to fit its children--allowing you to build column-
+  based file browsers and the like. As one child (a divider, most likely)
+  is moved, SplitView can move additional children to get them out of the way.
 
-      SC.SplitView.design({
+  Setting Up SplitViews
+  =======================================
+  You can set up a split view like any other view in SproutCore:
 
-        // the left view...
-        topLeftView: SC.View.design({
-          // view contents
+      SplitView.design({
+        childViews: 'leftPanel rightPanel'.w(),
+
+        leftPanel: SC.View.design(SC.SplitChild, {
+          minimumSize: 200
         }),
 
-        // the right view
-        bottomRightView: SC.View.design({
-          // view contents
+        rightPanel: SC.View.design(SC.SplitChild, {
+          // it is usually the right panel you want to resize
+          // as the SplitView resizes:
+          autoResizeStyle: SC.RESIZE_AUTOMATIC
         })
-
       })
 
-  When the user clicks and drags on a split divider view, it will
-  automatically resize the views immediately before and after the split
-  divider view. You can constrain the resizing allowed by the split view
-  either by setting a minThickness and maxThickness property on the views
-  themselves or by implementing the method splitViewConstrainThickness on
-  a delegate object.
+  Dividers
+  ------------------------------------------
+  Dividers are automatically added between every child view.
+
+  You can specify what dividers to create in two ways:
 
-  In addition to resizing views, users can also collapse views by double
-  clicking on a split divider view.  When a view is collapsed, it's isVisible
-  property is set to NO and its space it removed from the view.  Double
-  clicking on a divider again will restore a collapsed view.  A user can also
-  start to drag the divider to show the collapsed view.
+  - Set splitDividerView to change the default divider view class to use.
 
-  You can programmatically control collapsing behavior using various
-  properties on either the split view or its child views, and/or by
-  implementing the method splitViewCanCollapse on a delegate object.
+  - Override splitDividerViewBetween(splitView, view1, view2), either in
+    your subclass of SC.SplitView or in a delegate, and return the divider
+    view instance that should go between the two views.
 
-  Finally, SplitViews can layout their child views either horizontally or
-  vertically.  To choose the direction of layout set the layoutDirection
-  property on the view (or the :direction option with the view helper).
-  This property should be set when the view is created. Changing it
-  dynamically will have an unknown effect.
+  As far as SplitView is concerned, dividers are actually just ordinary
+  child views. They usually have an autoResizeStyle of SC.FIXED_SIZE, and
+  usually mixin SC.SplitThumb to relay mouse and touch events to the SplitView.
+  To prevent adding dividers between dividers and views or dividers and dividers,
+  SC.SplitView marks all dividers with an isSplitDivider property.
 
-  In addition, the top/left and bottom/right child views can have these
-  properties:
+  If you do not want to use split dividers at all, or wish to set them up
+  manually in your childViews array, set splitDividerView to null.
 
   @extends SC.View
-  @since SproutCore 1.0
-  @author Charles Jolley
-  @author Lawrence Pit
-  @author Erich Ocean
+  @author Alex Iskander
 */
-SC.SplitView = SC.View.extend(
-/** @scope SC.SplitView.prototype */ {
+SC.SplitView = SC.View.extend({
+  /**@scope SC.SplitView.prototype*/
 
   classNames: ['sc-split-view'],
 
-  displayProperties: ['layoutDirection'],
+  childViews: ['topLeftView', 'bottomRightView'],
+
+  // used by the splitView computed property to find the nearest SplitView.
+  isSplitView: YES,
 
   /**
-    delegate for controlling split view behavior.
+   * The type of view to create for the divider views. SC.SplitDividerView by default.
+   *
+   * Should be a class, not an instance.
+   *
+   * @type {SC.View}
   */
-  delegate: null,
+  splitDividerView: SC.SplitDividerView,
 
   /**
-    Direction of layout.  Must be SC.LAYOUT_HORIZONTAL or SC.LAYOUT_VERTICAL.
-
-    @type String
-    @default SC.LAYOUT_HORIZONTAL
+   * Determines whether the SplitView should lay out its children
+   * horizontally or vertically.
+   *
+   * Possible values:
+   *
+   * - SC.LAYOUT_HORIZONTAL: side-by-side
+   * - SC.LAYOUT_VERTICAL: on top of each other
+   *
+   * @type LayoutDirection
   */
   layoutDirection: SC.LAYOUT_HORIZONTAL,
 
   /**
-    Set to NO to disable collapsing for all views.
+   * Determines whether the SplitView should attempt to resize its
+   * child views to fit within the SplitView's own frame (the default).
+   *
+   * If NO, the SplitView will decide its own size based on its children.
+   *
+   * @type Boolean
+   * @default YES
+  */
+  shouldResizeChildrenToFit: YES,
 
-    @type Boolean
-    @default YES
+  /**
+   * The cursor of the child view currently being dragged (if any).
+   * This allows the cursor to be used even if the user drags "too far",
+   * past the child's own boundaries.
+   *
+   * @type {String}
   */
-  canCollapseViews: YES,
+  splitChildCursorStyle: null,
 
-  /*
-    Configure which view(s) you want to autoresize when this split view's
-    layout changes.  Possible options are:
+  /**
+    @private
+    Only occurs during drag, which only happens after render, so we
+    update directly.
+  */
+  _scsv_splitChildCursorDidChange: function() {
+    this.get('cursor').set('cursorStyle', this.get('splitChildCursorStyle'));
+  }.observes('splitChildCursorStyle'),
 
-    | SC.RESIZE_BOTTOM_RIGHT | (default) resizes bottomRightView |
-    | SC.RESIZE_TOP_LEFT | resized topLeftView |
 
-    @type String
-    @default SC.RESIZE_BOTTOM_RIGHT
-  */
-  autoresizeBehavior: SC.RESIZE_BOTTOM_RIGHT,
+  // set up the SC.Cursor instance that this view and all the subviews
+  // will share.
+  init: function() {
+    this.cursor = SC.Cursor.create();
+    sc_super();
+  },
+
+  //
+  // RENDERING
+  // Things like layoutDirection must be rendered as class names.
+  // We delegate to a render delegate.
+  //
+  displayProperties: ['layoutDirection'],
+  renderDelegateName: 'splitRenderDelegate',
 
+  //
+  // UTILITIES
+  //
   /**
-    Specifies how much space the fixed view should use when the view is setup.
-    A number less than one will be treated as a percentage, while a number
-    greater than one will be treated as a pixel width.
+   * @private
+   * Returns either the width or the height of the SplitView's frame,
+   * depending on the value of layoutDirection. If layoutDirection is
+   * SC.LAYOUT_HORIZONTAL, this will return the SplitView's width; otherwise,
+   * the SplitView's height.
+   *
+   * @property
+   * @type {Number}
+  */
+  _frameSize: function(){
+    if (this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL) {
+      return this.get('frame').width;
+    } else {
+      return this.get('frame').height;
+    }
+  }.property('frame', 'layoutDirection').cacheable(),
 
-    The thickness will be applied to the opposite view defined by
-    autoresizeBehavior.
+  viewDidResize: function(orig) {
+    this.scheduleTiling();
+    orig();
+  }.enhance(),
 
-    @type Number
-    @default 0.5
-  */
-  defaultThickness: 0.5,
+  layoutDirectionDidChange: function() {
+    this.scheduleTiling();
+  }.observes('layoutDirection'),
 
+  //
+  // PUBLIC CHILD VIEW ADJUSTMENT API
+  //
   /**
-    Sets minimum thickness of topLeft view.
-
-    @type Number
-    @default null
+   * Attempts to adjust the position of a child view, such as a divider.
+   *
+   * The implementation for this may be overridden in the delegate method
+   * splitViewAdjustPositionForChild.
+   *
+   * You may use this method to automatically collapse the view by setting
+   * the view's position to the position of the next or previous view (accessible
+   * via the child's nextView and previousView properties and the
+   * getPositionForChild method).
+   *
+   * @param {SC.View} child The child to move.
+   * @param {Number} position The position to move the child to.
+   * @returns {Number} The position to which the child was actually moved.
   */
-  topLeftMinThickness: null,
+  adjustPositionForChild: function(child, position){
+    return this.invokeDelegateMethod(this.get('delegate'), 'splitViewAdjustPositionForChild', this, child, position);
+  },
 
   /**
-    Sets maximum thickness of topLeft view.
-
-    @type Number
-    @default null
+   * Returns the position within the split view for a child view,
+   * such as a divider. This position is not necessarily identical
+   * to the view's actual layout 'left' or 'right'; that position could
+   * be offset--for instance, to give a larger grab area to the divider.
+   *
+   * The implementation for this is in the delegate method
+   * splitViewGetPositionForChild.
+   *
+   * @param {SC.View} child The child whose position to find.
+   * @returns {Number} The position.
   */
-  topLeftMaxThickness: null,
+  getPositionForChild: function(child){
+    return this.invokeDelegateMethod(this.get('delegate'), 'splitViewGetPositionForChild', this, child);
+  },
 
-  /**
-    Sets minimum thickness of bottomRight view.
+  //
+  // CHILD VIEW MANAGEMENT
+  //
 
-    @type Number
-    @default null
-  */
-  bottomRightMinThickness: null,
+  // When children are added and removed, we must re-run the setup process that
+  // sets the SplitView child properties such as nextView, previousView, etc.,
+  // and which adds dividers.
+  didAddChild: function() {
+    // we have to add a guard because _scsv_setupChildViews may add or remove
+    // dividers, causing this method to be called again uselessly.
+    // this is purely for performance. The guard goes here, rather than in
+    // setupChildViews, because of the invokeOnce.
+    if (this._scsv_settingUpChildViews) return;
+    this._scsv_settingUpChildViews = YES;
 
-  /**
-    Sets maximum thickness of bottomRight view.
+    this.invokeOnce('_scsv_setupChildViews');
 
-    @type Number
-    @default null
-  */
-  bottomRightMaxThickness: null,
+    this._scsv_settingUpChildViews = NO;
+  },
 
-  /**
-    Sets thickness of divider.
+  didRemoveChild: function() {
+    // we have to add a guard because _scsv_setupChildViews may add or remove
+    // dividers, causing this method to be called again uselessly.
+    // this is purely for performance. The guard goes here, rather than in
+    // setupChildViews, because of the invokeOnce.
+    if (this._scsv_settingUpChildViews) return;
+    this._scsv_settingUpChildViews = YES;
 
-    @type Number
-    @default null
-  */
-  dividerThickness: null,
+    this.invokeOnce('_scsv_setupChildViews');
 
-  /**
-    Yes, we're a split view.
+    this._scsv_settingUpChildViews = NO;
+  },
 
-    @type Boolean
-    @default YES
-  */
-  isSplitView: YES,
+  createChildViews: function() {
+    sc_super();
 
-  /**
-    The view to use for the top left
+    if (this._scsv_settingUpChildViews) return;
+    this._scsv_settingUpChildViews = YES;
 
-    @type SC.View
-    @default SC.View
-  */
-  topLeftView: SC.View,
+    this.invokeOnce('_scsv_setupChildViews');
 
-  /**
-    The view to use for the divider
+    this._scsv_settingUpChildViews = NO;
+  },
 
-    @type SC.View
-    @default SC.SplitDividerView
+  /**
+   * @private
+   * During initialization and whenever the child views change, SplitView needs
+   * to set some helper properties on the children and create any needed dividers.
+   *
+   * Note: If dividers are added, childViews changes, causing this to be called again;
+   * this is proper, because this updates the nextView, etc. properties appropriately.
+   *
+   * The helper properties are: previousView, nextView, viewIndex.
   */
-  dividerView: SC.SplitDividerView,
+  _scsv_setupChildViews: function() {
+    var del = this.get('delegate'),
 
-  /**
-    The view to use for the bottom right
+        children = this.get('childViews').copy(), len = children.length, idx,
+        child, lastChild, lastNonDividerChild,
 
-    @type SC.View
-    @default SC.View
-  */
-  bottomRightView: SC.View,
+        oldDividers = this._scsv_dividers || {}, newDividers = {}, divider, dividerId;
 
-  /**
-    The current thickness for the topLeftView
+    // loop through all children, keeping track of the previous child
+    // as we loop using the lastChild variable.
+    for (idx = 0; idx < len; idx++) {
+      child = children[idx];
 
-    @type Number
-    @isReadOnly
-  */
-  topLeftThickness: function() {
-    var view = this.get('topLeftView');
-    return view ? this.thicknessForView(view) : 0;
-  }.property('topLeftView').cacheable(),
+      // do initial setup of things like autoResizeStyle:
+      if (!child.get('autoResizeStyle')) {
+        if (child.get('size') !== undefined) {
+          child.set('autoResizeStyle', SC.RESIZE_MANUAL);
+        } else {
+          child.set('autoResizeStyle', SC.RESIZE_AUTOMATIC);
+        }
+      }
 
-  /**
-    The current thickness for the bottomRightView
+      // we initialize the size first thing in case the size is empty (fill)
+      // if it is empty, the way we position the views would lead to inconsistent
+      // sizes. In addition, we will constrain all initial sizes so they'll be valid
+      // when/if we auto-resize them.
+      var size = this.invokeDelegateMethod(del, 'splitViewGetSizeForChild', this, child);
+      size = this.invokeDelegateMethod(del, 'splitViewConstrainSizeForChild', this, child, size);
+      this.invokeDelegateMethod(del, 'splitViewSetSizeForChild', this, child, size);
 
-    @type Number
-    @isReadOnly
-  */
-  bottomRightThickness: function() {
-    var view = this.get('bottomRightView');
-    return view ? this.thicknessForView(view) : 0;
-  }.property('bottomRightView').cacheable(),
+      child.previousView = lastChild;
+      child.nextView = undefined;
+      child.viewIndex = idx;
 
-  /**
-    The cursor thumb views should use for themselves
+      if (lastChild) {
+        lastChild.nextView = child;
+      }
 
-    @type SC.Cursor
-    @default null
-  */
-  thumbViewCursor: null,
+      if (lastNonDividerChild && !child.isSplitDivider) {
+        dividerId = SC.guidFor(lastNonDividerChild) + "-" + SC.guidFor(child);
 
-  /**
-    Used by split divider to decide if the view can be collapsed.
+        divider = oldDividers[dividerId];
 
-    @type Boolean
-    @isReadOnly
-  */
-  canCollapseView: function(view) {
-    return this.invokeDelegateMethod(this.delegate, 'splitViewCanCollapse', this, view);
-  },
+        // if the previous view is a divider, but is not in our set of dividers,
+        // then it is manually created. If it is manually created, we should not
+        // create a new one.
+        if (!divider && !lastChild.isSplitDivider) {
+          divider = this.invokeDelegateMethod(del, 'splitViewDividerBetween', this, lastNonDividerChild, child);
+        }
 
-  /**
-    Returns the thickness for a given view.
+        if (divider) {
+          divider.isSplitDivider = YES;
+          newDividers[dividerId] = divider;
 
-    @param {SC.View} view the view to get.
-    @returns the view with the width.
-  */
-  thicknessForView: function(view) {
-    var direction = this.get('layoutDirection'),
-        ret = view.get('frame');
-    return (direction === SC.LAYOUT_HORIZONTAL) ? ret.width : ret.height;
+          if (oldDividers[dividerId]) {
+            delete oldDividers[dividerId];
+          } else {
+            this.insertBefore(divider, child);
+          }
+        }
+      }
+
+
+      lastChild = child;
+      if (!child.isSplitDivider) lastNonDividerChild = child;
+    }
+
+    // finally, remove all dividers that we didn't keep
+    for (dividerId in oldDividers) {
+      oldDividers[dividerId].destroy();
+    }
+
+    this._scsv_dividers = newDividers;
+
+    // retile immediately.
+    this._scsv_tile();
   },
 
-  /** @private
-    Creates the topLeftView/dividerView/bottomRightView and adds them to the
-    childViews array
+  //
+  // BASIC LAYOUT CODE
+  //
 
-    @returns SC.View the SplitDivider view (this)
+  /**
+    Whether the SplitView needs to be re-laid out. You can change this by
+    calling scheduleTiling.
   */
-  createChildViews: function() {
-    var childViews = [],
-        views = ['topLeftView', 'dividerView', 'bottomRightView'],
-        l = views.length,
-        view, i;
-
-    for (i=0; i<l; ++i) {
-      if (view = this.get(views[i])) {
-        view = this[views[i]] = this.createChildView(view, {
-          layoutView: this,
-          rootElementPath: [i]
-        });
-        childViews.push(view);
-      }
-    }
+  needsTiling: YES,
 
-    this.set('childViews', childViews);
-    return this;
+  /**
+    Schedules a retile of the SplitView.
+  */
+  scheduleTiling: function() {
+    this.set('needsTiling', YES);
+    this.invokeOnce('_scsv_tile');
   },
 
-  /** @private
-    Layout the views.
+  tileIfNeeded: function() {
+    if (!this.get('needsTiling')) return;
+    this._scsv_tile();
+  },
 
-    This method needs to be called anytime you change the view thicknesses
-    to make sure they are arranged properly.  This will set up the views so
-    that they can resize appropriately.
+  /**
+   * @private
+   * Tiling is the simpler of two layout paths. Tiling lays out all of the
+   * children according to their size, and, if shouldResizeChildrenToFit is
+   * YES, attempts to resize the children to fit in the SplitView.
+   *
+   * It is called when the child views are initializing or have changed, and
+   * when the SplitView is resized.
+   *
   */
-  updateChildLayout: function() {
-    var topLeftView = this.get('topLeftView'),
-        bottomRightView = this.get('bottomRightView'),
-        dividerView = this.get('dividerView'),
-        autoresizeBehavior = this.get('autoresizeBehavior'),
-        direction = this.get('layoutDirection'),
-        frame = this.get('frame'),
-        topLeftThickness = this._desiredTopLeftThickness,
-        dividerThickness = this.get('dividerThickness'),
-        splitViewThickness = (direction === SC.LAYOUT_HORIZONTAL) ? frame.width : frame.height,
-        bottomRightThickness = splitViewThickness - dividerThickness - topLeftThickness,
-        layout, isCollapsed;
-
-    dividerThickness = (!SC.none(dividerThickness)) ? dividerThickness : 7;
-
-    // top/left view
-    isCollapsed = topLeftView.get('isCollapsed') || NO;
-    topLeftView.setIfChanged('isVisible', !isCollapsed);
-    layout = SC.clone(topLeftView.get('layout'));
-
-    if (direction === SC.LAYOUT_HORIZONTAL) {
-      layout.top = 0;
-      layout.left = 0;
-      layout.bottom = 0;
-
-      switch (autoresizeBehavior) {
-        case SC.RESIZE_BOTH:
-          throw "SC.RESIZE_BOTH is currently unsupported.";
-        case SC.RESIZE_TOP_LEFT:
-          layout.right = bottomRightThickness + dividerThickness;
-          delete layout.width;
-          break;
-        case SC.RESIZE_BOTTOM_RIGHT:
-          delete layout.right;
-          delete layout.height;
-          layout.width = topLeftThickness;
-          break;
-      }
-    } else {
-      layout.top = 0;
-      layout.left = 0;
-      layout.right = 0;
-
-      switch (autoresizeBehavior) {
-        case SC.RESIZE_BOTH:
-          throw "SC.RESIZE_BOTH is currently unsupported.";
-        case SC.RESIZE_TOP_LEFT:
-          layout.bottom = bottomRightThickness + dividerThickness;
-          delete layout.height;
-          break;
-        case SC.RESIZE_BOTTOM_RIGHT:
-          layout.height = topLeftThickness;
-          delete layout.bottom;
-          delete layout.width;
-          break;
-      }
-    }
-    topLeftView.set('layout', layout);
-
-    // split divider view
-    if (dividerView) {
-      layout = SC.clone(dividerView.get('layout'));
-
-      if (direction === SC.LAYOUT_HORIZONTAL) {
-        layout.width = dividerThickness;
-        layout.top = 0;
-        layout.bottom = 0;
-        delete layout.height;
-
-        switch (autoresizeBehavior) {
-          case SC.RESIZE_BOTH:
-            throw "SC.RESIZE_BOTH is currently unsupported.";
-            // delete layout.left ;
-            // delete layout.right ;
-            // layout.centerX = topLeftThickness + (dividerThickness / 2) ;
-            // delete layout.centerY ;
-            //break ;
-          case SC.RESIZE_TOP_LEFT:
-            layout.right = bottomRightThickness;
-            delete layout.left;
-            delete layout.centerX;
-            delete layout.centerY;
-            break;
-          case SC.RESIZE_BOTTOM_RIGHT:
-            layout.left = topLeftThickness;
-            delete layout.right;
-            delete layout.centerX;
-            delete layout.centerY;
-            break;
-        }
-      } else {
-        layout.height = dividerThickness;
-        layout.left = 0;
-        layout.right = 0;
-        delete layout.width;
-
-        switch (autoresizeBehavior) {
-          case SC.RESIZE_BOTH:
-            throw "SC.RESIZE_BOTH is currently unsupported.";
-            // delete layout.top ;
-            // delete layout.bottom ;
-            // delete layout.centerX ;
-            // layout.centerY = topLeftThickness + (dividerThickness / 2) ;
-            //break ;
-          case SC.RESIZE_TOP_LEFT:
-            layout.bottom = bottomRightThickness;
-            delete layout.top;
-            delete layout.centerX;
-            delete layout.centerY;
-            break ;
-          case SC.RESIZE_BOTTOM_RIGHT:
-            layout.top = topLeftThickness;
-            delete layout.bottom;
-            delete layout.centerX;
-            delete layout.centerY;
-            break ;
-        }
-      }
-      dividerView.set('layout', layout);
+  _scsv_tile: function() {
+    var del = this.get('delegate');
+
+    // LOGIC:
+    //
+    // - Call splitViewLayoutChildren delegate method to position views and
+    //   find total size.
+    //
+    // - If meant to automatically resize children to fit, run the
+    //   splitViewResizeChildrenToFit delegate method.
+    //
+    // - Call splitViewLayoutChildren again if splitViewResizeChildrenToFit was called.
+    //
+    // - If not meant to automatically resize children to fit, change the SplitView
+    //   size to match the total size of all children.
+
+    var size, frameSize = this.get('_frameSize');
+
+    size = this.invokeDelegateMethod(del, 'splitViewLayoutChildren', this);
+
+    if (this.get('shouldResizeChildrenToFit') && size !== frameSize) {
+      this.invokeDelegateMethod(del, 'splitViewResizeChildrenToFit', this, size);
+      size = this.invokeDelegateMethod(del, 'splitViewLayoutChildren', this);
     }
 
-    // bottom/right view
-    isCollapsed = bottomRightView.get('isCollapsed') || NO;
-    bottomRightView.setIfChanged('isVisible', !isCollapsed);
-    layout = SC.clone(bottomRightView.get('layout'));
-
-    if (direction === SC.LAYOUT_HORIZONTAL) {
-      layout.top = 0;
-      layout.bottom = 0;
-      layout.right = 0;
-
-      switch (autoresizeBehavior) {
-        case SC.RESIZE_BOTH:
-          throw "SC.RESIZE_BOTH is currently unsupported.";
-        case SC.RESIZE_BOTTOM_RIGHT:
-          layout.left = topLeftThickness + dividerThickness;
-          delete layout.width;
-          break;
-        case SC.RESIZE_TOP_LEFT:
-          layout.width = bottomRightThickness;
-          delete layout.left;
-          break;
-      }
-    } else {
-      layout.left = 0;
-      layout.right = 0;
-      layout.bottom = 0;
-
-      switch (autoresizeBehavior) {
-        case SC.RESIZE_BOTH:
-          throw "SC.RESIZE_BOTH is currently unsupported.";
-        case SC.RESIZE_BOTTOM_RIGHT:
-          layout.top = topLeftThickness + dividerThickness;
-          delete layout.height;
-          break;
-        case SC.RESIZE_TOP_LEFT:
-          delete layout.top;
-          layout.height = bottomRightThickness;
-          break;
+    if (!this.get('shouldResizeChildrenToFit')) {
+      if (this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL) {
+        this.adjust('width', size);
+      } else {
+        this.adjust('height', size);
       }
     }
-    bottomRightView.set('layout', layout);
 
-    this
-      .notifyPropertyChange('topLeftThickness')
-      .notifyPropertyChange('bottomRightThickness');
+    this.set('needsTiling', NO);
   },
 
-  /** @private */
-  renderLayout: function(context, firstTime) {
-    if (firstTime || this._recalculateDivider) {
+  /**
+   * Lays out the children one next to each other or one on top of the other,
+   * based on their sizes. It returns the total size.
+   *
+   * You may override this method in a delegate.
+   *
+   * @param {SC.SplitView} splitView The SplitView whose children need layout.
+   * @returns {Number} The total size of all the SplitView's children.
+  */
+  splitViewLayoutChildren: function(splitView) {
+    var del = this.get('delegate');
 
-      var layoutDirection = this.get('layoutDirection'),
-          frame = this.get('frame'),
-          elem = this.$(),
-          desiredThickness = this.get('defaultThickness') ,
-          autoResizeBehavior = this.get('autoresizeBehavior'),
-          dividerThickness = this.get('dividerThickness'),
-          splitViewThickness;
+    var children = this.get('childViews'), len = children.length, idx,
+        child, pos = 0;
 
-      if (!this.get('thumbViewCursor')) {
-        this.set('thumbViewCursor', SC.Cursor.create());
-      }
+    for (idx = 0; idx < len; idx++) {
+      child = children[idx];
 
-      dividerThickness = !SC.none(dividerThickness) ? dividerThickness : 7;
+      this.invokeDelegateMethod(del, 'splitViewSetPositionForChild', this, children[idx], pos);
+      pos += this.invokeDelegateMethod(del, 'splitViewGetSizeForChild', this, children[idx]);
+    }
 
-      // Turn a flag on to recalculate the splitting if the desired thickness
-      // is a percentage
-      if (this._recalculateDivider === undefined && desiredThickness < 1) {
-        this._recalculateDivider = YES;
-      } else if (this._recalculateDivider) {
-        this._recalculateDivider = NO;
-      }
+    return pos;
+  },
 
-      if (elem[0]) {
-        splitViewThickness = (layoutDirection === SC.LAYOUT_HORIZONTAL) ? elem[0].offsetWidth : elem[0].offsetHeight;
+  /**
+   * Attempts to resize the child views of the split view to fit in the SplitView's
+   * frame. So it may proportionally adjust the child views, the current size of the
+   * SplitView's content is passed.
+   *
+   * You may override this method in a delegate.
+   *
+   * @param {SC.SplitView} splitView The SC.SplitView whose children should be resized.
+   * @param {Number} contentSize The current not-yet-resized size of the SplitView's content.
+  */
+  splitViewResizeChildrenToFit: function(splitView, contentSize) {
+    var del = this.get('delegate');
+
+    // LOGIC:
+    //
+    //   - 1) Size auto-resizable children in proportion to their existing sizes to attempt
+    //     to fit within the target size— auto-resizable views have autoResizeStyle set
+    //     to SC.RESIZE_AUTOMATIC.
+    //
+    //   - 2) Size non-auto-resizable children in proportion to their existing sizes—these
+    //     views will _not_ have an autoResizeStyle of SC.RESIZE_AUTOMATIC.
+    //
+
+    var frameSize = this.get('_frameSize');
+    var children = this.get('childViews'), len = children.length, idx,
+        child, resizableSize = 0, nonResizableSize = 0, childSize;
+
+    // To do this sizing while keeping things proportionate, the total size of resizable
+    // views and the total size of non-auto-resizable views must be calculated independently.
+    for (idx = 0; idx < len; idx++) {
+      child = children[idx];
+
+      childSize = this.invokeDelegateMethod(del, 'splitViewGetSizeForChild', this, child);
+
+      if (this.invokeDelegateMethod(del, 'splitViewShouldResizeChildToFit', this, child)) {
+        resizableSize += childSize;
       } else {
-        splitViewThickness = (layoutDirection === SC.LAYOUT_HORIZONTAL) ? frame.width : frame.height;
+        nonResizableSize += childSize;
       }
+    }
 
-      // if default thickness is < 1, convert from percentage to absolute
-      if (SC.none(desiredThickness) || (desiredThickness > 0 && desiredThickness < 1)) {
-        desiredThickness = Math.floor((splitViewThickness - (dividerThickness)) * (desiredThickness || 0.5));
-      }
+    var runningSize = contentSize;
 
-      if (autoResizeBehavior === SC.RESIZE_BOTTOM_RIGHT) {
-        this._desiredTopLeftThickness = desiredThickness;
-      } else {
-        this._desiredTopLeftThickness = splitViewThickness - dividerThickness - desiredThickness ;
-      }
+    // we run through each twice: non-aggressively, then aggressively. This is controlled by providing
+    // a -1 for the outOfSize. This tells the resizing to not bother with proportions and just resize
+    // whatever it can.
+    runningSize = this._resizeChildrenForSize(runningSize, frameSize, YES, resizableSize);
+    runningSize = this._resizeChildrenForSize(runningSize, frameSize, YES, -1);
+    runningSize = this._resizeChildrenForSize(runningSize, frameSize, NO, nonResizableSize);
+    runningSize = this._resizeChildrenForSize(runningSize, frameSize, NO, -1);
+  },
 
-      // make sure we don't exceed our min and max values, and that collapse
-      // settings are respected
-      // cached values are required by _updateTopLeftThickness() below...
-      this._topLeftView = this.get('topLeftView');
-      this._bottomRightView = this.get('bottomRightView');
-      this._topLeftViewThickness = this.thicknessForView(this.get('topLeftView'));
-      this._bottomRightThickness = this.thicknessForView(this.get('bottomRightView'));
-      this._dividerThickness = this.get('dividerThickness');
-      this._layoutDirection = this.get('layoutDirection');
+  /**
+   * @private
+   * Utility method used by splitViewResizeChildrenToFit to do the proportionate
+   * sizing of child views.
+   *
+   * @returns {Number} The new runningSize.
+  */
+  _resizeChildrenForSize: function(runningSize, targetSize, useResizable, outOfSize) {
+    var del = this.get('delegate');
 
-      // this handles min-max settings and collapse parameters
-      this._updateTopLeftThickness(0);
+    var children = this.get('childViews'), idx, len = children.length, child;
 
-      // update the cursor used by thumb views
-      this._setCursorStyle();
+    var diff = targetSize - runningSize;
+    for (idx = 0; idx < len; idx++) {
+      child = children[idx];
 
-      // actually set layout for our child views
-      this.updateChildLayout();
-    }
+      var originalChildSize = this.invokeDelegateMethod(del, 'splitViewGetSizeForChild', this, child),
+          size = originalChildSize;
 
-    sc_super();
-  },
+      var isResizable = this.invokeDelegateMethod(del, 'splitViewShouldResizeChildToFit', this, child);
+      if (isResizable === useResizable) {
+        // if outOfSize === -1 then we are aggressively resizing (not resizing proportionally)
+        if (outOfSize === -1) size += diff
+        else size += (size / outOfSize) * diff;
 
-  /** @private */
-  render: function(context, firstTime) {
-    sc_super();
+        size = Math.round(size);
 
-    if (this._inLiveResize) this._setCursorStyle();
+        size = this.invokeDelegateMethod(del, 'splitViewConstrainSizeForChild', this, child, size);
+        this.invokeDelegateMethod(del, 'splitViewSetSizeForChild', this, child, size);
 
-    if (this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL) context.addClass('sc-horizontal');
-    else context.addClass('sc-vertical');
-  },
 
-  /** @private
-    Update the split view's layout based on mouse movement.
+        // we remove the original child size—but we don't add it back.
+        // we don't add it back because the load is no longer shared.
+        if (outOfSize !== -1) outOfSize -= originalChildSize;
+      }
+
+      // We modify the old size to account for our changes so we can keep a running diff
+      runningSize -= originalChildSize;
+      runningSize += size;
+      diff = targetSize - runningSize;
+    }
 
-    Call this method in the mouseDown: method of your thumb view. The split view
-    will begin tracking the mouse and will update its own layout to reflect the movement
-    of the mouse. As a result, the position of your thumb view will also be updated.
+    return runningSize;
+  },
 
-    @returns {Boolean}
+  /**
+   * Determines whether the SplitView should attempt to resize the specified
+   * child view when the SplitView's size changes.
+   *
+   * You may override this method in a delegate.
+   *
+   * @param {SC.SplitView} splitView The SplitView that owns the child.
+   * @param {SC.View} child The child view.
+   * @returns {Boolean}
   */
-  mouseDownInThumbView: function(evt, thumbView) {
-    var responder = this.getPath('pane.rootResponder');
-    if (!responder) return NO; // nothing to do
-
-    // we're not the source view of the mouseDown:, so we need to capture events manually to receive them
-    responder.dragDidStart(this);
-
-    // cache for later
-    this._mouseDownX = evt.pageX;
-    this._mouseDownY = evt.pageY;
-    this._thumbView = thumbView;
-    this._topLeftView = this.get('topLeftView');
-    this._bottomRightView = this.get('bottomRightView');
-    this._topLeftViewThickness = this.thicknessForView(this.get('topLeftView'));
-    this._bottomRightThickness = this.thicknessForView(this.get('bottomRightView'));
-    this._dividerThickness = this.get('dividerThickness');
-    this._layoutDirection = this.get('layoutDirection');
-
-    this.beginLiveResize();
-    this._inLiveResize = YES;
-
-    return YES;
+  splitViewShouldResizeChildToFit: function(splitView, child) {
+    return (
+      this.get('shouldResizeChildrenToFit')  &&
+      child.get('autoResizeStyle') === SC.RESIZE_AUTOMATIC
+    );
   },
 
-  /** @private */
-  mouseDragged: function(evt) {
-    var offset = (this._layoutDirection === SC.LAYOUT_HORIZONTAL) ? evt.pageX - this._mouseDownX : evt.pageY - this._mouseDownY ;
-    this._updateTopLeftThickness(offset);
-    return YES;
+  /**
+   * Attempts to move a single child from its current position to
+   * a desired position.
+   *
+   * You may override the behavior on a delegate.
+   *
+   * @param {SC.SplitView} splitView The splitView whose child should be moved.
+   * @param {SC.View} child The child which should be moved.
+   * @param {Number} position The position to attempt to move the child to.
+   * @returns {Number} The final position of the child.
+  */
+  splitViewAdjustPositionForChild: function(splitView, child, position) {
+    var del = this.get('delegate');
+    // Unlike tiling, the process of moving a child view is much more sophisticated.
+    //
+    // The basic sequence of events is simple:
+    //
+    //  - resize previous child
+    //  - resize the child itself to compensate for its movement if
+    //    child.compensatesForMovement is YES.
+    //  - adjust position of next child.
+    //
+    // As the process is recursive in both directions (resizing a child may attempt
+    // to move it if it cannot be resized further), adjusting one child view could
+    // affect many _if not all_ of the SplitView's children.
+    //
+    // For safety, sanity, and stability, the recursive chain-reactions only travel
+    // in one direction; for instance, resizing the previous view may attempt to adjust
+    // its position, but that adjustment will not propagate to views after it.
+    //
+    // This process, while powerful, has one complication: if you change a bunch of views
+    // before a view, and then _fail_ to move views after it, the views before must be
+    // moved back to their starting points. But if their positions were changed directly,
+    // this would be impossible.
+    //
+    // As such, the positions are not changed directly. Rather, the changes are written
+    // to a _plan_, and changes only committed once everything is finalized.
+    //
+    // splitViewAdjustPositionForChild is the entry point, and as such is responsible
+    // for triggering the creation of the plan, the needed modifications, and the
+    // finalizing of it.
+    var plan = this._scsv_createPlan();
+    var finalPosition = this._scsv_adjustPositionForChildInPlan(plan, child, position, child);
+    this._scsv_commitPlan(plan);
+
+    return finalPosition;
   },
 
-  /** @private */
-  mouseUp: function(evt) {
-    if (this._inLiveResize === YES) {
-    	this._thumbView = null; // avoid memory leaks
-    	this._inLiveResize = NO;
-    	this.endLiveResize();
-    	return YES;
+  /**
+   * @private
+   * Creates a plan in which to prepare changes to the SplitView's children.
+   *
+   * A plan is an array with the same number of elements as the SplitView has children.
+   * Each element is a hash containing these properties:
+   *
+   * - child: the view the hash represents
+   * - originalPosition: the position before the planning process
+   * - position: the planned new position.
+   * - originalSize: the size before the planning process
+   * - size: the planned new size.
+   *
+   * The repositioning and resizing logic can, at any time, reset part of the plan
+   * to its original state, allowing layout processes to be run non-destructively.
+   * In addition, storing the original positions and sizes is more performant
+   * than looking them up each time.
+   *
+   * @returns {Plan}
+  */
+  _scsv_createPlan: function() {
+    var del = this.get('delegate'),
+        plan = [], children = this.get('childViews'), idx, len = children.length,
+        child, childPosition, childSize;
+
+    for (idx = 0; idx < len; idx++) {
+      child = children[idx];
+      childPosition = this.invokeDelegateMethod(del, 'splitViewGetPositionForChild', this, child);
+      childSize = this.invokeDelegateMethod(del, 'splitViewGetSizeForChild', this, child);
+
+      plan[idx] = {
+        child: child,
+        originalPosition: childPosition,
+        position: childPosition,
+        originalSize: childSize,
+        size: childSize
+      };
     }
 
-    this._setCursorStyle();
-    return NO;
+    return plan;
   },
 
-  /** @private */
-  touchesDragged: function(evt){
-    return this.mouseDragged(evt);
-  },
+  /**
+    * @private
+    * Resets a range of the plan to its original settings.
+    *
+    * @param {Plan} plan The plan.
+    * @param {Number} first The first item in the range.
+    * @param {Number} last The last item in the range.
+   */
+   _scsv_resetPlanRange: function(plan, first, last) {
+     for (var idx = first; idx <= last; idx++) {
+       plan[idx].position = plan[idx].originalPosition;
+       plan[idx].size = plan[idx].originalSize;
+     }
+   },
 
-  /** @private */
-  touchEnd: function(evt){
-    return this.mouseUp(evt);
-  },
+  /**
+   * @private
+   * Commits the changes specified in the plan to the child views.
+   *
+   * @param {Plan} plan The plan with the changes.
+  */
+  _scsv_commitPlan: function(plan) {
+    var del = this.get('delegate'), len = plan.length, idx, item, end = 0;
 
-  /** @private */
-  doubleClickInThumbView: function(evt, thumbView) {
-    var view = this._topLeftView,
-        isCollapsed = view.get('isCollapsed') || NO;
+    for (idx = 0; idx < len; idx++) {
+      item = plan[idx];
+      if (item.size !== item.originalSize) {
+        this.invokeDelegateMethod(del, 'splitViewSetSizeForChild', this, item.child, item.size);
+      }
 
-    if (!isCollapsed && !this.canCollapseView(view)) {
-      view = this._bottomRightView;
-      isCollapsed = view.get('isCollapsed') || NO;
-      if (!isCollapsed && !this.canCollapseView(view)) return NO;
+      if (item.position !== item.originalPosition) {
+        this.invokeDelegateMethod(del, 'splitViewSetPositionForChild', this, item.child, item.position);
+      }
+
+      end = item.position + item.size;
     }
 
-    if (!isCollapsed) {
-      // remember thickness in it's uncollapsed state
-      this._uncollapsedThickness = this.thicknessForView(view);
-      // and collapse
-      // this.setThicknessForView(view, 0) ;
-      if (view === this._topLeftView) {
-        this._updateTopLeftThickness(this.topLeftThickness()*-1);
-      } else {
-        this._updateBottomRightThickness(this.bottomRightThickness()*-1);
-      }
 
-      // if however the splitview decided not to collapse, clear:
-      if (!view.get("isCollapsed")) {
-        this._uncollapsedThickness = null;
-      }
-    } else {
-      // uncollapse to the last thickness in it's uncollapsed state
-      if (view === this._topLeftView) {
-        this._updateTopLeftThickness(this._uncollapsedThickness);
+    if (!this.get('shouldResizeChildrenToFit')) {
+      if (this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL) {
+        this.adjust('width', end);
       } else {
-        this._updateBottomRightThickness(this._uncollapsedThickness);
+        this.adjust('height', end);
       }
-      view._uncollapsedThickness = null;
     }
-    this._setCursorStyle();
-    return true;
   },
 
-  /** @private */
-  _updateTopLeftThickness: function(offset) {
-    var topLeftView = this._topLeftView,
-        bottomRightView = this._bottomRightView,
-        // the current thickness, not the original thickness
-        topLeftViewThickness = this.thicknessForView(topLeftView),
-        bottomRightViewThickness = this.thicknessForView(bottomRightView),
-        minAvailable = this._dividerThickness,
-        maxAvailable = 0,
-        proposedThickness = this._topLeftViewThickness + offset,
-        direction = this._layoutDirection,
-        bottomRightCanCollapse = this.canCollapseView(bottomRightView),
-        thickness = proposedThickness,
-        // constrain to thickness set on top/left
-        max = this.get('topLeftMaxThickness'),
-        min = this.get('topLeftMinThickness'),
-        bottomRightThickness, tlCollapseAtThickness, brCollapseAtThickness;
-
-    if (!topLeftView.get("isCollapsed")) {
-      maxAvailable += topLeftViewThickness;
-    }
-    if (!bottomRightView.get("isCollapsed")) {
-      maxAvailable += bottomRightViewThickness;
+  /**
+   * Moves the specified child view as close as it can to the specified
+   * position, saving all changes this causes into the plan.
+   *
+   * The "directness" of the action also comes into play. An action is direct if:
+   *
+   * - The child being modified is the originating child (the one being dragged, most likely)
+   * - The child is being _positioned_ as is immediately _after_ the originating child.
+   * - The child is being _sized_ and is immediately _before_ the originating child.
+   *
+   * This means that direct actions modify the originating child or the border between
+   * it and a sibling. Some child views don't like to accept indirect actions, as the
+   * indirect actions may confuse or annoy users in some cases.
+   *
+   * @param {Plan} plan The plan write changes to (and get some data from).
+   * @param {SC.View} child The child to move.
+   * @param {Number} position The position to attempt to move the child to.
+   * @param {Boolean} source The child from which the attempt to adjust originated—used
+   * to determine directness.
+   *
+   * @returns {Number} The final position of the child.
+  */
+  _scsv_adjustPositionForChildInPlan: function(plan, child, position, source) {
+    var del = this.get('delegate');
+
+    if (
+      !child.get('allowsIndirectAdjustments') &&
+      source !== child && source !== child.previousView
+    ) {
+      return plan[child.viewIndex].position;
     }
 
-    if (!SC.none(max)) thickness = Math.min(max, thickness);
-    if (!SC.none(min)) thickness = Math.max(min, thickness);
-
-    // constrain to thickness set on bottom/right
-    max = this.get('bottomRightMaxThickness');
-    min = this.get('bottomRightMinThickness');
-    bottomRightThickness = maxAvailable - thickness;
-    if (!SC.none(max)) {
-      bottomRightThickness = Math.min(max, bottomRightThickness);
+    // since the process is recursive, we need to prevent the processing from
+    // coming back in this direction.
+    if (child._splitViewIsAdjusting) {
+      return plan[child.viewIndex].position;
     }
-    if (!SC.none(min)) {
-      bottomRightThickness = Math.max(min, bottomRightThickness);
+
+    child._splitViewIsAdjusting = YES;
+
+    //
+    // STEP 1: attept to resize the previous child.
+    //
+    var previousChild = child.previousView, nextChild = child.nextView,
+        previousChildPosition, previousChildSize,
+        nextChildPosition, nextChildSize,
+        size = plan[child.viewIndex].size;
+
+    if (previousChild && !previousChild._splitViewIsAdjusting) {
+      // we determine the size we would like it to be by subtracting its position
+      // from the position _we_ would like to have.
+      previousChildPosition = plan[previousChild.viewIndex].position;
+      previousChildSize = position - previousChildPosition;
+
+      previousChildSize = this._scsv_adjustSizeForChildInPlan(
+        plan, previousChild, previousChildSize, source
+      );
+
+      // the child may not have resized/moved itself all the way, so we will
+      // recalculate the target position based on how much it _was_ able to.
+      position = previousChildPosition + previousChildSize;
+    } else if (!previousChild) {
+      // if there is no previous child view, then this is the first view and
+      // as such _must_ be at 0.
+      position = 0;
     }
-    thickness = maxAvailable - bottomRightThickness;
 
-    // constrain to thickness determined by delegate.
-    thickness = this.invokeDelegateMethod(this.delegate,
-      'splitViewConstrainThickness', this, topLeftView, thickness);
+    // further steps deal with children _after_ this one; these steps should
+    // not be performed if those children are already being taken care of.
+    if (nextChild && nextChild._splitViewIsAdjusting) {
+      child._splitViewIsAdjusting = NO;
+      plan[child.viewIndex].position = position;
+      return position;
+    }
 
-    // cannot be more than what's available
-    thickness = Math.min(thickness, maxAvailable);
 
-    // cannot be less than zero
-    thickness = Math.max(0, thickness);
+    //
+    // STEP 2: attempt to resize this view to avoid moving the next one.
+    // Only occurs if the view's settings tell it to compensate _and_ there is a
+    // next view to compensate for, or we are resizing to fit and there _is no_ next child.
+    //
+    if (child.get('compensatesForMovement') && nextChild) {
+      nextChildPosition = plan[nextChild.viewIndex].position;
+      size = this._scsv_adjustSizeForChildInPlan(plan, child, nextChildPosition - position);
+    } else if (!nextChild && this.get('shouldResizeChildrenToFit')) {
+      nextChildPosition = this.get('_frameSize');
+      size = this._scsv_adjustSizeForChildInPlan(plan, child, nextChildPosition - position);
+      position = nextChildPosition - size;
+    }
 
-    tlCollapseAtThickness = topLeftView.get('collapseAtThickness');
-    if (!tlCollapseAtThickness) tlCollapseAtThickness = 0;
-    brCollapseAtThickness = bottomRightView.get('collapseAtThickness');
-    brCollapseAtThickness = SC.none(brCollapseAtThickness) ? maxAvailable : (maxAvailable - brCollapseAtThickness);
+    // STEP 3: attempt to move the next child to account for movement of this one.
+    if (nextChild) {
+      nextChildPosition = position + size;
+      nextChildPosition = this._scsv_adjustPositionForChildInPlan(plan, nextChild, nextChildPosition, source);
+    }
 
-    if ((proposedThickness <= tlCollapseAtThickness) && this.canCollapseView(topLeftView)) {
-      // want to collapse top/left, check if this doesn't violate the max thickness of bottom/right
-      max = bottomRightView.get('maxThickness');
-      if (!max || (minAvailable + maxAvailable) <= max) {
-        // collapse top/left view, even if it has a minThickness
-        thickness = 0;
+    // if we were unable to position the next child, or there is no next
+    // child but we need to resize children to fit, we have to undo some
+    // of our previous work.
+    if (nextChildPosition && position !== nextChildPosition - size) {
+      position = nextChildPosition - size;
+
+      // then, for whatever is left, we again resize the previous view, after throwing
+      // away the previous calculations.
+      if (previousChild && !previousChild._splitViewIsAdjusting) {
+        this._scsv_resetPlanRange(plan, 0, previousChild.viewIndex);
+        previousChildSize = position - plan[previousChild.viewIndex].position;
+        this._scsv_adjustSizeForChildInPlan(plan, previousChild, previousChildSize, child);
       }
-    } else if (proposedThickness >= brCollapseAtThickness && this.canCollapseView(bottomRightView)) {
-      // want to collapse bottom/right, check if this doesn't violate the max thickness of top/left
-      max = topLeftView.get('maxThickness');
-      if (!max || (minAvailable + maxAvailable) <= max) {
-        // collapse bottom/right view, even if it has a minThickness
-        thickness = maxAvailable;
-      }
-    }
 
-    // now apply constrained value
-    if (thickness != this.thicknessForView(topLeftView)) {
-      this._desiredTopLeftThickness = thickness;
+    }
 
-      // un-collapse if needed.
-      topLeftView.set('isCollapsed', thickness === 0);
-      bottomRightView.set('isCollapsed', thickness >= maxAvailable);
 
-      this.updateChildLayout(); // updates child layouts
-      this.displayDidChange(); // updates cursor
-    }
+    plan[child.viewIndex].position = position;
+    child._splitViewIsAdjusting = NO;
+    return position;
   },
 
+  _scsv_adjustSizeForChildInPlan: function(plan, child, size, source) {
+    var del = this.get('delegate');
 
-  /** @private */
-  _updateBottomRightThickness: function(offset) {
-    var topLeftView = this._topLeftView ,
-        bottomRightView = this._bottomRightView,
-        topLeftViewThickness = this.thicknessForView(topLeftView), // the current thickness, not the original thickness
-        bottomRightViewThickness = this.thicknessForView(bottomRightView),
-        minAvailable = this._dividerThickness,
-        maxAvailable = 0,
-        proposedThickness = this._topLeftViewThickness + offset,
-        direction = this._layoutDirection,
-        bottomRightCanCollapse = this.canCollapseView(bottomRightView),
-        thickness = proposedThickness,
-        // constrain to thickness set on top/left
-        max = this.get('topLeftMaxThickness'),
-        min = this.get('topLeftMinThickness'),
-        bottomRightThickness, tlCollapseAtThickness, brCollapseAtThickness;
-
-    if (!topLeftView.get("isCollapsed")) maxAvailable += topLeftViewThickness;
-    if (!bottomRightView.get("isCollapsed")) maxAvailable += bottomRightViewThickness;
-
-    if (!SC.none(max)) thickness = Math.min(max, thickness);
-    if (!SC.none(min)) thickness = Math.max(min, thickness);
-
-    // constrain to thickness set on bottom/right
-    max = this.get('bottomRightMaxThickness');
-    min = this.get('bottomRightMinThickness');
-    bottomRightThickness = maxAvailable - thickness ;
-    if (!SC.none(max)) bottomRightThickness = Math.min(max, bottomRightThickness);
-    if (!SC.none(min)) bottomRightThickness = Math.max(min, bottomRightThickness);
-    thickness = maxAvailable - bottomRightThickness;
-
-    // constrain to thickness determined by delegate.
-    thickness = this.invokeDelegateMethod(this.delegate, 'splitViewConstrainThickness', this, topLeftView, thickness);
-
-    // cannot be more than what's available
-    thickness = Math.min(thickness, maxAvailable);
-
-    // cannot be less than zero
-    thickness = Math.max(0, thickness);
-
-    tlCollapseAtThickness = topLeftView.get('collapseAtThickness');
-    if (!tlCollapseAtThickness) tlCollapseAtThickness = 0;
-    brCollapseAtThickness = bottomRightView.get('collapseAtThickness');
-    brCollapseAtThickness = SC.none(brCollapseAtThickness) ? maxAvailable : (maxAvailable - brCollapseAtThickness);
-
-    if ((proposedThickness <= tlCollapseAtThickness) && this.canCollapseView(topLeftView)) {
-      // want to collapse top/left, check if this doesn't violate the max thickness of bottom/right
-      max = bottomRightView.get('maxThickness');
-      if (!max || (minAvailable + maxAvailable) <= max) {
-        // collapse top/left view, even if it has a minThickness
-        thickness = 0;
-      }
-    } else if (proposedThickness >= brCollapseAtThickness && this.canCollapseView(bottomRightView)) {
-      // want to collapse bottom/right, check if this doesn't violate the max thickness of top/left
-      max = topLeftView.get('maxThickness');
-      if (!max || (minAvailable + maxAvailable) <= max) {
-        // collapse bottom/right view, even if it has a minThickness
-        thickness = maxAvailable;
-      }
+    if (
+      source &&
+      !child.get('allowsIndirectAdjustments') &&
+      source !== child && source !== child.nextView && source !== child.previousView
+    ) {
+      return plan[child.viewIndex].size;
     }
 
-    // now apply constrained value
-    if (thickness != this.thicknessForView(topLeftView)) {
-      this._desiredTopLeftThickness = thickness;
+    // First, see if resizing alone will do the job.
+    var actualSize = this.invokeDelegateMethod(del, 'splitViewConstrainSizeForChild', this, child, size);
 
-      // un-collapse if needed.
-      topLeftView.set('isCollapsed', thickness === 0);
-      bottomRightView.set('isCollapsed', thickness >= maxAvailable);
+    plan[child.viewIndex].size = actualSize;
 
-      this.updateChildLayout(); // updates child layouts
-      this.displayDidChange(); // updates cursor
-    }
+    if (size === actualSize) return size;
+
+    // if not, attempt to move the view.
+    var currentPosition = plan[child.viewIndex].position,
+        targetPosition = currentPosition + size - actualSize;
+
+    var position = this._scsv_adjustPositionForChildInPlan(plan, child, targetPosition, source);
+
+    // the result is the new right edge minus the old left edge—that is,
+    // the size we can pretend we are for the caller, now that we have
+    // resized some other views.
+    return position + actualSize - currentPosition;
   },
 
   /**
-    This observes 'layoutDirection' to update the cursor style immediately
-    after the value of the layoutDirection of Split view is changed
-
-    @private
+   * Returns a view instance to be used as a divider between two other views,
+   * or null if no divider should be used.
+   *
+   * The value of the 'splitDividerView' property will be instantiated. The default
+   * value of this property is 'SC.SplitDividerView'. If the value is null or undefined,
+   * null will be returned, and the SplitView will not automatically create dividers.
+   *
+   * You may override this method in a delegate.
+   *
+   * @param {SC.SplitView} splitView The split view that is hte parent of the
+   * two views.
+   * @param {SC.View} view1 The first view.
+   * @param {SC.View} view2 The second view.
+   * @returns {SC.View} The view instance to use as a divider.
   */
-  _setCursorStyle: function() {
-    var topLeftView = this._topLeftView,
-        bottomRightView = this._bottomRightView,
-        thumbViewCursor = this.get('thumbViewCursor'),
-        // updates the cursor of the thumb view that called
-        // mouseDownInThumbView() to reflect the status of the drag
-        tlThickness = this.thicknessForView(topLeftView),
-        brThickness = this.thicknessForView(bottomRightView),
-        dV = this.get('dividerView');
-    this._layoutDirection = this.get('layoutDirection');
-    if (topLeftView.get('isCollapsed') ||
-        tlThickness === this.get("topLeftMinThickness") ||
-        brThickness == this.get("bottomRightMaxThickness")) {
-      thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "e-resize" : "s-resize");
-    } else if (bottomRightView.get('isCollapsed') ||
-               tlThickness === this.get("topLeftMaxThickness") ||
-               brThickness == this.get("bottomRightMinThickness")) {
-      thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "w-resize" : "n-resize");
-    } else {
-      if(SC.browser.isIE) {
-        thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "e-resize" : "n-resize");
-      }
-      else {
-        thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "ew-resize" : "ns-resize");
-      }
-    }
+  splitViewDividerBetween: function(splitView, view1, view2){
+    if (!this.get('splitDividerView')) return null;
 
-    dV.set('cursor', thumbViewCursor);
-    if( this._inLiveResize) this.set('cursor', thumbViewCursor);
-  }.observes('layoutDirection'),
+    return this.get('splitDividerView').create();
+  },
 
   /**
-    (DELEGATE) Control whether a view can be collapsed.
-
-    The default implementation returns NO if the split view property
-    canCollapseViews is set to NO or when the given view has
-    property canCollapse set to NO, otherwise it returns YES.
+   * Returns the current position for the specified child.
+   *
+   * You may override this in a delegate.
+   *
+   * @param {SC.SplitView} splitView The SplitView which owns the child.
+   * @param {SC.View} child The child.
+   * @returns Number
+  */
+  splitViewGetPositionForChild: function(splitView, child) {
+    return child.get('position');
+  },
 
-    @param {SC.SplitView} splitView the split view
-    @param {SC.View} view the view we want to collapse.
-    @returns {Boolean} YES to allow collapse.
+  /**
+   * Sets the position for the specified child.
+   *
+   * You may override this in a delegate.
+   *
+   * @param {SC.SplitView} splitView The SplitView which owns the child.
+   * @param {SC.View} child The child.
+   * @param {Number} position The position to move the child to.
   */
-  splitViewCanCollapse: function(splitView, view) {
-    if (splitView.get('canCollapseViews') === NO) return NO;
-    if (view.get('canCollapse') === NO) return NO;
-    return YES;
+  splitViewSetPositionForChild: function(splitView, child, position) {
+    child.set('position', position);
   },
 
   /**
-    (DELEGATE) Constrain a views allowed thickness.
+   * Returns the current size for the specified child.
+   *
+   * You may override this in a delegate.
+   *
+   * @param {SC.SplitView} splitView The SplitView which owns the child.
+   * @param {SC.View} child The child.
+   * @returns Number
+  */
+  splitViewGetSizeForChild: function(splitView, child) {
+    var size = child.get('size');
+    if (SC.none(size)) return 100;
 
-    The default implementation allows any thickness.  The view will
-    automatically constrain the view to not allow views to overflow the
-    visible area.
+    return size;
+  },
 
-    @param {SC.SplitView} splitView the split view
-    @param {SC.View} view the view in question
-    @param {Number} proposedThickness the proposed thickness.
-    @returns the allowed thickness
+  /**
+   * Sets the size for the specified child.
+   *
+   * You may override this in a delegate.
+   *
+   * @param {SC.SplitView} splitView The SplitView which owns the child.
+   * @param {SC.View} child The child.
+   * @param {Number} position The size to give the child.
   */
-  splitViewConstrainThickness: function(splitView, view, proposedThickness) {
-    return proposedThickness;
+  splitViewSetSizeForChild: function(splitView, child, size) {
+    child.set('size', size);
   },
 
-  /* Force to rendering once the pane is attached */
-  /** @private */
-  _forceSplitCalculation: function(){
-    this.updateLayout();
-  }.observes('*pane.isPaneAttached'),
-
-  /** @private
-    This method is invoked on the split view when the view resizes due to a layout
-    change or due to the parent view resizing. It forces an update on topLeft and
-    bottomRight thickness.
-
-    @returns {void}
+  /**
+   * Returns the nearest valid size to a proposed size for a child view.
+   * By default, constrains the size to the range specified by the child's
+   * minimumSize and maximumSize properties, and returns 0 if the child
+   * has canCollapse set and the size is less than the child's collapseAtSize.
+   *
+   * You may override this in a delegate.
+   *
+   * @param {SC.SplitView} splitView The SplitView which owns the child.
+   * @param {SC.View} child The child.
+   * @param {Number} position The proposed size for the child.
+   * @returns Number
   */
-  viewDidResize: function() {
-    sc_super();
-    this
-      .notifyPropertyChange('topLeftThickness')
-      .notifyPropertyChange('bottomRightThickness');
-   }.observes('layout')
+  splitViewConstrainSizeForChild: function(splitView, child, size) {
+    if (child.get('autoResizeStyle') === SC.FIXED_SIZE) {
+      return this.invokeDelegateMethod(this.get('delegate'), 'splitViewGetSizeForChild', this, child);
+    }
 
-});
+    if (child.get('canCollapse')) {
+      var collapseAtSize = child.get('collapseAtSize');
+      if (collapseAtSize && size < collapseAtSize) return 0;
+    }
 
-// TODO: This should be a mixin to the few classes that need it
-SC.mixin(SC.View.prototype,
-/** @scope SC.View.prototype */ {
+    var minSize = child.get('minimumSize') || 0;
+    if (minSize !== undefined && minSize !== null) size = Math.max(minSize, size);
 
-  /**
-    The current split view this view is embedded in (may be null).
-    @type SC.SplitView
-  */
-  splitView: function() {
-    var view = this ;
-    while (view && !view.isSplitView) view = view.get('parentView') ;
-    return view ;
-  }.property('parentView').cacheable()
-});
+    var maxSize = child.get('maximumSize');
+    if (maxSize !== undefined && maxSize !== null) size = Math.min(maxSize, size);
 
+    return size;
+  }
+});