sproutcore 0.9.0 → 0.9.1

data/frameworks/sproutcore/english.lproj/collections.css

@@ -0,0 +1,82 @@
+/* @override http://localhost:4020/static/sproutcore/en/_cache/collections-1205614097.css */
+
+/* @group Common */
+
+body {
+	overflow: hidden;
+}
+
+.collection-item {
+	cursor: pointer ;
+}
+
+/* @end */
+
+/* @group List View */
+
+.sc-theme .sc-collection-view {
+	background-color: white ;
+}
+
+.sc-theme .list-insertion-point {
+	border: 1px #4e4977 solid;
+	position: absolute ;
+}
+
+.sc-theme .list-insertion-point .anchor {
+	position: absolute ;
+	width: 7px;
+	height: 7px;
+	left: -6px;
+	top: -4px;
+	background: static_url('images/buttons-sprite.png') no-repeat 0px -931px;
+}
+
+/* @end */
+
+/* @group Grid View */
+
+.sc-theme .grid-insertion-point {
+	border: 1px #4e4977 solid;
+	position: absolute ;
+}
+
+.sc-theme .grid-insertion-point .anchor {
+	position: absolute ;
+	width: 7px;
+	height: 7px;
+	left: -4px;
+	top: -6px;
+	background: static_url('images/buttons-sprite.png') no-repeat 0px -931px;
+}
+
+/* @end */
+
+/* @group Text Cell */
+
+.sc-theme .collection-item {
+	text-decoration: none ;
+	color: #000;
+	border-top: 1px white solid;
+	background-color: white ;
+}
+
+.sc-theme .collection-item.text-cell {
+	display: block ;
+	padding: 0 6px;
+	line-height: 22px;
+}
+.sc-theme .collection-item.sel {
+	background-color: #ddd;
+	border-top: 1px solid #eee;
+}
+
+.sc-theme .sc-collection-view.focus .collection-item.sel {
+	background-color: #40007e;
+	color: white ;
+	border-top: 1px solid #84788f;
+}
+
+/* @end */
+
+

data/frameworks/sproutcore/english.lproj/menu.css

