var currentPosition;
var currentSize;
var currentState;


var padding=10;   //this is the padding for each menu item
var speed=500;

$(function(){
	setSquareDefaultPosition();
	setMenuHover();
});


function setMenuHover(){

	//handle the mouseover event
	$(".menu_links a").mouseover(function(){
		hover($(this));
	});
	
	//handle the click event
	$(".menu_links a").click(function(){
		currentPosition=getCurrentLeft($(this));
		currentSize=getCurrentWidth($(this));
	});
	
	//handle the mouseleave event
	$(".menu_links").bind("mouseleave",function(){
      setDefaultHover();
    });

}

function hover(element){
	var square=$("#hoverSquare");
	
	//if the hover square is currently animated, stop it
	if(square.is(":animated")){
		square.stop();
	}
	var positionLeft=getCurrentLeft(element);
	var width=getCurrentWidth(element);
	square.animate({left:positionLeft, "width":width, opacity: 1}, speed);
}


function getCurrentLeft(element){
	var pozitieelement=element.offset().left;
	var pozitieparinte=element.parent().offset().left;
	return pozitieelement-pozitieparinte+padding;
}

function getCurrentWidth(element){
	var fullWidth=element.outerWidth()
	return fullWidth-(2*padding);
}

function getCurrentState(element){
	var currentState=element.css("opacity");;
	return currentState;
}

function setDefaultHover(){
	var square=$("#hoverSquare");
	
	//if the hover square is currently animated, stop it
	if(square.is(":animated")){
		square.stop();
	}

	square.css({position:"absolute"});
	//move the square
	square.animate({left:currentPosition, "width":currentSize, opacity : currentState}, speed);
}

function setSquareDefaultPosition(){
	var currentItemClicked=document.getElementById("paginaSelectata").value;
	if ($(".menu_links a:eq("+currentItemClicked+")").length)
	{
		var element=$(".menu_links a:eq("+currentItemClicked+")")

		currentPosition=getCurrentLeft(element);
		currentSize=getCurrentWidth(element);
		currentState=getCurrentState(element);

		$("#hoverSquare").css({left:currentPosition, "width":currentSize, opacity : currentState});	
	}
	else
	{
		var element=$(".menu_links a:eq(0)")

		currentPosition=getCurrentLeft(element);
		currentSize=getCurrentWidth(element);
		currentState=0;

		$("#hoverSquare").css({left:currentPosition, "width":currentSize, opacity : currentState});	
	}
}