$(document).ready(function() {
	slide("#sliding-navigation", 15, 5, 150, .8);
});

function slide (navigationId, padOut, padIn, time, multiplier) {
	// creates the target paths
	var listElements = navigationId + " li.sliding-element";
	var linkElements = listElements + " a";

	// initiates the timer used for the sliding animation
	var timer = 0;

	// creates the slide animation for all list elements
	$(listElements).each(function(i) {
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer * multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	// creates the hover-slide effect for all link elements
	$(linkElements).each(function(i) {
		$(this).hover(
		function() {
			$(this).animate({ paddingLeft: padOut }, 150);
		},
		function() {
			$(this).animate({ paddingLeft: padIn }, 150);
		});
	});
}
