/**
 * TYPOlight webCMS
 * Copyright (C) 2005 Leo Feyer
 *
 * This program is free software: you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation, either
 * version 2.1 of the License, or (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 * 
 * You should have received a copy of the GNU Lesser General Public
 * License along with this program. If not, please visit the Free
 * Software Foundation website at http://www.gnu.org/licenses/.
 *
 * PHP version 5
 * @copyright  Olivier El Mekki, 2009 
 * @author     Olivier El Mekki <olivier@el-mekki.com>
 * @package    Republique 
 * @license    commercial 
 * @filesource
 */


/**
 * Class NavMainModel, NavMainController, NavMainView
 *
 * @copyright  Olivier El Mekki, 2009 
 * @author     Olivier El Mekki <olivier@el-mekki.com>
 * @package    Javascript
 */



/**
 * Model
 */
var NavMainModel = new Class({
  Implements: [ Options, Events ],
  options: {
    element: ''
  },

  initialize: function( options )
  {
    this.setOptions( options );
    this.$element = $( this.options.element );
  },

  getPosition: function()
  {
    return this.$element.getPosition();
  },

  getContent: function()
  {
    var content = this.$element.getElement( '.level_2' );

    if ( ! content )
    {
      return false;
    }

    content = content.clone();
    return content;
  }
});



/**
 * View
 */
var NavMainView = new Class({
  Implements: [ Options, Events ],
  options: {
   element_id: 'navMainJs'
  },

  initialize: function( options )
  {
    this.setOptions( options );
    this.$element = this.buildElement();

    this.fx = new Fx.Morph( this.$element, { link: 'cancel', 'duration': 'short' });
    this.fx.addEvent( 'complete', this.undisplay.bind( this ) );
  },



  /**
   * Build the element
   */
  buildElement: function()
  {
    var element = new Element( 'div', { 
      'id': this.options.element_id,
      'class': 'submenu-container',
      'styles': { 
        display: 'none',
        position: 'absolute',
        'opacity': 0,
        'float': 'left',
        'z-index': 100
      }
    });

    var submenu_top = new Element( 'div', {
      'class': 'submenu-top'
    });

    var submenu_content = new Element( 'div', {
      'class': 'submenu-content'
    });

    var submenu_bottom = new Element( 'div', {
      'class': 'submenu-bottom'
    });


    element.inject( $( document.body ) );
    submenu_top.inject( element );
    submenu_content.inject( element );
    submenu_bottom.inject( element );

    return element;
  },



  /**
   * Set the content
   */
  setContent: function( content )
  {
    var old = this.$element.getElement( 'ul' );

    if ( old )
    {
      content.replaces( old );
    }

    else
    {
      content.inject( this.$element.getElement( '.submenu-content' ) );
    }
  },



  /**
   * Set the position
   */
  setPosition: function( x, y )
  {
    this.$element.setStyles({
      'top': y,
      'left': x
    });
  },



  /**
   * Show the menu
   */
  show: function()
  {
    this.$element.setStyle( 'display', 'block' );
    this.fx.start({ 'opacity': 1 });
  },



  /**
   * Hide the menu
   */
  hide: function()
  {
    this.fx.start({ 'opacity': 0 });
  },



  /**
   * Undisplay the menu
   */
  undisplay: function()
  {
    if ( this.$element.getStyle( 'opacity' ) === 0 )
    {
      this.$element.setStyle( 'display', 'none' );
    }
  }
});



/**
 * Controller
 */
var NavMainController = new Class({
  Implements: [ Options, Events ],
  options: {
    element: ''
  },

  initialize: function( options )
  {
    this.setOptions( options );
    this.$element = $( this.options.element );
    this.view = new NavMainView();

    this.items = [];
    this.$element.getElements( 'ul.level_1 > li' ).each( function( item, i ){ 
      this.items.push( new NavMainModel({ element:  item }) );

      var toggle = item.getElement( 'span' );
      if ( ! toggle || toggle.getParents( '.level_2' ).length > 0 )
      {
        toggle = item.getElement( 'a' );
      }

      toggle.addEvent( 'mouseenter', function(){ 
        clearTimeout( this.timer );
        this.show( i ); 
      }.bind( this ) );

      toggle.addEvent( 'mouseleave', function(){ 
        this.timer = window.setTimeout( function(){ this.hide(); }.bind( this ), 2000 );
      }.bind( this ));

    }.bind( this ));

    this.view.$element.addEvent( 'mouseenter', function(){ clearTimeout( this.timer ); }.bind( this ) );
    this.view.$element.addEvent( 'mouseleave', this.hide.bind( this ) );
  },



  /**
   * Show the view
   */
  show: function( i )
  {
    var item          = this.items[ i ];
    this.view.hide();

    var content = item.getContent();

    if ( content )
    {
      var item_position = item.getPosition();
      this.view.setPosition( item_position.x, item_position.y + 30 );
      this.view.setContent( item.getContent() );
      this.view.show();
    }
  },



  /**
   * Hide the view
   */
  hide: function( i )
  {
    this.view.hide();
  }
});



/**
 * Init
 */
window.addEvent( 'domready', function(){
  var menu = $$( '.mod_navigationMain' )[0];
  window.NavMain = new NavMainController({ element: menu });
});