/*
	Designer: Khaled Elfarra
	Date: 08/23/2009
	Site: www.khaledelfarra.com
*/

/************************************************************************
========================= Slow Hover Effect =============================
************************************************************************/
$(function () {  
			
	$('.menu li a').append('<span class="hover"/>').each(function(){
		var $span = $('> span.hover', this).css('opacity', 0);  
		$(this).hover(function(){
				$span.stop().fadeTo(800, 1).fadeOut('slow').fadeIn('slow');
		}, function(){
			$span.stop().fadeTo(800, 0);
		});
	});
	
	/*For the tool tip hover state*/
	$('#tip a').append('<span class="hover"/>').each(function(){
		var $span = $('> span.hover', this).css('opacity', 0);  
		$(this).hover(function(){
				$span.stop().fadeTo(800, 1);
		}, function(){
			$span.stop().fadeTo(800, 0);
		});
	});
	
	/*For the tool tip*/
	$('#tip a[href][title]').qtip({
		content: {
 			text: false
		},
		style: {
			background: '#140000',
			color: 'white',
			border: {
				 width: 1,
				 radius: 3,
				 color: '#4c4b4b'
			},
			tip: true,
		},
		position: {
			corner: {
				target: 'topMiddle',
				tooltip: 'center'
			}
		}

   });
	
	/*Input (textbox and text area hover state)*/
	$('input').mousedown(function(){
		$(this).css('border-color', '#fff');
	});
	
	$('textarea').mousedown(function(){
		$(this).css('border-color', '#fff');
	});
	
	/*$('input').mouseup(function(){
		$(this).css('border-color', '#666');
	});*/

});




$(document).ready(function()
{
	slide("#sliding-navigation", 35, 200, .8);
	
	$('#sliding-navigation').css('opacity', 0).fadeTo(2000,1);
	$('.menu').css('opacity', 0).fadeTo(1000, 1);
});

function slide(navigation_id, pad_out_in , time, multiplier)
{
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
	
	var timer = 0;
	
	/*$(list_elements).each(function(i)
	{
		$(this).css("margin-left","-180px");
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});*/

	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ 
				paddingLeft: pad_out_in, 
				"backgroundPosition": "15px 3px"}, time);
		},		
		function()
		{
			$(this).animate({ paddingLeft: 20,
				"backgroundPosition": "0px 3px"}, time);
		});
	});
}