rsence 2.0.9.23 → 2.1.0

data/js/foundation/view/view.js

@@ -552,7 +552,7 @@ HView = HClass.extend({
   * ++
   **/
   _setCSS: function(_additional){
-    var _cssStyle = 'display:none;overflow:hidden;visibility:hidden;';
+    var _cssStyle = 'overflow:hidden;visibility:hidden;';
     if(this.isAbsolute){
       _cssStyle += 'position:absolute;';
     } else {
@@ -568,20 +568,18 @@ HView = HClass.extend({
   * ++
   **/
   _getParentElemId: function(){
-    var _parentElemId;
-    // if the parent does not have an element:
-    if(this.parent.elemId === undefined) {
-      _parentElemId = 0;
-    }
-    // if a subview element is defined in the template, use it:
-    else if(this.parent.markupElemIds&&this.parent.markupElemIds['subview']){
-      _parentElemId = this.parent.markupElemIds['subview'];
+    var _parent = this.parent;
+    return ((_parent.elemId === undefined)?0:((_parent._getSubviewId===undefined)?0:_parent._getSubviewId()));
+  },
+  
+  _getSubviewId: function(){
+    if(this.markupElemIds&&this.markupElemIds.subview!==undefined){
+      return this.markupElemIds.subview;
     }
-    // otherwise, use main elemId
-    else {
-      _parentElemId = this.parent.elemId;
+    else if(this.elemId !== undefined) {
+      return this.elemId;
     }
-    return _parentElemId;
+    return 0;
   },
   
 /** --
@@ -616,30 +614,52 @@ HView = HClass.extend({
   *
   **/
   drawRect: function() {
+    if(!this.rect.isValid){
+      console.log('invalid rect:',this.rect);//,ELEM.get(this.elemId));
+    }
+    if(!this.parent){
+      console.log('no parent:',ELEM.get(this.elemId));
+    }
     if (this.parent && this.rect.isValid) {
-      var _this = this,
-          _elemId = _this.elemId,
-          _styl = ELEM.setStyle,
-          _rect = _this.rect;
-    
-      _styl( _elemId, 'left', _this.flexLeft?(_rect.left+'px'):'auto', true);
-      _styl( _elemId, 'top', _this.flexTop?(_rect.top+'px'):'auto', true);
-      _styl( _elemId, 'right', _this.flexRight?(_this.flexRightOffset+'px'):'auto', true);
-      _styl( _elemId, 'bottom', _this.flexBottom?(_this.flexBottomOffset+'px'):'auto', true);
-      _styl( _elemId, 'width', (_this.flexLeft&&_this.flexRight)?'auto':(_rect.width+'px'), true);
-      _styl( _elemId, 'height', (_this.flexTop&&_this.flexBottom)?'auto':(_rect.height+'px'), true);
-      
+      var
+      i = 0,
+      _this = this,
+      _elemId = _this.elemId,
+      _styl = ELEM.setStyle,
+      _rect = _this.rect,
+      _auto = 'auto',
+      _left = _this.flexLeft?_rect.left:_auto,
+      _top  = _this.flexTop?_rect.top:_auto,
+      _right = _this.flexRight?_this.flexRightOffset:_auto,
+      _bottom = _this.flexBottom?_this.flexBottomOffset:_auto,
+      _width = (_this.flexLeft&&_this.flexRight)?_auto:_rect.width,
+      _height = (_this.flexTop&&_this.flexBottom)?_auto:_rect.height,
+      _styles = [
+        [ 'left',   _left   ],
+        [ 'top',    _top    ],
+        [ 'right',  _right  ],
+        [ 'bottom', _bottom ],
+        [ 'width',  _width  ],
+        [ 'height', _height ],
+        [ 'display', _this.displayMode ]
+      ],
+      _key, _value;
       // Show the rectangle once it gets created, unless visibility was set to
       // hidden in the constructor.
-      if(_this.isHidden === undefined || _this.isHidden === false) {
-        _styl( _elemId, 'visibility', 'inherit', true);
+      if(!_this.isHidden) {
+        _styles.push( [ 'visibility', 'inherit' ] );
       }
-    
-      _styl( _elemId, 'display', _this.displayMode, true);
-    
-      _this._updateZIndex();
-    
-      if (_this._cachedLeft !== _rect.left || _this._cachedTop !== _rect.top) {
+      for(;i<_styles.length;i++){
+        _key = _styles[i][0];
+        _value = _styles[i][1];
+        if( i < 6 && _value !== _auto ){
+          _value += 'px';
+        }
+        _styl(_elemId,_key,_value,true);
+      }
+      (this.drown === false) && _this._updateZIndex();
+      
+      if ( _this._cachedLeft !== _rect.left || _this._cachedTop !== _rect.top) {
         _this.invalidatePositionCache();
         _this._cachedLeft = _rect.left;
         _this._cachedTop = _rect.top;
@@ -688,15 +708,7 @@ HView = HClass.extend({
       }
       this.drawSubviews();
       if(this.options.style){
-        var
-        _style = this.options.style,
-        _styleItem, _styleKey, _styleValue, i = 0;
-        for(;i<_style.length;i++){
-          _styleItem  = _style[i];
-          _styleKey   = _styleItem[0];
-          _styleValue = _styleItem[1];
-          this.setStyle(_styleKey,_styleValue);
-        }
+        this.setStyles( this.options.style );
       }
       if(this.options.html){
         this.setHTML(this.options.html);
@@ -756,7 +768,7 @@ HView = HClass.extend({
   **/
   markupElemNames: ['bg', 'label', 'state', 'control', 'value', 'subview'],
   drawMarkup: function() {
-    ELEM.setStyle(this.elemId, 'display', 'none', true);
+    // ELEM.setStyle(this.elemId, 'display', 'none', true);
     
     // continue processing from here on:
     var _markupStatus = this._loadMarkup();
@@ -774,7 +786,7 @@ HView = HClass.extend({
       }
     }
     
-    ELEM.setStyle(this.elemId, 'display', this.displayMode );
+    // ELEM.setStyle(this.elemId, 'display', this.displayMode );
     return this;
   },
   
@@ -818,8 +830,22 @@ HView = HClass.extend({
   * A string with the html escaped.
   **/
   escapeHTML: function( _html ) {
-    return _html.replace(/&/gmi, '&amp;').replace(/>/gmi, '&gt;').replace(/</gmi, '&lt;');
-  },
+    if( typeof _html !== 'string' ) {
+      return _html.toString();
+    }
+    for( var i=0, _reFrom, _reTo, _reArr = this._escapeHTMLArr; i < _reArr.length; i++ ){
+      _reFrom = _reArr[i][0];
+      _reTo = _reArr[i][1];
+      _html = _html.replace( _reFrom, _reTo );
+    } 
+    return _html;
+  },
+  _escapeHTMLArr: [
+    [ new RegExp( /&/gmi ), '&amp;' ],
+    [ new RegExp( />/gmi ), '&gt;' ],
+    [ new RegExp( /</gmi ), '&lt;' ],
+    [ new RegExp( /\n/gmi ), '<br>' ]
+  ],
   
 /** = Description
   *
@@ -853,9 +879,18 @@ HView = HClass.extend({
       var _winSize = ELEM.windowSize();
       return [ _winSize[0], _winSize[1] ];
     }
-    else{
-      var _rect = this.parent.rect;
-      return [ _rect.width, _rect.height ];
+    else {
+      var
+      _rect = this.parent.rect,
+      _width = _rect.width,
+      _height = _rect.height;
+      if (this.parent.flexLeft && this.parent.flexRight){
+        _width = parseInt( ELEM.getStyle(this.parent.elemId,'width',true), 10 );
+      }
+      if (this.parent.flexBottom && this.parent.flexTop){
+        _height = parseInt( ELEM.getStyle(this.parent.elemId,'height',true), 10 );
+      }
+      return [ _width, _height ];
     }
   },
   
@@ -866,17 +901,6 @@ HView = HClass.extend({
     return [ 0, 0, _parentSize[0], _parentSize[1] ];
   },
   
-  parentSize: function(){
-    var _parentElemId = this.parent.elemId;
-    if ( _parentElemId === 0 ) {
-      return ELEM.windowSize();
-    }
-    else {
-      ELEM.flushLoop();
-      return ELEM.getSize( _parentElemId );
-    }
-  },
-  
   minWidth: 0,
   setMinWidth: function(_minWidth){
     this.minWidth = _minWidth;
@@ -926,7 +950,6 @@ HView = HClass.extend({
         _validHeight  = (typeof _height  === 'number'),
         _right,
         _bottom;
-        
         if(_arrLen === 6){
           var
           _parentSize = this.parentSize(),
@@ -973,8 +996,8 @@ HView = HClass.extend({
           _validHeight && this.setMinHeight( _height );
           _bottom = _parentHeight - _bottomOffset;
         }
-        
         this.rect = HRect.nu(_leftOffset,_topOffset,_right,_bottom);
+        
       }
       else {
         console.log(_throwPrefix + 'the length has to be either 4 or 6.');
@@ -1007,7 +1030,19 @@ HView = HClass.extend({
     }
     return this;
   },
-
+  
+  setStyles: function(_styles){
+    var
+    _styleItem, _styleKey, _styleValue, i = 0;
+    for(;i<_styles.length;i++){
+      _styleItem  = _styles[i];
+      _styleKey   = _styleItem[0];
+      _styleValue = _styleItem[1];
+      this.setStyle(_styleKey,_styleValue);
+    }
+    return this;
+  },
+  
 /** = Description
   * Returns a style of the main DOM element of the component.
   * Utilizes +ELEM+ cache to perform the action.
@@ -1043,7 +1078,7 @@ HView = HClass.extend({
     if (!this['markupElemIds']){
       console.log('Warning, setStyleOfPart: no markupElemIds');
     }
-    else if (!this.markupElemIds[_partName]) {
+    else if (this.markupElemIds[_partName]===undefined) {
       console.log('Warning, setStyleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
     }
     else {
@@ -1065,7 +1100,7 @@ HView = HClass.extend({
   *
   **/
   styleOfPart: function(_partName, _name) {
-    if (!this.markupElemIds[_partName]) {
+    if (this.markupElemIds[_partName]===undefined) {
       console.log('Warning, styleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
       return '';
     }
@@ -1085,7 +1120,7 @@ HView = HClass.extend({
   *
   **/
   setMarkupOfPart: function( _partName, _value ) {
-    if (!this.markupElemIds[_partName]) {
+    if (this.markupElemIds[_partName]===undefined) {
       console.log('Warning, setMarkupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
     }
     else {
@@ -1106,7 +1141,7 @@ HView = HClass.extend({
   *
   **/
   markupOfPart: function(_partName) {
-    if (!this.markupElemIds[_partName]) {
+    if (this.markupElemIds[_partName]===undefined) {
       console.log('Warning, markupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
       return '';
     }
@@ -1121,16 +1156,12 @@ HView = HClass.extend({
   *
   **/
   hide: function() {
-    if(!this.isHidden) {
-      var _setStyl = ELEM.setStyle,
-          _elemId  = this.elemId;
-      _setStyl(_elemId,'visibility', 'hidden');
-      // Required for the old, buggy Mozilla engines ( Firefox versions below 3.0 )
-      // At least text fields would show through from hidden parent elements.
-      // Disabled, because keeping the display as none causes hidden views to have no dimensions at all.
-      // _setStyl(_elemId,'display', 'none');
-      this.isHidden = true;
-    }
+    ELEM.setStyle(this.elemId,'visibility', 'hidden', true);
+    // Required for the old, buggy Mozilla engines ( Firefox versions below 3.0 )
+    // At least text fields would show through from hidden parent elements.
+    // Disabled, because keeping the display as none causes hidden views to have no dimensions at all.
+    // ELEM.setStyle(this.elemId,'display', 'none');
+    this.isHidden = true;
     return this;
   },
   
@@ -1142,13 +1173,9 @@ HView = HClass.extend({
   *
   **/
   show: function() {
-    if(this.isHidden) {
-      var _setStyl = ELEM.setStyle,
-          _elemId  = this.elemId;
-      _setStyl(_elemId,'visibility', 'inherit');
-      _setStyl(_elemId,'display', this.displayMode);
-      this.isHidden = false;
-    }
+    ELEM.setStyle(this.elemId,'display', this.displayMode, true);
+    ELEM.setStyle(this.elemId,'visibility', 'inherit', true);
+    this.isHidden = false;
     return this;
   },
   
@@ -1628,7 +1655,7 @@ HView = HClass.extend({
     ELEM.setCSS(_stringElem, "visibility:hidden;"+_extraCss);
     ELEM.setHTML(_stringElem, _string);
     // ELEM.flushLoop();
-    var _visibleSize=ELEM.getVisibleSize(_stringElem);
+    var _visibleSize=ELEM.getSize(_stringElem);
     // console.log('visibleSize',_visibleSize);
     ELEM.del(_stringElem);
     return [_visibleSize[0]+_visibleSize[0]%2,_visibleSize[1]+_visibleSize[1]%2];
@@ -1649,20 +1676,13 @@ HView = HClass.extend({
 /** Returns the X coordinate that has the scrolled position calculated.
   **/
   pageX: function() {
-    var _x = 0,
-        _elem = this;
-    while(_elem) {
-      if(_elem.elemId && _elem.rect) {
-        _x += ELEM.get(_elem.elemId).offsetLeft;
-        _x -= ELEM.get(_elem.elemId).scrollLeft;
-      }
-      if(_elem.markupElemIds&&_elem.markupElemIds.subview){
-        _x += ELEM.get(_elem.markupElemIds.subview).offsetLeft;
-        _x -= ELEM.get(_elem.markupElemIds.subview).scrollLeft;
-      }
-      _elem = _elem.parent;
-    }
-    return _x;
+    return ELEM._getVisibleLeftPosition( this.elemId );
+  },
+  
+/** Returns the Y coordinate that has the scrolled position calculated.
+  **/
+  pageY: function() {
+    return ELEM._getVisibleTopPosition( this.elemId );
   },
   
 /** = Description
@@ -1712,25 +1732,6 @@ HView = HClass.extend({
     return this;
   },
   
-/** Returns the Y coordinate that has the scrolled position calculated.
-  **/
-  pageY: function() {
-    var _y = 0,
-        _elem = this;
-    while(_elem) {
-      if(_elem.elemId && _elem.rect) {
-        _y += ELEM.get(_elem.elemId).offsetTop;
-        _y -= ELEM.get(_elem.elemId).scrollTop;
-      }
-      if(_elem.markupElemIds&&_elem.markupElemIds.subview){
-        _y += ELEM.get(_elem.markupElemIds.subview).offsetTop;
-        _y -= ELEM.get(_elem.markupElemIds.subview).scrollTop;
-      }
-      _elem = _elem.parent;
-    }
-    return _y;
-  },
-  
 /** Returns the HPoint that has the scrolled position calculated.
   **/
   pageLocation: function() {

data/js/lists/listitems/listitems.js

@@ -9,19 +9,19 @@
 
 /*** = Description
   ** HListItems is uses an array-packed list of hash objects as its value.
-  ##
-  ## == Value as Array of Hashes:
+  **
+  ** == Value as Array of Hashes:
   ** Each item in the array should have a 'label' and a 'value' key.
   ** The 'label' key of each item is used as the label for the HRadiobutton in the list.
   ** The 'value' key of each item is the value used for the output.
-  ##
-  ## == Value as Array of strings or numerals
-  ## Each Item like with hash, except the item is both label and value. Each item should
-  ## be unique.
-  ##
-  ## == Important
-  ** The parent object of a HListItem needs to be a compatible hash, like HRadiobuttonList.
-  ##
+  **
+  ** == Value as Array of strings or numerals
+  ** Each Item like with hash, except the item is both label and value. Each item should
+  ** be unique.
+  **
+  ** == Important
+  ** The parent object of a HListItem needs to be a compatible component, like HRadioButtonList.
+  **
   ***/
 var//RSence.Lists
 HListItems = HValueResponder.extend({

data/js/lists/propertylist/propertylist.js

@@ -0,0 +1,574 @@
+/*   RSence
+ *   Copyright 2010 Riassence Inc.
+ *   http://riassence.com/
+ *
+ *   You should have received a copy of the GNU General Public License along
+ *   with this software package. If not, contact licensing@riassence.com
+ */
+
+/*** = Description
+  ** HPropertyList uses any JSON-compliant structure as its value and displays
+  ** its content hierarchically in three columns:
+  ** - Key
+  ** - Type
+  ** - Value
+  **
+  ** Its current purpose is to view JSON data in a structured way. I'll be
+  ** extended later as a full, generic JSON data editor.
+  **
+  ** NOTE: HPropertyList does not work in any version of Internet Explorer yet.
+  **
+  ***/
+var//RSence.Lists
+HPropertyList = HControl.extend({
+  
+  defaultEvents: {
+    click: true
+  },
+  
+  controlDefaults: HControlDefaults.extend({
+    keyColumnWidth: 100,
+    hideTypeColumn: false,
+    useEditor: false,
+    rowHeight: 15,
+    keyIndent: 8
+  }),
+  
+  click: function(x,y){
+    if(this.options.useEditor){
+      var
+      clickY = y-this.contentView.pageY(),
+      itemNum = Math.floor(clickY/this.options.rowHeight);
+      if((clickY < 0) || (itemNum > this.valueTokens.length-1)){
+        this.editor.hide();
+        return;
+      }
+      this.editItem( itemNum );
+    }
+  },
+  
+  keyColumnRight: function(){
+    return this.options.keyColumnWidth;
+  },
+  typeColumnLeft: function(){
+    return this.keyColumnRight();
+  },
+  typeColumnRight: function(){
+    return this.options.keyColumnWidth + 60;
+  },
+  
+  valueColumnLeft: function(){
+    if(this.options.hideTypeColumn){
+      return this.keyColumnRight();
+    }
+    else {
+      return this.typeColumnRight();
+    }
+  },
+  
+  drawSubviews: function(){
+    
+    var borderAndBg = ELEM.make(this.elemId);
+    ELEM.setCSS(borderAndBg,'position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e6e6e6;border:1px solid #999;');
+    
+    this.markupElemIds = {
+      bg: borderAndBg
+    };
+    
+    this.contentView = HScrollView.extend({
+      click: function(x,y){
+        this.parent.click(x,y);
+        return true;
+      }
+    }).nu(
+      [ 1, 25, null, null, 1, 1 ],
+      this, {
+        scrollY: 'auto',
+        scrollX: false,
+        events: {
+          click: true
+        }
+      }
+    );
+    
+    var separatorParentElemId = ELEM.make(this.contentView.elemId);
+    ELEM.setCSS( separatorParentElemId, 'position:absolute;left:0;top:0;right:0;' );
+    this.separatortParentElemId = separatorParentElemId;
+
+    this.propertyItems = [];
+    // Editor initialization
+    if(this.options.useEditor){
+      this.editorValue = HValue.nu(
+        false, {
+          top: 0,
+          left: 0,
+          type: 'h',
+          name: '--',
+          value: {}
+        }
+      );
+      this.editor = HPropertyListEditor.nu(
+        [0,0,null,this.options.rowHeight+2,0,null],
+        this.contentView, {
+          propertyItems: this.propertyItems,
+          visible: false,
+          valueObj: this.editorValue
+        }
+      );
+    }
+    
+    // Set row style heights from options
+    var rowHeightStyle = 'height:'+this.options.rowHeight+'px;';
+    this.keyRowStyle += rowHeightStyle;
+    this.typeRowStyle += rowHeightStyle;
+    this.valueRowStyle += rowHeightStyle;
+    this.rowSeparatorStyle += rowHeightStyle;
+    
+    // Style common font style
+    this.contentView.setStyle('font-size','11px');
+    
+    // Create the key column
+    this.keyColumn = HView.nu(
+      [ 0, 0, this.keyColumnRight(), 24 ],
+      this.contentView, {
+        style: [ [ 'border-right', '1px solid #999' ] ]
+      }
+    );
+    
+    // Create the type column
+    if(!this.options.hideTypeColumn){
+      this.typeColumn = HView.nu(
+        [ this.typeColumnLeft(), 0, 60, 24 ],
+        this.contentView, {
+          style: [ [ 'border-right', '1px solid #999' ] ]
+        }
+      );
+    }
+    
+    // Create the value column
+    this.valueColumn = HView.nu(
+      [ this.valueColumnLeft(), 0, 0, 24, 0, null ],
+      this.contentView
+    );
+    
+    // Create the column headers
+    this.header = HView.extend({
+      drawSubviews: function(){
+        var
+        keyColumnWidth = this.parent.options.keyColumnWidth;
+        this.keyLabel = HView.nu(
+          [ 0, 0, this.parent.keyColumnRight(), 24 ],
+          this, {
+            html: '<b>Key</b>',
+            style: [
+              [ 'text-align', 'middle' ],
+              [ 'text-indent', '16px' ],
+              [ 'line-height', '24px' ],
+              [ 'font-size', '13px' ],
+              [ 'border-right', '3px double #999' ]
+            ]
+          }
+        );
+        if(!this.parent.options.hideTypeColumn){
+          this.typeLabel = HView.nu(
+            [ this.parent.typeColumnLeft(), 0, 60, 24 ],
+            this, {
+              html: '<b>Type</b>',
+              style: [
+                [ 'text-align', 'middle' ],
+                [ 'text-indent', '8px' ],
+                [ 'line-height', '24px' ],
+                [ 'font-size', '13px' ],
+                [ 'padding-right', '1px' ],
+                [ 'border-right', '1px solid #999' ]
+              ]
+            }
+          );
+        }
+        this.valueLabel = HView.nu(
+          [ this.parent.valueColumnLeft(), 0, 80, 24, 0, null ],
+          this, {
+            html: '<b>Value</b>',
+            style: [
+              [ 'text-align', 'middle' ],
+              [ 'text-indent', '8px' ],
+              [ 'line-height', '24px' ],
+              [ 'font-size', '13px' ]
+            ]
+          }
+        );
+      }
+    }).nu(
+      [ 0, 0, null, 24, 0, null ],
+      this, {
+        style: [ [ 'border-bottom', '1px solid #999' ] ]
+      }
+    );
+    
+    // Create the resize control (invisible, just above the first column separator)
+    this.resizeColumns = HControl.extend({
+      drag: function(x,y){
+        var
+        parent = this.parent,
+        options = parent.options,
+        keyColumnWidth = x - parent.pageX(),
+        parentWidth = parent.rect.width;
+        
+        if(keyColumnWidth < 80){
+          keyColumnWidth = 80;
+        }
+        else if ( keyColumnWidth > parentWidth-140 ){
+          keyColumnWidth = parentWidth - 140;
+        }
+        
+        // Set the dragger itself
+        this.rect.offsetTo( keyColumnWidth-1, 0 ); this.drawRect();
+        
+        // Resize the key column
+        options.keyColumnWidth = keyColumnWidth;
+        
+        var
+        keyColumn = parent.keyColumn,
+        keyLabel  = parent.header.keyLabel,
+        keyRight  = parent.keyColumnRight();
+        keyColumn.rect.setRight( keyRight ); 
+        keyLabel.rect.setRight(  keyRight ); 
+        
+        var
+        valueColumn = parent.valueColumn,
+        valueLabel  = parent.header.valueLabel,
+        valueLeft   = parent.valueColumnLeft();
+        
+        valueColumn.rect.setLeft( valueLeft );
+        valueLabel.rect.setLeft( valueLeft );
+        
+        // Redraw the rects
+        keyColumn.drawRect();
+        keyLabel.drawRect();
+        valueColumn.drawRect();
+        valueLabel.drawRect();
+        
+        // Resize the type column
+        if(!options.hideTypeColumn){
+          var
+          typeColumn = parent.typeColumn,
+          typeLabel  = parent.header.typeLabel,
+          typeLeft   = parent.typeColumnLeft(),
+          typeRight  = parent.typeColumnRight();
+          
+          typeColumn.rect.setLeft( typeLeft );
+          typeColumn.rect.setRight( typeRight );
+          
+          typeLabel.rect.setLeft( typeLeft, 0 );
+          typeLabel.rect.setRight( typeRight, 0 );
+          
+          typeColumn.drawRect();
+          typeLabel.drawRect();
+        }
+        
+        if(options.useEditor){
+          parent.editor.resizeKeyColumn();
+        }
+        
+      }
+    }).nu(
+      [ this.keyColumnRight(), 0, 5, 25 ],
+      this, {
+        events: { draggable: true },
+        style: [
+          [ 'cursor', 'ew-resize' ]
+        ]
+      }
+    );
+    
+  },
+  
+  // Tokenize arrays
+  arrayTokens: function( arr, name ){
+    this.addToken( 'a', name, '('+arr.length+' items)' );
+    this.nodeProperties.left += this.options.keyIndent;
+    var i = 0, val, type;
+    for( ; i < arr.length; i++ ){
+      val = arr[i];
+      type = this.itemType( val );
+      if( type == 'h' ){
+        this.hashTokens( val, i );
+      }
+      else if ( type == 'a' ){
+        this.arrayTokens( val, i );
+      }
+      else {
+        this.addToken( type, i, val );
+      }
+    }
+    this.nodeProperties.left -= this.options.keyIndent;
+  },
+  
+  // Get length of hash
+  hashLen: function( hash ){
+    var count = 0;
+    for( var item in hash ){
+      count += 1;
+    }
+    return count;
+  },
+  
+  // Sort hash keys
+  hashSortedKeys: function( hash ){
+    var
+    keys = [],
+    key;
+    for( key in hash ){
+      keys.push( key );
+    }
+    return keys.sort();
+  },
+  
+  // Tokenize hashes
+  hashTokens: function( hash, name ){
+    this.addToken( 'h', name, '('+this.hashLen( hash )+' items)' );
+    this.nodeProperties.left += this.options.keyIndent;
+    var key, val, type, i = 0, keys = this.hashSortedKeys( hash );
+    for( ; i < keys.length; i++ ){
+      key = keys[i];
+      val = hash[key];
+      type = this.itemType( val );
+      if( type == 'h' ){
+        this.hashTokens( val, key );
+      }
+      else if ( type == 'a' ){
+        this.arrayTokens( val, key );
+      }
+      else {
+        this.addToken( type, key, val );
+      }
+    }
+    this.nodeProperties.left -= this.options.keyIndent;
+  },
+  
+  // Adds a taken
+  addToken: function( type, name, value ){
+    this.valueTokens.push( {
+      top: this.nodeProperties.top,
+      left: this.nodeProperties.left,
+      type: type,
+      name: name,
+      value: value
+    } );
+    this.nodeProperties.top += this.options.rowHeight;
+  },
+  
+  // Returns type of item
+  itemType: function( item ){
+    return COMM.Values.type( item );
+  },
+  
+  // Translation from type code to type name
+  typeNames: {
+    h: 'Hash',
+    a: 'Array',
+    s: 'String',
+    n: 'Number',
+    b: 'Boolean',
+    '~': 'Null',
+    '-': 'Undefined'
+  },
+  
+  // Style for the key rows
+  keyRowStyle: "position:absolute;padding-top:2px;right:0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;",
+  
+  // Creates row in key column
+  addKeyColumnControl: function( token, i ){
+    var elemId;
+    if( i >= this.propertyItems.length ){
+      elemId = ELEM.make( this.keyColumn.elemId );
+      this.propertyItems.push( elemId );
+      ELEM.setCSS( elemId, 'top:'+token.top+'px;'+this.keyRowStyle );
+    }
+    else {
+      elemId = this.propertyItems[i];
+    }
+    ELEM.setStyle( elemId, 'left', (token.left+10)+'px' );
+    if( token.type === 'h' || token.type === 'a' ){
+      ELEM.setStyle( elemId, 'font-weight', 'bold' );
+    }
+    else {
+      ELEM.setStyle( elemId, 'font-weight', 'inherit' );
+    }
+    ELEM.setHTML( elemId, token.name );
+  },
+  
+  // Style for the type rows
+  typeRowStyle: "position:absolute;padding-top:2px;left:8px;width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;",
+  
+  // Creates row in the type column
+  addTypeColumnControl: function( token, i ){
+    var elemId;
+    if( i >= this.propertyItems.length ){
+      elemId = ELEM.make( this.typeColumn.elemId );
+      this.propertyItems.push( elemId );
+      ELEM.setCSS( elemId, 'top:'+token.top+'px;'+this.typeRowStyle );
+    }
+    else {
+      elemId = this.propertyItems[i];
+    }
+    ELEM.setHTML( elemId, this.typeNames[token.type] );
+  },
+  
+  // Style for the value rows
+  valueRowStyle: "position:absolute;padding-top:2px;left:8px;right:0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;",
+  
+  // Creates row in the value column
+  addValueColumnControl: function( token, i ){
+    var elemId, value;
+    if( i >= this.propertyItems.length ){
+      elemId = ELEM.make( this.valueColumn.elemId );
+      this.propertyItems.push( elemId );
+      ELEM.setCSS( elemId, 'top:'+token.top+'px;'+this.valueRowStyle );
+    }
+    else {
+      elemId = this.propertyItems[i];
+    }
+    if( token.type === 'h' || token.type === 'a' ){
+      ELEM.setStyle( elemId, 'font-style', 'italic' );
+    }
+    else {
+      ELEM.setStyle( elemId, 'font-style', 'inherit' );
+    }
+    value = token.value;
+    if(value===true){
+      value = 'true';
+    }
+    else if(value===false){
+      value = 'false';
+    }
+    else if(value===undefined){
+      value = 'undefined';
+    }
+    else if(value===null){
+      value = 'null';
+    }
+    ELEM.setHTML( elemId, value );
+  },
+  
+  // Row separator style
+  rowSeparatorStyle: "position:absolute;left:1px;right:1px;font-size:0px;height:1px;overflow:hidden;border-bottom:1px solid #999;",
+  
+  // Adds row separator
+  addRowSeparator: function( token, i, even ){
+    if( i >= this.propertyItems.length ){
+      var elemId = ELEM.make( this.separatortParentElemId );
+      this.propertyItems.push( elemId );
+      ELEM.setCSS( elemId, 'top:'+token.top+'px;'+this.rowSeparatorStyle+'background-color:'+(even?'#f6f6f6':'#e6e6e6')+';' );
+    }
+  },
+  
+  // Destructor, deletes extra elements created
+  die: function(){
+    var
+    i=0,
+    propLen = this.propertyItems.length,
+    elemId;
+    for(;i<propLen;i++){
+      elemId = this.propertyItems.pop();
+      ELEM.del( elemId );
+    }
+    this.base();
+  },
+  
+  // Currently selected item
+  selectedItem: 0,
+  editNextItem: function(){
+    this.editItem(this.selectedItem+1);
+  },
+  editPrevItem: function(){
+    this.editItem(this.selectedItem-1);
+  },
+  editItem: function(itemNum){
+    
+    if(itemNum>this.valueTokens.length-1){
+      itemNum = this.valueTokens.length-1;
+    }
+    else if(itemNum < 0){
+      itemNum = 0;
+    }
+    
+    var
+    targetY = (itemNum*this.options.rowHeight)-1,
+    elem = ELEM.get( this.contentView.elemId ),
+    scrollTop = elem.scrollTop,
+    contentHeight = this.contentView.rect.height;
+    
+    if(targetY > (scrollTop+contentHeight-45)){
+      elem.scrollTop = scrollTop+45;
+    }
+    else if(targetY < scrollTop+45){
+      elem.scrollTop = scrollTop-45;
+    }
+    
+    this.selectedItem = itemNum;
+    this.editorValue.set( COMM.Values.clone(this.valueTokens[itemNum]) );
+    this.editor.show();
+    EVENT.changeActiveControl(this.editor);
+    this.editor.offsetTo( 0, targetY );
+    this.editor.bringToFront();
+  },
+  
+  // Starts tokenizing, when the value is changed.
+  refreshValue: function(){
+    if(this['propertyItems']===undefined){
+      return;
+    }
+    this.valueTokens = [];
+    this.nodeProperties = {
+      top: 0,
+      left: 8
+    };
+    var rootType = this.itemType( this.value );
+    if( rootType == 'h' ){
+      this.hashTokens( this.value, 'Root' );
+    }
+    else if( rootType == 'a' ){
+      this.arrayTokens( this.value, 'Root' );
+    }
+    else {
+      this.addToken( rootType, 'Root', this.value );
+    }
+    
+    var i, token;
+    if(this['propertyItems'] === undefined){
+      this.propertyItems = [];
+    }
+    var colHeight = 0, colId = 0;
+    for( i = 0; i < this.valueTokens.length; i ++ ) {
+      token = this.valueTokens[i];
+      this.addRowSeparator( token, colId, (i%2===0) ); colId++;
+      this.addKeyColumnControl( token, colId ); colId++;
+      if(!this.options.hideTypeColumn){
+        this.addTypeColumnControl( token, colId ); colId++;
+      }
+      this.addValueColumnControl( token, colId ); colId++;
+      colHeight = token.top+this.options.rowHeight;
+    }
+    var propItemsLen = this.propertyItems.length, elemId;
+    for( i = colId; i < propItemsLen; i++ ){
+      elemId = this.propertyItems.pop();
+      ELEM.del( elemId );
+    }
+    this.keyColumn.bringToFront();
+    if(!this.options.hideTypeColumn){
+      this.typeColumn.bringToFront();
+    }
+    this.valueColumn.bringToFront();
+    this.resizeColumns.bringToFront();
+    this.keyColumn.rect.setHeight( colHeight );
+    this.keyColumn.drawRect();
+    if(!this.options.hideTypeColumn){
+      this.typeColumn.rect.setHeight( colHeight );
+      this.typeColumn.drawRect();
+    }
+    this.valueColumn.rect.setHeight( colHeight );
+    this.valueColumn.drawRect();
+    ELEM.setStyle(this.separatortParentElemId,'height',(colHeight+25)+'px');
+  }
+});