sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

data/frameworks/sproutcore/frameworks/desktop/panes/alert.js

@@ -0,0 +1,408 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('panes/panel');
+sc_require('views/button');
+/** 
+  button1 : 1st button from the right. default:OK
+  button2 : 2nd button from the right. Optional. Could be Cancel or 2nd action.
+  button3 : 1st button from the left. Optional. Could be Cancel or alternative option.
+*/
+/** 
+  Passed to delegate when alert pane is dismissed by pressing button 1
+*/
+SC.BUTTON1_STATUS = 'button1';
+
+/** 
+  Passed to delegate when alert pane is dismissed by pressing button 2
+*/
+SC.BUTTON2_STATUS = 'button2';
+
+/** 
+  Passed to delegate when alert pane is dismissed by pressing button 3
+*/
+SC.BUTTON3_STATUS = 'button3';
+
+/**
+  Displays a preformatted modal alert pane.
+  
+  Alert panes are a simple way to provide modal messaging that otherwise 
+  blocks the user's interaction with your application.  Alert panes are 
+  useful for showing important error messages and confirmation dialogs.  They
+  provide a better user experience than using the OS-level alert dialogs.
+  
+  h1. Displaying an Alert Pane
+  
+  The easiest way to display an alert pane is to use one of the various 
+  class methods defined on SC.AlertPane, passing the message and an optional
+  detailed description and caption.  
+  
+  There are four variations of this method can you can invoke:  
+  
+  - *warn()* - displays an alert pane with a warning icon to the left.
+  - *error()* - displays an alert with an error icon to the left
+  - *info()* - displays an alert with an info icon to the left
+  - *plain()* - displays an alert w/o any icon
+  - *show()* - displays an alert with a customizable icon to the left
+  
+  In addition to passing a message, description and caption, you can also customize
+  the title of the button 1 (OK) and add an optional button 2 and 3 (Cancel or Extra).  Just
+  pass these titles of these buttons to enable them or null to disable then.
+  
+  Additionally, you can pass a delegate object as the last parameter.  This
+  delegate's 'alertPaneDidDismiss()' method will be called when the pane
+  is dismissed, passing the pane instance and a key indicating which 
+  button was pressed.
+  
+  h1. Examples
+  
+  Show a simple AlertPane with an OK button:
+  
+  {{{
+    SC.AlertPane.warn("Could not load calendar", "Your internet connection may be unavailable or our servers may be down.  Try again in a few minutes.");
+  }}}
+  
+  Show an AlertPane with a customized OK title (title will be 'Try Again'):
+  
+  {{{
+    SC.AlertPane.warn("Could not load calendar", "Your internet connection may be unavailable or our servers may be down.  Try again in a few minutes.", "Try Again");
+  }}}
+  
+  Show an AlertPane with a custom OK, a Cancel button and an Extra button, 
+  each with custom titles.  Also, pass a delegate that will be invoked when
+  the user's dismisses the dialog.
+  
+  {{{
+
+    MyApp.calendarController = SC.Object.create({
+      alertPaneDidDismiss: function(pane, status) {
+        switch(status) {
+          case SC.BUTTON1_STATUS:
+            this.tryAgain();
+            break;
+            
+          case SC.BUTTON2_STATUS:
+            // do nothing
+            break;
+            
+          case SC.BUTTON3_STATUS:
+            this.showMoreInfo();
+            break;
+        }
+      },
+      
+      ...
+    });
+    
+    SC.AlertPane.warn("Could not load calendar", "Your internet connection may be unavailable or our servers may be down.  Try again in a few minutes.", "Try Again", "Cancel", "More Info...", MyApp.calendarController);
+  }}}
+  
+  @extends SC.PanelPane
+  @since SproutCore 1.0
+*/
+SC.AlertPane = SC.PanelPane.extend({
+  
+  classNames: 'sc-alert',
+  
+  /**
+    The delegate to notify when the pane is dismissed.  If you set a 
+    delegate, it should respond to the method:
+    
+    {{{
+      alertPaneDidDismiss: function(pane, status)
+    }}}
+    
+    The status will be on of SC.BUTTON1_STATUS, SC.BUTTON2_STATUS or SC.BUTTON3_STATUS
+    depending on which button was clicked.
+    
+    @property {Object}
+  */
+  delegate: null,
+
+  /**
+    The icon URL or class name.  If you do not set this, an alert icon will
+    be shown instead.
+    
+    @property {String}
+  */
+  icon: 'sc-icon-alert-48',
+
+  /**
+    The primary message to display.  This message will appear in large bold
+    type at the top of the alert.
+    
+    @property {String}
+  */
+  message: "",
+
+  /**
+    An optional detailed decription.  Use this string to provide further 
+    explanation of the condition and, optionally, ways the user can resolve
+    the problem.
+    
+    @property {String}
+  */
+  description: "",
+  
+  displayDescription: function() {
+    var desc = this.get('description');
+    if (!desc || desc.length === 0) return desc ;
+    
+    desc = SC.RenderContext.escapeHTML(desc); // remove HTML
+    return '<p class="description">' + desc.split('\n').join('</p><p class="description">') + '</p>';
+  }.property('description').cacheable(),
+
+  /**
+    An optional detailed caption.  Use this string to provide further 
+    fine print explanation of the condition and, optionally, ways the user can resolve
+    the problem.
+    
+    @property {String}
+  */
+  caption: "",
+  
+  displayCaption: function() {
+    var caption = this.get('caption');
+    if (!caption || caption.length === 0) return caption ;
+    
+    caption = SC.RenderContext.escapeHTML(caption); // remove HTML
+    return '<p class="caption">' + caption.split('\n').join('</p><p class="caption">') + '</p>';
+  }.property('caption').cacheable(),
+  
+  /**
+    The button view for the button 1 (OK).
+    
+    @property {SC.ButtonView}
+  */
+  buttonOne: SC.outlet('contentView.childViews.1.childViews.1'),
+
+  /**
+    The button view for the button 2 (Cancel).
+    
+    @property {SC.ButtonView}
+  */
+  buttonTwo: SC.outlet('contentView.childViews.1.childViews.0'),
+
+  /**
+    The button view for the button 3 (Extra).
+    
+    @property {SC.ButtonView}
+  */
+  buttonThree: SC.outlet('contentView.childViews.2.childViews.0'),
+
+  /**
+    The view for the button 3 (Extra) wrapper.
+    
+    @property {SC.View}
+  */
+  buttonThreeWrapper: SC.outlet('contentView.childViews.2'),
+  
+  layout: { centerX: 0, width: 500, top: 55 },
+
+  /** @private - internal view that is actually displayed */
+  contentView: SC.View.extend({
+    
+    useStaticLayout: YES,
+    
+    layout: { left: 0, right: 0, top: 0, height: "auto" },
+		
+    childViews: [
+      SC.View.extend(SC.StaticLayout, {
+        classNames: ['info'],
+
+        render: function(context, firstTime) {
+          var pane = this.get('pane');
+          var blank = sc_static('blank') ;
+          if(pane.get('icon') == 'blank') context.addClass('plain');
+          context.push('<img src="%@" class="icon %@" />'.fmt(blank, pane.get('icon')));
+          context.begin('h1').text(pane.get('message') || '').end();
+          context.push(pane.get('displayDescription') || '');
+          context.push(pane.get('displayCaption') || '');
+          context.push('<div class="seperator"></div>');
+        }
+      }),
+
+      SC.View.extend({
+        layout: { bottom: 13, height: 24, right: 18, width: 466 },
+        childViews: ['cancelButton', 'okButton'],
+        classNames: ['textAlignRight'],
+        cancelButton : SC.ButtonView.extend({
+            useStaticLayout: YES,
+            actionKey: SC.BUTTON2_STATUS,
+            localize: YES,
+            titleMinWidth: 80,
+            layout: { right: 5, height: 'auto', width: 'auto', bottom: 0 },
+            theme: 'capsule',
+            title: "Cancel", 
+            action: "dismiss",
+            isVisible: NO
+          }),
+
+        okButton : SC.ButtonView.extend({
+            useStaticLayout: YES,
+            actionKey: SC.BUTTON1_STATUS,
+            localize: YES,
+            titleMinWidth: 80,
+            layout: { left: 0, height: 'auto', width: 'auto', bottom: 0 },
+            theme: 'capsule',
+            title: "OK", 
+            isDefault: YES,
+            action: "dismiss"
+          })
+      }),
+      
+      SC.View.extend({
+        layout: { bottom: 13, height: 24, left: 18, width: 150 },
+        isVisible: NO,
+        childViews: [
+          SC.ButtonView.extend({
+            useStaticLayout: YES,
+            actionKey: SC.BUTTON3_STATUS,
+            localize: YES,
+            titleMinWidth: 80,
+            layout: { left: 0, height: 'auto', width: 'auto', bottom: 0 },
+            theme: 'capsule',
+            title: "Extra", 
+            action: "dismiss",
+            isVisible: NO
+          })]
+      })]
+  }),
+
+  /**
+    Action triggered whenever any button is pressed.  Notifies any delegate
+    and then hides the alert pane.
+  */
+  dismiss: function(sender) {
+    var del = this.delegate;
+    if (del && del.alertPaneDidDismiss) {
+      del.alertPaneDidDismiss(this, sender.get('actionKey'));
+    }
+    this.remove(); // hide alert
+  },
+  
+  /** @private 
+    Executes whenever one of the icon, message, description or caption is changed.
+    This simply causes the UI to refresh.
+  */
+  alertInfoDidChange: function() {
+    var v = this.getPath('contentView.childViews.0');
+    if (v) v.displayDidChange(); // re-render message
+  }.observes('icon', 'message', 'displayDescription', 'displayCaption')
+});
+
+/** @private
+  internal method normalizes arguments for processing by helper methods.
+*/
+SC.AlertPane._normalizeArguments = function(args) {
+  args = SC.A(args); // convert to real array
+  var len = args.length, delegate = args[len-1];
+  if (SC.typeOf(delegate) !== SC.T_STRING) {
+    args[len-1] = null;
+  } else delegate = null ;
+  args[7] = delegate ;
+  return args ;
+};
+
+/**
+  Displays a new alert pane according to the passed parameters.  Every 
+  parameter except for the message is optional.  You can always pass the 
+  delegate as the last parameter and it will be used, even if you omit items
+  in between.
+  
+  If you need to pass other parameters but you want to omit some others 
+  in between, pass null and the related UI item will be hidden
+  
+  Note that if you pass an icon, it should be 48 x 48 in size.
+  
+  @param {String} message the primary message
+  @param {String} description an optional detailed description
+  @param {String} caption an optional detailed fine print caption
+  @param {String} button1Title optional unlocalized title for button 1 (OK)
+  @param {String} button2Title optional unlocalized title for button 2 (Cancel)
+  @param {String} button3Title optional unlocalized title for button 3 (extra)
+  @param {String} iconUrl optional URL or class name for icon.
+  @param {Object} delegate optional delegate to notify when pane is dismissed
+  @returns {SC.AlertPane} new alert pane
+*/
+SC.AlertPane.show = function(message, description, caption, button1Title, button2Title, button3Title, iconUrl, delegate) {
+  
+  // get the delegate and normalize the rest of the params
+  var args = this._normalizeArguments(arguments);
+  
+  // create basic AlertPane
+  var ret = this.create({
+    message: args[0] || '',
+    description: args[1] || null,
+    caption: args[2] || null,
+    icon: args[6] || 'sc-icon-alert-48',
+    delegate: args[7]
+  });
+  
+  // customize buttons as needed
+  var buttonKeys = 'buttonOne buttonTwo buttonThree'.w(), button, title;
+  for(var idx=0;idx<3;idx++) {
+    button = ret.get(buttonKeys[idx]);
+    title = args[idx + 3];
+    if (title) {
+      button.set('title', title).set('isVisible', YES);
+      if (idx==2) {
+        var button_wrapper = ret.get('buttonThreeWrapper');
+        button_wrapper.set('isVisible', YES);
+      }
+    }
+  }
+  var show = ret.append() ; // make visible.
+  ret.adjust('height', ret.childViews[0].$().height()) ;
+  ret.updateLayout() ;
+  return show ;
+};
+
+/**
+  Displays a warning alert pane.  See SC.AlertPane.show() for complete details. 
+  
+  @returns {SC.AlertPane} the pane
+*/
+SC.AlertPane.warn = function(message, description, caption, button1Title, button2Title, button3Title, delegate) {
+  var args = this._normalizeArguments(arguments);
+  args[6] = 'sc-icon-alert-48';
+  return this.show.apply(this, args);
+};
+
+
+/**
+  Displays a info alert pane.  See SC.AlertPane.show() for complete details. 
+  
+  @returns {SC.AlertPane} the pane
+*/
+SC.AlertPane.info = function(message, description, caption, button1Title, button2Title, button3Title, delegate) {
+  var args = this._normalizeArguments(arguments);
+  args[6] = 'sc-icon-info-48';
+  return this.show.apply(this, args);
+};
+
+/**
+  Displays a error allert pane.  See SC.AlertPane.show() for complete details. 
+  
+  @returns {SC.AlertPane} the pane
+*/
+SC.AlertPane.error = function(message, description, caption, button1Title, button2Title, button3Title, delegate) {
+  var args = this._normalizeArguments(arguments);
+  args[6] = 'sc-icon-error-48';
+  return this.show.apply(this, args);
+};
+
+/**
+  Displays a plain all-text allert pane w/o icon.  See SC.AlertPane.show() for complete details. 
+  
+  @returns {SC.AlertPane} the pane
+*/
+SC.AlertPane.plain = function(message, description, caption, button1Title, button2Title, button3Title, delegate) {
+  var args = this._normalizeArguments(arguments);
+  args[6] = 'blank';
+  return this.show.apply(this, args);
+};

