sproutit-sproutcore 1.0.0.20090416161445 → 1.0.0.20090720093355

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

@@ -5,8 +5,6 @@
 // License:   Licened under MIT license (see license.js)
 // ==========================================================================
 
-sc_require('mixins/collection_item');
-
 SC.LIST_ITEM_ACTION_CANCEL = 'sc-list-item-cancel-action';
 SC.LIST_ITEM_ACTION_REFRESH = 'sc-list-item-cancel-refresh';
 SC.LIST_ITEM_ACTION_EJECT = 'sc-list-item-cancel-eject';
@@ -25,14 +23,14 @@ SC.LIST_ITEM_ACTION_EJECT = 'sc-list-item-cancel-eject';
   @extends SC.View
   @extends SC.Control
   @extends SC.InlineEditorDelegate
-  @extends SC.CollectionItem
   @extends SC.Editable
+  @extends SC.StaticLayout
   @since SproutCore 1.0
 */
 SC.ListItemView = SC.View.extend(
+    SC.StaticLayout,
     SC.Control,
     SC.InlineEditorDelegate,
-    SC.CollectionItem,
 /** @scope SC.ListItemView.prototype */ {
   
   classNames: ['sc-list-item-view'],
@@ -120,6 +118,24 @@ SC.ListItemView = SC.View.extend(
   */
   isEditing: NO,
   
+  /**
+    Indent to use when rendering a list item with an outline level > 0.  The
+    left edge of the list item will be indented by this amount for each 
+    outline level.
+  */
+  outlineIndent: 16,
+  
+  /**
+    Outline level for this list item.  Usually set by the collection view.
+  */
+  outlineLevel: 0,
+  
+  /**
+    Disclosure state for this list item.  Usually set by the collection view
+    when the list item is created.
+  */
+  disclosureState: SC.LEAF_NODE,
+  
   contentPropertyDidChange: function() {
     if (this.get('isEditing')) this.discardEditing() ;
     this.displayDidChange();
@@ -135,54 +151,94 @@ SC.ListItemView = SC.View.extend(
     @returns {void}
   */
   render: function(context, firstTime) {
-    var content = this.get('content') ;
-    var del = this.displayDelegate ;
-    var key, value ;
+    var content = this.get('content'),
+        del     = this.displayDelegate,
+        level   = this.get('outlineLevel'),
+        indent  = this.get('outlineIndent'),
+        key, value, working ;
+    
+    // outline level wrapper
+    working = context.begin("div").addClass("sc-outline");
+    if (level>=0 && indent>0) working.addStyle("left", indent*(level+1));
+    
+    // handle disclosure triangle
+    value = this.get('disclosureState');
+    if (value !== SC.LEAF_NODE) {
+      this.renderDisclosure(working, value);
+      context.addClass('has-disclosure');
+    }
+    
     
     // handle checkbox
-    key = this.getDelegateProperty(del, 'contentCheckboxKey') ;
+    key = this.getDelegateProperty('contentCheckboxKey', del) ;
     if (key) {
       value = content ? (content.get ? content.get(key) : content[key]) : NO ;
-      this.renderCheckbox(context, value);
+      this.renderCheckbox(working, value);
       context.addClass('has-checkbox');
     }
     
     // handle icon
-    if (this.getDelegateProperty(del, 'hasContentIcon')) {
-      key = this.getDelegateProperty(del,'contentIconKey') ;
+    if (this.getDelegateProperty('hasContentIcon', del)) {
+      key = this.getDelegateProperty('contentIconKey', del) ;
       value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
       
-      this.renderIcon(context, value);
+      this.renderIcon(working, value);
       context.addClass('has-icon');
     }
     
     // handle label -- always invoke
-    key = this.getDelegateProperty(del, 'contentValueKey') ;
+    key = this.getDelegateProperty('contentValueKey', del) ;
     value = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
     if (value && SC.typeOf(value) !== SC.T_STRING) value = value.toString();
     if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
-    this.renderLabel(context, value);
+    this.renderLabel(working, value);
     
     // handle unread count
-    key = this.getDelegateProperty(del, 'contentUnreadCountKey') ;
+    key = this.getDelegateProperty('contentUnreadCountKey', del) ;
     value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-    if (!SC.none(value) && (value !== 0)) this.renderCount(context, value) ;
+    if (!SC.none(value) && (value !== 0)) this.renderCount(working, value) ;
     
     // handle action 
-    key = this.getDelegateProperty(del, 'listItemActionProperty') ;
+    key = this.getDelegateProperty('listItemActionProperty', del) ;
     value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
     if (value) {
-      this.renderAction(context, value);
+      this.renderAction(working, value);
       context.addClass('has-action');
     }
     
     // handle branch
-    if (this.getDelegateProperty(del, 'hasContentBranch')) {
-      key = this.getDelegateProperty(del, 'contentIsBranchKey');
+    if (this.getDelegateProperty('hasContentBranch', del)) {
+      key = this.getDelegateProperty('contentIsBranchKey', del);
       value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
-      this.renderBranch(context, value);
+      this.renderBranch(working, value);
       context.addClass('has-branch');
     }
+    
+    context = working.end();
+  },
+  
+  /**
+    Adds a disclosure triangle with the appropriate display to the content.
+    This method will only be called if the disclosure state of the view is
+    something other than SC.LEAF_NODE.
+
+    @param {SC.RenderContext} context the render context
+    @param {Boolean} state YES, NO or SC.MIXED_STATE
+    @returns {void}
+  */
+  renderDisclosure: function(context, state) {
+    var key = (state === SC.BRANCH_OPEN) ? "open" : "closed",
+        cache = this._scli_disclosureHtml,
+        html, tmp;
+        
+    if (!cache) cache = this.constructor.prototype._scli_disclosureHtml = {};
+    html = cache[key];
+
+    if (!html) {
+      html = cache[key] = '<img src="%@" class="disclosure button %@" />'.fmt(SC.BLANK_IMAGE_URL, key);
+    }
+    
+    context.push(html);
   },
   
   /**
@@ -195,20 +251,31 @@ SC.ListItemView = SC.View.extend(
     @returns {void}
   */
   renderCheckbox: function(context, state) {
-    context = context.begin('a').attr('href', 'javascript:;')
-      .classNames(SC.CheckboxView.prototype.classNames);
     
-    // set state on html
-    if (state === SC.MIXED_STATE) {
-      context.addClass('mixed');
-    } else context.setClass('sel', state);
+    var key = (state === SC.MIXED_STATE) ? "mixed" : state ? "sel" : "nosel",
+        cache = this._scli_checkboxHtml,
+        html, tmp;
+        
+    if (!cache) cache = this.constructor.prototype._scli_checkboxHtml = {};
+    html = cache[key];
     
-    // now add inner content.  note we do not add a real checkbox because
-    // we don't want to have to setup a change observer on it.
-    context.push('<img src="', SC.BLANK_IMAGE_URL, '" class="button" />');
+    if (!html) {
+      tmp = SC.RenderContext('a').attr('href', 'javascript:;')
+        .classNames(SC.CheckboxView.prototype.classNames);
+
+      // set state on html
+      if (state === SC.MIXED_STATE) tmp.addClass('mixed');
+      else tmp.setClass('sel', state);
+
+      // now add inner content.  note we do not add a real checkbox because
+      // we don't want to have to setup a change observer on it.
+      tmp.push('<img src="', SC.BLANK_IMAGE_URL, '" class="button" />');
+
+      // apply edit
+      html = cache[key] = tmp.join();
+    }
     
-    // apply edit
-    context.end();
+    context.push(html);
   },
   
   /** 
@@ -324,10 +391,20 @@ SC.ListItemView = SC.View.extend(
   */
   _isInsideCheckbox: function(evt) {
     var del = this.displayDelegate ;
-    var checkboxKey = this.getDelegateProperty(del, 'contentCheckboxKey') ;
+    var checkboxKey = this.getDelegateProperty('contentCheckboxKey', del) ;
     return checkboxKey && this._isInsideElementWithClassName('sc-checkbox-view', evt);
   },
   
+  /** @private 
+    Returns YES if the list item has a disclosure triangle and the event 
+    occurred inside of it.
+  */
+  _isInsideDisclosure: function(evt) {
+    if (this.get('disclosureSate')===SC.LEAF_NODE) return NO;
+    return this._isInsideElementWithClassName('disclosure', evt);
+  },
+  
+  
   /** @private 
   mouseDown is handled only for clicks on the checkbox view or or action
   button.
@@ -339,43 +416,81 @@ SC.ListItemView = SC.View.extend(
       this._isMouseDownOnCheckbox = YES ;
       this._isMouseInsideCheckbox = YES ;
       return YES ; // listItem should handle this event
-    }  
+
+    } else if (this._isInsideDisclosure(evt)) {
+      this._addDisclosureActiveState();
+      this._isMouseDownOnDisclosure = YES;
+      this._isMouseInsideDisclosure = YES ;
+      return YES;
+
+    }
+    
     return NO ; // let the collection view handle this event
   },
   
   mouseUp: function(evt) {
-   var ret= NO ;
-   // if mouse was down in checkbox -- then handle mouse up, otherwise 
-   // allow parent view to handle event.
-   if (this._isMouseDownOnCheckbox) {
+    var ret= NO, del, checkboxKey, content, state, idx, set;
+
+    // if mouse was down in checkbox -- then handle mouse up, otherwise 
+    // allow parent view to handle event.
+    if (this._isMouseDownOnCheckbox) {
    
-     // update only if mouse inside on mouse up...
-     if (this._isInsideCheckbox(evt)) {
-       var del = this.displayDelegate ;
-       var checkboxKey = this.getDelegateProperty(del, 'contentCheckboxKey') ;
-       var content = this.get('content') ;
-       if (content && content.get) {
-         var value = content.get(checkboxKey) ;
-         value = (value === SC.MIXED_STATE) ? YES : !value ;
-         content.set(checkboxKey, value) ; // update content
-         this.displayDidChange(); // repaint view...
-       }
-     }
+      // update only if mouse inside on mouse up...
+      if (this._isInsideCheckbox(evt)) {
+        del = this.displayDelegate ;
+        checkboxKey = this.getDelegateProperty('contentCheckboxKey', del);
+        content = this.get('content') ;
+        if (content && content.get) {
+          var value = content.get(checkboxKey) ;
+          value = (value === SC.MIXED_STATE) ? YES : !value ;
+          content.set(checkboxKey, value) ; // update content
+          this.displayDidChange(); // repaint view...
+        }
+      }
+ 
+      this._removeCheckboxActiveState() ;
+      ret = YES ;
+    
+    // if mouse as down on disclosure -- handle mosue up.  otherwise pass on
+    // to parent.
+    } else if (this._isMouseDownOnDisclosure) {
+      if (this._isInsideDisclosure(evt)) {
+        state = this.get('disclosureState');
+        idx   = this.get('contentIndex');
+        set   = (!SC.none(idx)) ? SC.IndexSet.create(idx) : null;
+        del = this.get('displayDelegate');
+        
+        if (state === SC.BRANCH_OPEN) {
+          if (set && del && del.collapse) del.collapse(set);
+          else this.set('disclosureState', SC.BRANCH_CLOSED);
+          this.displayDidChange();
+          
+        } else if (state === SC.BRANCH_CLOSED) {
+          if (set && del && del.expand) del.expand(set);
+          else this.set('disclosureState', SC.BRANCH_OPEN);
+          this.displayDidChange();
+        }
+      }
      
-     this._removeCheckboxActiveState() ;
-     ret = YES ;
-   } 
+      this._removeDisclosureActiveState();
+      ret = YES ;
+    } 
    
-   // clear cached info
-   this._isMouseInsideCheckbox = this._isMouseDownOnCheckbox = NO ;
-   return ret ;
+    // clear cached info
+    this._isMouseInsideCheckbox = this._isMouseDownOnCheckbox = NO ;
+    this._isMouseDownOnDisclosure = this._isMouseInsideDisclosure = NO ;
+    return ret ;
   },
   
   mouseExited: function(evt) {
    if (this._isMouseDownOnCheckbox) {
      this._removeCheckboxActiveState() ;
      this._isMouseInsideCheckbox = NO ;
-   }  
+     
+   } else if (this._isMouseDownOnDisclosure) {
+     this._removeDisclosureActiveState();
+     this._isMouseInsideDisclosure = NO ;
+   }
    return NO ;
   },
   
@@ -383,7 +498,11 @@ SC.ListItemView = SC.View.extend(
    if (this._isMouseDownOnCheckbox) {
      this._addCheckboxActiveState() ;
      this._isMouseInsideCheckbox = YES ;
-   }  
+     
+   } else if (this._isMouseDownOnDisclosure) {
+     this._addDisclosureActiveState();
+     this._isMouseInsideDisclosure = YES;
+   }
    return NO ;
   },
   
@@ -395,20 +514,30 @@ SC.ListItemView = SC.View.extend(
   _removeCheckboxActiveState: function() {
    this.$('.sc-checkbox-view').removeClass('active');
   },
+
+  _addDisclosureActiveState: function() {
+   var enabled = this.get('isEnabled');
+   this.$('img.disclosure').setClass('active', enabled);
+  },
+  
+  _removeDisclosureActiveState: function() {
+   this.$('img.disclosure').removeClass('active');
+  },
   
   /**
-  Returns true if a click is on the label text itself to enable editing.
+    Returns true if a click is on the label text itself to enable editing.
   
-  Note that if you override renderLabel(), you probably need to override 
-  this as well.
+    Note that if you override renderLabel(), you probably need to override 
+    this as well, or just $label() if you only want to control the element
+    returned.
   
-  @param evt {Event} the mouseUp event.
-  @returns {Boolean} YES if the mouse was on the content element itself.
+    @param evt {Event} the mouseUp event.
+    @returns {Boolean} YES if the mouse was on the content element itself.
   */
   contentHitTest: function(evt) {
    // if not content value is returned, not much to do.
    var del = this.displayDelegate ;
-   var labelKey = this.getDelegateProperty(del, 'contentValueKey') ;
+   var labelKey = this.getDelegateProperty('contentValueKey', del) ;
    if (!labelKey) return NO ;
    
    // get the element to check for.
@@ -429,17 +558,24 @@ SC.ListItemView = SC.View.extend(
    
    var content = this.get('content') ;
    var del = this.displayDelegate ;
-   var labelKey = this.getDelegateProperty(del, 'contentValueKey') ;
+   var labelKey = this.getDelegateProperty('contentValueKey', del) ;
    var v = (labelKey && content && content.get) ? content.get(labelKey) : null ;
    
-   var f = this.get('frame') ;
+   var f= this.computeFrameWithParentFrame(null);
+   var parent = this.get('parentView');
+   var pf = parent.get('frame');
+   
    var el = this.$label() ;
-   if (!el) return NO ;
+   var offset = SC.viewportOffset(el[0]);
+   if (!el || el.get('length')===0) return NO ;
    
    // if the label has a large line height, try to adjust it to something
    // more reasonable so that it looks right when we show the popup editor.
    var oldLineHeight = el.css('lineHeight');
    var fontSize = el.css('fontSize');
+   var top = this.$().css('top');
+   if(top) top = parseInt(top.substring(0,top.length-2),00);
+   else top =0;
    var lineHeight = oldLineHeight;
    var lineHeightShift = 0;
    
@@ -451,17 +587,18 @@ SC.ListItemView = SC.View.extend(
      } else oldLineHeight = null ;
    }
    
-   f.x += el.offsetLeft ;
-   f.y += el.offsetTop + lineHeightShift - 2;
-   f.height = el.offsetHeight ;
-   f.width = (f.width - 30 - el.offsetLeft) ;
-   f = this.convertFrameToView(f, null) ;
+   f.x = offset.x;
+   f.y = offset.y+top + lineHeightShift ;
+   f.height = el[0].offsetHeight ;
+   f.width = (f.width - 30 - el[0].offsetLeft) ;
    
    var ret = SC.InlineTextFieldView.beginEditing({
      frame: f, 
      exampleElement: el, 
      delegate: this, 
-     value: v
+     value: v,
+     multiline: NO,
+     isCollection: YES
    }) ;
    
    // restore old line height for original item if the old line height 
@@ -513,7 +650,7 @@ SC.ListItemView = SC.View.extend(
     
     var content = this.get('content') ;
     var del = this.displayDelegate ;
-    var labelKey = this.getDelegateProperty(del, 'contentValueKey') ;
+    var labelKey = this.getDelegateProperty('contentValueKey', del) ;
     if (labelKey && content && content.set) {
      content.set(labelKey, finalValue) ;
     }

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

@@ -4,21 +4,36 @@
 //            Portions ©2008-2009 Apple, Inc. All rights reserved.
 // License:   Licened under MIT license (see license.js)
 // ==========================================================================
-sc_require('views/button');
-sc_require('views/separator');
+sc_require('views/button') ;
+sc_require('views/separator') ;
+
+// Constants
+SC.BENCHMARK_MENU_ITEM_RENDER = YES ;
 
 /**
   @class SC.MenuItemView
   @extends SC.ButtonView
   @since SproutCore 1.0
 */
-SC.MenuItemView = SC.ButtonView.extend(
+SC.MenuItemView = SC.ButtonView.extend( SC.ContentDisplay,
 /** @scope SC.MenuItemView.prototype */{
+  
+  
   classNames: ['sc-menu-item'],
   tagName: 'div',
-  anchor:null,
-  parentPane:null,
-  acceptsFirstResponder:YES,
+
+  /**
+    This provides the parentPane for the current MenuItemView
+  */
+  parentPane: null,
+  
+  /** 
+    @private
+    @property
+    @type {Boolean}
+  */
+  acceptsFirstResponder: YES,
+
   // ..........................................................
   // KEY PROPERTIES
   // 
@@ -29,21 +44,6 @@ SC.MenuItemView = SC.ButtonView.extend(
   */
   content: null,
   
-  /**
-    The cached Content to verify that the content has changed or not
-
-    @type Object
-  */
-  cachedContent:null,
-
-  /**
-    This returns true if the child view is a menu list view.
-    This property can be over written to have other child views as well.
-
-    @type View
-  */
-  childView: null,
-
   /**
     This returns true if the child view is a menu list view.
     This property can be over written to have other child views as well.
@@ -53,16 +53,17 @@ SC.MenuItemView = SC.ButtonView.extend(
   isSubMenuViewVisible: null,
   
   /**
-    This will return true if the menu item is a seperator.
+    This will return true if the menu item is a separator.
 
     @type Boolean
   */
-  isSeperator: NO,
+  isSeparator: NO,
 
   /**
     (displayDelegate) The name of the property used for label itself   
     If null, then the content object itself will be used.
-
+    
+    @readOnly
     @type String
   */
   contentValueKey: null,
@@ -70,9 +71,10 @@ SC.MenuItemView = SC.ButtonView.extend(
   /**
     (displayDelegate) The name of the property used to determine if the menu 
     item is a branch or leaf (i.e. if the branch arow should be displayed to 
-	the right edge.)   
+    the right edge.)   
     If this is null, then the branch arrow will be collapsed.
 
+    @readOnly
     @type String
   */
   contentIsBranchKey: null,
@@ -80,6 +82,7 @@ SC.MenuItemView = SC.ButtonView.extend(
   /**
     The name of the property which will set the image for the short cut keys
 
+    @readOnly
     @type String
   */
   shortCutKey: null,
@@ -87,29 +90,32 @@ SC.MenuItemView = SC.ButtonView.extend(
   /**
     The name of the property which will set the icon image for the menu item.
 
+    @readOnly
     @type String
   */
   contentIconKey: null,
 
-  /*
+  /**
     The name of the property which will set the checkbox image for the menu 
     item.
 
+    @readOnly
     @type String
   */
   contentCheckboxKey: null,
 
-  /*
+  /**
     The name of the property which will set the checkbox image for the menu 
     item.
 
+    @readOnly
     @type String
   */
   contentActionKey: null,
   
   /**
     The name of the property which will set the checkbox state
-
+	
     @type Boolean
   */
   isCheckboxChecked: NO,  
@@ -141,18 +147,31 @@ SC.MenuItemView = SC.ButtonView.extend(
     Sub Menu Items 
     If this is null then there is no branching
 
-    @type View
+    @type MenuPane
+  */
+  subMenu: null,
+  
+  /**
+    This property specifies whether this menu item is currently in focus
+
+    @type Boolean
   */
-  subMenu:null,
+  hasMouseExited: NO,
+  
+  /**
+    Anchor for the Parent Menu of which the Menu Item is part of
+
+    @type ButtonView/MenuItemView
+  */
+  anchor: null,
   
-  hasMouseExited:NO,
   /**
     This will hold the properties that can trigger a change in the diplay
   */
   displayProperties: ['contentValueKey', 'contentIconKey', 'shortCutKey',
                   'contentIsBranchKey','isCheckboxChecked','itemHeight',
-                   'subMenu'],
-
+                   'subMenu','isEnabled','content'],
+  contentDisplayProperties: 'title value icon separator action checkbox shortcut branchItem subMenu'.w(),
   /**
     Fills the passed html-array with strings that can be joined to form the
     innerHTML of the receiver element.  Also populates an array of classNames
@@ -163,86 +182,81 @@ SC.MenuItemView = SC.ButtonView.extend(
     @returns {void}
   */
   render: function(context, firstTime) {
-    if (SC.BENCHMARK_RENDER) {
-
-      var bkey = '%@.render'.fmt(this) ;
-      SC.Benchmark.start(bkey);
+    var bkey ;
+    if (SC.BENCHMARK_MENU_ITEM_RENDER) {
+      bkey = '%@.render'.fmt(this) ;
+      SC.Benchmark.start(bkey) ;
     }
-	
     var content = this.get('content') ;
-    if (this.cachedContent && this.cachedContent == content) return; 
-    this.cachedContent = content ;
-
     var del = this.displayDelegate ;
-    var key, value ;
+    var key, val ;
     var ic ;
-    var menu = this.parentMenu();
+    var menu = this.parentMenu() ;
     var itemWidth = this.get('itemWidth') || menu.layout.width ;
-    var itemHeight = this.get('itemHeight') || menu.layout.height ;
-    this.set('itemWidth',itemWidth);
-    this.set('itemHeight',itemHeight);
-      //handle seperator    
-    ic = context.begin('a').attr('href', 'javascript:;') ;   
-    key = this.getDelegateProperty(del, 'isSeparatorKey') ;
-    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-    if (value) {
-      this.set('itemHeight',5) ;
-      this.adjust({height:this.get('itemHeight')}) ;
-      ic = ic.begin('span').addClass('separator') ;
-      ic = ic.end() ;
-      return ;
+    var itemHeight = this.get('itemHeight') || 20 ;
+    this.set('itemWidth',itemWidth) ;
+    this.set('itemHeight',itemHeight) ;
+    
+    if(!this.get('isEnabled')) context.addClass('disabled') ;
+    
+    //handle separator    
+    ic = context.begin('a').attr('href', 'javascript: ;') ;   
+    key = this.getDelegateProperty('isSeparatorKey', del) ;
+    val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+    if (val) {
+      //ic.begin('span').addClass('separator').end() ;
+      ic.push("<span class='separator'></span>") ;
     } else {
-      //handle checkbox
-      key = this.getDelegateProperty(del, 'contentCheckboxKey') ;
+      // handle checkbox
+      key = this.getDelegateProperty('contentCheckboxKey', del) ;
       if (key) {
-        value = content ? (content.get ? content.get(key) : content[key]) : NO ;
-        if (value) {
-        ic.begin('div').addClass('checkbox').end() ;
+        val = content ? (content.get ? content.get(key) : content[key]) : NO ;
+        if (val) {
+          ic.begin('div').addClass('checkbox').end() ;
         }
       }
 
       // handle image -- always invoke
-      key = this.getDelegateProperty(del, 'contentIconKey') ;
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-      if(value && SC.typeOf(value) !== SC.T_STRING) value = value.toString() ;
-      if(value) this.renderImage(ic, value) ;
+      key = this.getDelegateProperty('contentIconKey', del) ;
+      val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+      if(val && SC.typeOf(val) !== SC.T_STRING) val = val.toString() ;
+      if(val) this.renderImage(ic, val) ;
 
       // handle label -- always invoke
-      key = this.getDelegateProperty(del, 'contentValueKey') ;
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
-      if (value && SC.typeOf(value) !== SC.T_STRING) value = value.toString();
-      this.renderLabel(ic, value||'') ;
+      key = this.getDelegateProperty('contentValueKey', del) ;
+      val = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
+      if (val && SC.typeOf(val) !== SC.T_STRING) val = val.toString() ;
+      this.renderLabel(ic, val||'') ;
 
       // handle branch
-      key = this.getDelegateProperty(del, 'contentIsBranchKey') ;
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
-      if (value) {       
-        this.renderBranch(ic, value) ;
+      key = this.getDelegateProperty('contentIsBranchKey', del) ;
+      val = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
+      if (val) {       
+        this.renderBranch(ic, val) ;
         ic.addClass('has-branch') ;
       } else { // handle action
         
-        key = this.getDelegateProperty(del, 'action') ;
-        value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-        if (value && isNaN(value)) this.set('action', value) ;
+        key = this.getDelegateProperty('action', del) ;
+        val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+        if (val && isNaN(val)) this.set('action', val) ;
 
-        key = this.getDelegateProperty(del, 'target') ;
-        value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-        if (value && isNaN(value)) this.set('target', value) ;
+        key = this.getDelegateProperty('target', del) ;
+        val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+        if (val && isNaN(val)) this.set('target', val) ;
 
         // handle short cut keys
-        if (this.getDelegateProperty(del, 'shortCutKey')) {
-        /* handle short cut keys here */
-          key = this.getDelegateProperty(del, 'shortCutKey') ;
-          value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-          if (value) {
-            this.renderShortcut(ic, value) ;
+        if (this.getDelegateProperty('shortCutKey', del)) {
+          key = this.getDelegateProperty('shortCutKey', del) ;
+          val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+          if (val) {
+            this.renderShortcut(ic, val) ;
             ic.addClass('shortcutkey') ;
           }
         }
       }
     }
-    ic.end();
-    if (SC.BENCHMARK_RENDER) SC.Benchmark.end(bkey);
+    ic.end() ;
+    if (SC.BENCHMARK_MENU_ITEM_RENDER) SC.Benchmark.end(bkey) ;
   },
       
   /** 
@@ -250,13 +264,13 @@ SC.MenuItemView = SC.ButtonView.extend(
    return your own custom HTML
  
    @param {SC.RenderContext} context the render context
-   @param {Boolean} hasBranch YES if the item has a branch
+   @param {String} the source path of the image
    @returns {void}
   */
   renderImage: function(context, image) {
     // get a class name and url to include if relevant
 
-    var url = undefined, className = undefined ;
+    var url, className ;
     if (image && SC.ImageView.valueIsUrl(image)) {
       url = image ;
       className = '' ;
@@ -268,6 +282,15 @@ SC.MenuItemView = SC.ButtonView.extend(
     context.begin('img').addClass('image').addClass(className).attr('src', url).end() ;
   },
 
+  /** 
+   Generates the label used to represent the menu item. override this to 
+   return your own custom HTML
+
+   @param {SC.RenderContext} context the render context
+   @param {String} menu item name
+   @returns {void}
+  */
+
   renderLabel: function(context, label) {
     context.push("<span class='value'>"+label+"</span>") ;
   },
@@ -293,27 +316,120 @@ SC.MenuItemView = SC.ButtonView.extend(
    return your own custom HTML
 
    @param {SC.RenderContext} context the render context
-   @param {Boolean} hasBranch YES if the item has a branch
+   @param {String} the shortcut key string to be displayed with menu item name
    @returns {void}
   */
   renderShortcut: function(context, shortcut) {
-    context.push('<span class = "shortCut">' + shortcut + '</span>') ;
+    context.push('<span class = "shortcut">' + shortcut + '</span>') ;
   },
 
-  superClass: NO,
+  /**
+    This method is used to fetch the Menu Item View to which the
+    Parent Menu Pane is anchored 
+    to
 
+    @param {}
+    @returns MenuPane
+  */
   getAnchor: function() {
-    var anchor = this.get('anchor');
-    if(anchor.kindOf(SC.MenuItemView)) return anchor;
-    return null;
+    var anchor = this.get('anchor') ;
+    if(anchor && anchor.kindOf(SC.MenuItemView)) return anchor ;
+    return null ;
+  },
+  
+  isCurrent: NO,
+
+  /**
+    This method checks if the menu item is a separator.
+
+    @param {}
+    @returns Boolean
+  */	  
+  isSeparator: function() {
+    var content = this.get('content') ;
+    var del = this.displayDelegate ;
+    var key = this.getDelegateProperty('isSeparatorKey', del) ;
+    var val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+    if (val) return YES ;
+    return NO ;
+  },
+  
+  /**
+    Checks if a menu is a sub menu, during branching.
+    
+    @param {}
+    @returns MenuPane
+  */
+  isSubMenuAMenuPane: function() {
+    var content = this.get('content') ;
+    var subMenu = content.get('subMenu') ;
+    if(subMenu && subMenu.kindOf(SC.MenuPane)) return subMenu ;
+    return NO ;  
   },
+  
+  
+  /**
+    This method will check whether the current Menu Item is still
+    selected and then create a submenu accordignly.
+    
+    @param {}
+    @returns void
+  */
+  branching: function() {
+    if(this.get('hasMouseExited')) {
+      this.set('hasMouseExited',NO) ;
+      return ;
+    }
+      this.createSubMenu() ;
+  },
+  
+  /**
+    This method will remove the focus of the current selected menu item.
+
+    @param {}
+  */
+  loseFocus: function() {
+    if(!this.isSubMenuAMenuPane()) {
+      this.set('hasMouseExited',YES) ;
+      this.set('isSelected',NO) ;
+      this.$().removeClass('focus') ;
+    }
+  },
+  
+  /**
+    This method will create the sub Menu with the current Menu Item as anchor
+    
+    @param {}
+    @returns void
+  */
+  createSubMenu: function() {
+    var subMenu = this.isSubMenuAMenuPane() ;
+    if(subMenu) {
+      subMenu.set('anchor', this) ;
+      subMenu.popup(this,[0,0,0]) ;
+      var context = SC.RenderContext(this) ;
+      context = context.begin(subMenu.get('tagName')) ;
+      subMenu.prepareContext(context, YES) ;
+      context = context.end() ;
+      var menuItemViews = subMenu.get('menuItemViews') ;
+      if(menuItemViews && menuItemViews.length>0) {
+        subMenu.set('currentSelectedMenuItem',menuItemViews[0]) ;
+        subMenu.set('keyPane',YES) ;
+      }
+    }
+  },
+  
+  parentMenu: function() {
+    return this.get('parentPane') ;
+  },
+
   //..........................................
   //Mouse Events Handling
   //..........................................
   
   mouseUp: function(evt) {
-    if (!this.isEnabled) return YES ;
-    this.set('hasMouseExited',NO);
+    if (!this.get('isEnabled')) return YES ;
+    this.set('hasMouseExited',NO) ;
     this.isSelected = YES ;
     var key = this.get('contentCheckboxKey') ;
     var content = this.get('content') ;
@@ -326,112 +442,146 @@ SC.MenuItemView = SC.ButtonView.extend(
         content.set(key, YES) ;
       }
     }
-    this._action(evt);
-    var anchor = this.getAnchor();
-    if(anchor) anchor.mouseUp(evt);
-    var menu = this.parentMenu();
-    if(menu) menu.remove();
+    this._action(evt) ;
+    var anchor = this.getAnchor() ;
+    if(anchor) anchor.mouseUp(evt) ;
+    else {
+      this.resignFirstResponder() ;
+    }
+    this.closeParent() ;
+    return YES ;
+  },
+
+  /** @private*/
+  mouseDown: function(evt) {
     return YES ;
   },
 
-  isCurrent: NO,
-  
   /** @private
     This has been over ridden from button view to prevent calling of render 
     method (When isActive property is changed).
+    Also based on whether the menu item has a sub Branch we create a sub Menu
+    
+    @returns Boolean
   */
   mouseEntered: function(evt) {
-    if (!this.isEnabled) return YES ;
-    this.becomeFirstResponder();
+    if (!this.get('isEnabled') && !this.isSeparator()) return YES ;
     this.isSelected = YES ;
 
     var parentPane = this.parentMenu() ;
-    if(parentPane) parentPane.set('currentItemSelected', this) ;
+    if(parentPane) parentPane.set('currentSelectedMenuItem', this) ;
 
     var key = this.get('contentIsBranchKey') ;
-    if(key){
-      var content = this.get('content');
-      var value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
-      if(value) this.invokeLater(this.branching,100);
+    if(key) {
+      var content = this.get('content') ;
+      var val = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
+      if(val) this.invokeLater(this.branching(),100) ;
     }
-    this.$().addClass('sel');
-	  return YES;
-  },
-
-  isSubMenuAMenuPane: function(subMenu) {
-    if(subMenu.kindOf(SC.MenuPane)) return YES;
-    return NO;  
-  },
-  
-  hasSubMenu: function(){
-    var content = this.get('content') ;
-    var subMenu = content.get('subMenu') ;
-    if(subMenu) return subMenu;
-    return null;
-  },
-  
-  branching: function() {
-    if(this.get('hasMouseExited')) {
-      this.set('hasMouseExited',NO);
-      return;
-    }
-    var subMenu = this.hasSubMenu();
-    if(subMenu) {
-	    subMenu.set('anchor', this);
-      if(this.isSubMenuAMenuPane(subMenu)) {
-          subMenu.popup(this,[0,0,0]) ;
-          var context = SC.RenderContext(this) ;
-          context = context.begin(subMenu.get('tagName')) ;
-          subMenu.prepareContext(context, YES) ;
-          context = context.end() ;
-      }
-    }
-  },
-  
-  parentMenu: function() {
-    return this.get('parentPane');
+	  return YES ;
   },
 
+  /** @private
+    Set the focus based on whether the current Menu item is selected or not.
+    
+    @returns Boolean
+  */
   mouseExited: function(evt) {
-    this.loseFocus();
+    this.loseFocus() ;
+    var parentMenu = this.parentMenu() ;
+    if(parentMenu) {
+      parentMenu.set('previousSelectedMenuItem', this) ;
+      this.resignFirstResponder() ;
+    }
     return YES ;
   },
-  
-  mouseDown: function(evt) {
-    return YES;
-  },
 
-  loseFocus: function() {
-    if(!this.hasSubMenu()) this.$().removeClass('sel');
-    this.set('hasMouseExited',YES);
-    this.set('isSelected',NO) ;
-    var menu = this.parentMenu();
-    if(menu) menu.set('currentItemSelected', null) ;
-  },
+
+  /** @private
+    Call the moveUp function on the parent Menu
     
+    @returns Boolean
+  */
   moveUp: function(sender,evt) {
-    var menu = this.parentMenu();
+    var menu = this.parentMenu() ;
     if(menu) {
-      menu.moveUp(this);
+      menu.moveUp(this) ;
     }
-    return YES;
+    return YES ;
   },
   
+  /** @private
+    Call the moveDown function on the parent Menu
+    
+    @returns Boolean
+  */
   moveDown: function(sender,evt) {
-    var menu = this.parentMenu();
+    var menu = this.parentMenu() ;
     if(menu) {
-      menu.moveDown(this);
+      menu.moveDown(this) ;
     }
-    return YES;
+    return YES ;
+  },
+  
+  /** @private
+    Call the function to create a branch
+    
+    @returns Boolean
+  */
+  moveRight: function(sender,evt) {
+    this.createSubMenu() ;
+    return YES ;
   },
   
+  /** @private*/
   keyDown: function(evt) {
-    // console.log('keyDown called on %@'.fmt(this));
     return this.interpretKeyEvents(evt) ;
   },
   
+  /** @private*/
   keyUp: function(evt) {
-    return YES;
-  }
+    return YES ;
+  },
+  
+  /** @private*/
+  cancel: function(evt) {
+    this.loseFocus() ;
+    return YES ;
+  },
+  
+  /** @private*/
+  didBecomeFirstResponder: function(responder) {
+    if (responder !== this) return;
+    if(!this.isSeparator()) this.$().addClass('focus') ;
+  },
+  
+  /** @private*/
+  willLoseFirstResponder: function(responder) {
+    if (responder !== this) return;
+    this.$().removeClass('focus') ;
+  },
+  
+  /** @private*/
+  insertNewline: function(sender, evt) {
+    this.mouseUp(evt) ;
+  },
 
-});
+  /**
+    Close the parent Menu and remove the focus of the current Selected 
+    Menu Item
+    
+    @returns void
+  */
+  closeParent: function() {
+    this.$().removeClass('focus') ;
+    var menu = this.parentMenu() ;
+    if(menu) {
+      menu.remove() ;
+    }
+  },
+  
+  /** @private*/
+  clickInside: function(frame, evt) {
+    return SC.pointInRect({ x: evt.pageX, y: evt.pageY }, frame) ;
+  }
+  
+}) ;