sproutcore 1.0.1049.pre.2 → 1.4.0.rc

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

@@ -42,6 +42,15 @@ SC.ScrollerView = SC.View.extend(
   // PROPERTIES
   //
   
+  /**
+    If YES, a click on the track will cause the scrollbar to scroll to that position.
+    Otherwise, a click on the track will cause a page down.
+    
+    In either case, alt-clicks will perform the opposite behavior.
+  */
+  shouldScrollToClick: NO,
+  
+  
   /**
     @private
     The in-touch-scroll value.
@@ -419,6 +428,24 @@ SC.ScrollerView = SC.View.extend(
   // ..........................................................
   // MOUSE EVENTS
   //
+  
+  /**
+    Returns the value for a position within the scroller's frame.
+    
+    @private
+  */
+  valueForPosition: function(pos) {
+    var max = this.get('maximum'),
+        trackLength = this.get('trackLength'),
+        thumbLength = this.get('thumbLength'),
+        capLength = this.get('capLength'),
+        capOverlap = this.get('capOverlap'), value; 
+    
+    value = pos - (capLength - capOverlap);
+    value = value / (trackLength - thumbLength);
+    value = value * max;
+    return value;
+  },
 
   /**
     Handles mouse down events and adjusts the value property depending where
@@ -429,9 +456,11 @@ SC.ScrollerView = SC.View.extend(
     If the user clicks the thumb, we note the position of the mouse event but
     do not take further action until they begin to drag.
 
-    If the user clicks the track, we adjust the value a page at a time.
+    If the user clicks the track, we adjust the value a page at a time, unless
+    alt is pressed, in which case we scroll to that position.
 
-    If the user clicks the buttons, we adjust the value by a fixed amount.
+    If the user clicks the buttons, we adjust the value by a fixed amount, unless
+    alt is pressed, in which case we adjust by a page.
 
     If the user clicks and holds on either the track or buttons, those actions
     are repeated until they release the mouse button.
@@ -441,11 +470,16 @@ SC.ScrollerView = SC.View.extend(
   */
   mouseDown: function(evt) {
     if (!this.get('isEnabled')) return NO;
+    
+    // keep note of altIsDown for later.
+    this._altIsDown = evt.altKey;
+    this._shiftIsDown = evt.shiftKey;
 
     var target = evt.target,
         thumbPosition = this.get('thumbPosition'),
-        value, clickLocation, clickOffset;
-
+        value, clickLocation, clickOffset,
+        scrollerLength = this.get('scrollerLength');
+        
     // Determine the subcontrol that was clicked
     if (target.className.indexOf('thumb') >= 0) {
       // Convert the mouseDown coordinates to the view's coordinates
@@ -460,23 +494,30 @@ SC.ScrollerView = SC.View.extend(
       this._thumbOffset = clickLocation;
       this._mouseDownLocation = { x: evt.pageX, y: evt.pageY };
       this._thumbPositionAtDragStart = this.get('thumbPosition');
+      this._valueAtDragStart = this.get("value");
     } else if (target.className.indexOf('button-top') >= 0) {
       // User clicked the up/left button
-      // Decrement the value by a fixed amount
-      this.decrementProperty('value', 30);
+      // Decrement the value by a fixed amount or page size
+      this.decrementProperty('value', (this._altIsDown ? scrollerLength : 30));
       this.makeButtonActive('.button-top');
       // start a timer that will continue to fire until mouseUp is called
       this.startMouseDownTimer('scrollUp');
+      this._isScrollingUp = YES;
     } else if (target.className.indexOf('button-bottom') >= 0) {
       // User clicked the down/right button
       // Increment the value by a fixed amount
-      this.incrementProperty('value', 30);
+      this.incrementProperty('value', (this._altIsDown ? scrollerLength : 30));
       this.makeButtonActive('.button-bottom');
       // start a timer that will continue to fire until mouseUp is called
       this.startMouseDownTimer('scrollDown');
+      this._isScrollingDown = YES;
     } else {
       // User clicked in the track
-          var scrollerLength = this.get('scrollerLength'),
+      var scrollToClick = this.get("shouldScrollToClick");
+      if (evt.altKey) scrollToClick = !scrollToClick;
+      
+      var trackLength = this.get('trackLength'),
+          thumbLength = this.get('thumbLength'),
           frame = this.convertFrameFromView({ x: evt.pageX, y: evt.pageY }),
           mousePosition;
 
@@ -488,16 +529,30 @@ SC.ScrollerView = SC.View.extend(
           this._mouseDownLocation = mousePosition = frame.x;
           break;
       }
-
-      // Move the thumb up or down a page depending on whether the click
-      // was above or below the thumb
-      if (mousePosition < thumbPosition) {
-        this.decrementProperty('value',scrollerLength);
-        this.startMouseDownTimer('page');
+      
+      if (scrollToClick) {
+        this.set('value', this.valueForPosition(mousePosition - (thumbLength / 2)));
+        
+        // and start a normal mouse down
+        thumbPosition = this.get('thumbPosition');
+        
+        this._thumbDragging = YES;
+        this._thumbOffset = {x: frame.x - thumbPosition, y: frame.y - thumbPosition };
+        this._mouseDownLocation = {x:evt.pageX, y:evt.pageY};
+        this._thumbPositionAtDragStart = thumbPosition;
+        this._valueAtDragStart = this.get("value");
       } else {
-        this.incrementProperty('value', scrollerLength);
-        this.startMouseDownTimer('page');
+        // Move the thumb up or down a page depending on whether the click
+        // was above or below the thumb
+        if (mousePosition < thumbPosition) {
+          this.decrementProperty('value',scrollerLength);
+          this.startMouseDownTimer('page');
+        } else {
+          this.incrementProperty('value', scrollerLength);
+          this.startMouseDownTimer('page');
+        }
       }
+      
     }
 
     return YES;
@@ -529,6 +584,8 @@ SC.ScrollerView = SC.View.extend(
     }
 
     this._thumbDragging = NO;
+    this._isScrollingDown = NO;
+    this._isScrollingUp = NO;
 
     return ret;
   },
@@ -537,29 +594,99 @@ SC.ScrollerView = SC.View.extend(
     If the user began the drag on the thumb, we calculate the difference
     between the mouse position at click and where it is now.  We then
     offset the thumb by that amount, within the bounds of the track.
+    
+    If the user began scrolling up/down using the buttons, this will track
+    what component they are currently over, changing the scroll direction.
 
     @param evt {SC.Event} the mousedragged event
     @private
   */
   mouseDragged: function(evt) {
     var value, length, delta, thumbPosition,
-        thumbPositionAtDragStart = this._thumbPositionAtDragStart;
+        target = evt.target,
+        thumbPositionAtDragStart = this._thumbPositionAtDragStart,
+        isScrollingUp = this._isScrollingUp,
+        isScrollingDown = this._isScrollingDown,
+        active = this._scs_buttonActive,
+        timer;
 
     // Only move the thumb if the user clicked on the thumb during mouseDown
-    if (!this._thumbDragging) return NO;
+    if (this._thumbDragging) {
+      
+      switch (this.get('layoutDirection')) {
+        case SC.LAYOUT_VERTICAL:
+          delta = (evt.pageY - this._mouseDownLocation.y);
+          break;
+        case SC.LAYOUT_HORIZONTAL:
+          delta = (evt.pageX - this._mouseDownLocation.x);
+          break;
+      }
+      
+      // if we are in alt now, but were not before, update the old thumb position to the new one
+      if (evt.altKey) {
+        if (!this._altIsDown || (this._shiftIsDown !== evt.shiftKey)) {
+          thumbPositionAtDragStart = this._thumbPositionAtDragStart = thumbPositionAtDragStart+delta;
+          delta = 0;
+          this._mouseDownLocation = { x: evt.pageX, y: evt.pageY };
+          this._valueAtDragStart = this.get("value");
+        }
+        
+        // because I feel like it. Probably almost no one will find this tiny, buried feature.
+        // Too bad.
+        if (evt.shiftKey) delta = -delta;
+        
+        this.set('value', Math.round(this._valueAtDragStart + delta * 2));
+      } else {
+        thumbPosition = thumbPositionAtDragStart + delta;
+        length = this.get('trackLength') - this.get('thumbLength');
+        this.set('value', Math.round( (thumbPosition/length) * this.get('maximum')));
+      }
+    
+    } else if (isScrollingUp || isScrollingDown) {
+      var nowScrollingUp = NO, nowScrollingDown = NO;
+      
+      var topButtonRect = this.$('.button-top')[0].getBoundingClientRect();
+      var bottomButtonRect = this.$('.button-bottom')[0].getBoundingClientRect();
+      
+      switch (this.get('layoutDirection')) {
+        case SC.LAYOUT_VERTICAL:
+          if (evt.pageY < topButtonRect.bottom) nowScrollingUp = YES;
+          else nowScrollingDown = YES;
+          break;
+        case SC.LAYOUT_HORIZONTAL:
+          if (evt.pageX < topButtonRect.right) nowScrollingUp = YES;
+          else nowScrollingDown = YES;
+          break;
+      }
+      
+      if ((nowScrollingUp || nowScrollingDown) && nowScrollingUp !== isScrollingUp){
+        //
+        // STOP OLD
+        //
+        
+        // If we have an element that was set as active in mouseDown,
+        // remove its active state
+        if (active) {
+         active.removeClass('active');
+        }
 
-    switch (this.get('layoutDirection')) {
-      case SC.LAYOUT_VERTICAL:
-        delta = (evt.pageY - this._mouseDownLocation.y);
-        break;
-      case SC.LAYOUT_HORIZONTAL:
-        delta = (evt.pageX - this._mouseDownLocation.x);
-        break;
+        // Stop firing repeating events after mouseup
+        this._mouseDownTimerAction = nowScrollingUp ? "scrollUp" : "scrollDown";
+        
+        if (nowScrollingUp) {
+          this.makeButtonActive('.button-top');
+        } else if (nowScrollingDown) {
+          this.makeButtonActive('.button-bottom');
+        }
+        
+         this._isScrollingUp = nowScrollingUp;
+         this._isScrollingDown = nowScrollingDown;
+      }
     }
-
-    thumbPosition = thumbPositionAtDragStart + delta;
-    length = this.get('trackLength') - this.get('thumbLength');
-    this.set('value', Math.round( (thumbPosition/length) * this.get('maximum')));
+    
+    
+    this._altIsDown = evt.altKey;
+    this._shiftIsDown = evt.shiftKey;
     return YES;
   },
 
@@ -568,15 +695,17 @@ SC.ScrollerView = SC.View.extend(
     clicks a button or inside the track to move a page at a time. If they
     continue holding the mouse button down, we want to repeat that action
     after a small delay.  This timer will be invalidated in mouseUp.
+    
+    Specify "immediate" as YES if it should not wait.
 
     @private
   */
-  startMouseDownTimer: function(action) {
+  startMouseDownTimer: function(action, immediate) {
     var timer;
 
     this._mouseDownTimerAction = action;
     this._mouseDownTimer = SC.Timer.schedule({
-      target: this, action: this.mouseDownTimerDidFire, interval: 300
+      target: this, action: this.mouseDownTimerDidFire, interval: immediate ? 0 : 300
     });
   },
 
@@ -604,10 +733,10 @@ SC.ScrollerView = SC.View.extend(
 
     switch (this._mouseDownTimerAction) {
       case 'scrollDown':
-        this.incrementProperty('value', 30);
+        this.incrementProperty('value', this._altIsDown ? scrollerLength : 30);
         break;
       case 'scrollUp':
-        this.decrementProperty('value', 30);
+        this.decrementProperty('value', this._altIsDown ? scrollerLength : 30);
         break;
       case 'page':
         timerInterval = 150;
@@ -636,4 +765,120 @@ SC.ScrollerView = SC.View.extend(
   }
 });
 
+// TO BE EVENTUALLY REPLACED W/RENDERERS FROM QUILMES
+SC.TouchScrollerView = SC.ScrollerView.extend({
+  classNames: ['sc-touch-scroller-view'],
+  scrollbarThickness: 12,
+  capLength: 5,
+  capOverlap: 0,
+  hasButtons: NO,
+  buttonOverlap: 36,
+  
+  adjustThumb: function(thumb, position, length) {
+    var thumbInner = this.$('.thumb-inner');
+    var max = this.get("scrollerLength") - this.capLength, min = this.get("minimum") + this.capLength;
+    
+    if (position + length > max) {
+      position = Math.min(max - 20, position);
+      length = max - position;
+    }
+    
+    if (position < min) {
+      length -= min - position;
+      position = min;
+    }
+    
+    switch (this.get('layoutDirection')) {
+      case SC.LAYOUT_VERTICAL:
+        if (this._thumbPosition !== position) thumb.css('-webkit-transform', 'translate3d(0px,' + position + 'px,0px)');
+        if (this._thumbSize !== length) {
+          thumbInner.css('-webkit-transform', 'translate3d(0px,' + Math.round(length - 1044) + 'px,0px)');
+        }
+        break;
+      case SC.LAYOUT_HORIZONTAL:
+        if (this._thumbPosition !== position) thumb.css('-webkit-transform', 'translate3d(' + position + 'px,0px,0px)');
+        if (this._thumbSize !== length) {
+          thumbInner.css('-webkit-transform', 'translate3d(' + Math.round(length - 1044) + 'px,0px,0px)');
+        }
+        break;
+    }
+
+    this._thumbPosition = position;
+    this._thumbSize = length;
+  },
+  
+  render: function(context, firstTime) {
+    var classNames = [],
+        buttons = '',
+        thumbPosition, thumbLength, thumbCenterLength, thumbElement,
+        value, max, scrollerLength, length, pct;
+
+    // We set a class name depending on the layout direction so that we can
+    // style them differently using CSS.
+    switch (this.get('layoutDirection')) {
+      case SC.LAYOUT_VERTICAL:
+        classNames.push('sc-vertical');
+        break;
+      case SC.LAYOUT_HORIZONTAL:
+        classNames.push('sc-horizontal');
+        break;
+    }
 
+    // The appearance of the scroller changes if disabled
+    if (!this.get('isEnabled')) classNames.push('disabled');
+    // Whether to hide the thumb and buttons
+    if (this.get('controlsHidden')) classNames.push('controls-hidden');
+
+    // Change the class names of the DOM element all at once to improve
+    // performance
+    context.addClass(classNames);
+
+    // Calculate the position and size of the thumb
+    thumbLength = this.get('thumbLength');
+    thumbPosition = this.get('thumbPosition');
+
+    // If this is the first time, generate the actual HTML
+    if (firstTime) {
+      if (this.get('hasButtons')) {
+        buttons = '<div class="button-bottom"></div><div class="button-top"></div>';
+      } else {
+        buttons = '<div class="endcap"></div>';
+      }
+
+      switch (this.get('layoutDirection')) {
+        case SC.LAYOUT_VERTICAL:
+        context.push('<div class="track"></div>',
+                      '<div class="cap"></div>',
+                      buttons,
+                      '<div class="thumb">',
+                      '<div class="thumb-top"></div>',
+                      '<div class="thumb-clip">',
+                      '<div class="thumb-inner" style="-webkit-transform: translateY('+(thumbLength-1044)+'px);">',
+                      '<div class="thumb-center"></div>',
+                      '<div class="thumb-bottom"></div></div></div></div>');
+        break;
+        case SC.LAYOUT_HORIZONTAL:
+        context.push('<div class="track"></div>',
+                      '<div class="cap"></div>',
+                      buttons,
+                      '<div class="thumb">',
+                      '<div class="thumb-top"></div>',
+                      '<div class="thumb-clip">',
+                      '<div class="thumb-inner" style="-webkit-transform: translateX('+(thumbLength-1044)+'px);">',
+                      '<div class="thumb-center"></div>',
+                      '<div class="thumb-bottom"></div></div></div></div>');
+      }
+    } else {
+      // The HTML has already been generated, so all we have to do is
+      // reposition and resize the thumb
+
+      // If we aren't displaying controls don't bother
+      if (this.get('controlsHidden')) return;
+
+      thumbElement = this.$('.thumb');
+
+      this.adjustThumb(thumbElement, thumbPosition, thumbLength);
+    }
+  }
+  
+});

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

@@ -43,7 +43,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   
   classNames: ['sc-segmented-view'],
   
-  controlStyle: 'square',
+  theme: 'square',
   
   /**
     The value of the segmented view.
@@ -196,16 +196,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       // if the item is a string, build the array using defaults...
       itemType = SC.typeOf(item);
       if (itemType === SC.T_STRING) {
-        cur = {
-          title: item.humanize().titleize(),
-          value: item,
-          isEnabled: YES,
-          icon: null,
-          width: null,
-          toolTip: null,
-          index: idx
-        };
-        // cur = [item.humanize().titleize(), item, YES, null, null,  null, idx] ;
+        cur = [item.humanize().titleize(), item, YES, null, null,  null, idx] ;
         
       // if the item is not an array, try to use the itemKeys.
       } else if (itemType !== SC.T_ARRAY) {
@@ -216,33 +207,23 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         
         // now loop through the keys and try to get the values on the item
         cur = keys.map(fetchItem, item);
-        
-        // create the actual item
-        cur = {
-          title: cur[0],
-          value: cur[1],
-          isEnabled: cur[2],
-          icon: cur[3],
-          width: cur[4],
-          toolTip: cur[5],
-          index: idx
-        };
+        cur[cur.length] = idx; // save current index
         
         // special case 1...if title key is null, try to make into string
-        if (!keys[0] && item.toString) cur.title = item.toString(); 
+        if (!keys[0] && item.toString) cur[0] = item.toString(); 
         
         // special case 2...if value key is null, use item itself
-        if (!keys[1]) cur.value = item;
+        if (!keys[1]) cur[1] = item;
         
         // special case 3...if isEnabled is null, default to yes.
-        if (!keys[2]) cur.isEnabled = YES ; 
+        if (!keys[2]) cur[2] = YES ; 
       }
       
       // finally, be sure to loc the title if needed
-      if (loc && cur.title) cur.title = cur.title.loc();
+      if (loc && cur[0]) cur[0] = cur[0].loc();
 
       // finally, be sure to loc the toolTip if needed
-      if (loc && cur.toolTip && SC.typeOf(cur.toolTip) === SC.T_STRING) cur.toolTip = cur.toolTip.loc();
+      if (loc && cur[5] && SC.typeOf(cur[5]) === SC.T_STRING) cur[5] = cur[5].loc();
       
       // add to return array
       ret[ret.length] = cur;
@@ -274,10 +255,6 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   },
   
   init: function() {
-    var classnames = SC.clone(this.get('classNames'));
-    classnames.push(this.get('controlStyle'));
-    this.set('classNames', classnames);
-      
     sc_super();
     this.itemsDidChange() ;
   },
@@ -289,34 +266,110 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   
   displayProperties: ['displayItems', 'value', 'activeIndex'],
   
-  createRenderer: function(theme) {
-    return theme.segmented();
+  
+  render: function(context, firstTime) { 
+    
+    // collect some data 
+    var items = this.get('displayItems');
+    
+    var theme = this.get('theme');
+    if (theme) context.addClass(theme);
+    if (firstTime || this.get('renderLikeFirstTime')) {
+      this._seg_displayItems = items; // save for future
+      this.renderDisplayItems(context, items) ;
+      context.addStyle('text-align', this.get('align'));
+      this.set('renderLikeFirstTime',NO);
+    }else{
+    // update selection and active state
+      var activeIndex = this.get('activeIndex'),
+          value = this.get('value'),
+          isArray = SC.isArray(value);
+      if (isArray && value.get('length')===1) {
+        value = value.objectAt(0); isArray = NO ;
+      }
+      var names = {}, // reuse  
+          loc = items.length, cq = this.$('.sc-segment'), item;
+      while(--loc>=0) {
+        item = items[loc];
+        names.sel = isArray ? (value.indexOf(item[1])>=0) : (item[1]===value);
+        names.active = (activeIndex === loc);
+        names.disabled = !item[2];
+        SC.$(cq[loc]).setClass(names);
+      }
+      names = items = value = items = null; // cleanup
+    }
   },
   
-  updateRenderer: function(r) {
-    var items = this.get('displayItems'), value = this.get('value'), isArray = SC.isArray(value),
-        activeIndex = this.get("activeIndex"), item;
-    for (var idx = 0, len = items.length; idx < len; idx++) {
-      item = items[idx];
+  /**
+    Actually generates the segment HTML for the display items.  This method 
+    is called the first time a view is constructed and any time the display
+    items change thereafter.  This will construct the HTML but will not set
+    any "transient" states such as the global isEnabled property or selection.
+  */
+  renderDisplayItems: function(context, items) {
+    var value       = this.get('value'),
+        isArray     = SC.isArray(value),
+        activeIndex = this.get('activeIndex'),
+        len         = items.length,
+        title, icon, url, className, ic, item, toolTip, width, i, stylesHash,
+        classArray;
+
+    for(i=0; i< len; i++){
+      ic = context.begin('a').attr('role', 'button');
+      item=items[i];
+      title = item[0]; 
+      icon = item[3];
+      toolTip = item[5];
       
-      // change active
-      if (activeIndex == idx) item.isActive = YES;
-      else item.isActive = NO;
+      stylesHash = {};
+      classArray = [];
+
+      if (this.get('layoutDirection') == SC.LAYOUT_HORIZONTAL) {
+        stylesHash['display'] = 'inline-block' ;
+      }
+
+      classArray.push('sc-segment');
       
-      // chance selection
-      if (isArray ? value.indexOf(item.value) : value === item.value) {
-        item.isSelected = YES;
+      if(!item[2]){
+        classArray.push('disabled');
       }
-      else item.isSelected = NO;
-    }
-    
-    // set the attributes
-    r.attr({
-      segments: items,
-      align: this.get('align'),
-      layoutDirection: this.get('layoutDirection')
-    });
-  },
+      if(i===0){
+        classArray.push('sc-first-segment');
+      }
+      if(i===(len-1)){
+        classArray.push('sc-last-segment');
+      }
+      if(i!==0 && i!==(len-1)){
+        classArray.push('sc-middle-segment');
+      }      
+      if( isArray ? (value.indexOf(item[1])>=0) : (item[1]===value)){
+        classArray.push('sel');
+      }
+      if(activeIndex === i) {
+        classArray.push('active') ;
+      }
+      if(item[4]){
+        width=item[4];
+        stylesHash['width'] = width+'px';
+      }
+      ic.addClass(classArray);
+      ic.addStyle(stylesHash);
+      if(toolTip) {
+        ic.attr('title', toolTip) ;
+      }
+
+      if (icon) {
+        url = (icon.indexOf('/')>=0) ? icon : SC.BLANK_IMAGE_URL;
+        className = (url === icon) ? '' : icon ;
+        icon = '<img src="'+url+'" alt="" class="icon '+className+'" />';
+      } else {
+        icon = '';
+      }
+      ic.push('<span class="sc-button-inner"><label class="sc-button-label">',
+              icon+title, '</label></span>');
+      ic.end();
+    }   
+  },  
   
   // ..........................................................
   // EVENT HANDLING
@@ -327,7 +380,40 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     event occurred.
   */
   displayItemIndexForEvent: function(evt) {
-    if (this.renderer) return this.renderer.indexForEvent(evt);
+    return this.displayItemIndexForPosition(evt.pageX, evt.pageY);
+  },
+  
+  /**
+    Determines an item index based on a position. The position does not have to be within the view's
+    bounding rectangle. If no item is at that position, this will return -1.
+    
+    NOTE: Eventually, this sort of function should be implemented in a renderer.
+  */
+  displayItemIndexForPosition: function(pageX, pageY) {
+    // find the segments
+    var segments = this.$('.sc-segment'), len = segments.length, idx, segment, r;
+    
+    // loop through them (yes, this comment is mostly because it looks nice in TextMate)
+    for (idx = 0; idx < len; idx++) {
+      // get the segment
+      segment = segments[idx];
+      
+      // get its rectangle
+      r = segment.getBoundingClientRect();
+      
+      // based on orientation, check the position left-to-right or up-to-down.
+      if (this.get('layoutDirection') == SC.LAYOUT_VERTICAL) {
+        // if it fits, return it right away
+        if (pageY > r.top && pageY < r.bottom) return idx;
+      }
+      else {
+        // if it fits, return it right away.
+        if (pageX > r.left && pageX < r.right) return idx;
+      }
+    }
+    
+    // if we didn't find anything, return the old standard -1 for "not found."
+    return -1;
   },
   
   keyDown: function(evt) {
@@ -347,7 +433,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       if (evt.which === 39 || evt.which === 40) {  
         for(i=0; i< len-1; i++){
           item=items[i];
-          if( isArray ? (value.indexOf(item.value)>=0) : (item.value===value)){
+          if( isArray ? (value.indexOf(item[1])>=0) : (item[1]===value)){
             this.triggerItemAtIndex(i+1);
           }
         }
@@ -356,7 +442,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       else if (evt.which === 37 || evt.which === 38) {
         for(i=1; i< len; i++){
           item=items[i];
-          if( isArray ? (value.indexOf(item.value)>=0) : (item.value===value)){
+          if( isArray ? (value.indexOf(item[1])>=0) : (item[1]===value)){
             this.triggerItemAtIndex(i-1);
           }
         }
@@ -486,14 +572,14 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         item  = items.objectAt(idx),
         sel, value, val, empty, mult;
         
-    if (!item.isEnabled) return this; // nothing to do!
+    if (!item[2]) return this; // nothing to do!
 
     empty = this.get('allowsEmptySelection');
     mult = this.get('allowsMultipleSelection');
     
     
     // get new value... bail if not enabled. Also save original for later.
-    sel = item.value;
+    sel = item[1];
     value = val = this.get('value') ;
     if (!SC.isArray(value)) value = [value]; // force to array
     
@@ -536,7 +622,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         action, target = null,
         resp = this.getPath('pane.rootResponder');
 
-    if (actionKey && (item = this.get('items').objectAt(item.index))) {
+    if (actionKey && (item = this.get('items').objectAt(item[6]))) {
       // get the source item from the item array.  use the index stored...
       action = item.get ? item.get(actionKey) : item[actionKey];
       if (targetKey) {