data/frameworks/sproutcore/frameworks/desktop/panes/menu.js

@@ -0,0 +1,651 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+require('panes/picker');
+require('views/menu_item');
+
+// Constants
+SC.BENCHMARK_MENU_PANE_RENDER = YES ;
+
+/**
+  @class SC.MenuPane
+  @extends SC.PickerPane
+  @since SproutCore 1.0
+*/
+SC.MenuPane = SC.PickerPane.extend( 
+/** @scope SC.MenuPane.prototype */ {
+
+  menuItemKeys: 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemSeparatorKey itemActionKey itemCheckboxKey itemShortCutKey itemBranchKey itemHeightKey subMenuKey itemKeyEquivalentKey itemTargetKey'.w(),
+  classNames: ['sc-menu'],
+
+  tagName: 'div',
+  
+  isModal: YES,
+
+  /**
+    The key that explains whether each item is Enabled. If omitted, no icons 
+    will be displayed.
+
+    @readOnly
+    @type Boolean
+  */
+  itemIsEnabledKey: YES,
+  
+  /**
+    The key that contains the title for each item.  If omitted, no icons will
+     be displayed.
+
+    @readOnly
+    @type String
+  */
+  itemTitleKey: null,
+
+  /**
+    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
+    various itemKey properties to tell the MenuPane how to extract the
+    information it needs.
+
+    @type String
+  */ 
+  items: [],
+
+  /** 
+    The key that contains the value for each item.  If omitted, no icons will
+    be displayed.
+
+    @readOnly
+    @type String
+  */
+  itemValueKey: null,
+
+  /** 
+    The key that contains the icon for each item.  If omitted, no icons will
+    be displayed.
+
+    @readOnly
+    @type String
+  */
+  itemIconKey: null,
+
+  /** 
+    The width for each menu item and ultimately the menu itself.
+
+    @type String
+  */
+  itemWidth: null,
+  
+  /** 
+    The default height for each menu item.
+
+    @type String
+  */
+  itemHeight: 20,
+
+  /** 
+    The height of the menu and ultimately the menu itself.
+
+    @type Integer
+  */
+  menuHeight: null,
+  
+  /** 
+    The height for each menu item and ultimately the menu itself.
+
+    @readOnly
+    @type String
+  */
+  itemHeightKey: null,
+
+  /**
+    If YES, titles will be localized before display.
+  */
+  localize: YES,
+
+  /** 
+    This key defined which key represents Separator.
+
+    @readOnly
+    @type Boolean
+  */  
+  itemSeparatorKey: null,
+
+  /** 
+    This key is need to assign an action to the menu item.
+
+    @readOnly
+    @type String
+  */
+  itemActionKey: null,
+
+  /** 
+    The key for setting a checkbox for the menu item.
+
+    @readOnly
+    @type String
+  */
+  itemCheckboxKey: null,
+
+  /** 
+    The key for setting a branch for the menu item.
+
+    @readOnly
+    @type String
+  */
+  itemBranchKey: null,
+  
+  /** 
+    The key for setting a branch for the menu item.
+
+    @readOnly
+    @type String
+  */
+  itemShortCutKey: null,
+  
+  /** 
+    The key for setting Key Equivalent for the menu item.
+
+    @readOnly
+    @type String
+  */
+  itemKeyEquivalentKey: null,
+  
+  /** 
+    The key for setting Key Equivalent for the menu item.
+
+    @readOnly
+    @type String
+  */
+  itemTargetKey: null,
+  
+  /** @private */
+  isKeyPane: YES,
+
+  /** @private */
+  preferType: SC.PICKER_MENU,
+
+  /**
+    Define the current Selected Menu Item.
+
+    type SC.MenuItemView
+  */
+  currentSelectedMenuItem : null,
+
+  /**
+    Define the current Selected Menu Item.
+
+    @type SC.MenuItemView
+  */
+  previousSelectedMenuItem : null,
+
+  /**
+    The anchor for this Menu
+
+    @type ButtonView/MenuItemView
+  */
+  anchor: null,
+  
+  /** @private
+
+    Array of Display Items which is produced by displayItems function
+  */
+  displayItemsArray: null,
+  
+  /**
+    Set of Menu Item Views created from items array
+    
+    @type SC.Array
+  */
+  menuItemViews: [],
+
+  /** 
+    Example view which will be used to create the Menu Items
+    
+    @default SC.MenuItemView
+    @type SC.View
+  */
+  exampleView: SC.MenuItemView,
+  
+  /**
+    @private
+    
+    Overwrite the popup function of the pickerPane
+  */
+  popup: function(anchorViewOrElement, preferMatrix) {  
+    var anchor = anchorViewOrElement.isView ? anchorViewOrElement.get('layer') : anchorViewOrElement;
+    this.beginPropertyChanges();
+    this.set('anchorElement',anchor) ;
+    this.set('anchor',anchorViewOrElement);
+    this.set('preferType',SC.PICKER_MENU) ;
+    if(preferMatrix) this.set('preferMatrix',preferMatrix) ;
+    this.endPropertyChanges();
+    this.append() ;
+    this.positionPane() ;
+    this.becomeKeyPane() ;
+  },
+  
+  /**
+    This computed property is generated from the items array
+
+    @property
+    @type {String}
+  */
+  displayItems: function() {
+    var items = this.get('items') ;
+    var loc = this.get('localize') ;
+    var keys = null,itemType, cur ;
+    var ret = [], rel;
+    var max = items.get('length') ;
+    var idx, item ;
+    var fetchKeys = SC._menu_fetchKeys ;
+    var fetchItem = SC._menu_fetchItem ;
+    var menuHeight = 0 ;
+    // loop through items and collect data
+    for (idx = 0; idx < max; ++idx) {
+      item = items.objectAt(idx) ;
+      if (SC.none(item)) continue ;
+      itemType = SC.typeOf(item) ;
+      rel = ret.length;
+      if (itemType === SC.T_STRING) {
+        ret[rel] = SC.Object.create({ title: item.humanize().titleize(),   
+	                        value: item, isEnabled: YES, icon: null, 
+	                        isSeparator: null, action: null, isCheckbox: NO, 
+	                        menuItemNumber: idx, isShortCut: NO, isBranch: NO,
+	                        itemHeight: 20, subMenu: null,keyEquivalent: null,
+	                        target:null });
+        menuHeight = menuHeight+20 ;
+      } else if (itemType !== SC.T_ARRAY) {
+          if (keys === null) keys = this.menuItemKeys.map(fetchKeys, this) ;
+          cur = keys.map(fetchItem, item) ;
+          cur[cur.length] = idx ;
+          if (!keys[0] && item.toString) cur[0] = item.toString() ;
+          if (!keys[1]) cur[1] = item ;
+          if (!keys[2]) cur[2] = YES ;
+          if (!cur[9]) cur[9] = this.get('itemHeight') ;
+          if (cur[4]) cur[9] = 9 ;
+          menuHeight = menuHeight+cur[9] ;
+          if (loc && cur[0]) cur[0] = cur[0].loc() ;
+          ret[rel] = SC.Object.create({ title: cur[0], value: cur[1],
+                                              isEnabled: cur[2], icon: cur[3], 
+                                              isSeparator: cur[4], action: cur[5],
+                                              isCheckbox: cur[6], isShortCut: cur[7],
+                                              menuItemNumber: idx, isBranch: cur[8],
+                                              itemHeight: cur[9], subMenu: cur[10], 
+                                              keyEquivalent: cur[11], target: cur[12] }) ;                         
+      }
+    }
+    this.set('menuHeight',menuHeight);
+    this.set('displayItemsArray',ret);
+    return ret;
+  }.property('items').cacheable(),
+
+  /**
+    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.
+  */
+  itemContentDidChange: function() {
+    this.notifyPropertyChange('displayItems') ;
+  },
+
+  // ..........................................................
+  // RENDERING/DISPLAY SUPPORT
+  // 
+  displayProperties: ['displayItems', 'value'],
+
+  /**
+    The render function which depends on the displayItems and value
+  */
+  render: function(context, firstTime) {
+    if (SC.BENCHMARK_MENU_PANE_RENDER) {
+      var bkey = '%@.render'.fmt(this) ;
+      SC.Benchmark.start(bkey);
+    }
+    // collect some data 
+    var items = this.get('displayItems') ;
+    //var ret = sc_super();
+    // regenerate the buttons only if the new display items differs from the
+    // last cached version of it.
+
+    var last = this.get('_menu_displayItems') ;
+    if (firstTime || (items !== last)) {
+      if(!this.get('isEnabled') || !this.get('contentView')) return ;
+      var menuHeight = this.get('menuHeight');
+      this.set('_menu_displayItems',items) ; // save for future
+      context.addStyle('text-align', 'center') ;
+      var itemWidth = this.get('itemWidth') ;
+      if (SC.none(itemWidth)) {
+        itemWidth = this.get('layout').width || 100;
+        this.set('itemWidth',itemWidth) ; 
+      }
+      this.renderChildren(context,items) ;
+      context.push("<div class='top-left-edge'></div>",
+       "<div class='top-edge'></div>",
+       "<div class='top-right-edge'></div>",
+       "<div class='right-edge'></div>",
+       "<div class='bottom-right-edge'></div>",
+       "<div class='bottom-edge'></div>",
+       "<div class='bottom-left-edge'></div>",
+       "<div class='left-edge'></div>");
+    }
+    else {
+      this.get('menuItemViews').forEach( function(menuItemView) { 
+        menuItemView.updateLayer();
+      }, this) ;
+    }
+    if (SC.BENCHMARK_MENU_PANE_RENDER) SC.Benchmark.end(bkey) ;
+    //return ret ;
+  },
+
+  /**
+    This method is used to observe the menuHeight and set the layout accordingly
+    and position the pane.
+    
+    @observes menuHeight
+  */
+  menuHeightObserver: function() {
+    var height = this.layout.height ;
+    var menuHeight = this.get('menuHeight') ; 
+    if( height !== menuHeight) {
+      this.adjust('height',menuHeight).updateLayout() ;
+    }
+  }.observes('menuHeight'),
+  
+  /**
+    Actually generates the menu 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.
+  */
+  renderChildren: function(context,items) {
+    if(!this.get('isEnabled')) return ;
+    var menuItemViews = [];
+    var len = items.length ;
+    var content = SC.makeArray(items) ;
+    for (var idx = 0; idx < len; ++idx) {
+      var item = items[idx];
+      var itemTitle = item.get('title') ;
+      var itemValue = item.get('value') ;
+      var itemIsEnabled = item.get('isEnabled') ;
+      var itemIcon = item.get('icon') ;
+      var isSeparator = item.get('isSeparator') ;
+      var itemAction = item.get('action') ;
+      var isCheckbox = item.get('isCheckbox') ;
+      var menuItemNumber = item.get('menuItemNumber') ;
+      var isShortCut = item.get('isShortCut') ;
+      var isBranch   = item.get('isBranch') ;
+      var itemSubMenu = item.get('subMenu') ;
+      var itemHeight = item.get('itemHeight') ;
+      var itemKeyEquivalent = item.get('keyEquivalent') ;
+      var itemTarget = item.get('target') ;
+      var itemWidth = this.get('itemWidth') ;
+      
+      var itemView = this.createChildView(
+        this.exampleView, {
+          owner : itemView,
+          displayDelegate : itemView,
+          parentPane: this,
+          anchor : this.get('anchor'),
+          isVisible : YES,
+          contentValueKey : 'title',
+          contentIconKey : 'icon',
+          contentCheckboxKey: this.itemCheckboxKey,
+          contentIsBranchKey :'branchItem',  
+          isSeparatorKey : 'separator',
+          shortCutKey : 'shortCut',  
+          action : itemAction,
+          target : itemTarget,
+          layout : { top: 0, left: 0, width: itemWidth, height: itemHeight },
+          isEnabled : itemIsEnabled,
+          itemHeight : itemHeight,
+          itemWidth : itemWidth,
+          keyEquivalent : itemKeyEquivalent,
+          content : SC.Object.create({
+            title : itemTitle,
+            value : itemValue,
+            icon : itemIcon,
+            separator : isSeparator,
+            action : itemAction,
+            checkbox : isCheckbox,
+            shortCut : isShortCut,
+            branchItem : isBranch,
+            subMenu : itemSubMenu
+          }),
+        rootElementPath : [menuItemNumber]
+      });
+      context = context.begin(itemView.get('tagName')) ;
+      itemView.prepareContext(context, YES) ;
+      context = context.end() ;
+      menuItemViews.push(itemView) ;
+      this.set('menuItemViews',menuItemViews) ;
+    }
+  },
+  
+  /**
+    Get the current selected Menu item
+    
+    @returns void
+  */
+  currentSelectedMenuItemObserver: function(){
+    var currentSelectedMenuItem = this.get('currentSelectedMenuItem') ;
+    var previousSelectedMenuItem = this.get('previousSelectedMenuItem') ;
+    if(previousSelectedMenuItem){
+      var subMenu = previousSelectedMenuItem.isSubMenuAMenuPane() ;
+      if(subMenu) subMenu.remove() ;
+      previousSelectedMenuItem.resignFirstResponder() ;
+    }
+    if(currentSelectedMenuItem) {
+      currentSelectedMenuItem.becomeFirstResponder() ;
+    }
+  }.observes('currentSelectedMenuItem'),
+  
+  /**
+    This function returns whether the anchor is of type of MenuItemView
+    
+    @returns Boolean
+  */
+  isAnchorMenuItemType: function() {
+    var anchor = this.get('anchor') ;
+    return (anchor && anchor.kindOf(SC.MenuItemView)) ;
+  },
+  
+  //..........................................................
+  // mouseEvents and keyBoard Events handling
+  //..........................................................
+
+  /**
+    Perform actions equivalent for the keyBoard Shortcuts
+
+    @param {String} keystring
+    @param {SC.Event} evt
+    @returns {Boolean}  YES if handled, NO otherwise
+  */
+  performKeyEquivalent: function(keyString,evt) {
+    var items, len, menuItems, item, keyEquivalent, 
+        action, isEnabled, target;
+    if(!this.get('isEnabled')) return NO ;
+
+    items = this.get('displayItemsArray') ;
+    if (!items) return NO;
+
+    len = items.length ;
+    menuItems = this.get('menuItemViews');
+    for(var idx=0; idx<len; ++idx) {
+      item          = items[idx] ;
+      keyEquivalent = item.get('keyEquivalent') ;
+      action        = item.get('action') ;
+      isEnabled     = item.get('isEnabled') ;
+      target        = item.get('target') || this ;
+      if(keyEquivalent == keyString && isEnabled) {
+        if(menuItems && menuItems[idx]) {
+          var retVal = menuItems[idx].triggerAction(evt);
+          return retVal;
+        }
+      }
+    }
+    return YES ;
+  },
+  
+  //Mouse and Key Events
+  
+  /** @private */
+  mouseDown: function(evt) {
+    return YES ;
+  },
+  
+  /** 
+    @private 
+    
+    Get the anchor and send the event to the anchor in case the 
+    current Menu is a subMenu
+  */
+  mouseUp: function(evt) {
+    this.remove() ;
+    var anchor = this.get('anchor') ;
+    if(this.isAnchorMenuItemType()) this.sendEvent('mouseUp', evt, anchor) ;
+    return YES ;
+  },
+  
+  /** 
+    @private 
+    
+    This function gets called from the Menu Item in order to set the 
+    current Selected Menu Item and move the selection
+  */
+  moveDown: function(menuItem) {
+    var currentSelectedMenuItem = this.getNextEnabledMenuItem(menuItem) ;
+    this.set('currentItemSelected',currentSelectedMenuItem) ;
+    if(menuItem) menuItem.resignFirstResponder() ;
+    currentSelectedMenuItem.becomeFirstResponder() ;
+  },
+  
+  /** 
+    @private 
+    
+    This function gets called from the Menu Item in order to set the 
+    current Selected Menu Item and move the selection
+  */
+  moveUp: function(menuItem) {
+    var currentSelectedMenuItem = this.getPreviousEnabledMenuItem(menuItem) ;
+    this.set('currentItemSelected',currentSelectedMenuItem) ;
+    if(menuItem) menuItem.resignFirstResponder() ;
+    currentSelectedMenuItem.becomeFirstResponder() ;
+    return YES ;
+  },
+  
+  /**
+    Get the previous Enabled Menu Item which is not a separator
+    
+    @returns MenuItemView
+  */
+  getPreviousEnabledMenuItem : function(menuItem) {
+    var menuItemViews = this.get('menuItemViews') ;
+    if(menuItemViews) {
+      var len = menuItemViews.length ;
+      var idx = (menuItemViews.indexOf(menuItem) === -1) ? len : menuItemViews.indexOf(menuItem) ;
+      var isEnabled = NO ;
+      var isSeparator = NO ;
+      while(--idx >= 0 && !isEnabled && !isSeparator) {
+        isEnabled = menuItemViews[idx].get('isEnabled') ;
+        var content = menuItemViews[idx].get('content') ;
+        if(content) {
+          isSeparator = content.get(menuItemViews[idx].get('isSeparatorKey'));
+        }
+      }
+      if(idx === -1) idx = len - 1;
+      return menuItemViews[idx];
+    }
+  },
+
+  /**
+    Get the next Enabled Menu Item which is not a separator
+    
+    @returns MenuItemView
+  */
+  getNextEnabledMenuItem : function(menuItem) {
+    var menuItemViews = this.get('menuItemViews') ;
+    if(menuItemViews) {
+      var len = menuItemViews.length ;
+      var idx = (menuItemViews.indexOf(menuItem) === -1) ? 0 : menuItemViews.indexOf(menuItem) ;
+      var isEnabled = NO ;
+      var isSeparator = NO ;
+      while(!isEnabled && !isSeparator && ++idx < len) {
+        isEnabled = menuItemViews[idx].get('isEnabled') ;
+        var content = menuItemViews[idx].get('content') ;
+        if(content) {
+          isSeparator = content.get(menuItemViews[idx].get('isSeparatorKey'));
+        }
+      }
+      if(idx === len) idx = 0 ;
+      return menuItemViews[idx] ;
+    }
+  },
+  
+  /** 
+    @private - click away picker. 
+    
+    Override to pass the event to the parent Menu
+    in case the current Menu is a subMenu
+    
+    @returns Boolean
+  */
+  modalPaneDidClick: function(evt) {
+    var f = this.get("frame");
+    var currentSelectedMenuItem = this.get('currentSelectedMenuItem');
+    if(currentSelectedMenuItem) {
+      var anchor = currentSelectedMenuItem.getAnchor();
+      if(anchor) {
+        var parentMenu =  anchor.parentMenu();
+        if(parentMenu.kindOf(SC.MenuPane)) parentMenu.modalPaneDidClick(evt);
+      }
+    }
+    if(!this.clickInside(f, evt)) {
+      this.remove() ;
+    }
+    return YES;
+  },
+  
+  /** 
+    Get the Menu Item based on the key,value passed
+    @params {String} key 
+    @params {String} value 
+    
+    @returns SC.MenuItemView
+  */
+  getMenuItem: function(key,value) {
+    var displayItems = this.get('displayItemsArray') ;
+    var menuItemViews = this.get('menuItemViews') ;
+    if(displayItems && menuItemViews) {
+      var idx = displayItems.get(key).indexOf(value);
+      if(idx !== -1) return menuItemViews[idx];
+      else return null;
+    }
+    else return null;
+  }
+  
+  
+});
+
+SC._menu_fetchKeys = function(k) {
+  return this.get(k) ;
+};
+SC._menu_fetchItem = function(k) {
+  if (!k) return null ;
+  return this.get ? this.get(k) : this[k] ;
+};