$(document).ready(function() {

	//rotation speed and timer
	var speed = 5000;
	var run = setInterval('rotate()', speed);	
	
	var item_width = 170;
	var left_value = item_width *(-1);
	
	var images = new Array();
	images[0] = "01.jpg";
	images[1] = "02.jpg";
	images[2] = "03.jpg";
	images[3] = "04.jpg";
	images[4] = "05.jpg";
	images[5] = "06.jpg";
	images[6] = "07.jpg";
	images[7] = "08.jpg";
	images[8] = "09.jpg";
	images[9] = "10.jpg";
	images[10] = "11.jpg";
	images[11] = "12.jpg";
	images[12] = "13.jpg";
	images[13] = "14.jpg";
	images[14] = "15.jpg";
	images[15] = "16.jpg";
	images[16] = "17.jpg";
	images[17] = "18.jpg";
	images[18] = "19.jpg";
	
	var imagePath = "/articles/images/stories/mace/"
	var slideImages = "<ul>";
	
	for (var i=0;i < images.length;i++) {
		slideImages += '<li><img src="'+imagePath+images[i]+'" id="sImage'+i+'" /></li>';
	}
	
	slideImages += '<div class="clr"></ul>';
	
	$("#slides").html(slideImages);
	//grab the width and calculate left value	

	
    //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});
	$('#slides ul').css("width", images.length*170);
	


    //if user clicked on prev button
	$('#prev').click(function() {

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

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

            //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});
		
		});

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

 
    //if user clicked on next button
	$('#next').click(function() {
		
		//get the right position
		var left_indent = parseInt($('#slides ul').css('left')) - item_width;
		
		//slide the item
		$('#slides ul:not(:animated)').animate({'left' : left_indent}, 300, function () {
            
            //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});
		
		});
		         
		//cancel the link behavior
		return false;
		
	});        
	
	//if mouse hover, pause the auto rotation, otherwise rotate it
	$('#slides').hover(
		
		function() {
			clearInterval(run);
		}, 
		function() {
			run = setInterval('rotate()', speed);	
		}
	); 
    
	rotate();
});

$(window).load(
    function() {
      	var temp0 = $("#slides #sImage0").height() / 2;
		var temp1 = $("#slides #sImage1").height() / 2;
		var temp2 = $("#slides #sImage2").height() / 2;
		var temp3 = $("#slides #sImage3").height() / 2;
		var temp4 = $("#slides #sImage4").height() / 2;
		var temp5 = $("#slides #sImage5").height() / 2;
		var temp6 = $("#slides #sImage6").height() / 2;
		var temp7 = $("#slides #sImage7").height() / 2;
		var temp8 = $("#slides #sImage8").height() / 2;
		var temp9 = $("#slides #sImage9").height() / 2;
		var temp10 = $("#slides #sImage10").height() / 2;
		var temp11 = $("#slides #sImage11").height() / 2;
		var temp12 = $("#slides #sImage12").height() / 2;
		var temp13 = $("#slides #sImage13").height() / 2;
		var temp14 = $("#slides #sImage14").height() / 2;
		var temp15 = $("#slides #sImage15").height() / 2;
		var temp16 = $("#slides #sImage16").height() / 2;
		var temp17 = $("#slides #sImage17").height() / 2;
		var temp18 = $("#slides #sImage18").height() / 2;

		$("#slides #sImage0").css("margin-top", -(temp0));
		$("#slides #sImage1").css("margin-top", -(temp1));
		$("#slides #sImage2").css("margin-top", -(temp2));
		$("#slides #sImage3").css("margin-top", -(temp3));
		$("#slides #sImage4").css("margin-top", -(temp4));
		$("#slides #sImage5").css("margin-top", -(temp5));
		$("#slides #sImage6").css("margin-top", -(temp6));
		$("#slides #sImage7").css("margin-top", -(temp7));
		$("#slides #sImage8").css("margin-top", -(temp8));
		$("#slides #sImage9").css("margin-top", -(temp9));
		$("#slides #sImage10").css("margin-top", -(temp10));
		$("#slides #sImage11").css("margin-top", -(temp11));
		$("#slides #sImage12").css("margin-top", -(temp12));
		$("#slides #sImage13").css("margin-top", -(temp13));
		$("#slides #sImage14").css("margin-top", -(temp14));
		$("#slides #sImage15").css("margin-top", -(temp15));
		$("#slides #sImage16").css("margin-top", -(temp16));
		$("#slides #sImage17").css("margin-top", -(temp17));
		$("#slides #sImage18").css("margin-top", -(temp18));
    }
);

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