sproutcore 1.4.5-java → 1.5.0-java

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

@@ -0,0 +1,193 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/**
+  @class
+
+  SegmentViews are the views used and arranged by SC.SegmentedView and are very similar to a SC.ButtonView
+  without any event handling.  The event handling is done by the parent view.
+
+  @extends SC.View
+  @since SproutCore 1.5
+*/
+SC.SegmentView = SC.View.extend(SC.Control,
+/** @scope SC.SegmentView.prototype */{
+
+  /**
+    @type String
+    @default 'tab'
+    @readOnly
+  */
+  ariaRole: 'tab',
+
+  /**
+    @type Array
+    @default ['sc-segment-view']
+    @see SC.View#classNames
+  */
+  classNames: ['sc-segment-view'],
+
+  /**
+    @type String
+    @default null
+    @see SC.View#toolTip
+  */
+  toolTip: null,
+
+  /**
+    @type Boolean
+    @default YES
+    @see SC.Control#isEnabled
+  */
+  isEnabled: YES,
+
+  /**
+    @type Boolean
+    @default NO
+    @see SC.Control#isActive
+  */
+  isActive: NO,
+
+  /**
+    @type Boolean
+    @default NO
+    @see SC.Control#isSelected
+  */
+  isSelected: NO,
+
+  /**
+    @type String
+    @default null
+    @see SC.Control#controlSize
+  */
+  controlSize: null,
+
+  /**
+    @type Boolean
+    @default NO
+    @see SC.ButtonView#supportFocusRing
+  */
+  supportFocusRing: NO,
+
+  // TODO: isDefault, isCancel, value not really used by render delegate
+  displayProperties: ['icon', 'displayTitle', 'value', 'displayToolTip', 'isDefault', 'isCancel', 'width', 'isFirstSegment', 'isMiddleSegment', 'isLastSegment', 'isOverflowSegment', 'index'],
+
+  /**
+    @type String
+    @default 'segmentRenderDelegate'
+  */
+  renderDelegateName: 'segmentRenderDelegate',
+
+  /**
+    @type Boolean
+    @default YES
+  */
+  useStaticLayout: YES,
+
+
+  // ..........................................................
+  // Properties
+  // 
+
+  /**
+    @type String
+    @default ""
+  */
+  title: "",
+
+  /**
+    @type Object
+    @default null
+  */
+  value: null,
+
+  /**
+    @type String
+    @default null
+  */
+  icon: null,
+
+  /**
+    @type Boolean
+    @default null
+  */
+  localize: NO,
+
+  /**
+    @type String
+    @default null
+  */
+  keyEquivalent: null,
+
+  // TODO: Modification currently unsupported in SegmentedView
+  /**
+    @type Boolean
+    @default YES
+  */
+  escapeHTML: YES,
+
+  // TODO: Modification currently unsupported in SegmentedView
+  /**
+    @type Boolean
+    @default YES
+  */
+  needsEllipsis: YES,
+
+  /**
+    Localized title.
+    
+    @field
+    @type String
+    @default ""
+  */
+  displayTitle: function() {
+    var ret = this.get('title');
+    if (this.get('localize')) ret = SC.String.loc(ret);
+    return ret;
+  }.property('title', 'localize').cacheable(),
+
+  /**
+    @type Number
+    @default null
+  */
+  width: null,
+
+  /**
+    The item represented by this view.
+
+    @type Object
+    @default null
+  */
+  localItem: null,
+
+  /** @private
+    Whenever the width property changes, adjust our layout accordingly.
+  */
+  widthDidChange: function() {
+    this.adjust('width', this.get('width'));
+  }.observes('width'),
+
+  /** @private
+    Update our properties according to our matching item.
+  */
+  updateItem: function(parentView, item) {
+    var itemKeys = parentView.get('itemKeys'),
+        itemKey,
+        viewKeys = parentView.get('viewKeys'),
+        viewKey,
+        i;
+
+    for (i = itemKeys.get('length') - 1; i >= 0; i--) {
+      itemKey = parentView.get(itemKeys.objectAt(i));
+      viewKey = viewKeys.objectAt(i);
+
+      // Don't overwrite the default value if none exists in the item
+      if (!SC.none(item.get(itemKey))) this.set(viewKey, item.get(itemKey));
+    }
+
+    this.set('localItem', item);
+  }
+});

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

