var PageMenuEx = Class.create({
  
  initialize: function() {
    this.options = { xdist: 10, ydist: 10 };
    this.menu = $('main-menu');

    if (!this.menu) return;

    this.element = this.menu.select('li.active').first();
    this.width = 0;

    var object = this;
    
    this.menu.observe('mouseover', function() { clearTimeout(object.resetTimeout); });
    this.menu.observe('mouseout', this.resetMenu.bindAsEventListener(this));

    $$('#' + this.menu.id + ' > ul > li > a').each(function(element) {
      element.observe('click', function(event) { event.stop(); });
      element.observe('mouseover', object.switchMenu.bindAsEventListener(object));
      element.observe('mouseout', function() { clearTimeout(object.switchTimeout); });

      element = element.up();
      var slider = element.select('.slider').first();
      if (!slider) return;

      slider.style.left = '0px';

      element.select('.arrowLeft').first().observe('mouseover', (function(event) {
        object.moving = true;
        object.slideMenu(slider, 2);
      }).bindAsEventListener(object));

      element.select('.arrowRight').first().observe('mouseover', (function(event) {
        object.moving = true;
        object.slideMenu(slider, -2);
      }).bindAsEventListener(object));
    });

    this.updateWidth();
  },

  updateWidth: function () {
    var object = this;
    this.width = this.menu.select('.outer').first().getWidth();

    this.menu.select('.slider').each(function(element) {
      if (!element.width) element.width = element.down('ul').getWidth();
      if (object.width > element.width) return;
      element.up('li').addClassName('scrollable');
    });
  },

	switchMenu: function(event) {
    var object = this;
    var element = Event.element(event).up('li');
    clearTimeout(object.switchTimeout);
    object.switchTimeout = setTimeout(function() {
      object._setMenu(element);
    }, 100);
	},

	resetMenu: function(event) {
    var object = this;
    clearTimeout(object.resetTimeout);
    object.resetTimeout = setTimeout(function() {
      object._setMenu(object.element);
    }, 1500);
	},

	slideMenu: function(element, speed) {
    var object = this;
		if(!object.moving) return;

		var left = parseInt(element.style.left);

		if (speed < 0 && left + element.down('ul').offsetWidth - 6 < element.up().offsetWidth) return;
		if (speed > 0 && left + 6 > 0) return;
    
		element.style.left = left + Math.round(2 * speed) + "px";
        
		setTimeout(function() {
			object.slideMenu(element, speed);
		}, 25);
	},

  _setMenu: function(element) {
    this.menu.select('.active').each(function(element) {
      element.removeClassName('active');
    });
    element.addClassName('active');
  }
});

function openMenuList(listName, options) {
  var options = Object.extend({
    save: true,
    openTitle: null,
    closeTitle: null
  }, arguments[1] || { });

  var result = openList(listName, { save: options.save,
    afterOpen: function() {
      $(listName).up().removeClassName('plus').addClassName('minus');
      if (options.openTitle) $(listName).up().title = options.openTitle;
    },
    afterClose: function() {
      $(listName).up().removeClassName('minus').addClassName('plus');
      if (options.closeTitle) $(listName).up().title = options.closeTitle;
    }
  });
  return result;
}

onloadEvents.push(function() {
	new PageMenuEx();
});