sproutcore 1.0.1046 → 1.0.1049.pre.1

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

@@ -99,13 +99,7 @@ SC.SelectFieldView = SC.FieldView.extend(
   sortObjects: function(objects) {
     if(!this.get('disableSort')){
       var nameKey = this.get('sortKey') || this.get('nameKey') ;
-      objects = objects.sort(function(a,b) {
-        if (nameKey) {
-          a = a.get ? a.get(nameKey) : a[nameKey] ;
-          b = b.get ? b.get(nameKey) : b[nameKey] ;
-        }
-        return (a<b) ? -1 : ((a>b) ? 1 : 0) ;
-      }) ;
+      objects = objects.sortProperty(nameKey);
     }
     return objects ;
   },
@@ -139,8 +133,8 @@ SC.SelectFieldView = SC.FieldView.extend(
         if (emptyName) {
           if (shouldLocalize) emptyName = emptyName.loc() ;
           if(firstTime){
-            context.push('<option value="***">%@</option>'.fmt(emptyName)) ;
-            context.push('<option disabled="disabled"></option>') ;
+            context.push('<option value="***">'+emptyName+'</option>',
+                          '<option disabled="disabled"></option>') ;
           }else{
             el=document.createElement('option');
             el.value="***";
@@ -153,7 +147,7 @@ SC.SelectFieldView = SC.FieldView.extend(
         }
    
           // generate option elements.
-        objects.forEach(function(object) {
+        objects.forEach(function(object, index) {
         if (object) {
           // either get the name from the object or convert object to string.
           var name = nameKey ? (object.get ? object.get(nameKey) : object[nameKey]) : object.toString() ;
@@ -167,12 +161,17 @@ SC.SelectFieldView = SC.FieldView.extend(
           // get the value using the valueKey or the object if no valueKey.
           // then convert to a string or use _guid if one of available.
           var value = (valueKey) ? (object.get ? object.get(valueKey) : object[valueKey]) : object ;
+          // if there is no emptyName and no preselected value 
+          // then the value should be the value of the first element in the list
+          if (!emptyName && index === 0 && fieldValue === '***') {
+            this.set('value', value);
+          }
           if (value) value = (SC.guidFor(value)) ? SC.guidFor(value) : value.toString() ;
    
           // render HTML
           var disable = (this.validateMenuItem && this.validateMenuItem(value, name)) ? '' : 'disabled="disabled" ' ;
           if(firstTime){
-            context.push('<option %@value="%@">%@</option>'.fmt(disable,value,name)) ;
+            context.push('<option '+disable+'value="'+value+'">'+name+'</option>') ;
           } else{
             el=document.createElement('option');
             el.value=value;
@@ -253,6 +252,7 @@ SC.SelectFieldView = SC.FieldView.extend(
       found = null ; // matching object goes here.
       while(!found && (--loc >= 0)) {
         object = objects.objectAt? objects.objectAt(loc) : objects[loc] ;
+        if (!object) continue; // null means placeholder; just skip
       
         // get value using valueKey if there is one or use object
         // map to _guid or toString.
@@ -268,8 +268,9 @@ SC.SelectFieldView = SC.FieldView.extend(
   },
   
   setFieldValue: function(newValue) {
-    if (SC.none(newValue)) { newValue = '' ; }
-    else {
+    if (SC.none(newValue)) { 
+      newValue = '***' ; 
+    } else {
       newValue = ((newValue) ? (SC.guidFor(newValue) ? SC.guidFor(newValue) : newValue.toString()) : null );
     }
     this.$input().val(newValue);
@@ -298,6 +299,7 @@ SC.SelectFieldView = SC.FieldView.extend(
 
   didCreateLayer: function() {
     var input = this.$input();
+    if (this.get('isEnabled') === false) this.$()[0].disabled = true;
     SC.Event.add(input, 'blur', this, this.fieldDidBlur);
     SC.Event.add(input, 'focus',this, this.fieldDidFocus);
     return sc_super();

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

@@ -2,7 +2,7 @@
 // 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)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /** @class
@@ -25,13 +25,6 @@ SC.SliderView = SC.View.extend(SC.Control,
   
   classNames: 'sc-slider-view',
   
-  /** 
-    The DOM element that displays the handle.  This element will have its
-    top-left corner updated to reflect the current state of the slider.  Use
-    margin-offsets to properly position your handle over this location.
-  */
-  handleSelector: 'img.sc-handle',
-  
   /**
     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 
@@ -83,37 +76,31 @@ SC.SliderView = SC.View.extend(SC.Control,
   
   displayProperties: 'value minimum maximum'.w(),
   
-  render: function(context, firstTime) {
-    sc_super();
-    
-    var min = this.get('minimum');
-    var max = this.get('maximum');
-    var value = this.get('value');
+  createRenderer: function(t) {
+    return t.slider();
+  },
+  
+  updateRenderer: function(r) {
+    var min = this.get('minimum'),
+        max = this.get('maximum'),
+        value = this.get('value'),
+        step = this.get('step');
 
     // determine the constrained value.  Must fit within min & max
     value = Math.min(Math.max(value, min), max);
 
     // limit to step value
-    var step = this.get('step');
     if (!SC.none(step) && step !== 0) {
       value = Math.round(value / step) * step;
     }
     
     // determine the percent across
-    value = Math.floor((value - min) / (max - min) * 100);
-    
-    if(firstTime) {
-      var blankImage = SC.BLANK_IMAGE_URL;
-      context.push('<span class="sc-inner">');
-      context.push('<span class="sc-leftcap"></span>');
-      context.push('<span class="sc-rightcap"></span>');
-      context.push('<img src="', blankImage, '" class="sc-handle" style="left: ', value, '%" />');
-      context.push('</span>');
-    }
-    else {
-      this.$(this.get('handleSelector')).css('left', value + "%");
-    }
+    if(value!==0) value = Math.floor((value - min) / (max - min) * 100);
     
+    // set atributes
+    r.attr({
+      "value": value
+    });
   },
   
   _isMouseDown: NO,
@@ -122,7 +109,7 @@ SC.SliderView = SC.View.extend(SC.Control,
     if (!this.get('isEnabled')) return YES; // nothing to do...
     this.set('isActive', YES);
     this._isMouseDown = YES ;
-    return this._triggerHandle(evt);
+    return this._triggerHandle(evt, YES);
   },
   
   // mouseDragged uses same technique as mouseDown.
@@ -138,30 +125,73 @@ SC.SliderView = SC.View.extend(SC.Control,
     return ret ;
   },
   
+  mouseWheel: function(evt) {
+    if (!this.get('isEnabled')) return YES;
+    var min = this.get('minimum'),
+        max = this.get('maximum'),
+        newVal = this.get('value')+((evt.wheelDeltaX+evt.wheelDeltaY)*0.01),
+        step = this.get('step'),
+        value = Math.round(newVal / step) * step ;
+    if (newVal< min) this.setIfChanged('value', min);
+    else if (newVal> max) this.setIfChanged('value', max);
+    else this.setIfChanged('value', newVal);
+    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.
   */
-  _triggerHandle: function(evt) {
-    var loc = this.convertFrameFromView({ x: evt.pageX }).x ;
-    var width = this.get('frame').width ;
-
-    // constrain loc to 8px on either side (left to allow knob overhang)
-    loc = Math.max(Math.min(loc,width-8), 8) - 8;
-    width -= 16 ; // reduce by margin
+  _triggerHandle: function(evt, firstEvent) {
+    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){    
+      loc = this.convertFrameFromView({ x: evt.pageX }).x;
+      this._evtDiff = evt.pageX - loc;
+    }else{
+      loc = evt.pageX-this._evtDiff;
+    }
     
     // convert to percentage
-    loc = loc / width ;
+    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
+    loc = loc + this._offset;
     
-    var min = this.get('minimum'),max=this.get('maximum');  
-    var step = this.get('step'), v=this.get('value');
-
     // 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 
+    if (Math.abs(v-loc)>=0.01) {
+      this.set('value', loc); // adjust 
+    }
     return YES ;
   },
   
@@ -177,7 +207,7 @@ SC.SliderView = SC.View.extend(SC.Control,
       this._isFocused = YES ;
       this.becomeFirstResponder();
       if (this.get('isVisibleInWindow')) {
-        this.$()[0].focus();
+        if (this.renderer) this.renderer.focus();
       }
     }
   },
@@ -197,9 +227,9 @@ SC.SliderView = SC.View.extend(SC.Control,
      }
      
      if (evt.which === 37 || evt.which === 38 || evt.which === 39 || evt.which === 40){
-       var min = this.get('minimum'),max=this.get('maximum');  
-       var step = this.get('step');
-       var size = max-min, val=0, calculateStep;
+       var min = this.get('minimum'),max=this.get('maximum'),
+          step = this.get('step'),
+          size = max-min, val=0, calculateStep;
      
        if (evt.which === 37 || evt.which === 38 ){
          if(step === 0){
@@ -252,4 +282,4 @@ SC.SliderView = SC.View.extend(SC.Control,
     .endPropertyChanges();
   }  
   
-});
+});

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

@@ -2,7 +2,7 @@
 // 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)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('views/list') ;

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

@@ -2,7 +2,7 @@
 // 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)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('mixins/collection_group');
@@ -73,9 +73,9 @@ SC.SourceListGroupView = SC.View.extend(SC.Control, SC.CollectionGroup,
   groupVisibleKey: null,
   
   render: function(context, firstTime) {
-    context.push('<a href="javascript:;" class="sc-source-list-label sc-disclosure-view sc-button-view button disclosure no-disclosure">') ;
-    context.push('<img src="%@" class="button" />'.fmt(SC.BLANK_IMAGE_URL)) ;
-    context.push('<span class="label"></span></a>') ;
+    context.push('<div role="button" class="sc-source-list-label sc-disclosure-view sc-button-view button disclosure no-disclosure">',
+              '<img src="'+SC.BLANK_IMAGE_URL+'" class="button" />',
+              '<span class="label"></span></div>') ;
   },
   
   /** @private */

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

@@ -2,14 +2,12 @@
 // 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)
+// 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' ;
+SC.RESIZE_BOTH = 'resize-both';
+SC.RESIZE_TOP_LEFT = 'resize-top-left';
+SC.RESIZE_BOTTOM_RIGHT = 'resize-bottom-right';
 
 /**
   @class
@@ -50,9 +48,9 @@ SC.RESIZE_BOTTOM_RIGHT = 'resize-bottom-right' ;
   clicking on a divider again will restore a collapsed view.  A user can also
   start to drag the divider to show the collapsed view.
   
-  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.
+  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.
   
   Finally, SplitViews can layout their child views either horizontally or
   vertically.  To choose the direction of layout set the layoutDirection
@@ -60,13 +58,6 @@ SC.RESIZE_BOTTOM_RIGHT = 'resize-bottom-right' ;
   This property should be set when the view is created. Changing it
   dynamically will have an unknown effect.
   
-  @property {Boolean} layoutDirection Either SC.HORIZONTAL or SC.VERTICAL.
-  Defaults to SC.HORIZONTAL. Use the :direction option with the split_view
-  viewhelper.
-  
-  @property {Boolean} canCollapseViews Set to NO when you don't want any of
-  the child views to collapse. Defaults to YES. 
-  
   In addition, the top/left and bottom/right child views can have these
   properties:
   
@@ -82,8 +73,6 @@ SC.SplitView = SC.View.extend(
   
   classNames: ['sc-split-view'],
   
-  childLayoutProperties: 'layoutDirection dividerThickness autoresizeBehavior'.w(),
-  
   displayProperties: ['layoutDirection'],
   
   /**
@@ -95,11 +84,15 @@ SC.SplitView = SC.View.extend(
     Direction of layout.  Must be SC.LAYOUT_HORIZONTAL or SC.LAYOUT_VERTICAL.
     
     @property {String}
+    @default SC.LAYOUT_HORIZONTAL
   */
   layoutDirection: SC.LAYOUT_HORIZONTAL,
   
   /**
     Set to NO to disable collapsing for all views.
+    
+    @property {Boolean}
+    @default YES
   */
   canCollapseViews: YES,
   
@@ -110,6 +103,8 @@ SC.SplitView = SC.View.extend(
     | SC.RESIZE_BOTTOM_RIGHT | (default) resizes bottomRightView |
     | SC.RESIZE_TOP_LEFT | resized topLeftView |
     
+    @property {String}
+    @default SC.RESIZE_BOTTOM_RIGHT
   */
   autoresizeBehavior: SC.RESIZE_BOTTOM_RIGHT,
   
@@ -118,24 +113,91 @@ 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.
+    The thickness will be applied to the opposite view defined by 
+    autoresizeBehavior.
     
     @property {Number}
+    @default 0.5
   */
   defaultThickness: 0.5,
-  
+
+  /**
+    Sets minimum thickness of topLeft view.
+
+    @property {Number}
+    @default null
+  */
+  topLeftMinThickness: null,
+
+  /**
+    Sets maximum thickness of topLeft view.
+
+    @property {Number}
+    @default null
+  */
+  topLeftMaxThickness: null,
+
+  /**
+    Sets minimum thickness of bottomRight view.
+
+    @property {Number}
+    @default null
+  */
+  bottomRightMinThickness: null,
+
+  /**
+    Sets maximum thickness of bottomRight view.
+
+    @property {Number}
+    @default null
+  */
+  bottomRightMaxThickness: null,
+
+  /**
+    Sets thickness of divider.
+
+    @property {Number}
+    @default null
+  */
+  dividerThickness: null,
+ 
   /**
     Yes, we're a split view.
+    
+    @property {Boolean}
+    @default YES
   */
   isSplitView: YES,
   
-  // add default views
+  /**
+    The view to use for the top left
+    
+    @property {SC.View}
+    @default SC.View
+  */
   topLeftView: SC.View,
+
+  /**
+    The view to use for the divider
+    
+    @property {SC.View}
+    @default SC.SplitDividerView
+  */
   dividerView: SC.SplitDividerView,
+  
+  /**
+    The view to use for the bottom right
+    
+    @property {SC.View}
+    @default SC.View
+  */
   bottomRightView: SC.View,
   
   /**
     The current thickness for the topLeftView
+    
+    @property {Number}
+    @isReadOnly
   */
   topLeftThickness: function() {
     var view = this.get('topLeftView');
@@ -144,6 +206,9 @@ SC.SplitView = SC.View.extend(
 
   /**
     The current thickness for the bottomRightView
+    
+    @property {Number}
+    @isReadOnly
   */
   bottomRightThickness: function() {
     var view = this.get('bottomRightView');
@@ -151,16 +216,21 @@ SC.SplitView = SC.View.extend(
   }.property('bottomRightView').cacheable(),
   
   /**
-    @property {SC.Cursor} the cursor thumb view should use for themselves
+    The cursor thumb views should use for themselves
+    
+    @property {SC.Cursor}
+    @default null
   */
   thumbViewCursor: null,
   
   /**
     Used by split divider to decide if the view can be collapsed.
+    
+    @property {Boolean}
+    @isReadOnly
   */
   canCollapseView: function(view) {
-    // console.log('%@.canCollapseView(%@)'.fmt(this, view));
-    return this.invokeDelegateMethod(this.delegate, 'splitViewCanCollapse', this, view) ;
+    return this.invokeDelegateMethod(this.delegate, 'splitViewCanCollapse', this, view);
   },
   
   /**
@@ -170,30 +240,35 @@ SC.SplitView = SC.View.extend(
     @returns the view with the width.
   */
   thicknessForView: function(view) {
-    // console.log('%@.thicknessForView(%@)'.fmt(this, view));
-    var direction = this.get('layoutDirection') ,
-        ret = view.get('frame') ;
-    return (direction === SC.LAYOUT_HORIZONTAL) ? ret.width : ret.height ;
+    var direction = this.get('layoutDirection'),
+        ret = view.get('frame');
+    return (direction === SC.LAYOUT_HORIZONTAL) ? ret.width : ret.height;
   },
   
+  /**
+    Creates the topLeftView/dividerView/bottomRightView and adds them to the
+    childViews array
+    
+    @returns SC.View the SplitDivider view (this)
+  */
   createChildViews: function() {
-    // console.log('%@.createChildViews()'.fmt(this));
-    var childViews = [] ,
-        viewAry = ['topLeftView', 'dividerView', 'bottomRightView'] ,
-        view, idx, len ;
-    
-    for (idx=0, len=viewAry.length; idx<len; ++idx) {
-      if (view = this.get(viewAry[idx])) {
-        view = this[viewAry[idx]] = this.createChildView(view, {
+    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: [idx]
-        }) ;
-        childViews.push(view) ;
+          rootElementPath: [i]
+        });
+        childViews.push(view);
       }
     }
     
-    this.set('childViews', childViews) ;
-    return this ; 
+    this.set('childViews', childViews);
+    return this;
   },
   
   /**
@@ -204,75 +279,74 @@ SC.SplitView = SC.View.extend(
     that they can resize appropriately.
   */
   updateChildLayout: function() {
-    // console.log('%@.updateChildLayout()'.fmt(this));
-    var topLeftView = this.get('topLeftView') ,
-        bottomRightView = this.get('bottomRightView') ,
-        dividerView = this.get('dividerView') ,
-        direction = this.get('layoutDirection') ,
-        topLeftThickness = this._desiredTopLeftThickness ;
-    var dividerThickness = this.get('dividerThickness') ;
-        dividerThickness = (!SC.none(dividerThickness)) ? dividerThickness : 7 ;
-    var splitViewThickness = (direction === SC.LAYOUT_HORIZONTAL) ? this.get('frame').width : this.get('frame').height ,
-        bottomRightThickness = splitViewThickness - dividerThickness - topLeftThickness ,
-        autoresizeBehavior = this.get('autoresizeBehavior') ,
-        layout , isCollapsed ;
-    
-    // console.log('topLeftThickness == %@'.fmt(topLeftThickness));
-    // console.log('dividerThickness == %@'.fmt(dividerThickness));
-    // console.log('splitViewThickness == %@'.fmt(splitViewThickness));
-    // console.log('bottomRightThickness == %@'.fmt(bottomRightThickness));
+    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) ;
+    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 ;
+      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 ;
+          layout.right = bottomRightThickness + dividerThickness;
+          delete layout.width;
+          break;
         case SC.RESIZE_BOTTOM_RIGHT:
-          delete layout.right ;
-          delete layout.height ;
-          layout.width = topLeftThickness ;
-          break ;
+          delete layout.right;
+          delete layout.height;
+          layout.width = topLeftThickness;
+          break;
       }
     } else {
       layout.top = 0;
-      layout.left = 0 ;
-      layout.right = 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 ;
+          layout.bottom = bottomRightThickness + dividerThickness;
+          delete layout.height;
+          break;
         case SC.RESIZE_BOTTOM_RIGHT:
-          delete layout.bottom ;
-          delete layout.width ;
-          layout.height = topLeftThickness ;
-          break ;
+          layout.height = topLeftThickness;
+          delete layout.bottom;
+          delete layout.width;
+          break;
       }
     }
-    // console.log('topLeftView layout %@'.fmt(SC.inspect(layout)));
-    // console.log(topLeftView);
     topLeftView.set('layout', layout);
     
     // split divider view
     if (dividerView) {
       layout = SC.clone(dividerView.get('layout'));
+      
       if (direction === SC.LAYOUT_HORIZONTAL) {
         layout.width = dividerThickness;
-        delete layout.height ;
-        layout.top = 0 ;
-        layout.bottom = 0 ;
+        layout.top = 0;
+        layout.bottom = 0;
+        delete layout.height;
+        
         switch (autoresizeBehavior) {
           case SC.RESIZE_BOTH:
             throw "SC.RESIZE_BOTH is currently unsupported.";
@@ -282,25 +356,24 @@ SC.SplitView = SC.View.extend(
             // delete layout.centerY ;
             //break ;
           case SC.RESIZE_TOP_LEFT:
-            delete layout.left ;
-            layout.right = bottomRightThickness ;
-            delete layout.centerX ;
-            delete layout.centerY ;
-            break ;
+            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 ;
+            layout.left = topLeftThickness;
+            delete layout.right;
+            delete layout.centerX;
+            delete layout.centerY;
+            break;
         }
       } else {
-        // console.log('setting vertical divider layout');
-        // console.log('autoresizeBehavior is %@'.fmt(autoresizeBehavior));
-        delete layout.width ;
-        layout.height = dividerThickness ;
-        layout.left = 0 ;
-        layout.right = 0 ;
+        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.";
@@ -310,163 +383,145 @@ SC.SplitView = SC.View.extend(
             // layout.centerY = topLeftThickness + (dividerThickness / 2) ;
             //break ;
           case SC.RESIZE_TOP_LEFT:
-            delete layout.top ;
-            layout.bottom = bottomRightThickness ;
-            delete layout.centerX ;
-            delete layout.centerY ;
+            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 ;
+            layout.top = topLeftThickness;
+            delete layout.bottom;
+            delete layout.centerX;
+            delete layout.centerY;
             break ;
         }
       }
-      // console.log('dividerView layout %@'.fmt(SC.inspect(layout)));
-      // console.log(dividerView);
       dividerView.set('layout', layout);
     }
     
     // bottom/right view
-    isCollapsed = bottomRightView.get('isCollapsed') || NO ;
-    bottomRightView.setIfChanged('isVisible', !isCollapsed) ;
+    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 ;
+      layout.top = 0;
+      layout.bottom = 0;
+      layout.right = 0;
+      
       switch (autoresizeBehavior) {
         case SC.RESIZE_BOTH:
           throw "SC.RESIZE_BOTH is currently unsupported.";
-          //break ;
         case SC.RESIZE_BOTTOM_RIGHT:
-          layout.left = topLeftThickness + dividerThickness ;
-          delete layout.width ;
-          break ;
+          layout.left = topLeftThickness + dividerThickness;
+          delete layout.width;
+          break;
         case SC.RESIZE_TOP_LEFT:
-          delete layout.left ;
-          layout.width = bottomRightThickness ;
-          break ;
+          layout.width = bottomRightThickness;
+          delete layout.left;
+          break;
       }
     } else {
-      layout.left = 0 ;
-      layout.right = 0 ;
-      layout.bottom = 0 ;
+      layout.left = 0;
+      layout.right = 0;
+      layout.bottom = 0;
+      
       switch (autoresizeBehavior) {
         case SC.RESIZE_BOTH:
           throw "SC.RESIZE_BOTH is currently unsupported.";
-          //break ;
         case SC.RESIZE_BOTTOM_RIGHT:
-          layout.top = topLeftThickness + dividerThickness ;
-          delete layout.height ;
-          break ;
+          layout.top = topLeftThickness + dividerThickness;
+          delete layout.height;
+          break;
         case SC.RESIZE_TOP_LEFT:
-          delete layout.top ;
-          layout.height = bottomRightThickness ;
-          break ;
+          delete layout.top;
+          layout.height = bottomRightThickness;
+          break;
       }
     }
-    // console.log('bottomRightView layout %@'.fmt(SC.inspect(layout)));
-    // console.log(bottomRightView);
     bottomRightView.set('layout', layout);
     
-    // topLeftView.updateDisplayLayout();
-    // dividerView.updateDisplayLayout();
-    // bottomRightView.updateDisplayLayout();
-    this.notifyPropertyChange('topLeftThickness')
-        .notifyPropertyChange('bottomRightThickness');
+    this
+      .notifyPropertyChange('topLeftThickness')
+      .notifyPropertyChange('bottomRightThickness');
   },
   
   /** @private */
   renderLayout: function(context, firstTime) {
-    // console.log('%@.renderLayout(%@, %@)'.fmt(this, context, firstTime));
-    // console.log('%@.frame = %@'.fmt(this, SC.inspect(this.get('frame'))));
     if (firstTime || this._recalculateDivider) {
+      
+      var layoutDirection = this.get('layoutDirection'),
+          frame = this.get('frame'),
+          elem = this.$(),
+          desiredThickness = this.get('defaultThickness') ,
+          autoResizeBehavior = this.get('autoresizeBehavior'),
+          dividerThickness = this.get('dividerThickness'),
+          splitViewThickness;
+      
       if (!this.get('thumbViewCursor')) {
-        this.set('thumbViewCursor', SC.Cursor.create()) ;
+        this.set('thumbViewCursor', SC.Cursor.create());
       }
       
-      var layoutDirection = this.get('layoutDirection') ,
-          fr = this.get('frame'),
-          splitViewThickness, elemRendered = this.$(),
-          desiredThickness = this.get('defaultThickness') ,
-          autoResizeBehavior = this.get('autoresizeBehavior') ;
-      var dividerThickness = this.get('dividerThickness') ;
-      dividerThickness = (!SC.none(dividerThickness)) ? dividerThickness : 7 ;
+      dividerThickness = !SC.none(dividerThickness) ? dividerThickness : 7;
+      
       // Turn a flag on to recalculate the spliting if the desired thickness
       // is a percentage
-      // debugger;
-      if(this._recalculateDivider===undefined && desiredThickness<1) {
-        this._recalculateDivider=YES;
+      if (this._recalculateDivider === undefined && desiredThickness < 1) {
+        this._recalculateDivider = YES;
+      } else if (this._recalculateDivider) {
+        this._recalculateDivider = NO;
       }
-      else if(this._recalculateDivider) this._recalculateDivider=NO;
-      
       
-      if(elemRendered[0]) {
-        splitViewThickness = (layoutDirection === SC.LAYOUT_HORIZONTAL) ? 
-              elemRendered[0].offsetWidth : elemRendered[0].offsetHeight ;
-      }else{
-        splitViewThickness = (layoutDirection === SC.LAYOUT_HORIZONTAL) ? 
-              fr.width : fr.height ;
+      if (elem[0]) {
+        splitViewThickness = (layoutDirection === SC.LAYOUT_HORIZONTAL) ? elem[0].offsetWidth : elem[0].offsetHeight;
+      } else {
+        splitViewThickness = (layoutDirection === SC.LAYOUT_HORIZONTAL) ? frame.width : frame.height;
       }
+      
       // 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)) ;
+        desiredThickness = Math.floor((splitViewThickness - (dividerThickness)) * (desiredThickness || 0.5));
       }
+      
       if (autoResizeBehavior === SC.RESIZE_BOTTOM_RIGHT) {
-        this._desiredTopLeftThickness = desiredThickness ;
-      } else { // (autoResizeBehavior === SC.RESIZE_TOP_LEFT)
-        this._desiredTopLeftThickness =  splitViewThickness - dividerThickness - desiredThickness ;
+        this._desiredTopLeftThickness = desiredThickness;
+      } else {
+        this._desiredTopLeftThickness = splitViewThickness - dividerThickness - desiredThickness ;
       }
       
       // 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._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._dividerThickness = this.get('dividerThickness');
+      this._layoutDirection = this.get('layoutDirection');
       
       // this handles min-max settings and collapse parameters
-      this._updateTopLeftThickness(0) ;
+      this._updateTopLeftThickness(0);
       
       // update the cursor used by thumb views
-      this._setCursorStyle() ;
+      this._setCursorStyle();
       
       // actually set layout for our child views
-      this.updateChildLayout() ;
+      this.updateChildLayout();
     }
-    sc_super() ;
+    
+    sc_super();
   },
   
   /** @private */
   render: function(context, firstTime) {
-    // console.log('%@.render(%@, %@)'.fmt(this, context, firstTime));
-    // console.log('%@.frame = %@'.fmt(this, SC.inspect(this.get('frame'))));
-    sc_super() ;
+    sc_super();
     
-    if (this._inLiveResize) this._setCursorStyle() ;
+    if (this._inLiveResize) this._setCursorStyle();
     
-    if (firstTime) {
-      var dir = this.get('layoutDirection') ;
-      if (dir===SC.LAYOUT_HORIZONTAL) context.addClass('sc-horizontal') ;
-      else context.addClass('sc-vertical') ;
-    }
+    if (this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL) context.addClass('sc-horizontal');
+    else context.addClass('sc-vertical');
   },
   
-  // layoutDidChangeFor: function(childView) {
-  //   // console.log('%@.layoutChildViews(%@)'.fmt(this, childView));
-  //   sc_super() ;
-  // },
-  // 
-  // layoutChildViews: function() {
-  //   // console.log('%@.layoutChildViews()'.fmt(this));
-  //   sc_super() ;
-  // },
-  
   /**
     Update the split view's layout based on mouse movement.
     
@@ -477,72 +532,73 @@ SC.SplitView = SC.View.extend(
     @returns {Boolean}
   */
   mouseDownInThumbView: function(evt, thumbView) {
-    // console.log('%@.mouseDownInThumbView(%@, %@)'.fmt(this, evt, thumbView));
-    // console.log(evt.originalEvent);
-    var responder = this.getPath('pane.rootResponder') ;
-    if (!responder) return NO ; // nothing to do
+    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) ;
+    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._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._dividerThickness = this.get('dividerThickness');
+    this._layoutDirection = this.get('layoutDirection');
     
-    this.beginLiveResize() ;
-    this._inLiveResize = YES ;
+    this.beginLiveResize();
+    this._inLiveResize = YES;
     
-    return YES ;
+    return YES;
   },
   
   mouseDragged: function(evt) {
-    // console.log('%@.mouseDragged(%@)'.fmt(this, evt));
-    // console.log(evt.originalEvent);
     var offset = (this._layoutDirection === SC.LAYOUT_HORIZONTAL) ? evt.pageX - this._mouseDownX : evt.pageY - this._mouseDownY ;
-    this._updateTopLeftThickness(offset) ;
+    this._updateTopLeftThickness(offset);
     return YES;
   },
   
   mouseUp: function(evt) {
-    // console.log('%@.mouseUp(%@, %@)'.fmt(this, evt));
-    // console.log(evt.originalEvent);
-		if (this._inLiveResize === YES) {
-    	this._thumbView = null ; // avoid memory leaks
-    	this._inLiveResize = NO ;
-    	this.endLiveResize() ;
-    	return YES ;
+    if (this._inLiveResize === YES) {
+    	this._thumbView = null; // avoid memory leaks
+    	this._inLiveResize = NO;
+    	this.endLiveResize();
+    	return YES;
 		}
 		
-		return NO ;
+		return NO;
+  },
+  
+  touchesDragged: function(evt){
+    return this.mouseDragged(evt);
+  },
+  
+  touchEnd: function(evt){
+    return this.mouseUp(evt);
   },
   
   doubleClickInThumbView: function(evt, thumbView) {
-    // console.log('%@.mouseDragged(%@, %@)'.fmt(this, evt, thumbView));
-    // console.log(evt.originalEvent);
     var view = this._topLeftView,
-        isCollapsed = view.get('isCollapsed') || NO ;
+        isCollapsed = view.get('isCollapsed') || NO;
+    
     if (!isCollapsed && !this.canCollapseView(view)) {
-      view = this._bottomRightView ;
-      isCollapsed = view.get('isCollapsed') || NO ;
+      view = this._bottomRightView;
+      isCollapsed = view.get('isCollapsed') || NO;
       if (!isCollapsed && !this.canCollapseView(view)) return NO;
     }
     
     if (!isCollapsed) {
       // remember thickness in it's uncollapsed state
-      this._uncollapsedThickness = this.getThicknessForView(view)  ;
+      this._uncollapsedThickness = this.thicknessForView(view);
       // and collapse
       // this.setThicknessForView(view, 0) ;
       if (view === this._topLeftView) {
-        this._topLeftViewThickness = 0 ;
+        this._updateTopLeftThickness(this.topLeftThickness()*-1);
       } else {
-        this._bottomRightViewThickness = 0 ;
+        this._updateBottomRightThickness(this.bottomRightThickness()*-1);
       }
       
       // if however the splitview decided not to collapse, clear:
@@ -552,25 +608,107 @@ SC.SplitView = SC.View.extend(
     } else {
       // uncollapse to the last thickness in it's uncollapsed state
       if (view === this._topLeftView) {
-        this._topLeftViewThickness = this._uncollapsedThickness ;
+        this._updateTopLeftThickness(this._uncollapsedThickness);
       } else {
-        this._bottomRightViewThickness = this._uncollapsedThickness ;
+        this._updateBottomRightThickness(this._uncollapsedThickness);
       }
-      view._uncollapsedThickness = null ;
+      view._uncollapsedThickness = null;
     }
-    this._setCursorStyle() ;
-    return true ;
+    this._setCursorStyle();
+    return true;
   },
   
   /** @private */
   _updateTopLeftThickness: function(offset) {
-    // console.log('%@._updateTopLeftThickness(%@)'.fmt(this, offset));
-    // console.log('%@.frame = %@'.fmt(this, SC.inspect(this.get('frame'))));
+    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;
+    }
+    
+    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;
+      }
+    }
+    
+    // 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
+    }
+  },
+  
+  
+  _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 ,
+        minAvailable = this._dividerThickness,
         maxAvailable = 0,
         proposedThickness = this._topLeftViewThickness + offset,
         direction = this._layoutDirection,
@@ -581,32 +719,32 @@ SC.SplitView = SC.View.extend(
         min = this.get('topLeftMinThickness'),
         bottomRightThickness, tlCollapseAtThickness, brCollapseAtThickness;
     
-    if (!topLeftView.get("isCollapsed")) maxAvailable += topLeftViewThickness ;
-    if (!bottomRightView.get("isCollapsed")) maxAvailable += bottomRightViewThickness ;
+    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) ;
+    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') ;
+    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 ;
+    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) ;
+    thickness = this.invokeDelegateMethod(this.delegate, 'splitViewConstrainThickness', this, topLeftView, thickness);
     
     // cannot be more than what's available
-    thickness = Math.min(thickness, maxAvailable) ;
+    thickness = Math.min(thickness, maxAvailable);
     
     // cannot be less than zero
-    thickness = Math.max(0, thickness) ;
+    thickness = Math.max(0, thickness);
     
-    tlCollapseAtThickness = topLeftView.get('collapseAtThickness') ;
-    if (!tlCollapseAtThickness) tlCollapseAtThickness = 0 ;
-    brCollapseAtThickness = bottomRightView.get('collapseAtThickness') ;
+    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)) {
@@ -614,7 +752,7 @@ SC.SplitView = SC.View.extend(
       max = bottomRightView.get('maxThickness');
       if (!max || (minAvailable + maxAvailable) <= max) {
         // collapse top/left view, even if it has a minThickness
-        thickness = 0 ;
+        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
@@ -627,14 +765,12 @@ SC.SplitView = SC.View.extend(
     
     // now apply constrained value
     if (thickness != this.thicknessForView(topLeftView)) {
-      this._desiredTopLeftThickness = thickness ;
+      this._desiredTopLeftThickness = thickness;
       
       // un-collapse if needed.
-      topLeftView.set('isCollapsed', thickness === 0) ;
-      bottomRightView.set('isCollapsed', thickness >= maxAvailable) ;
+      topLeftView.set('isCollapsed', thickness === 0);
+      bottomRightView.set('isCollapsed', thickness >= maxAvailable);
       
-      // this.set('displayNeedsUpdate', YES);
-      // this.adjustLayout();
       this.updateChildLayout(); // updates child layouts
       this.displayDidChange(); // updates cursor
     }
@@ -647,20 +783,29 @@ SC.SplitView = SC.View.extend(
     @private 
   */
   _setCursorStyle: function() {
-    // console.log('%@._setCursorStyle()'.fmt(this));
-    var topLeftView = this._topLeftView ;
+    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
+        // 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);
-    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") ;
+    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 {
-      thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "ew-resize" : "ns-resize") ;
+      if(SC.browser.msie) {
+        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");
+      }
     }
   }.observes('layoutDirection'),
   
@@ -676,10 +821,9 @@ SC.SplitView = SC.View.extend(
     @returns {Boolean} YES to allow collapse.
   */
   splitViewCanCollapse: function(splitView, view) {
-    // console.log('%@.splitViewCanCollapse(%@, %@)'.fmt(this, splitView, view));
-    if (splitView.get('canCollapseViews') === NO) return NO ;
-    if (view.get('canCollapse') === NO) return NO ;
-    return YES ;
+    if (splitView.get('canCollapseViews') === NO) return NO;
+    if (view.get('canCollapse') === NO) return NO;
+    return YES;
   },
   
   /**
@@ -695,13 +839,26 @@ SC.SplitView = SC.View.extend(
     @returns the allowed thickness
   */
   splitViewConstrainThickness: function(splitView, view, proposedThickness) {
-    // console.log('%@.splitViewConstrainThickness(%@, %@, %@)'.fmt(this, splitView, view, proposedThickness));
     return proposedThickness;
   },
   
   /* Force to rendering once the pane is attached */
   _forceSplitCalculation: function(){
     this.updateLayout(); 
-  }.observes('*pane.isPaneAttached')
+  }.observes('*pane.isPaneAttached'),
+
+  /**
+    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}
+  */
+  viewDidResize: function() {
+    sc_super();
+    this
+      .notifyPropertyChange('topLeftThickness')
+      .notifyPropertyChange('bottomRightThickness');
+   }.observes('layout')
 
 });