$(document).ready(function() {
 //top menu -> submenu behaviour
 //$("ul.submenu").hide();
 $("ul.menu-top > li").hover(
   function () {
     $(".menu-top ul.submenu").hide();
     $(this).children("a").addClass("active");
     $(this).children("ul.submenu").slideDown("fast");
   },function () {
     $(this).children("a").removeClass("active");
     $(this).children("ul.submenu").slideUp("fast");
   });
  
//left menu -> behaviour
//navigation_id: This is the ID name of the navigation, which contains the elements the effect will be applied on.
//pad_out: This is the number of pixels to be padded left when one of the links inside the navigation is hovered.
//pad_in: This is the number of pixels to be padded left when one of the links inside the navigation is no longer being hovered.
//time: This represents the amount of time (in milliseconds) that takes for one of the link elements to slide in and back in to place when the page is loaded.
// multiplier: The job of the multiplier is to increase or decrease the amount that takes the a following link //element to slide in to the screen. In other words, if the multiplier is 1, all link elements will slide in to the //screen in equal time intervals. However, if it is less than 0, the subsequent link elements will slide in faster, and// if it is more than 1 the opposite will happen.

	slide("#left-menu", 25, 15, 150, .0);

});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
	
	// initiates the timer used for the sliding animation
	var timer = 0;
	
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","10px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "10px" }, timer);
		$(this).animate({ marginLeft: "10px" }, timer);
		$(this).animate({ marginLeft: "10px" }, timer);
	});

	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
    
                 
	});
  
  $("#left-menu li.sliding-element").click(function () {
    $("li.sliding-element").removeClass("on").children("ul.submenu").hide();
    $(this).toggleClass("on").children("ul.submenu").show();
		
	});
  
}