/**
 * MindCMS 3
 *
 * @class   msToolbar
 * @extends msContainer
 * JS Toobar object definition
 *
 * @package CMS3
 * @author Francisc UNGUREANU <francisc.ungureanu@mindbench.nl>
 * @author Raluca NECHITA <raluca.nechita@mindbench.nl> 
 * @copyright Mindbench Active Media B.V.
 * @version $Id: msToolbar.js 6475 2008-11-28 14:41:52Z gpr $
 *
 * Details:
 * The toobar will be a container for other button groups/toolbars
 *   
 */
msToolbar = Class.create(msContainer, {
  xtype: 'toolbar',
  
  initialize: function ($super, config)
  {  
    $super(config);
    this.id = config.name;
    // TODO .gsub(/[^a-z0-9\.\:\-]/, '_')
    
    this.buttonsDimensions = new Array();
    this.config = {
        layout: 'vertical',
        defaults: {
          icon_size: 'small',
          text_position: 'horizontal',
          button_state: [ 'text' , 'icon' ]
        }
    };    
    Object.extend(this.config, config || {});
    
    this.build();
  },
   
  build: function($super) {      
    var THIS = this;
    
    this.el = new Element('div');

    layout = this.config.layout != '' ? this.config.layout : 'vertical';
    layout_name = this.id;

    this.items.each ( function(item) {
      THIS.addItem(item);
    });
    
    //if we a title for our panel then render it
    if(this.hasTitle()) {
      var div = new Element('P', {'class': 'msr-' + this.xtype + '-name' });
      div.innerHTML = this.getTitle();
      this.el.appendChild(div);
    }
    
    w = "";
    
    if (this.config.width) {
	    if (this.config.width.toString().indexOf('px', 0) > 0) {
	      w = this.config.width;	
	    }
	    else {
	      w = this.config.width + "%";
	    }
    }
    	
    var wrapper = new Element('div', {
      'class': 'msr-' + this.xtype
    });

  	if(w) {
  		wrapper.setStyle( {width: (w)} )
  	}

    this.el = Element.wrap(this.el,wrapper);
   
  },
     
  calculateSizes: function()
  {  
    var THIS = this;
    
    //actual size of the toolbar in px
    var availableWidth = Math.round(this.getWidth());
       
    var buttonsSizes = '';
    toolbarName = this.name;
    var totalWidth, totalHeight;
    
    var state;
    //var padding = { 'horizontal': 10, 'vertical' : 12};
    var padding = { 'horizontal': 0, 'vertical' : 2};
    
    this.items.each ( function(item) {
      item.show();
    });
    
    var max_state = THIS.config.layout == 'horizontal' ? 4 : 3;
      
    for(state=1; state<= max_state;state++) {
      totalWidth = 0;
      totalHeight= 0;
      this.items.each ( function(item) {
        if (THIS.config.layout == 'horizontal') {
          var width = item.getWidthForState(state) + padding['horizontal'];
          totalWidth += width;
          // if(THIS.name == 'toolbar2')console.log(item.el, width);
        }
        else {
          var width = item.getWidthForState(state) + padding['vertical'];
          totalWidth = Math.max(totalWidth, width);
          //if(THIS.name == 'toolbar4')console.log(item.el, 'W =>',item.getWidthForState(state));
        }
      });
      
      //if(THIS.name == 'toolbar4')console.log(state,'=>',totalWidth, availableWidth);
      if(totalWidth<availableWidth) {
        break;
      }
    }

    if(totalWidth > availableWidth) {
      var i = 0;
      this.items.each ( function(item) {
        if(i==0) {
          //console.log('%s %s', totalWidth, availableWidth);
          item.setState(2);
        }
        else {
          item.hide();
        }
        i++;
      });
      
    }
    else {
      this.items.each ( function(item) {
        // if(THIS.name == 'toolbar2')console.log('setting state',state)
        item.setState(state);
      });
    }
    
    //$(this.el).setStyle({width: (totalWidth + 10) + 'px'});
  }
});