@@ -1,601 +1,923 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
+sc_require('views/segment');
+
 /**
   @class
 
   SegmentedView is a special type of button that can display multiple
   segments.  Each segment has a value assigned to it.  When the user clicks
-  on the segment, the value of that segment will become the new value of 
+  on the segment, the value of that segment will become the new value of
   the control.
-  
+
   You can also optionally configure a target/action that will fire whenever
   the user clicks on an item.  This will give your code an opportunity to take
   some action depending on the new value.  (of course, you can always bind to
   the value as well, which is generally the preferred approach.)
-  
-  h1. Defining Your Segments
-  
+
+  # Defining Your Segments
+
   You define your segments by providing a items array, much like you provide
-  to a RadioView.  Your items array can be as simple as an array of strings 
+  to a RadioView.  Your items array can be as simple as an array of strings
   or as complex as full model objects.  Based on how you configure your
-  itemKey properties, the segmented view will read the properties it needs 
+  itemKey properties, the segmented view will read the properties it needs
   from the array and construct the button.
-  
+
   You can define the following properties on objects you pass in:
-  
-  | *itemTitleKey* | the title of the button |
-  | *itemValueKey* | the value of the button |
-  | *itemWidthKey* | the preferred width. if omitted, it autodetects |
-  | *itemIconKey*  | an icon |
-  | *itemActionKey* | an optional action to fire when pressed |
-  | *itemTargetKey* | an optional target for the action |
+
+    - *itemTitleKey* - the title of the button
+    - *itemValueKey* - the value of the button
+    - *itemWidthKey* - the preferred width. if omitted, it autodetects
+    - *itemIconKey*  - an icon
+    - *itemActionKey* - an optional action to fire when pressed
+    - *itemTargetKey* - an optional target for the action
+    - *segmentViewClass* - class to be used for creating segments
 
   @extends SC.View
+  @extends SC.Control
   @since SproutCore 1.0
 */
 SC.SegmentedView = SC.View.extend(SC.Control,
 /** @scope SC.SegmentedView.prototype */ {
-  
+
+  /**
+    @ field
+    @type Boolean
+    @default YES
+  */
+  acceptsFirstResponder: function() {
+    if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabled'); }
+    return NO;
+  }.property('isEnabled').cacheable(),
+
+  /**
+    @type String
+    @default 'tablist'
+    @readOnly
+  */
+  ariaRole: 'tablist',
+
+  /**
+    @type Array
+    @default ['sc-segmented-view']
+    @see SC.View#classNames
+  */
   classNames: ['sc-segmented-view'],
-  
+
+  /**
+    @type String
+    @default 'square'
+    @see SC.ButtonView#theme
+  */
   theme: 'square',
-  
+
   /**
     The value of the segmented view.
-    
+
     The SegmentedView's value will always be the value of the currently
-    selected button.  Setting this value will change the selected button. 
+    selected button.  Setting this value will change the selected button.
     If you set this value to something that has no matching button, then
     no buttons will be selected.
-    
-    @field {Object}
+
+    @type Object
+    @default null
   */
   value: null,
 
   /**
-    Set to YES to enabled the segmented view, NO to disabled it.
+    @type Boolean
+    @default YES
   */
-  isEnabled: YES, 
+  isEnabled: YES,
 
   /**
     If YES, clicking a selected button again will deselect it, setting the
-    segmented views value to null.  Defaults to NO.
+    segmented views value to null.
+    
+    @type Boolean
+    @default NO
   */
-  allowsEmptySelection: NO,  
-  
+  allowsEmptySelection: NO,
+
   /**
     If YES, then clicking on a tab will not deselect the other segments, it
     will simply add or remove it from the selection.
+    
+    @type Boolean
+    @default NO
   */
   allowsMultipleSelection: NO,
 
   /**
-    If YES, titles will be localized before display.
+    @type Boolean
+    @default YES
   */
   localize: YES,
-  
+
+  /**
+    Aligns the segments of the segmented view within its frame horizontally.
+    Possible values:
+    
+      - SC.ALIGN_LEFT
+      - SC.ALIGN_RIGHT
+      - SC.ALIGN_CENTER
+    
+    @type String
+    @default SC.ALIGN_CENTER
+  */
   align: SC.ALIGN_CENTER,
-  
+
   /**
     Change the layout direction to make this a vertical set of tabs instead
-    of horizontal ones.
+    of horizontal ones. Possible values:
+    
+      - SC.LAYOUT_HORIZONTAL
+      - SC.LAYOUT_VERTICAL
+    
+    @type String
+    @default SC.LAYOUT_HORIZONTAL
   */
   layoutDirection: SC.LAYOUT_HORIZONTAL,
-  
+
+
   // ..........................................................
   // SEGMENT DEFINITION
   //
-   
+
   /**
-    The array of items to display.  This can be a simple array of strings,
-    objects or hashes.  If you pass objects or hashes, you must also set the
+    The array of items to display.  This may be a simple array of strings, objects
+    or SC.Objects.  If you pass objects or SC.Objects, you must also set the
     various itemKey properties to tell the SegmentedView how to extract the
     information it needs.
-    
-    @property {Array}
+
+    Note: only SC.Object items support key-value coding and therefore may be
+    observed by the view for changes to titles, values, icons, widths,
+    isEnabled values & tooltips.
+
+    @type Array
+    @default null
   */
-  items: [],
+  items: null,
 
-  /** 
+  /**
     The key that contains the title for each item.
-    
-    @property {String}
+
+    @type String
+    @default null
   */
   itemTitleKey: null,
-  
-  /** 
+
+  /**
     The key that contains the value for each item.
-    
-    @property {String}
+
+    @type String
+    @default null
   */
   itemValueKey: null,
-  
-  /** 
+
+  /**
     A key that determines if this item in particular is enabled.  Note if the
     control in general is not enabled, no items will be enabled, even if the
     item's enabled property returns YES.
-    
-    @property {String}
+
+    @type String
+    @default null
   */
   itemIsEnabledKey: null,
 
-  /** 
+  /**
     The key that contains the icon for each item.  If omitted, no icons will
     be displayed.
-    
-    @property {String}
+
+    @type String
+    @default null
   */
   itemIconKey: null,
 
-  /** 
+  /**
     The key that contains the desired width for each item.  If omitted, the
     width will autosize.
-  
-    @property {String}
+
+    @type String
+    @default null
   */
   itemWidthKey: null,
-  
-  /** 
-    The key that contains the action for this item.  If defined, then 
-    selecting this item will fire the action in addition to changing the 
+
+  /**
+    The key that contains the action for this item.  If defined, then
+    selecting this item will fire the action in addition to changing the
     value.  See also itemTargetKey.
-    
-    @property {String}
+
+    @type String
+    @default null
   */
   itemActionKey: null,
 
-  /** 
+  /**
     The key that contains the target for this item.  If this and itemActionKey
-    are defined, then this will be the target of the action fired. 
-    
-    @property {String}
+    are defined, then this will be the target of the action fired.
+
+    @type String
+    @default null
   */
   itemTargetKey: null,
 
-  /** 
+  /**
     The key that contains the key equivalent for each item.  If defined then
-    pressing that key equivalent will be like selecting the tab.  Also, 
-    pressing the Alt or Option key for 3 seconds will display the key 
+    pressing that key equivalent will be like selecting the tab.  Also,
+    pressing the Alt or Option key for 3 seconds will display the key
     equivalent in the tab.
+
+    @type String
+    @default null
   */
   itemKeyEquivalentKey: null,
 
   /**
-    The array of itemKeys that will be searched to build the displayItems
-    array.  This is used internally by the class.  You will not generally
-    need to access or edit this array.
-    
-    @property {Array}
+    The title to use for the overflow segment if it appears.
+
+    @type String
+    @default '»'
   */
-  itemKeys: 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemWidthKey itemToolTipKey'.w(),
-  
+  overflowTitle: '»',
+
   /**
-    This computed property is generated from the items array based on the 
-    itemKey properties that you set.  The return value is an array of arrays
-    that contain private information used by the SegmentedView to render. 
-    
-    You will not generally need to access or edit this property.
-    
-    @property {Array}
+    The toolTip to use for the overflow segment if it appears.
+
+    @type String
+    @default 'More…'
   */
-  displayItems: function() {
-    var items = this.get('items'), loc = this.get('localize'),
-      keys=null, itemType, cur, ret = [], max = items.get('length'), idx, 
-      item, fetchKeys = SC._segmented_fetchKeys, fetchItem = SC._segmented_fetchItem;
-    
-    // loop through items and collect data
-    for(idx=0;idx<max;idx++) {
-      item = items.objectAt(idx) ;
-      if (SC.none(item)) continue; //skip is null or undefined
-      
-      // if the item is a string, build the array using defaults...
-      itemType = SC.typeOf(item);
-      if (itemType === SC.T_STRING) {
-        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) {
-        // get the itemKeys the first time
-        if (keys===null) {
-          keys = this.itemKeys.map(fetchKeys,this);
-        }
-        
-        // now loop through the keys and try to get the values on the item
-        cur = keys.map(fetchItem, item);
-        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[0] = item.toString(); 
-        
-        // special case 2...if value key is null, use item itself
-        if (!keys[1]) cur[1] = item;
-        
-        // special case 3...if isEnabled is null, default to yes.
-        if (!keys[2]) cur[2] = YES ; 
-      }
-      
-      // finally, be sure to loc the title if needed
-      if (loc && cur[0]) cur[0] = cur[0].loc();
-
-      // finally, be sure to loc the toolTip if needed
-      if (loc && cur[5] && SC.typeOf(cur[5]) === SC.T_STRING) cur[5] = cur[5].loc();
-      
-      // add to return array
-      ret[ret.length] = cur;
-    }
-    
-    // all done, return!
-    return ret ;
-  }.property('items', 'itemTitleKey', 'itemValueKey', 'itemIsEnabledKey', 'localize', 'itemIconKey', 'itemWidthKey', 'itemToolTipKey'),
-  
-  /** If the items array itself changes, add/remove observer on item... */
-  itemsDidChange: function() { 
-    if (this._items) {
-      this._items.removeObserver('[]',this,this.itemContentDidChange) ;
-    } 
-    this._items = this.get('items') ;
-    if (this._items) {
-      this._items.addObserver('[]', this, this.itemContentDidChange) ;
-    }
-    
-    this.itemContentDidChange();
-  }.observes('items'),
-  
-  /** 
-    Invoked whenever the item array or an item in the array is changed.  This method will reginerate the list of items.
+  overflowToolTip: 'More&hellip;',
+
+  /**
+    The icon to use for the overflow segment if it appears.
+
+    @type String
+    @default null
   */
-  itemContentDidChange: function() {
-    this.set('renderLikeFirstTime', YES);
-    this.notifyPropertyChange('displayItems');
-  },
+  overflowIcon: null,
+
+  /**
+    The view class used when creating segments.
+
+    @type SC.View
+    @default SC.SegmentView
+  */
+  segmentViewClass: SC.SegmentView,
+
+
+  /** @private
+    The following properties are used to map items to child views. Item keys
+    are looked up on the item based on this view's value for each 'itemKey'.
+    If a value in the item is found, then that value is mapped to a child
+    view using the matching viewKey.
+
+    @type Array
+  */
+  itemKeys: 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemWidthKey itemToolTipKey itemKeyEquivalentKey'.w(),
   
+  /** @private */
+  viewKeys: ['title', 'value', 'isEnabled', 'icon', 'width', 'toolTip', 'keyEquivalent'],
+
+  /** @private
+    Call itemsDidChange once to initialize segment child views for the items that exist at
+    creation time.
+  */
   init: function() {
     sc_super();
-    this.itemsDidChange() ;
+
+    var title = this.get('overflowTitle'),
+        toolTip = this.get('overflowToolTip'),
+        icon = this.get('overflowIcon'),
+        overflowView;
+
+    overflowView = this.get('segmentViewClass').create({
+      controlSize: this.get('controlSize'),
+      localize: this.get('localize'),
+      title: title,
+      toolTip: toolTip,
+      icon: icon,
+      isLastSegment: YES,
+      isOverflowSegment: YES
+    });
+
+    this.appendChild(overflowView);
+
+    this.itemsDidChange();
   },
 
-  
-  // ..........................................................
-  // RENDERING/DISPLAY SUPPORT
-  // 
-  
-  displayProperties: ['displayItems', 'value', 'activeIndex'],
-  
-  
-  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 ;
+  /** @private
+    Called whenever the number of items changes.  This method populates SegmentedView's childViews, taking
+    care to re-use existing childViews if possible.
+  */
+  itemsDidChange: function() {
+    var items = this.get('items') || [],
+        item,
+        localItem,                        // Used to avoid altering the original items
+        childViews = this.get('childViews'),
+        childView,
+        overflowView = childViews.lastObject(),
+        value = this.get('value'),        // The value can change if items that were once selected are removed
+        isSelected,
+        itemKeys = this.get('itemKeys'),
+        itemKey,
+        viewKeys = this.get('viewKeys'),
+        viewKey,
+        segmentViewClass = this.get('segmentViewClass'),
+        i, j;
+
+    // Update childViews
+    if (childViews.get('length') - 1 > items.get('length')) {   // We've lost segments (ie. childViews)
+
+      // Remove unneeded segments from the end back
+      for (i = childViews.get('length') - 2; i >= items.get('length'); i--) {
+        childView = childViews.objectAt(i);
+
+        // If a selected childView has been removed then update our value
+        if (SC.isArray(value)) {
+          value.removeObject(childView.get('value'));
+        } else if (value === childView.get('value')) {
+          value = null;
+        }
+
+        this.removeChild(childView);
       }
-      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);
+
+      // Update our value which may have changed
+      this.set('value', value);
+
+    } else if (childViews.get('length') - 1 < items.get('length')) {  // We've gained segments
+
+      // Create the new segments
+      for (i = childViews.get('length') - 1; i < items.get('length'); i++) {
+
+        // We create a default SC.ButtonView-like object for each segment
+        childView = segmentViewClass.create({
+          controlSize: this.get('controlSize'),
+          localize: this.get('localize')
+        });
+
+        // Attach the child
+        this.insertBefore(childView, overflowView);
       }
-      names = items = value = items = null; // cleanup
     }
-  },
-  
-  /**
-    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];
-      
-      stylesHash = {};
-      classArray = [];
-
-      if (this.get('layoutDirection') == SC.LAYOUT_HORIZONTAL) {
-        stylesHash['display'] = 'inline-block' ;
-      }
 
-      classArray.push('sc-segment');
-      
-      if(!item[2]){
-        classArray.push('disabled');
-      }
-      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') ;
+    // Because the items array can be altered with insertAt or removeAt, we can't be sure that the items
+    // continue to match 1-to-1 the existing views, so once we have the correct number of childViews,
+    // simply update them all
+    childViews = this.get('childViews');
+
+    for (i = 0; i < items.get('length'); i++) {
+      localItem = items.objectAt(i);
+      childView = childViews.objectAt(i);
+
+      // Skip null/undefined items (but don't skip empty strings)
+      if (SC.none(localItem)) continue;
+
+      // Normalize the item (may be a String, Object or SC.Object)
+      if (SC.typeOf(localItem) === SC.T_STRING) {
+
+        localItem = SC.Object.create({
+          'title': localItem.humanize().titleize(),
+          'value': localItem
+        });
+
+        // Update our keys accordingly
+        this.set('itemTitleKey', 'title');
+        this.set('itemValueKey', 'value');
+      } else if (SC.typeOf(localItem) === SC.T_HASH) {
+
+        localItem = SC.Object.create(localItem);
+      } else if (localItem instanceof SC.Object)  {
+
+        // We don't need to make any changes to SC.Object items, but we can observe them
+        for (j = itemKeys.get('length') - 1; j >= 0; j--) {
+          itemKey = this.get(itemKeys.objectAt(j));
+
+          if (itemKey) {
+            localItem.removeObserver(itemKey, this, this.itemContentDidChange);
+            localItem.addObserver(itemKey, this, this.itemContentDidChange, i);
+          }
+        }
+      } else {
+        SC.Logger.error('SC.SegmentedView items may be Strings, Objects (ie. Hashes) or SC.Objects only');
       }
-      if(item[4]){
-        width=item[4];
-        stylesHash['width'] = width+'px';
+
+      // Determine whether this segment is selected based on the view's existing value(s)
+      isSelected = NO;
+      if (SC.isArray(value) ? value.indexOf(localItem.get(this.get('itemValueKey'))) >= 0 : value === localItem.get(this.get('itemValueKey'))) {
+        isSelected = YES;
       }
-      ic.addClass(classArray);
-      ic.addStyle(stylesHash);
-      if(toolTip) {
-        ic.attr('title', toolTip) ;
+      childView.set('isSelected', isSelected);
+
+      // Assign segment specific properties based on position
+      childView.set('index', i);
+      childView.set('isFirstSegment', i === 0);
+      childView.set('isMiddleSegment',  i < items.get('length') - 1 && i > 0);
+      childView.set('isLastSegment', i === items.get('length') - 1);
+
+      // Be sure to update the view's properties for the (possibly new) matched item
+      childView.updateItem(this, localItem);
+    }
+
+    // Force a segment remeasure to check overflow
+    this.invokeLast(this.remeasure);
+  }.observes('*items.[]'),
+
+  /** @private
+    This observer method is called whenever any of the relevant properties of an item change.  This only applies
+    to SC.Object based items that may be observed.
+  */
+  itemContentDidChange: function(item, key, alwaysNull, index) {
+    var items = this.get('items'),
+        childViews = this.get('childViews'),
+        childView;
+
+    childView = childViews.objectAt(index);
+    if (childView) {
+
+      // Update the childView
+      childView.updateItem(this, item);
+    } else {
+      SC.Logger.warn("Item content change was observed on item without matching segment child view.");
+    }
+
+    // Reset our measurements (which depend on width or title) and adjust visible views
+    this.invokeLast(this.remeasure);
+  },
+
+  /** @private
+    Whenever the view resizes, we need to check to see if we're overflowing.
+  */
+  viewDidResize: function() {
+    var visibleWidth = this.$().width();
+
+    // Only overflow if we've gone below the minimum width required to fit all the segments
+    if (this.isOverflowing || visibleWidth <= this.cachedMinimumWidth) this.adjustOverflow();
+  },
+
+  /** @private
+    Whenever visibility changes, we need to check to see if we're overflowing.
+  */
+  isVisibleInWindowDidChange: function() {
+    this.invokeLast(this.remeasure);
+  }.observes('isVisibleInWindow'),
+
+  /** @private
+    Calling this method forces the segments to be remeasured and will also adjust the
+    segments for overflow if necessary.
+  */
+  remeasure: function() {
+    var renderDelegate = this.get('renderDelegate'),
+        childViews = this.get('childViews'),
+        overflowView;
+
+    if (this.get('isVisibleInWindow')) {
+      // Make all the views visible so that they can be measured
+      overflowView = childViews.lastObject();
+      overflowView.set('isVisible', YES);
+
+      for (var i = childViews.get('length') - 1; i >= 0; i--){
+        childViews.objectAt(i).set('isVisible', YES);
       }
 
-      if (icon) {
-        url = (icon.indexOf('/')>=0) ? icon : SC.BLANK_IMAGE_URL;
-        className = (url === icon) ? '' : icon ;
-        icon = '<img src="'+url+'" alt="" class="icon '+className+'" />';
+      this.cachedWidths = renderDelegate.segmentWidths(this);
+      this.cachedOverflowWidth = renderDelegate.overflowSegmentWidth(this);
+
+      this.adjustOverflow();
+    }
+  },
+
+  /** @private
+    This method is called to adjust the segment views for overflow.
+   */
+  adjustOverflow: function() {
+    var childViews = this.get('childViews'),
+        childView,
+        value = this.get('value'),
+        overflowView = childViews.lastObject(),
+        visibleWidth = this.$().width(),             // The inner width of the div
+        curElementsWidth = 0,
+        widthToFit,
+        length, i;
+
+    // This variable is useful to optimize when we are overflowing
+    this.isOverflowing = NO;
+    overflowView.set('isSelected', NO);
+
+    // Clear out the overflow items (these are the items not currently visible)
+    this.overflowItems = [];
+
+    length = this.cachedWidths.length;
+    for (i=0; i < length; i++) {
+      childView = childViews.objectAt(i);
+      curElementsWidth += this.cachedWidths[i];
+
+      // check for an overflow (leave room for the overflow segment except for with the last segment)
+      widthToFit = (i === length - 1) ? curElementsWidth : curElementsWidth + this.cachedOverflowWidth;
+
+      if (widthToFit > visibleWidth) {
+        // Add the localItem to the overflowItems
+        this.overflowItems.pushObject(childView.get('localItem'));
+
+        // Record that we're now overflowing
+        this.isOverflowing = YES;
+
+        childView.set('isVisible', NO);
+
+        // If the first item is already overflowed, make the overflowView first segment
+        if (i === 0) overflowView.set('isFirstSegment', YES);
+
+        // If the overflowed segment was selected, show the overflowView as selected instead
+        if (SC.isArray(value) ? value.indexOf(childView.get('value')) >= 0 : value === childView.get('value')) {
+          overflowView.set('isSelected', YES);
+        }
       } else {
-        icon = '';
+        childView.set('isVisible', YES);
+
+        // If the first item is not overflowed, don't make the overflowView first segment
+        if (i === 0) overflowView.set('isFirstSegment', NO);
       }
-      ic.push('<span class="sc-button-inner"><label class="sc-button-label">',
-              icon+title, '</label></span>');
-      ic.end();
-    }   
-  },  
-  
+    }
+
+    // Show/hide the overflow view if we have overflowed
+    if (this.isOverflowing) overflowView.set('isVisible', YES);
+    else overflowView.set('isVisible', NO);
+
+    // Store the minimum width before overflow
+    this.cachedMinimumWidth = curElementsWidth + this.cachedOverflowWidth;
+  },
+
+  // ..........................................................
+  // RENDERING/DISPLAY SUPPORT
+  //
+
+  /**
+    @type Array
+    @default ['align']
+    @see SC.View#displayProperties
+  */
+  displayProperties: ['align'],
+
+  /**
+    @type String
+    @default 'segmentedRenderDelegate'
+  */
+  renderDelegateName: 'segmentedRenderDelegate',
+
   // ..........................................................
   // EVENT HANDLING
