/**
 * MindCMS 3
 *
 * msRibbon
 *
 * JS Ribbon object definition
 *
 * @package CMS3
 * @author Gabriel PREDA <gabriel.preda@mindbench.nl>
 * @author Raluca NECHITA <raluca.nechita@mindbench.nl>
 * @author Francisc Ungureanu <francisc.ungureanu@mindbench.nl> 
 * @copyright Mindbench Active Media B.V.
 * @version $Id: msRibbon.js 6475 2008-11-28 14:41:52Z gpr $
 *
 * Details:
 * The ribbon will be represented by two action 
 * areas where users will perform most of the activities for the given screen. 
 * 
 * 
 * 
 */

msRibbon = Class.create(msTabContainer, {
  xtype: 'ribbon',
  
  initialize: function ($super, config)
  {
    $super(config);
    
    this.config = {
        forceWidth: 800
    };

    Object.extend(this.config, config || {});
    
    this.toolbars = config.toolbars;
    
    this.build();
  },

  build: function ($super) {
    var THIS = this;
    
    this.el = $(this.id).hide();
    
    if (window.location.pathname.replace(new RegExp("[/]+$", "g"), "") == env.replace(new RegExp("[/]+$", "g"), "")) {
      this.el.addClassName('home');
      
      $('container').style.padding = '68px 0 0 0';
    }
    
    Event.observe(window, 'resize', this.calculateSizes.bindAsEventListener(this));
    
    this.logo = new Element('div', { 'id': 'logo' });
    
    this.logo.appendChild(new Element('a', { 'href': homepage }));
    this.el.appendChild(this.logo);
    
    this.tabsContainer = new Element('div', {'id' : 'msr-nav-container'});
    this.el.appendChild(this.tabsContainer);
    
    this.tabs = new Element('ul', {'id': 'msr-nav' });
    this.tabsContainer.appendChild(this.tabs);
    
    $super();
    
    //START temporary hack just to have one toolbar displayed
      this.toolbarElement = new Element('div', {'id': 'msr-toolbars' });
      this.el.appendChild(this.toolbarElement);
      
      this.toolbars.each(function (item) {
        THIS.addItem(item, THIS.toolbarElement);
      });
      
    //END temporary hack just to have one toolbar displayed
    
    //adds the logout button
    
    var url_logoff = env + '/login/logout';
    var url_switch_nl = env + '/' + cmodule + '/switchculture/culture/nl_NL';
    var url_switch_en = env + '/' + cmodule + '/switchculture/culture/en_US';
    var url_help = 'javascript:help.show();';
	    
    var sitecontrol = new Element('ul', { 'id': 'msr-sitecontrol-2'});

    // add multisite selector if there is multisite configured
    has_multisite = false;
    
    for (i in multisite.Sites) {
      if (typeof(multisite.Sites[i].Id) != 'undefined') {
        
        if (!has_multisite) {
          multisite_container =  new Element('li');
          sel = new Element('select');
          sel.onchange = function()
          {
            for (i in multisite.Sites) {
              if (multisite.Sites[i].Id == sel.options[sel.selectedIndex].value) {
                window.location.href = multisite.Sites[i].DirectLogin;
              }
            }
          }
          has_multisite = true;
        }
        
        opt = new Element('option');
        opt.text = multisite.Sites[i].Title;
        opt.value = multisite.Sites[i].Id;
        
        if ( multisite.Sites[i].Id == multisite.ActiveSite) {
          opt.selected = 'selected';
        }
        sel.options.add(opt);
      }
    }
    
    if (has_multisite) {
      multisite_container.appendChild(sel);
      multisite_container.addClassName('multisite-selector');
      sitecontrol.appendChild(multisite_container);
    }
  
    
    className = admin_culture == 'nl_NL' ? 'active' : '';
    
    sitecontrol
      .appendChild(new Element('li'))
      .appendChild(new Element('a', {'href' : url_switch_nl }))
      .appendChild(new Element('img', {'class': className, 'alt': '', 'src': '/shared/img/famfamflags/nl.gif', 'id': 'lang-switch-nl'}))
    ;
    
    className = admin_culture == 'en_US' ? 'active' : '';
    
    sitecontrol
      .appendChild(new Element('li'))
      .appendChild(new Element('a', {'href' : url_switch_en }))
      .appendChild(new Element('img', {'class': className, 'alt': '', 'src': '/shared/img/famfamflags/us.gif', 'id': 'lang-switch-us'}))
    ;
    
    li = new Element('li');
    li.style.position = 'relative';
    this.favorites = li;
    
    Event.observe(li, 'click', this.showFavorites.bindAsEventListener(this));
    
    
    sitecontrol
      .appendChild(li)
      .appendChild(new Element('a', {'href' : '#' }))
      .appendChild(new Element('img', {'alt': '', 'src': '/shared/img/mslist/favorite.gif'}))
    ;
    
    sitecontrol
      .appendChild(new Element('li'))
      .appendChild(new Element('a', {'href' : url_help}))
      .appendChild(new Element('img', {'alt': '', 'src': '/shared/img/msr-ribbon/icons/16x16/help.png'}))
    ;
    
    sitecontrol
      .appendChild(new Element('li'))
      .appendChild(new Element('a', {'href' : url_logoff}))
      .appendChild(new Element('img', {'alt': '', 'src': '/shared/img/msr-ribbon/icons/16x16/logout.png'}))
    ;
    
    this.el.appendChild(sitecontrol);
  },
    
  showFavorites: function()
  {
    if(!$(this.favorites).down('.msr-modal')) {
      favs = new Element('div');
      favs.addClassName('msr-modal');
      favs.style.position = 'absolute';
      favs.style.left = 'auto';
      favs.style.right = '15px';
      favs.style.top = '15px';
      favs.style.width = '300px';
      favs.style.height = '120px';
      
      d1 = new Element('div');
      d1.addClassName('msr-modal-box-1');
      d2 = new Element('div');
      
      p = new Element('p');
      p.innerHTML = 'Uw favorieten';
      d2.appendChild(p);
      
          
      l = new Element('div');
      l.id = 'favorite-list';
      l.innerHTML = '<p><img src="/shared/img/loader-small.gif" alt=""> Bezig met ophalen</p>';
      
      new Ajax.Updater('favorite-list', env + '/favorites/list');
      
      d2.appendChild(l);
      
      d1.appendChild(d2);
      
      d3 = new Element('div');
      d3.addClassName('msr-modal-box-2');
      d4 = new Element('div');
      d3.appendChild(d4);
      
      favs.appendChild(d1);
      favs.appendChild(d3);
      
      this.favorites.update();
      this.favorites.appendChild(new Element('a', {'href' : '#' })).appendChild(new Element('img', {'alt': '', 'src': '/shared/img/mslist/favorite.gif'}))
      this.favorites.appendChild(favs);
      
      Event.observe(this.favorites, 'mouseout', this.handleMouseout.bindAsEventListener( this, { }));
      Event.observe(this.favorites, 'mouseover', this.handleMouseover.bindAsEventListener( this, { }));
    }
    else {
      $(this.favorites).down('.msr-modal').toggle();
    }
  },
  
  handleMouseout: function(event, ci) {    
    if (!this.visible) {
      $(this.favorites).down('.msr-modal').hide();
     
      this.visible = true;
      clearTimeout(this.timer);
      return;
    }
    
    this.visible = false;
    Obj = this;
    this.timer = setTimeout(function() { Obj.handleMouseout(this, ci )}, 3000);
  },
  
  handleMouseover: function(event, ci) {    
    this.visible = true;
    clearTimeout(this.timer);
  },
  
  calculateSizes: function()
  {    
    for (var t = 0, st = this.toolbars.length; t < st; t++)
    {        
      var toolbarSizes = this.toolbars[t].calculateSizes();
    }
    
    var navSize = $('msr-nav').getDimensions();
    var navContainerSize = $('msr-nav-container').getDimensions();
    var ribbonSize = $('msr-ribbon').getDimensions();
    var sitecontrolSize = $('msr-sitecontrol-2').getDimensions();
    
    maxSize = ribbonSize.width - sitecontrolSize.width - 60;
    
    if ( (navSize.width - navContainerSize.width + 2) == 0) {
      // the nav container should scroll
      $('msr-nav-container').style.width = maxSize + 'px';
      
     // console.log((navSize.width - navContainerSize.width + 2), navSize.width, navContainerSize.width, maxSize);
    }
    
    //console.log(navSize);
  }
});