/*
*
* @author 	Bedrich Rios 
* @title	Mootools Sidebar Effect
* @version	1.0
* @website 	www.bedrichrios.com
*
* WHAT YOU NEED:
* 1. jQuery. If you don't have it download it from http://docs.jQuery.com/Downloading_jQuery.
* 2. An unordered list (ul) with the ID "navigation"
*
* HOW IT WORKS:
* Add the following to your pages(s).
* 1. <script type="text/javascript" src="[YOUR PATH]/jQuery.js"></script>
* 2. <script type="text/javascript" src="[YOUR PATH]/mootools_sidebar_effect.js"></script>
*
* OPTIONAL:
* 1. You can change the values of the hover padding effect by adding a meta array that looks like:
*    Ex. <meta name="sidebar_option" content="10px 20px" />
*	 - The first value refers to the "padding-out." The padding left when the link is hovered.
*	 - The second value refers to the "padding-in." The padding left when the link is no longer hovered.
* 2. The example file uses my own CSS file but feel free to not included or change as you wish. 
*
* A LITTLE RECOGNITION 
* This script is free for you to use. However a little recognition is always nice. Leave a comment if you 
* liked the script or send me a message. Linking to my site would be cool too. Thanks and enjoy. 
*
*/

jQuery(document).ready(function()
{
	var content = jQuery("meta[name='sidebar_options']").attr("content");
	var padding_out = "20px";
	var padding_in = "10px";
	
	/* checks for sidebar options */		
	if (content)
	{
		var meta_array = content.split(" ");
				
		if(meta_array.length == 2)
		{
			padding_out = meta_array[0];
			padding_in = meta_array[1];
		}
	}
	
	/* creates "li" and "a" arrays */		
	var list_items = jQuery("#navigation li");
	var links = jQuery("#navigation li a");
	var timer = 0;
	
	/* creats the sliding in effect for each li */		
	list_items.each(function(i)
	{
		jQuery(this).css("margin-left","-13px");
		timer = (timer*.85 + 150);
		jQuery(this).animate({ marginLeft: "0" }, timer);
		jQuery(this).animate({ marginLeft: "10px" }, timer);
		jQuery(this).animate({ marginLeft: "0" }, timer);
	});
	
	/* creats the sliding in effect for each a:hover */		
	links.each(function(i)
	{
		jQuery(this).hover(
		function()
		{
			jQuery(this).animate({ paddingLeft: padding_out }, 150);
		},		
		function()
		{
			jQuery(this).animate({ paddingLeft: padding_in }, 150);
		});
	});
});