jQuery(document).ready(function() {
	social_footer();
	carusel();
	zoom_gallery();
	jquery_tabs();
	sliding_menus();
});

function social_footer(){
	jQuery('#social .social-links a:has(img)').fadeTo("fast","0.45");
	jQuery('#social .social-links a:has(img)').hover(function() {
		jQuery(this).stop().fadeTo("fast","1");
		}, function() {
		jQuery(this).stop().fadeTo("fast","0.45");
	});
}

function zoom_gallery(){
$('.zoom').hover(function(){
			$(this).find('img').stop().animate({opacity: 0.45}, 300);
		}, function () {
			$(this).find('img').stop().animate({opacity: 1}, 300);
		});
}

function sliding_menus(){
	$(document).ready(function()
	{
		
		// Opera and IE6 have small problems with this effect
		if (!$.browser.opera && !$.browser.msie)
		{
			$('#header-links li','.widget.list li').hover(function()
			{
				var submenu = $(this).children('ul');
				if (submenu.length > 0)
				{
					var final_height = submenu.height();
					submenu.css({height:0, opacity:0}).animate({height:final_height, opacity:1}, 'fast');
				}
			}, function()
			{
				var submenu = $(this).children('ul');
				if (submenu.length > 0)
				{
					submenu.stop().css('display', '').css('height', '');
				}
			});
		}
		
		// Nav
		var nav = $('.sliding');
		var navElements = nav.children('li');
		navElements.hover(function()
		{
			$(this).children('a').css({'padding-left':'5px', 'padding-right':'15px'}).animate({paddingLeft:'10px', paddingRight:'5px'}, 100);
		}, function()
		{
			$(this).children('a').css({'padding-left':'15px', 'padding-right':'5px'}).animate({paddingLeft:'0px', paddingRight:'5px'}, 100);
		});
		
	
	});
}

function jquery_tabs(){
	$(function () {  
			// Display the first tab content
			// Set the first tab as start tab onload: if you want to set no start tab comment it.
			DisplayTabContent(0);
			
				// get index of the clicked navigation item in the list
				$("ul.tabslist li a" ).click(function(){
				
					// if animation has finished: meaning size()==0 then allow for other clicks
					if ($('div.tabscontent_container > div.tabcontent:animated').size() == 0)
					{
						$("ul.tabslist li").removeClass('current');
						var $listItem = $(this).parent().addClass('current');//set as current class
	
						var index = $("ul.tabslist li ").index($listItem);// get index 
	
						if( index > -1 ){
						DisplayTabContent(index);
						}
					}
				});
				 return false;   
		 });
	
	/**Display tab content that was clicked by index and hide the rest**/
	function DisplayTabContent(index) {
		// display the first tab content
		$("div.tabscontent_container > div.tabcontent").hide().filter(":nth("+index+")").slideDown('slow');
		return false;
	}

}

function carusel(){
        //when user clicks the image for sliding right        
        $('#right_scroll img').click(function(){
        
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('#carousel_ul li').outerWidth() + 0;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
                
                //and get the left indent to the default -210px
                $('#carousel_ul').css({'left' : '-310px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll img').click(function(){
            
            var item_width = $('#carousel_ul li').outerWidth() + 0;
            
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
            
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
            
            /* when sliding to left we are moving the last item before the first list item */            
            $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
            
            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            $('#carousel_ul').css({'left' : '-310px'});
            });
            
            
        });
}