/**
 * Prototype base FancyMenu
 * @version 0.9b
 * @alias  FancyMenu
 *
 * @author Guillermo Rauch <devthought.com>
 * @author firejune <to@firejune.com>
 * 
 * @usage = new FancyMenu('fancymenu', {
 *   transition: Effect.Transitions.backOut, duration: 0.7
 * });
 * 
 * @requires 
 *   - prototype <http://www.prototypejs.org>
 *   - scriptaculous <http://script.aculo.us>
 *   - Effect.Transitions.backOut = function(pos){ return ((pos-1)*(pos-1)*((2.7)*(pos-1) + 1.7) + 1); };
 * 
 */

Effect.Transitions.backIn = function(pos){ return (pos)*pos*((2.7)*pos - 1.7); };
Effect.Transitions.backOut = function(pos){ return ((pos-1)*(pos-1)*((2.7)*(pos-1) + 1.7) + 1); };

var FancyMenu = Class.create();
FancyMenu.prototype = {
  initialize: function(menu, options){
    this.options = Object.extend({
      transition: Effect.Transitions.sineInOut, duration: 0.5
    }, options || {});

    this.menu = $(menu);
	
	if (!this.menu.down("li.current")) {
		this.menu.down("li").className="current";
	}

    this.current = this.menu.down('li.current').down('a');
    
    var div = document.createElement('DIV');
    this.back = document.createElement('DIV');
    div.className = 'left';
    this.back.className = 'background';

    if(document.all){
      try {
       document.execCommand('BackgroundImageCache', false, true);
      } catch(e) {}
    }

    this.back.appendChild(div);
    this.menu.appendChild(this.back);

    this.observeClick = this.clickItem.bindAsEventListener(this);
    this.observeMouseMove = this.moveBg.bindAsEventListener(this);
    this.observeMouseOut = function(){ this.moveBg(this.current); }.bind(this);

    Event.observe(this.menu, 'click', this.observeClick);
    Event.observe(this.menu, 'mousemove', this.observeMouseMove);
    Event.observe(this.menu, 'mouseout', this.observeMouseOut);
    Event.observe(window, 'unload', this.unregisterEvents.bindAsEventListener(this));

    if(this.current){
      this.setCurrent(this.current);
    } else {
      this.setCurrent(this.menu.down('a'));
    }
  },
  unregisterEvents: function(){
    Event.stopObserving(this.menu, 'click', this.observeClick);
    Event.stopObserving(this.menu, 'mousemove', this.observeMouseMove);
    Event.stopObserving(this.menu, 'mouseout', this.observeMouseOut);
  },
  clickItem: function(event){
    var item = Event.element(event);
    if(!item || item.tagName != "A"){
      return;
    }
    if(!this.current){
      this.setCurrent(item);
    }
    this.menu.down('li.current').className = '';
    this.current = item;
    $(this.current).up('li').className = 'current';
  },
  setCurrent: function(el){
    Element.setStyle(this.back, {left: this.getOffsetX(el) + 'px', width: el.offsetWidth + 'px', visibility: 'visible'});
    this.current = el;
  },
  getOffsetX: function(el){
    if(document.all){
      el = el.up();
    }

	var test=Position.cumulativeOffset(el)[0] - Position.cumulativeOffset(this.menu)[0];

	if(navigator.userAgent.indexOf("MSIE 6.0")>0) {
		test=test-70;
	}

    return test;
  },
  moveBg: function(object){
    if(object.tagName == 'A'){
      object = object;
    } else {
      object = Event.element(object);
    }
    if(!this.current || this.object == object || !object || object.tagName != "A"){
      return;
    }
    this.moveTimeout();
    this.timeout = window.setTimeout(function(){
      var styles = "width:" + object.offsetWidth + "px; left:" + this.getOffsetX(object) + "px;";
      if(this.morph && this.morph.state == 'running'){
        this.morph.cancel();
      }
      this.morph = new Effect.Morph(this.back, {
        style: styles, duration: this.options.duration, transition: this.options.transition
      });
    }.bind(this), 90);
    this.object = object;
  },
  moveTimeout: function(){
    if(typeof this.timeout == "number"){
      window.clearTimeout(this.timeout);
      delete this.timeout;
    }
  }
};














function load_menu_f() {
	new FancyMenu('menu_header_bis', {
	transition: Effect.Transitions.backOut, duration: 0.5
	});
}

StkFunc(load_menu_f);