$(document).ready(function(){

	//This keeps track of the slideshow's current location
	var current_panel1 = 1;
	var current_panel2 = 1;
	var current = new Array(current_panel1, current_panel2);
	
	//Controlling the duration of stop by variable will simplify changes
	var stop_duration = 6000;
	//Controlling the duration of animation by variable will simplify changes
	var animation_duration = 500;
	
	//var sum = 4;
	var ss = new Array("#slideshow", "#slideshow2");
	
	// position
	var pos = [{left: "-240px", top: "0px"},
		{left: "-480px", top: "0px"},
		{left: "-720px", top: "0px"},
		{left: "0px", top: "0px"}];
	
	var len = ss.length;

	for(var i = 0; i < len; i ++){
		doSlide(ss[i],current[i] );
	}
	
	function doSlide(target, current)
	{
		$.timer(stop_duration, function (timer) {
			//Determine the current location, and transition to next panel
			switch(current){
				case 1:
					$(target).stop().animate(pos[0], {easing: 'easeOutBack', duration: animation_duration});
					current = 2;
				break;
				case 2:
					$(target).stop().animate(pos[1], {easing: 'easeOutBack', duration: animation_duration});
					current = 3;
				break;
				case 3:
					$(target).stop().animate(pos[2], {easing: 'easeOutBack', duration: animation_duration});
					current = 4;
				break;
				case 4:
					$(target).stop().animate(pos[3], {easing: 'easeOutBack', duration: animation_duration});
					current = 1;
				break;
				timer.reset(stop_duration * 2);
			}
			
			$(target).hover(function() {
				timer.stop();
			});
			
			$(target).mouseout(function() {
				timer.reset(stop_duration);
			});
		});
	}
});