// JavaScript Document
/*
	navigation_id:		ID name of the navigation (ul element)
	pad_out:			Left padding amount when a is hovered on
	pad_in:				Left padding amount when a is no longer hovered on
	time:				Time is takes for a slide to animate in and back when page first loads
	multiplier:			Increases or decreases the amount of time it takes for each subsequent link element to slide into the screen.
						In other words, any value other than 1 staggers the animation when first loaded.
*/

$(document).ready(function(){
	$("#slidingNavigation li a").css("display","none");			   
});

$(window).bind("load",function(){ 
	slide("#slidingNavigation", 15, 0, 175, .75);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier) {
	
	// Get li and a elements
	
	//var list_elements = navigation_id + " li.sliding-element";
	//var link_elements = list_elements + " a";
	var list_elements = navigation_id + " li";
	var link_elements = list_elements + " a";
	
	$(link_elements).css("display", "block");
	
	// Initialize timer for use in animations
	var timer = 0;
	
	// Creates slide animation for all elements (first load)
	$(list_elements).each(function(i){
		// first hide element off screen (width + total padding)
		$(this).css("margin-left", "-420px");
		
		// Increment timer
		timer = (timer*multiplier + time);
		
		// Sequence animation
		$(this).animate({marginLeft: "0"}, timer);
		$(this).animate({marginLeft: "-15"}, timer);
	});
	
	// Create hover events
	$(link_elements).hover(function()
		{
			$(this).animate({marginLeft: pad_out}, 150);								
		},
		
		function()
		{
			$(this).animate({marginLeft: pad_in}, 150);								
		}
	);
}