$(document).ready(function() {
	
	
	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
	
	$("ul#topnav li a").click(function() { //Funkcia na zachovanie aktualneho menu - current status
    $("ul#topnav li").removeClass("activeButton");
    $(this).parent().addClass("activeButton");
    });
	
	$("#topnav li").each(function() { //For each list item...
		var thisli = $(this);//we store var for performance//$() is like a css selector
		var thislink = thisli.find("a");
		var linkText = thislink.html(); //Find the text inside of the a tag
		
		var width = thisli.find("a").outerWidth();//get the width of the li
		thisli.data('width', width);//store the width of the li
		thislink.css({'marginRight':'-'+width+'px'}); //remove "a" from the flow
		
		thisli.find("span").show().html(linkText); //Add the text in the span tag
		
	}); 
	
	$("#topnav li").hover(function() {	//On hover...
		var thisli = $(this);//for performance
		var width = thisli.data('width');//get the stored width
		thisli.find("span, a").stop().animate({ 
			left: '-'+width+'px' //use the width of the link to move it to the side
		}, 250);
	} , function() { //On hover out...
		$(this).find("span, a").stop().animate({
			left: '0' //Move the span back to its original state (0px)
		}, 250);
	});
	
	
});