// JavaScript Document
$(document).ready(function() {

	// ========== ========== ========== ========== ==========
	// ========== ========== carousel 1 ========== ==========
	// ========== ========== ========== ========== ==========
	var li_count_1 = $("#slides > ul li").size();
	//alert(li_count_1);
	
	//rotation speed and timer
	var speed1 = 5000;
	var run1 = setInterval('rotate1()', speed1);	
	
	//grab the width and calculate left value
	var item_width_1 = $('#slides li').outerWidth(); 
	var left_value_1 = item_width_1 * (-1); 
        
	if(li_count_1 == 1)
	{
		$('#slides li:first').clone().appendTo('#slides ul');  //create dummy
		$('#slides li:first').clone().appendTo('#slides ul');  //create dummy
	}
	else
	{
		//move the last item before first item, just in case user click prev button
		$('#slides li:first').before($('#slides li:last'));
		
		if(li_count_1 == 2)
		{
			$('#slides li:first').clone().appendTo('#slides ul');  //create dummy
		}
	}
	//set the default item to the correct position 
	$('#slides ul').css({'left' : left_value_1});  //centering the div
	
  //move the last item before first item, just in case user click prev button
	//$('#slides li:first').before($('#slides li:last'));
	//set the default item to the correct position 
	//$('#slides ul').css({'left' : left_value_1});
	
	setTimeout("rotate1()",2000);
	
    //if user clicked on prev button
	$('#prev').click(function() {

		//get the right position            
		var left_indent_1 = parseInt($('#slides ul').css('left')) + item_width_1;

		//slide the item            
		$('#slides ul:not(:animated)').animate({'left' : left_indent_1}, 2000,function(){    

			if(li_count_1 == 2)
				{
					//remove last, 'swap', create dummy
					$('#slides li:last').remove();
					$('#slides li:first').before($('#slides li:last'));
					$('#slides li:first').clone().appendTo('#slides ul');
					
					$('#slides ul').css({'left' : left_value_1});
				}
				else
				{
					//move the last item and put it as first item            	
					$('#slides li:first').before($('#slides li:last'));           
					
					//set the default item to correct position
					$('#slides ul').css({'left' : left_value_1});
				}
			
      //move the last item and put it as first item            	
			//$('#slides li:first').before($('#slides li:last'));           
			//set the default item to correct position
			//$('#slides ul').css({'left' : left_value_1});
		
		});

		//cancel the link behavior            
		return false;
            
	});

 
    //if user clicked on next button
	$('#next').click(function() {
		
		//get the right position
		var left_indent_1 = parseInt($('#slides ul').css('left')) - item_width_1;
		
		//slide the item
		$('#slides ul:not(:animated)').animate({'left' : left_indent_1}, 2000, function () {
            
			
			if(li_count_1 == 2)
			{
				$('#slides li:first').remove();
				$('#slides li:first').clone().appendTo('#slides ul');
				
				$('#slides ul').css({'left' : left_value_1});
			}
			else
			{
				//move the first item and put it as last item
				$('#slides li:last').after($('#slides li:first'));                 	
				
				//set the default item to correct position
				$('#slides ul').css({'left' : left_value_1});
			}
				
      //move the first item and put it as last item
			//$('#slides li:last').after($('#slides li:first'));                 	
			//set the default item to correct position
			//$('#slides ul').css({'left' : left_value_1});
		
		});
		         
		//cancel the link behavior
		return false;
		
	});        
	
	
	//if mouse hover, pause the auto rotation, otherwise rotate it
	/*
	$('#slides').hover(
		function() {
			clearInterval(run1);
		}, 
		function() {
			run1 = setInterval('rotate1()', speed1);	
		}
	);
	*/
	
	
	// ========== ========== ========== ========== ==========
	// ========== ========== carousel 2 ========== ==========
	// ========== ========== ========== ========== ==========
	var li_count = $("#slides2 > ul li").size();
	//alert(li_count);
	
	//rotation speed and timer
	var speed = 16500;  // require 1.5s to complete animation
	var run = setInterval('rotate()', speed);	
	
	//grab the width and calculate left value
	var item_width = $('#slides2 li').outerWidth(); 
	var left_value = item_width * (-1); 
  
	
	if(li_count == 1)
	{
		$('#slides2 li:first').clone().appendTo('#slides2 ul');  //create dummy
		$('#slides2 li:first').clone().appendTo('#slides2 ul');  //create dummy
	}
	else
	{
		//move the last item before first item, just in case user click prev button
		$('#slides2 li:first').before($('#slides2 li:last'));
		
		if(li_count == 2)
		{
			$('#slides2 li:first').clone().appendTo('#slides2 ul');  //create dummy
		}
	}
	//set the default item to the correct position 
	$('#slides2 ul').css({'left' : left_value});  //centering the div
	
  //move the last item before first item, just in case user click prev button
	//$('#slides2 li:first').before($('#slides2 li:last'));
	//set the default item to the correct position 
	//$('#slides2 ul').css({'left' : left_value});
	
	//setTimeout("rotate()",1000);
	
	if(li_count != 1) //disable click if 1
	{
		//if user clicked on prev button
		$('#prev2').click(function() {

			//get the right position            
			var left_indent = parseInt($('#slides2 ul').css('left')) + item_width;

			//slide the item            
			$('#slides2 ul:not(:animated)').animate({'left' : left_indent},1500,function(){    
				
				if(li_count == 2)
				{
					//remove last, 'swap', create dummy
					$('#slides2 li:last').remove();
					$('#slides2 li:first').before($('#slides2 li:last'));
					$('#slides2 li:first').clone().appendTo('#slides2 ul');
					
					$('#slides2 ul').css({'left' : left_value});
				}
				else
				{
					//move the last item and put it as first item            	
					$('#slides2 li:first').before($('#slides2 li:last'));           
					
					//set the default item to correct position
					$('#slides2 ul').css({'left' : left_value});
				}
				
				//move the last item and put it as first item            	
				//$('#slides2 li:first').before($('#slides2 li:last'));           
				//set the default item to correct position
				//$('#slides2 ul').css({'left' : left_value});
			
			});

			//cancel the link behavior            
			return false;
							
		});

	 
			//if user clicked on next2 button
		$('#next2').click(function() {
			
			//get the right position
			var left_indent = parseInt($('#slides2 ul').css('left')) - item_width;
			
			//slide the item
			$('#slides2 ul:not(:animated)').animate({'left' : left_indent}, 1500, function () {
				
				if(li_count == 2)
				{
					$('#slides2 li:first').remove();
					$('#slides2 li:first').clone().appendTo('#slides2 ul');
					
					$('#slides2 ul').css({'left' : left_value});
				}
				else
				{
					//move the first item and put it as last item
					$('#slides2 li:last').after($('#slides2 li:first'));                 	
					
					//set the default item to correct position
					$('#slides2 ul').css({'left' : left_value});
				}
				
				//move the first item and put it as last item
				//$('#slides2 li:last').after($('#slides2 li:first'));                 	
				//set the default item to correct position
				//$('#slides2 ul').css({'left' : left_value});
			
			});
							 
			//cancel the link behavior
			return false;
			
		});        
		
		//if mouse hover, pause the auto rotation, otherwise rotate it
		
		/*$('#slides2').hover(
			function() {
				clearInterval(run);
			}, 
			function() {
				run = setInterval('rotate()', speed);	
			}
		);*/
		
	}
        
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate1() {
	$('#next').click();
}

//a simple function to click next2 link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
	$('#next2').click();
}