@@ -49,7 +49,7 @@
 }
 
 .menu-pane li.menu-item.active a {
-	background: static_url('buttons.png') repeat-x left -67px;
+	background: static_url('images/buttons-sprite.png') repeat-x left -67px;
 	color:  white ;
 	border-top-width: 1px;
 	border-top-color: #a9a9a9;

data/frameworks/sproutcore/english.lproj/theme.css

@@ -1,3 +1,12 @@
+/* @override http://localhost:4020/static/sproutcore/en/_cache/theme-1205438214.css */
+
+/* @group Root Container */
+
+.sc-scroll-view {
+	overflow: auto ;
+}
+
+/* @end */
 
 /* @group Root Form */
 
@@ -24,16 +33,16 @@ input.show-hint {
 /* @group sc-theme */
 
 body.sc-theme {
-	font: 12px "Helvetica Neue", Helvetica, Verdana, sans-serif;
+	font: 13px Helvetica, Verdana, sans-serif;
+	line-height: 18px;
 	background-color: #f0f0f0 ;
-	padding: 10px;
+	padding: 0px;
 }
 
 .sc-theme h1 {
-	margin: 0 10%;
+	margin: 0;
 	padding: 0 ;
 	margin-bottom: 10px;
-	border-bottom: 1px #888 dotted ;
 }
 
 .sc-theme label {

data/frameworks/sproutcore/foundation/array.js

@@ -68,6 +68,7 @@ SC.Array = {
 */
   objectAt: function(idx)
   {
+    if (idx < 0) return undefined ;
     if (idx >= this.get('length')) return undefined;
     return this.get(idx);
   },
@@ -86,7 +87,8 @@ SC.Array = {
     notified.
   */
   arrayContentDidChange: function() {
-    this.propertyDidChange('[]') ;  
+    var kvo = (this._kvo) ? this._kvo().changes : '(null)';
+    this.notifyPropertyChange('[]') ;
   },
   
   /**
@@ -204,8 +206,27 @@ SC.Array = {
 // enumerable methods since Arrays are already enumerable.
 Object.extend(Array.prototype, SC.Array) ; 
 
-// Now make SC.Array enumerable.
+// Now make SC.Array enumerable and add other array method we did not want to
+// override in Array itself.
 Object.extend(SC.Array, Enumerable) ;
+Object.extend(SC.Array, {
+  /**
+    Returns a new array that is a slice of the receiver.  This implementation
+    uses the observable array methods to retrieve the objects for the new slice.
+    
+    @param beginIndex {Integer} (Optional) index to begin slicing from. Default: 0
+    @param endIndex {Integer} (Optional) index to end the slice at. Default: 0
+  */
+  slice: function(beginIndex, endIndex) {
+    var ret = []; 
+    var length = this.get('length') ;
+    if (beginIndex == null) beginIndex = 0 ;
+    if ((endIndex == null) || (endIndex > length)) endIndex = length ;
+    while(beginIndex < endIndex) ret[ret.length] = this.objectAt(beginIndex++) ;
+    return ret ;
+  }
+  
+}) ;
 
 // ........................................................
 // A few basic enhancements to the Array class.
@@ -298,6 +319,7 @@ Object.extend(Array.prototype, {
     if (value !== undefined) return null ;
     return this.invoke('get', key) ;
   }
+    
 }) ;
 
 Array.prototype.collect = Array.prototype.map ;

data/frameworks/sproutcore/foundation/benchmark.js

@@ -58,23 +58,30 @@ SC.Benchmark = {
     Call this method at the start of whatever you want to collect.
     if topLevelOnly is passed, then recursive calls to the start will be 
     ignored and only the top level call will be benchmarked.
+    
+    @param key {String} A unique key that identifies this benchmark.  All calls to start/end with the same key will be groups together.
+    @param topLevelOnly {Boolean} If true then recursive calls to this method with the same key will be ignored.  
+    @param time {Integer} Only pass if you want to explicitly set the start time.  Otherwise the start time is now.
   */
-  start: function(key, topLevelOnly) {
+  start: function(key, topLevelOnly, time) {
     if (!this.enabled) return ;
     var stat = this._statFor(key) ;
     
     if (topLevelOnly && stat._starts.length > 0) {
       stat._starts.push('ignore') ;
     } else {
-      stat._starts.push(Date.now()) ;
+      stat._starts.push(time || Date.now()) ;
     }
   },
   
   /**
     Call this method at the end of whatever you want to collect.  This will
     save the collected benchmark.
+    
+    @param key {String} The benchmark key you used when you called start()
+    @param time {Integer} Only pass if you want to explicitly set the end time.  Otherwise start time is now.
   */
-  end: function(key) {
+  end: function(key, time) {
     if (!this.enabled) return ;
     var stat = this._statFor(key) ;
     var start = stat._starts.pop() ;
@@ -86,7 +93,7 @@ SC.Benchmark = {
     // top level only.
     if (start == 'ignore') return ; 
     
-    stat.amt += Date.now() - start ;
+    stat.amt += (time || Date.now()) - start ;
     stat.runs++ ;
     
     if (this.verbose) this.log(key) ;
@@ -198,7 +205,7 @@ SC.Benchmark = {
     return ret ;
   },
   
-  reset: function() { this.stats = {} ; },
+  reset: function() { this.stats = {} ;  debugger;},
   
   // This is private, but it is used in some places, so we are keeping this for
   // compatibility.

data/frameworks/sproutcore/foundation/observable.js

@@ -174,6 +174,25 @@ SC.Observable = {
     if (tuple[0] == null) return null ;
     return tuple[0].set(tuple[1], value) ;
   },
+
+  
+  /** 
+    Convenience method to get an array of properties.
+    
+    Pass in multiple property keys or an array of property keys.  This
+    method uses getPath() so you can also pass key paths.
+
+    @returns {Array} Values of property keys.
+  */
+  getEach: function() {
+    var keys = $A(arguments).flatten() ;
+    var ret = [];
+    for(var idx=0; idx<keys.length;idx++) {
+      ret[ret.length] = this.getPath(keys[idx]);
+    }
+    return ret ;
+  },
+  
   
   /**  
     Increments the value of a property.
@@ -228,18 +247,60 @@ SC.Observable = {
   },
 
   /**  
-    If you are not going to use get/set, you can notify observers this way.
+    Notify the observer system that a property is about to change.
+
+    Sometimes you need to change a value directly or indirectly without actually
+    calling get() or set() on it.  In this case, you can use this method and 
+    propertyDidChange() instead.  Calling these two methods together will notify all
+    observers that the property has potentially changed value.
+    
+    Note that you must always call propertyWillChange and propertyDidChange as a pair.
+    If you do not, it may get the property change groups out of order and cause
+    notifications to be delivered more often than you would like.
+    
+    @param key {String} The property key that is about to change.
   */
   propertyWillChange: function(key) {
     this._kvo().changes++ ;
   },
 
+  /**  
+    Notify the observer system that a property has just changed.
+
+    Sometimes you need to change a value directly or indirectly without actually
+    calling get() or set() on it.  In this case, you can use this method and 
+    propertyWillChange() instead.  Calling these two methods together will notify all
+    observers that the property has potentially changed value.
+    
+    Note that you must always call propertyWillChange and propertyDidChange as a pair.
+    If you do not, it may get the property change groups out of order and cause
+    notifications to be delivered more often than you would like.
+    
+    @param key {String} The property key that has just changed.
+    @param value {Object} The new value of the key.  May be null.
+  */
   propertyDidChange: function(key,value) {
     this._kvo().changed[key] = value ;
     var kvo = this._kvo() ;  kvo.changes--; kvo.revision++ ;
     if (kvo.changes <= 0) this._notifyPropertyObservers() ;
   },
 
+  /**
+    Convenience method to call propertyWillChange/propertyDidChange.
+    
+    Sometimes you need to notify observers that a property has changed value without
+    actually changing this value.  In those cases, you can use this method as a 
+    convenience instead of calling propertyWillChange() and propertyDidChange().
+    
+    @param key {String} The property key that has just changed.
+    @param value {Object} The new value of the key.  May be null.
+    @returns {void}
+  */
+  notifyPropertyChange: function(key, value) {
+    this.propertyWillChange(key) ;
+    this.propertyDidChange(key, value) ;
+  },
+  
   /**  
     This may be a simpler way to notify of changes if you are making a major
     update or don't know exactly which properties have changed.  This ignores

data/frameworks/sproutcore/foundation/utils.js

@@ -56,6 +56,22 @@ Object.extend(SC,
             (point.y >= SC.minY(f)) &&
             (point.x <= SC.maxX(f)) && 
             (point.y <= SC.maxY(f)) ;
+  },
+  
+  /** Return true if the two frames match.
+  
+    @param r1 {Rect} the first rect
+    @param r2 {Rect} the second rect
+    @param delta {Float} an optional delta that allows for rects that do not match exactly. Defaults to 0.1
+    @returns {Boolean} true if rects match
+   */
+  rectsEqual: function(r1, r2, delta) {
+    if (delta == null) delta = 0.1;
+    if (Math.abs(r1.y - r2.y) > delta) return false ; 
+    if (Math.abs(r1.x - r2.x) > delta) return false ; 
+    if (Math.abs(r1.width - r2.width) > delta) return false ; 
+    if (Math.abs(r1.height - r2.height) > delta) return false ; 
+    return true ;
   }
   
 }) ;

data/frameworks/sproutcore/tests/views/label_item.rhtml

@@ -0,0 +1,21 @@
+<% # ========================================================================
+   # Sproutcore.LabelItemView Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("Sproutcore.LabelItemView",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+appMain = main; main = null ; // Cancel main() so app does not start
+
+</script>
+
+<% end %>

data/frameworks/sproutcore/tests/views/list.rhtml

@@ -0,0 +1,21 @@
+<% # ========================================================================
+   # Sproutcore.ListView Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("Sproutcore.ListView",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+appMain = main; main = null ; // Cancel main() so app does not start
+
+</script>
+
+<% end %>

data/frameworks/sproutcore/tests/views/scroll.rhtml

@@ -0,0 +1,21 @@
+<% # ========================================================================
+   # Sproutcore.ScrollView Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("Sproutcore.ScrollView",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+appMain = main; main = null ; // Cancel main() so app does not start
+
+</script>
+
+<% end %>

data/frameworks/sproutcore/views/collection.js

@@ -351,7 +351,8 @@ SC.CollectionView = SC.View.extend(
 
   /**  
     Property returns all of the item views, regardless of group view.
-  
+
+    @property
     @returns {Array} the item views.
   */
   itemViews: function() {
@@ -363,6 +364,31 @@ SC.CollectionView = SC.View.extend(
     return ret;
   }.property(),
 
+  /** 
+    The property on content objects item views should display.
+    
+    Most built-in item views will respect this property.  You can also use it when writing 
+    you own item views.
+  */
+  displayProperty: null,
+
+  /**
+    Enables keyboard-based navigate if set to true.
+  */
+  acceptsFirstResponder: false,
+
+  /**
+    If your layout uses a grid or horizontal-based layout, then make sure this 
+    property is always up to date with the current number of items per row.  
+    
+    The CollectionView will use this property to support keyboard navigation 
+    using the arrow keys.
+    
+    If your collection view is simply a vertical list of items then you do not need
+    to edit this property.
+  */
+  itemsPerRow: 1,
+  
   /**
     Returns true if the passed view belongs to the collection.
     
@@ -379,6 +405,22 @@ SC.CollectionView = SC.View.extend(
     return !!this._itemViews[SC.getGUID(view)];
   },
 
+  // ......................................
+  // FIRST RESPONDER
+  //
+
+  /**
+    Called whenever the collection becomes first responder. 
+    Adds the focused class to the element.
+  */
+  didBecomeFirstResponder: function() {
+    this.addClassName('focus') ;
+  },
+  
+  willLoseFirstResponder: function() {
+    this.removeClassName('focus');
+  },
+  
   // ......................................
   // DRAG AND DROP SUPPORT
   //
@@ -425,7 +467,7 @@ SC.CollectionView = SC.View.extend(
       // This assumes you will flow LTR, but it should work if you flow
       // bottom to top or top to bottom.
       } else {
-        if (SC.maxX(f) > loc.x) {
+        if (SC.minX(f) < loc.x) {
           curSide = (SC.maxY(f) < loc.y) ? -1 : 1 ;
         } else curSide = null ;
       } 
@@ -488,26 +530,86 @@ SC.CollectionView = SC.View.extend(
     @returns {void}
   */
   hideInsertionPoint: function() {},
+
+  /**
+    Override this method to provide your own ghost image for a drag.  
+    
+    Note that the only purpose of this view is to render a visible drag element.  It is
+    not critical that you make this element bindable, etc.
+    
+    @param dragContent {Array} Array of content objects that will be used in the drag.
+  */
+  ghostViewFor: function(dragContent) {
+    var view = SC.View.create() ;
+    view.set('frame', this.get('frame')) ;
+    view.set('isPositioned', true) ;
+    var idx = dragContent.length ;
+    var maxX = 0; var maxY = 0 ;
+    
+    while(--idx >= 0) {
+      var itemView = this.itemViewForContent(dragContent[idx]) ;
+      if (!itemView) continue ;
+      var f = itemView.get('frame') ;
+      var dom = itemView.rootElement ;
+      if (!dom) continue ;
+      
+      // save the maxX & maxY.  This will be used to trim the size 
+      // of the ghost view later.
+      if (SC.maxX(f) > maxX) maxX = SC.maxX(f) ;
+      if (SC.maxY(f) > maxY) maxY = SC.maxY(f) ;
+
+      // Clone the contents of this node.  We should probably apply the 
+      // computed style to the cloned nodes in order to make sure they match even if the 
+      // CSS styles do not match.  Make sure the items are properly 
+      // positioned.
+      dom = dom.cloneNode(true) ;
+      Element.setStyle(dom, { position: "absolute", left: "%@px".fmt(f.x), top: "%@px".fmt(f.y), width: "%@px".fmt(f.width), height: "%@px".fmt(f.height) }) ;
+      view.rootElement.appendChild(dom) ;
+    }
+    
+    // Trim the size of the view to match the maxX & maxY as well as overflow
+    view.setStyle({ overflow: 'hidden', width: "%@px.".fmt(maxX+1), height: "%@px".fmt(maxY+1) }) ;
+
+    return view ;
+  },
   
-  // handle mouse drags.  If the canReorderContent is enabled, allow the 
-  // user to start a reorder.
   mouseDragged: function(ev) {
     // Don't do anything unless the user has been dragging for 123msec
     if ((Date.now() - this._mouseDownAt) < 123) return true ;
     
     // OK, they must be serious, start a drag if possible. 
-    // Also use this opportunity to clean up since mouseUp won't 
-    // get called.
     if (this.get('canReorderContent')) {
+
+      // we need to recalculate the frame at this point.
+      this.flushFrameCache();
+      
+      // First, get the selection to drag.  Drag an array of selected
+      // items appearing in this collection, in the order of the 
+      // collection.
+      var content = this.get('content') || [] ;
+      var dragContent = this.get('selection').sort(function(a,b) {
+        a = content.indexOf(a) ; b = content.indexOf(b) ;
+        return (a<b) ? -1 : ((a>b) ? 1 : 0) ;
+      });
+
+      // Build the drag view to use for the ghost drag.  This 
+      // should essentially contain any visible drag items.
+      var view = this.ghostViewFor(dragContent) ;
+      
+      // Initiate the drag
       SC.Drag.start({
         event: this._mouseDownEvent,
         source: this,
-        dragView: this._mouseDownView,
+        dragView: view,
         ghost: NO,
         slideBack: YES,
-        data: { "_mouseDownContent": this._mouseDownContent }
+        data: { "_mouseDownContent": dragContent }
       }) ; 
+      
+      // Also use this opportunity to clean up since mouseUp won't 
+      // get called.
       this._cleanupMouseDown() ;
+      this._lastInsertionIndex = null ;
     }
   },
   
@@ -525,9 +627,33 @@ SC.CollectionView = SC.View.extend(
     if (this.get('canReorderContent')) {
       var loc = drag.get('location') ;
       loc = this.convertFrameFromView(loc, null) ;
+      
+      // get the insertion index for this location.  This can be computed
+      // by a subclass using whatever method.  This method is not expected to
+      // do any data valdidation, just to map the location to an insertion index.
       var ret = this.insertionIndexForLocation(loc) ;
+
+      // now that we have an index, find the nearest index that we can actually
+      // insert at, or do not allow.
+      var objects = (drag.source == this) ? (drag.dataForType('_mouseDownContent') || []) : [];
+      var content = this.get('content') || [] ;
+
+      // if the insertion index is in between two items in the drag itself, then this is
+      // not allowed.  Either use the last insertion index or find the first index that is not 
+      // in between selections.
+      var isPreviousInDrag = (ret > 0) ? objects.indexOf(content.objectAt(ret-1)) : -1 ;
+      var isNextInDrag = (ret < content.get('length')-1) ? objects.indexOf(content.objectAt(ret)) : -1 ;
+      if (isPreviousInDrag>=0 && isNextInDrag>=0) {
+        if (this._lastInsertionIndex == null) {
+          while((ret > 0) && (objects.indexOf(content.objectAt(ret)) >= 0)) ret-- ;
+        } else ret = this._lastInsertionIndex ;
+      }
+      
+      // Now that we have verified that, check to see if a drop is allowed in the 
+      // insertion index with the delegate.
+      // TODO
+
       if (this._lastInsertionIndex != ret) {
-        console.log("--itemView: %@".fmt(ret)) ;
         var itemView = this.itemViewForContent(this.get('content').objectAt(ret));
         this.showInsertionPointBefore(itemView) ;
       }
@@ -553,29 +679,39 @@ SC.CollectionView = SC.View.extend(
   
   performDragOperation: function(op, drag) { 
     
+    SC.Benchmark.start('%@ performDragOperation'.fmt(this._guid)) ;
+    
     var loc = drag.get('location') ;
     loc = this.convertFrameFromView(loc, null) ;
     
     // if op is MOVE or COPY, add item to view.
-    var obj = drag.dataForType('_mouseDownContent') ;
-    if (obj && (op == SC.DRAG_MOVE)) {
+    var objects = drag.dataForType('_mouseDownContent') ;
+    if (objects && (op == SC.DRAG_MOVE)) {
 
       // find the index to for the new insertion 
       var idx = this.insertionIndexForLocation(loc) ;
-      
+
       var content = this.get('content') ;
       content.beginPropertyChanges(); // suspend notifications
-      
+
+      // debugger ;
       // find the old index and remove it.
-      var old = content.indexOf(obj) ;
-      if (old >= 0) content.removeAt(old) ;
-      if ((old >= 0) && (old <= idx)) idx--; //adjust idx
+      var objectsIdx = objects.get('length') ;
+      while(--objectsIdx >= 0) {
+        var obj = objects.objectAt(objectsIdx) ;
+        var old = content.indexOf(obj) ;
+        if (old >= 0) content.removeAt(old) ;
+        if ((old >= 0) && (old < idx)) idx--; //adjust idx
+      }
     
-      // now insert object at new location
-      content.insertAt(idx, obj) ;
+      // now insert objects at new location
+      content.replace(idx, 0, objects) ;
       content.endPropertyChanges(); // restart notifications
     }
     
+    SC.Benchmark.end('%@ performDragOperation'.fmt(this._guid)) ;
+    console.log(SC.Benchmark.report()) ;
+    
     return SC.DRAG_MOVE; 
   },
   
@@ -609,6 +745,7 @@ SC.CollectionView = SC.View.extend(
   {
     var el = this.containerElement || this.rootElement;
     
+    SC.Benchmark.start('%@: updateChildren'.fmt(this._guid)) ;
     // initial setup
     if (this._firstUpdate)
     {
@@ -713,6 +850,7 @@ SC.CollectionView = SC.View.extend(
     this.updateSelectionStates() ;
     this.flushFrameCache() ;
     this.set('isDirty',false); 
+    SC.Benchmark.end('%@: updateChildren'.fmt(this._guid)) ;
   },
 
   /**
@@ -746,6 +884,10 @@ SC.CollectionView = SC.View.extend(
 
     var firstChild = null ;
     
+    // save the first child to be modified.  This will be
+    // passed to the layout method.
+    var firstModifiedChild = null;
+    
     while (child || (inGroup && (loc < contentCount) && !expired)) {
       
       // get the content object.
@@ -796,6 +938,7 @@ SC.CollectionView = SC.View.extend(
         parent.insertBefore(newChild,child);
         this._itemViews[SC.getGUID(newChild)] = newChild;
         itemViewsDidChange = true;
+        if (!firstModifiedChild) firstModifiedChild = newChild ;
         child = newChild;
       }
 
@@ -813,26 +956,22 @@ SC.CollectionView = SC.View.extend(
 
 
     // maybe save the current render loc and reschedule.
-    if (expired && (loc < contentCount))
-    {
+    if (expired && (loc < contentCount)) {
       this._lastRenderLoc = loc ;
       this._lastRenderChild = child ;
       setTimeout(this.updateChildren.bind(this),1) ; // do more later.
-    } 
-    else 
-    {
+    } else {
       this._resetExpiredRender();
     }
     
     // now let the collection view layout the views that changed (if 
     // it is implemented.)
-    if (this.layoutChildViewsFor)
-    {
+    if (firstModifiedChild && this.layoutChildViewsFor) {
       var el = this.containerElement || this.rootElement;
       if (this._cachedParent) {
         this._cachedParent.insertBefore(el,this._cachedSibling);
       }   
-      this.layoutChildViewsFor(parent, firstChild);
+      this.layoutChildViewsFor(parent, firstModifiedChild);
       if (this._cachedParent) {
         this._cachedParent.removeChild(el);
       }
@@ -981,24 +1120,11 @@ SC.CollectionView = SC.View.extend(
   // This will set the collection height.
   updateComputedViewHeight: function(groupView) {
     var height = this.computedViewHeight(groupView) ;
-    if (height <= 0) {
-      if (groupView._heightView) {
-        groupView.rootElement.removeChild(this._heightView) ;
-        groupView._heightView = null ;
-      }
-    } else {
-      if (!groupView._heightView) {
-        groupView._heightView = document.createElement('div') ;
-        groupView.rootElement.appendChild(groupView._heightView) ;
-        Element.setStyle(groupView._heightView,{
-          position: 'absolute', left: '0px', display: 'block',
-          width: '1px', height: '1px'
-        }) ;
-      }
-      
-      if (height != groupView._lastComputedHeight) {
-        Element.setStyle(groupView._heightView,{ top: height + 'px' }) ;
-        groupView._lastComputedHeight = height ;
+    if (height >= 0) {
+      var f = this.get('frame') ;
+      if (Math.abs(f.height - height) > 0.1) {
+        f.height = height ;
+        this.set('frame', { height: height }) ;
       }
     }
   },
@@ -1007,36 +1133,158 @@ SC.CollectionView = SC.View.extend(
   // SELECTION
   //
 
-  selectPreviousItem: function()
+  _indexOfSelectionTop: function() {
+    var content = this.get('content');
+    var sel = this.get('selection');
+    if (!content || !sel) return - 1;
+
+    // find the first item in the selection
+    var contentLength = content.get('length') ;
+    var indexOfSelected = contentLength ; var idx = sel.length ;
+    while(--idx >= 0) {
+      var curIndex = content.indexOf(sel[idx]) ;
+      if ((curIndex >= 0) && (curIndex < indexOfSelected)) indexOfSelected = curIndex ;
+    }
+    
+    return (indexOfSelected >= contentLength) ? -1 : indexOfSelected ;
+  },
+  
+  _indexOfSelectionBottom: function() {
+    var content = this.get('content');
+    var sel = this.get('selection');
+    if (!content || !sel) return - 1;
+
+    var indexOfSelected = -1 ; var idx = sel.length ;
+    while(--idx >= 0) {
+      var curIndex = content.indexOf(sel[idx]) ;
+      if (curIndex > indexOfSelected) indexOfSelected = curIndex ;
+    }
+    
+    return (indexOfSelected < 0) ? -1 : indexOfSelected ;
+  },
+  
+  /**
+    Select one or more items before the current selection, optionally
+    extending the current selection.  Also scrolls the selected item into view.
+    
+    Selection does not wrap around.
+    
+    @param extend {Boolean} (Optional) If true, the selection will be extended instead of replaced.  Defaults to false.
+    @param numberOfItems {Integer} (Optional) The number of previous to be selected.  Defaults to 1
+    @returns {void}
+  */
+  selectPreviousItem: function(extend, numberOfItems)
   {
-    var extend   = arguments[0] || false;
+    if (numberOfItems == null) numberOfItems = 1 ;
+    if (extend == null) extend = false ;
+
     var content  = this.get('content');
-    var selected = this.get('selection').first();
-    var indexOfFirst    = 0;
-    var indexOfSelected = content.indexOf( selected );
-    var indexOfPrevious = indexOfSelected - 1;
-    // error check to make sure we're not out of bounds...
-    if ( indexOfPrevious < indexOfFirst ) indexOfPrevious = indexOfFirst;
-    // ensure that the item is visible
-    this.scrollToItemRecord(content.objectAt(indexOfPrevious));
-    // set the selection
-    this.selectItems(content.objectAt(indexOfPrevious), extend);
+    var contentLength = content.get('length') ;
+
+    // if extending, then we need to do some fun stuff to build the array
+    var selTop, selBottom, anchor ;
+    if (extend) {
+      selTop = this._indexOfSelectionTop() ;
+      selBottom = this._indexOfSelectionBottom() ;
+      anchor = (this._selectionAnchor == null) ? selTop : this._selectionAnchor ;
+      this._selectionAnchor = anchor ;
+
+      // If the selBottom is after the anchor, then reduce the selection
+      if (selBottom > anchor) {
+        selBottom-- ;
+        
+      // otherwise, select the previous item from the top 
+      } else {
+        selTop-- ;
+      }
+      
+      // Ensure we are not out of bounds
+      if (selTop < 0) selTop = 0 ;
+      if (selBottom < selTop) selBottom = selTop ;
+      
+    // if not extending, just select the item previous to the selTop
+    } else {
+      selTop = this._indexOfSelectionTop() - 1;
+      if (selTop < 0) selTop = 0 ;
+      selBottom = selTop ;
+      anchor = null ;
+    }
+    
+    // now build array of new items to select
+    var items = [] ;
+    while(selTop <= selBottom) {
+      items[items.length] = content.objectAt(selTop++) ;
+    }
+
+    // ensure that the item is visible and set the selection
+    if (items.length > 0) {
+      this.scrollToItemRecord(items.first());
+      this.selectItems(items);
+    }
+    
+    this._selectionAnchor = anchor ;
   },
   
-  selectNextItem: function()
+  /**
+    Select one or more items folling the current selection, optionally
+    extending the current selection.  Also scrolls to selected item.
+
+    Selection does not wrap around.
+    
+    @param extend {Boolean} (Optional) If true, the selection will be extended instead of replaced.  Defaults to false.
+    @param numberOfItems {Integer} (Optional) The number of items to be selected.  Defaults to 1.
+    @returns {void}
+  */
+  selectNextItem: function(extend, numberOfItems)
   {
-    var extend   = arguments[0] || false;
+    if (numberOfItems == null) numberOfItems = 1 ;
+    if (extend == null) extend = false ;
+
     var content  = this.get('content');
-    var selected = this.get('selection').last();
-    var indexOfLast     = (content.get('length') - 1) || 0;
-    var indexOfSelected = content.indexOf( selected );
-    var indexOfNext     = indexOfSelected + 1;
-    // error check to make sure we're not out of bounds...
-    if ( indexOfNext > indexOfLast ) indexOfNext = indexOfLast;
-    // ensure that the item is visible
-    this.scrollToItemRecord(content.objectAt(indexOfNext));
-    // set the selection
-    this.selectItems(content.objectAt(indexOfNext), extend);
+    var contentLength = content.get('length') ;
+
+    // if extending, then we need to do some fun stuff to build the array
+    var selTop, selBottom, anchor ;
+    if (extend) {
+      selTop = this._indexOfSelectionTop() ;
+      selBottom = this._indexOfSelectionBottom() ;
+      anchor = (this._selectionAnchor == null) ? selTop : this._selectionAnchor ;
+      this._selectionAnchor = anchor ;
+
+      // If the selTop is before the anchor, then reduce the selection
+      if (selTop < anchor) {
+        selTop++ ;
+        
+      // otherwise, select the next item after the top 
+      } else {
+        selBottom++ ;
+      }
+      
+      // Ensure we are not out of bounds
+      if (selBottom >= contentLength) selBottom = contentLength-1;
+      if (selTop > selBottom) selTop = selBottom ;
+      
+    // if not extending, just select the item next to the selBottom
+    } else {
+      selBottom = this._indexOfSelectionBottom() + 1;
+      if (selBottom >= contentLength) selBottom = contentLength-1;
+      selTop = selBottom ;
+      anchor = null ;
+    }
+    
+    // now build array of new items to select
+    var items = [] ;
+    while(selTop <= selBottom) {
+      items[items.length] = content.objectAt(selTop++) ;
+    }
+
+    // ensure that the item is visible and set the selection
+    if (items.length > 0) {
+      this.scrollToItemRecord(items.first());
+      this.selectItems(items);
+    }
+    
+    this._selectionAnchor = anchor ;
   },
   
   /**
@@ -1075,12 +1323,25 @@ SC.CollectionView = SC.View.extend(
     }
   },
 
+  /** 
+    Selects the passed array of items, optionally extending the
+    current selection.
+    
+    @param items {Array} The item or items to select.
+    @param extendSelection {Boolean} If true, extends the selection instead of replacing it.
+  */
   selectItems: function(items, extendSelection) {
     var base = (extendSelection) ? this.get('selection') : [] ;
     var sel = [items].concat(base).flatten().uniq() ;
+    
+    // if you are not extending the selection, then clear the selection anchor.
+    this._selectionAnchor = null ;
     this.set('selection',sel) ;  
   },
-  
+
+  /** 
+    Removes the items from the selection.
+  */
   deselectItems: function(items) {
     items = [items].flatten() ;
     var base = this.get('selection') || [] ; 
@@ -1093,6 +1354,73 @@ SC.CollectionView = SC.View.extend(
   // EVENT HANDLING
   //
 
+  keyDown: function(evt) {
+    return this.interpretKeyEvents(evt) ;
+  },
+  
+  keyUp: function() { return true; },
+
+  /** @private
+    Selects the same item on the next row.  Or moves down one if 
+    itemsPerRow = 1
+  */
+  moveDown: function(sender, evt) {
+    this.selectNextItem(false, this.get('itemsPerRow') || 1) ;
+    return true ;
+  },
+  
+  /** @private
+    Selects the same item on the next row.  Or moves up one if 
+    itemsPerRow = 1
+  */
+  moveUp: function(sender, evt) {
+    this.selectPreviousItem(false, this.get('itemsPerRow') || 1) ;
+    return true ;
+  },
+
+  /** @private
+    Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
+  */
+  moveLeft: function(sender, evt) {
+    if ((this.get('itemsPerRow') || 1) > 1) this.selectNextItem(false, 1) ;
+    return true ;
+  },
+
+  /** @private
+    Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
+  */
+  moveRight: function(sender, evt) {
+    if ((this.get('itemsPerRow') || 1) > 1) this.selectPreviousItem(false, 1) ;
+    return true ;
+  },
+
+  moveDownAndModifySelection: function(sender, evt) {
+    this.selectNextItem(true, this.get('itemsPerRow') || 1) ;
+    return true ;
+  },
+  
+  moveUpAndModifySelection: function(sender, evt) {
+    this.selectPreviousItem(true, this.get('itemsPerRow') || 1) ;
+    return true ;
+  },
+
+  /** @private
+    Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
+  */
+  moveLeftAndModifySelection: function(sender, evt) {
+    if ((this.get('itemsPerRow') || 1) > 1) this.selectNextItem(true, 1) ;
+    return true ;
+  },
+
+  /** @private
+    Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
+  */
+  moveRightAndModifySelection: function(sender, evt) {
+    if ((this.get('itemsPerRow') || 1) > 1) this.selectPreviousItem(true, 1) ;
+    return true ;
+  },
+
+  
   /** 
     Find the item view underneath the passed mouse location.
     
@@ -1177,6 +1505,9 @@ SC.CollectionView = SC.View.extend(
     var mouseDownView    = this._mouseDownView = this.itemViewForEvent(ev);
     var mouseDownContent = this._mouseDownContent = (mouseDownView) ? mouseDownView.get('content') : null;
 
+    // become first responder if possible.
+    this.becomeFirstResponder() ;
+    
     // recieved a mouseDown on the collection element, but not on one of the childItems... bail
     if (!mouseDownView) {
       if (this.get('allowDeselectAll')) this.selectItems([], false);
@@ -1235,8 +1566,6 @@ SC.CollectionView = SC.View.extend(
   
   _mouseUp: function(ev) {
     
-    console.info('_mouseUp!');
-    
     var canAct = this.get('actOnSelect') ;
     var view = this.itemViewForEvent(ev) ;
     
@@ -1482,8 +1811,7 @@ SC.CollectionView = SC.View.extend(
   // called on content change *and* content.[] change...
   _contentPropertyObserver: function(target,key,value)
   {
-    if (!this._updating)
-    {
+    if (!this._updating) {
       this._updating = true;
       this.set('isDirty',true);
       this._resetExpiredRender();