var SlideList = new Class({
	Implements: [Options,Events],

	options:{
		transition: Fx.Transitions.Sine.easeInOut,
		duration: 500,
		wait: false,
		onClick: $empty,
		timerDelay: 100
	},

	initialize: function(menu, options)
	{
		this.setOptions(options);
		this.delayTimer = null;

		this.menu = $(menu);
		this.current = this.menu.getElement('li.current');

		$$(this.menu.getElements('li')).addEvents(
		{
			'mouseover': this.moveBg.bind(this),
			'mouseout': this.moveBg.bind(this, false),
			'click': this.clickItem.bind(this)
		});

		this.back = new Element('li',
		{
			'class':' background',
			morph: this.options
		}).adopt(new Element('div',{'class':'left'})).inject(this.menu);

		if (this.current)
		{
		  this.setCurrent(this.current);
		}

		$$('#fancymenu ul li').each(
		  function(item)
		  {
		    item.obj = this;
  		  item.addEvents(
    		  {
    		    'mouseover': function(e)
    		    {
    		      $clear(this.obj.delayTimer);
    		      $$('.submenu').setStyle('visibility', 'hidden');
    		      var sub = document.id(this.getFirst().get('id') + '_');
    		      if(sub != null)
    		      {
    		        sub.setStyle('visibility', 'visible');
    		      }
    		    },
    		    'mouseout': function(e)
    		    {
    		      this.delayTimer = function()
              {
                var el = document.id($(e.target).get('id') + '_');
                if (el != null)
                {
                  el.setStyle('visibility', 'hidden');
                }
              }.bind(this, e).delay(this.options.timerDelay);
    		    }.bind(this)
    		  }
  		  );
  		}.bind(this)
    );

    $$('.submenu').addEvents({
      'mouseover': function(e)
      {
        $clear(this.delayTimer);
        var submenu = $(e.target).getParent('.submenu');
        if(submenu != null)
        {
          var id = submenu.get('id').replace(/_/, '');
          e.target = document.id(id);
          this.moveBg(e);
        }
      }.bind(this),
      'mouseout': function(e)
      {
        this.delayTimer = function()
        {
          var el = $(e.target);
          while(el.get('tag') != 'div' && !el.hasClass('submenu'))
          {
            el = el.getParent();
          }
          el.setStyle('visibility', 'hidden');
        }.bind(this, e).delay(this.options.timerDelay);
      }.bind(this)
    });
	},

	setCurrent: function(el, effect)
	{
		this.back.setStyles({left: (el.offsetLeft), width: (el.offsetWidth)});
		(effect) ? this.back.get('morph').start({'opacity':[0,1]}) : this.back.setStyle('opacity',1);
		this.current = el;
	},

	clickItem: function(event)
	{
		var item = $(event.target);
		this.setCurrent(item, true);
		this.fireEvent('onClick',[new Event(event), item]);
	},

	moveBg: function(to)
	{
		if (!this.current) return;
		if (to)
		{
			to = $(to.target);
		}
		else
		{
			to = this.current;
		}

   	this.back.get('morph').start(
		{
			left: to.offsetLeft,
			width: to.offsetWidth
		});
	}
});

window.addEvent('domready', function()
{
	new SlideList($('fancymenu'));
});