var RHMenuHover = new Class(
{
    initialize: function (myElement)
    {
        options = Object.extend({transition: Fx.Transitions.quadOut}, {});
        this.myElement = $(myElement);
        if (!this.myElement)
        {
            alert('no menu');
            return;
        }
        this.createHover(myElement);
  		this.position(myElement);
        
    },
     
    createHover: function (myElement)
    {
    	//create hover item
        this.lihover = new Element('li', {'class': 'nav-hover'}).adopt(new Element('span', {'class': 'nav-hover-span1'}).adopt(new Element('span', {'class': 'nav-hover-span2'})));
        this.lihover.setStyles(
        {
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'width': 0,
            'height': 30,
            'z-index': 1,
            display: 'none'
        });
        
		this.myElement.setStyle('position', 'relative');
        this.lihover.injectTop(this.myElement);
        this.fx = new Fx.Styles(this.lihover, {
            duration: 700,
            transition: Fx.Transitions.Back.easeInOut,
            onComplete: function ()
            {
                if (this.lihover.getStyle('width').toInt() < 10) this.lihover.setStyle('display', 'none');
            }.bind(this)
        });
	},
	position: function (myElement)
	{    
        this.ulcoor = this.myElement.getCoordinates();
        this.myElement.getChildren().each(function (li)
        {
            if (li != this.lihover)
            {
                li.setStyles(
                {
                    'position': 'relative',
                    'z-index': 2
                });
                if (li.hasClass('active'))
                {
                    var licoor = li.getCoordinates();
                    this.hvleft = licoor.left - this.ulcoor.left;
                    this.hvwidth = licoor.width;
                    this.lihover.setStyles(
                    {
                        'left': this.hvleft,
                        'width': this.hvwidth,
                        'display': 'block'
                    });
                }
                else
                {
                    li.addEvent('mouseenter', function ()
                    {
                        this.lihover.setStyle('display', 'block');
                        this.fx.stop();
                        var licoor = li.getCoordinates();

                        this.fx.start(
                        {
                            'left': licoor.left - this.ulcoor.left,
                            'width': licoor.width
                        });
                        //console.log ('in: '+this.lihover.getStyle('left').toInt()+', ' + (licoor.left - this.ulcoor.left));
                    }.bind(this));

                    li.addEvent('mouseleave', function ()
                    {
                        this.fx.stop();
                        var hvcoor = this.lihover.getCoordinates();
                        this.fx.start(
                        {
                            'left': this.hvleft,
                            'width': this.hvwidth
                        });
                        //console.log ('out: '+this.lihover.getStyle('left').toInt());
                    }.bind(this));
                }
            }
     	}, this);
     }
});


window.addEvent('load', function(){
var menu = $E('#rh-splitmenu ul');
if (!menu) menu = $('rh-cssmenu');
if (menu) new RHMenuHover (menu);
var timer;
	window.addEvent('resize', function(){
	  $clear(timer);
	  timer = (function(){
	  	window.location.reload( false );
	  }).delay(1);
	}); 
});