-  // 
-  
-  /** 
+  //
+
+  /** @private
     Determines the index into the displayItems array where the passed mouse
     event occurred.
   */
   displayItemIndexForEvent: function(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;
-      }
+    var renderDelegate = this.get('renderDelegate');
+
+    if (renderDelegate && renderDelegate.indexForClientPosition) {
+      return renderDelegate.indexForClientPosition(this, evt.clientX, evt.clientY);
     }
-    
-    // if we didn't find anything, return the old standard -1 for "not found."
-    return -1;
   },
-  
+
+  /** @private */
   keyDown: function(evt) {
+    var childViews,
+        childView,
+        i, length,
+        value, isArray;
+
     // handle tab key
-    var i, item, items, len, value, isArray;
-    if (evt.which === 9) {
+    if (evt.which === 9 || evt.keyCode === 9) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if(view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
-    }    
-    if (!this.get('allowsMultipleSelection') && !this.get('allowsEmptySelection')){
-      items = this.get('displayItems');
-      len = items.length;
+    }
+
+    // handle arrow keys
+    if (!this.get('allowsMultipleSelection')) {
+      childViews = this.get('childViews');
+
+      length = childViews.get('length');
       value = this.get('value');
       isArray = SC.isArray(value);
-      if (evt.which === 39 || evt.which === 40) {  
-        for(i=0; i< len-1; i++){
-          item=items[i];
-          if( isArray ? (value.indexOf(item[1])>=0) : (item[1]===value)){
-            this.triggerItemAtIndex(i+1);
+
+      // Select from the left to the right
+      if (evt.which === 39 || evt.which === 40) {
+
+        if (value) {
+          for(i = 0; i < length - 2; i++){
+            childView = childViews.objectAt(i);
+            if ( isArray ? (value.indexOf(childView.get('value'))>=0) : (childView.get('value')===value)){
+              this.triggerItemAtIndex(i + 1);
+            }
           }
+        } else {
+          this.triggerItemAtIndex(0);
         }
         return YES ; // handled
-      }
-      else if (evt.which === 37 || evt.which === 38) {
-        for(i=1; i< len; i++){
-          item=items[i];
-          if( isArray ? (value.indexOf(item[1])>=0) : (item[1]===value)){
-            this.triggerItemAtIndex(i-1);
+
+      // Select from the right to the left
+      } else if (evt.which === 37 || evt.which === 38) {
+
+        if (value) {
+          for(i = 1; i < length - 1; i++) {
+            childView = childViews.objectAt(i);
+            if ( isArray ? (value.indexOf(childView.get('value'))>=0) : (childView.get('value')===value)){
+              this.triggerItemAtIndex(i - 1);
+            }
           }
+        } else {
+          this.triggerItemAtIndex(length - 2);
         }
-        return YES ; // handled
+
+        return YES; // handled
       }
     }
-    return YES; 
+
+    return NO;
   },
-  
+
+  /** @private */
   mouseDown: function(evt) {
+    var childViews = this.get('childViews'),
+        childView,
+        overflowIndex = childViews.get('length') - 1,
+        index;
+
     if (!this.get('isEnabled')) return YES; // nothing to do
-    var idx = this.displayItemIndexForEvent(evt);
-    
-    // if mouse was pressed on a button, then start detecting pressed events
-    if (idx>=0) {
-      this._isMouseDown = YES ;
-      this.set('activeIndex', idx);
+
+    index = this.displayItemIndexForEvent(evt);
+
+    if (index >= 0) {
+      childView = childViews.objectAt(index);
+      childView.set('isActive', YES);
+      this.activeChildView = childView;
+
+      // if mouse was pressed on the overflow segment, popup the menu
+      if (index === overflowIndex) this.showOverflowMenu();
+      else this._isMouseDown = YES;
     }
-    
-    return YES ;
+
+    return YES;
   },
-  
+
+  /** @private */
   mouseUp: function(evt) {
-    var idx = this.displayItemIndexForEvent(evt);
-    // if mouse was pressed on a button then detect where we where when we
-    // release and use that one.
-    if (this._isMouseDown && (idx>=0)) this.triggerItemAtIndex(idx);
-    
-    // cleanup
-    this._isMouseDown = NO ;
-    this.set('activeIndex', -1);
-    return YES ;
+    var activeChildView,
+        index;
+
+    index = this.displayItemIndexForEvent(evt);
+
+    if (this._isMouseDown && (index >= 0)) {
+
+      this.triggerItemAtIndex(index);
+
+      // Clean up
+      activeChildView = this.activeChildView;
+      activeChildView.set('isActive', NO);
+      this.activeChildView = null;
+
+      this._isMouseDown = NO;
+    }
+
+    return YES;
   },
-  
+
+  /** @private */
   mouseMoved: function(evt) {
+    var childViews = this.get('childViews'),
+        overflowIndex = childViews.get('length') - 1,
+        activeChildView,
+        childView,
+        index;
+
     if (this._isMouseDown) {
-      var idx = this.displayItemIndexForEvent(evt);
-      this.set('activeIndex', idx);
+      // Update the last segment
+      index = this.displayItemIndexForEvent(evt);
+
+      activeChildView = this.activeChildView;
+      childView = childViews.objectAt(index);
+
+      if (childView && childView !== activeChildView) {
+        // Changed
+        if (activeChildView) activeChildView.set('isActive', NO);
+        childView.set('isActive', YES);
+
+        this.activeChildView = childView;
+
+        if (index === overflowIndex) {
+          this.showOverflowMenu();
+          this._isMouseDown = NO;
+        }
+      }
     }
     return YES;
   },
-  
-  mouseExited: function(evt) {
+
+  /** @private */
+  mouseEntered: function(evt) {
+    var childViews = this.get('childViews'),
+        childView,
+        overflowIndex = childViews.get('length') - 1,
+        index;
+
     // if mouse was pressed down initially, start detection again
     if (this._isMouseDown) {
-      var idx = this.displayItemIndexForEvent(evt);
-      this.set('activeIndex', idx);
+      index = this.displayItemIndexForEvent(evt);
+
+      // if mouse was pressed on the overflow segment, popup the menu
+      if (index === overflowIndex) {
+        this.showOverflowMenu();
+        this._isMouseDown = NO;
+      } else if (index >= 0) {
+        childView = childViews.objectAt(index);
+        childView.set('isActive', YES);
+
+        this.activeChildView = childView;
+      }
     }
     return YES;
   },
-  
-  mouseEntered: function(evt) {
+
+  /** @private */
+  mouseExited: function(evt) {
+    var activeChildView;
+
     // if mouse was down, hide active index
     if (this._isMouseDown) {
-      var idx = this.displayItemIndexForEvent(evt);
-      this.set('activeIndex', -1);
+      activeChildView = this.activeChildView;
+      if (activeChildView) activeChildView.set('isActive', NO);
+
+      this.activeChildView = null;
     }
-    return YES ;
+
+    return YES;
   },
-  
-  
-  
+
+  /** @private */
   touchStart: function(touch) {
+    var childViews = this.get('childViews'),
+        childView,
+        overflowIndex = childViews.get('length') - 1,
+        index;
+
     if (!this.get('isEnabled')) return YES; // nothing to do
-    var idx = this.displayItemIndexForEvent(touch);
-    
-    // if mouse was pressed on a button, then start detecting pressed events
-    if (idx>=0) {
-      this._isTouching = YES ;
-      this.set('activeIndex', idx);
+
+    index = this.displayItemIndexForEvent(touch);
+
+    if (index >= 0) {
+      childView = childViews.objectAt(index);
+      childView.set('isActive', YES);
+      this.activeChildView = childView;
+
+      // if touch was on the overflow segment, popup the menu
+      if (index === overflowIndex) this.showOverflowMenu();
+      else this._isTouching = YES;
     }
-    
+
     return YES ;
   },
-  
+
+  /** @private */
   touchEnd: function(touch) {
-    var idx = this.displayItemIndexForEvent(touch);
-    // if mouse was pressed on a button then detect where we where when we
-    // release and use that one.
-    if (this._isTouching && (idx>=0)) this.triggerItemAtIndex(idx);
-    
-    // cleanup
-    this._isTouching = NO ;
-    this.set('activeIndex', -1);
-    return YES ;
+    var activeChildView,
+        index;
+
+    index = this.displayItemIndexForEvent(touch);
+
+    if (this._isTouching && (index >= 0)) {
+      this.triggerItemAtIndex(index);
+
+      // Clean up
+      activeChildView = this.activeChildView;
+      activeChildView.set('isActive', NO);
+      this.activeChildView = null;
+
+      this._isTouching = NO;
+    }
+
+    return YES;
   },
-  
+
+  /** @private */
   touchesDragged: function(evt, touches) {
-    var isTouching = this.touchIsInBoundary(evt);
+    var isTouching = this.touchIsInBoundary(evt),
+        childViews = this.get('childViews'),
+        overflowIndex = childViews.get('length') - 1,
+        activeChildView,
+        childView,
+        index;
 
     if (isTouching) {
       if (!this._isTouching) {
         this._touchDidEnter(evt);
       }
-      var idx = this.displayItemIndexForEvent(evt);
-      this.set('activeIndex', idx);
+      index = this.displayItemIndexForEvent(evt);
+
+      activeChildView = this.activeChildView;
+      childView = childViews[index];
+
+      if (childView && childView !== activeChildView) {
+        // Changed
+        if (activeChildView) activeChildView.set('isActive', NO);
+        childView.set('isActive', YES);
+
+        this.activeChildView = childView;
+
+        if (index === overflowIndex) {
+          this.showOverflowMenu();
+          this._isMouseDown = NO;
+        }
+      }
     } else {
       if (this._isTouching) this._touchDidExit(evt);
     }
-    
+
     this._isTouching = isTouching;
-    
+
     return YES;
   },
-  
+
+  /** @private */
   _touchDidExit: function(evt) {
-    var idx = this.displayItemIndexForEvent(evt);
-    this.set('activeIndex', -1);
+    var activeChildView;
+
+    if (this.isTouching) {
+      activeChildView = this.activeChildView;
+      activeChildView.set('isActive', NO);
+      this.activeChildView = null;
+    }
 
     return YES;
   },
-  
+
+  /** @private */
   _touchDidEnter: function(evt) {
-    // if mouse was down, hide active index
-    var idx = this.displayItemIndexForEvent(evt);
-    this.set('activeIndex', idx);
+    var childViews = this.get('childViews'),
+        childView,
+        overflowIndex = childViews.get('length') - 1,
+        index;
 
-    return YES ;
+    index = this.displayItemIndexForEvent(evt);
+
+    if (index === overflowIndex) {
+      this.showOverflowMenu();
+      this._isTouching = NO;
+    } else if (index >= 0) {
+      childView = childViews.objectAt(index);
+      childView.set('isActive', YES);
+      this.activeChildView = childView;
+    }
+
+    return YES;
   },
 
-  /** 
+  /** @private
     Simulates the user clicking on the segment at the specified index. This
     will update the value if possible and fire the action.
   */
-  triggerItemAtIndex: function(idx) {
-    var items = this.get('displayItems'),
-        item  = items.objectAt(idx),
+  triggerItemAtIndex: function(index) {
+    var childViews = this.get('childViews'),
+        childView,
         sel, value, val, empty, mult;
-        
-    if (!item[2]) return this; // nothing to do!
+
+    childView = childViews.objectAt(index);
+
+    if (!childView.get('isEnabled')) 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[1];
+    sel = childView.get('value');
     value = val = this.get('value') ;
-    if (!SC.isArray(value)) value = [value]; // force to array
-    
+
+    if (SC.empty(value)) {
+      value = [];
+    } else if (!SC.isArray(value)) {
+      value = [value]; // force to array
+    }
+
     // if we do not allow multiple selection, either replace the current
     // selection or deselect it
     if (!mult) {
       // if we allow empty selection and the current value is the same as
       // the selected value, then deselect it.
-      if (empty && (value.get('length')===1) && (value.objectAt(0)===sel)){
+      if (empty && (value.get('length')===1) && (value.objectAt(0)===sel)) {
         value = [];
-      
+
       // otherwise, simply replace the value.
       } else value = [sel] ;
-      
-    // if we do allow multiple selection, then add or remove item to the
-    // array.
+
+    // if we do allow multiple selection, then add or remove item to the array.
     } else {
       if (value.indexOf(sel) >= 0) {
         if (value.get('length')>1 || (value.objectAt(0)!==sel) || empty) {
@@ -603,7 +925,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         }
       } else value = value.concat([sel]) ;
     }
-    
+
     // normalize back to non-array form
     switch(value.get('length')) {
       case 0:
@@ -615,14 +937,15 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       default:
         break;
     }
-    
+
     // also, trigger target if needed.
     var actionKey = this.get('itemActionKey'),
         targetKey = this.get('itemTargetKey'),
         action, target = null,
-        resp = this.getPath('pane.rootResponder');
+        resp = this.getPath('pane.rootResponder'),
+        item;
 
-    if (actionKey && (item = this.get('items').objectAt(item[6]))) {
+    if (actionKey && (item = this.get('items').objectAt(index))) {
       // get the source item from the item array.  use the index stored...
       action = item.get ? item.get(actionKey) : item[actionKey];
       if (targetKey) {
@@ -635,44 +958,124 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     if(!action && val !== undefined) {
       this.set('value', value);
     }
-    
+
     // if an action/target is defined on self use that also
     action =this.get('action');
     if (action && resp) {
       resp.sendAction(action, this.get('target'), this, this.get('pane'));
     }
   },
-  
-  /** tied to the isEnabled state */
-   acceptsFirstResponder: function() {
-     if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
-     else return NO;
-   }.property('isEnabled'),
-
-   willBecomeKeyResponderFrom: function(keyView) {
-     // focus the text field.
-     if (!this._isFocused) {
-       this._isFocused = YES ;
-       this.becomeFirstResponder();
-       if (this.get('isVisibleInWindow')) {
-         this.$()[0].focus();
-       }
-     }
-   },
-   
-   willLoseKeyResponderTo: function(responder) {
-     if (this._isFocused) this._isFocused = NO ;
-   }
-    
-}) ;
 
-// Helpers defined here to avoid creating lots of closures...
-SC._segmented_fetchKeys = function(k) { return this.get(k); };
-SC._segmented_fetchItem = function(k) { 
-  if (!k) return null;
-  return this.get ? this.get(k) : this[k]; 
-};
+  /** @private
+    Invoked whenever an item is selected in the overflow menu.
+  */
+  selectOverflowItem: function(menu) {
+    var item = menu.get('selectedItem');
+
+    this.triggerItemAtIndex(item.get('index'));
+
+    // Cleanup
+    menu.removeObserver('selectedItem', this, 'selectOverflowItem');
+
+    this.activeChildView.set('isActive', NO);
+    this.activeChildView = null;
+  },
+
+  /** @private
+    Presents the popup menu containing overflowed segments.
+  */
+  showOverflowMenu: function() {
+    var childViews = this.get('childViews'),
+        overflowViewIndex = childViews.get('length') - 1,
+        overflowItems = this.overflowItems,
+        overflowItemsLength,
+        startIndex,
+        isArray, value;
 
+    // Check the currently selected item if it is in overflowItems
+    overflowItemsLength = overflowItems.get('length');
+    startIndex = childViews.get('length') - 1 - overflowItemsLength;
 
+    value = this.get('value');
+    isArray = SC.isArray(value);
+    for (var i = 0; i < overflowItemsLength; i++) {
+      var item = overflowItems.objectAt(i),
+          itemValueKey = this.get('itemValueKey');
 
+      if (isArray ? value.indexOf(item.get(itemValueKey)) >= 0 : value === item.get(itemValueKey)) {
+        item.set('isChecked', YES);
+      } else {
+        item.set('isChecked', NO);
+      }
+
+      // Track the matching segment index
+      item.set('index', startIndex + i);
+    }
+
+    // TODO: we can't pass a shortcut key to the menu, because it isn't a property of SegmentedView (yet?)
+    var self = this;
+
+    var menu = SC.MenuPane.create({
+      layout: { width: 200 },
+      items: overflowItems,
+      itemTitleKey: this.get('itemTitleKey'),
+      itemIconKey: this.get('itemIconKey'),
+      itemIsEnabledKey: this.get('itemIsEnabledKey'),
+      itemKeyEquivalentKey: this.get('itemKeyEquivalentKey'),
+      itemCheckboxKey: 'isChecked',
+
+      // We need to be able to update our overflow segment even if the user clicks outside of the menu.  Since
+      // there is no callback method or observable property when the menu closes, override modalPaneDidClick().
+      modalPaneDidClick: function() {
+        sc_super();
+
+        // Cleanup
+        this.removeObserver('selectedItem', self, 'selectOverflowItem');
+
+        self.activeChildView.set('isActive', NO);
+        self.activeChildView = null;
+      }
+    });
+
+    var layer = this.get('layer');
+    var overflowElement = layer.childNodes[layer.childNodes.length - 1];
+    menu.popup(overflowElement);
+
+    menu.addObserver("selectedItem", this, 'selectOverflowItem');
+  },
+
+  /** @private
+    Whenever the value changes, update the segments accordingly.
+  */
+  valueDidChange: function() {
+    var value = this.get('value'),
+        overflowItemsLength,
+        childViews = this.get('childViews'),
+        overflowIndex = Infinity,
+        overflowView = childViews.lastObject(),
+        childView,
+        isSelected;
+
+    // The index where childViews are all overflowed
+    if (this.overflowItems) {
+      overflowItemsLength = this.overflowItems.get('length');
+      overflowIndex = childViews.get('length') - 1 - overflowItemsLength;
+
+      // Clear out the selected value of the overflowView (if it's set)
+      overflowView.set('isSelected', NO);
+    }
+
+    for (var i = childViews.get('length') - 2; i >= 0; i--) {
+      childView = childViews.objectAt(i);
+      if (SC.isArray(value) ? value.indexOf(childView.get('value')) >= 0 : value === childView.get('value')) {
+        childView.set('isSelected', YES);
+
+        // If we've gone over the overflow index, the child view is represented in overflow items
+        if (i >= overflowIndex) overflowView.set('isSelected', YES);
+      } else {
+        childView.set('isSelected', NO);
+      }
+    }
+  }.observes('value')
 
+});