$(document).ready(function() {
	  
	  //options( 1 - ON , 0 - OFF)
	  var auto_slide = 1;
	  
	  //speed of auto slide(
	  var auto_slide_seconds = 2000;
	  /* IMPORTANT: the variable seconds is in milliseconds */
	  
	  /*move he last list item before the first item. The purpose of this is 
	  if the user clicks to slide left he will be able to see the last item.*/
	  $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
	  
	  //check if auto sliding is enabled
	  if(auto_slide == 1){
		  /*set the interval (loop) to call function slide with option 'bottom' 
		  and set the interval time to the variable we declared previously */
		  var timer = setInterval('slide("bottom")', auto_slide_seconds); 
	  }    
});

//FUNCTIONS BELLOW

//slide function  
function slide(where){
    
	//get the item height 
	var item_height = $('#carousel_ul li').outerHeight();
//	alert(item_height);
	$('#carousel_ul li:nth-child(1)').css({'opacity' : '0'});
	$('#carousel_ul li:nth-child(1)').fadeTo(550, 1);
	//$('#carousel_ul li:nth-child(0)').fadeIn(600);
	$('#carousel_ul li:nth-child(5)').fadeTo(300, 0.1);

	//make the sliding effect using jQuery's animate function... '
	$('#carousel_ul:not(:animated)').animate({'top' : 0},500,function(){    
		
		/* when the animation finishes use the if statement again, and make an ilussion
		of infinity by changing place of last or first item*/
		if(where == 'bottom'){
			//...and if it slided to bottom we put the last item before the first item
			$('#carousel_ul li:first').before($('#carousel_ul li:last'));
			$('#carousel_ul li:first').css({'opacity' : '1'});
		}else{
			//...and if it slided to top we put the first item after the last item
			$('#carousel_ul li:last').after($('#carousel_ul li:first')); 
		}
		
		//...and then just get back the default top indent
		$('#carousel_ul').css({'top' : '-16px'});

	});      
}