var speed_multiplier = 2; /** Less is faster **/
var number_of_pixels_to_move_per_round = 2;
var container_width = 300;
var image_width = 50;
var space_between_images = 25;
var number_of_images_shown = 4;
var mouse_x;
var mouse_y;
var sliding = false;
var slide_direction;
var slide_speed;
var sliding_allowed = true;

function setupTheSlideshow(array_data)
{
	if(array_data == undefined || array_data.length == 0)
	{
		alert("You didn't provide the slideshow function with an array!")
		return false;
	}
	/** We calculate the amount of space needed between the images **/
	var space_taken_by_images = number_of_images_shown * image_width;
	var space_between_images = Math.round((container_width-space_taken_by_images)/(number_of_images_shown-1));

	document.write('<div id="slide_show_container" style="position:relative;overflow:hidden;width:'+container_width+'px;height:'+(image_width+2)+'px;border:1px dotted gray;" onmousemove="handle(event);" onmousedown="deactivateSliding();">');
	document.write('	<div id="slide_show_display_area" style="position:absolute; left:0px; top:0px; width:'+container_width+'px; height:'+(image_width+2)+'px; clip: rect(0px '+container_width+'px '+(image_width+2)+'px 0px);"></div>');
	document.write('</div>');
	
	var obj_display_area = document.getElementById("slide_show_display_area");
	/** Now we have all the data we need so we can setup our images **/
	var new_inner_html = "";
	for(var i=0;i<array_data.length;i++)
	{
		var left = 0;
		
		if(i > 0)
		{
			if(i == number_of_images_shown-1)
			{
				left = container_width-image_width-2;
			}
			else
			{
				left = (image_width+space_between_images)*i;	
			}
			
		}
		
		var image_src = array_data[i][0];
		var image_onclick_function = array_data[i][1];
			
		var image = '<img id="slide_image_'+i+'" src="'+image_src+'" style="position:absolute; border: 1px solid gray; left:'+left+'px; width:'+image_width+'px; height:'+image_width+'px;" onclick="'+image_onclick_function+'">';
		new_inner_html += image;
	}
	
	obj_display_area.innerHTML = new_inner_html;
}

/** Determines how fast and in which direction we should scroll**/
function scroll(x, y)
{		
	if(!sliding_allowed)
	{
		return false;
	}
	
	if(x > container_width/2)
	{
		/** We scroll right **/
		
		/** Now we determine how fast we should scroll **/
		var percentage_into_the_right_side = Math.round(((x-(container_width/2)) / (container_width/2)) * 100);
		if(percentage_into_the_right_side > 100)
		{
			percentage_into_the_right_side = 100;
		}
		else if(percentage_into_the_right_side < 20)
		{
			// percentage_into_the_right_side = 10;
			sliding = false;
			return false;
			
		}
		
		var interval_from_one_to_ten = Math.round(percentage_into_the_right_side/10);
		var reversed_interval = (interval_from_one_to_ten*-1)+11;
		slide_speed = reversed_interval*speed_multiplier;
		slide_direction = "right";
		
		/** Now we can call the slider **/
		if(!sliding)
		{
			sliding = true;
			slide();
		}
	}
	else
	{
		/** We scroll left **/
		/** Now we determine how fast we should scroll **/
		var percentage_into_the_left_side = Math.round((((x*-1)+(container_width/2)) / (container_width/2)) * 100);
		if(percentage_into_the_left_side > 100)
		{
			percentage_into_the_left_side = 100;
		}
		else if(percentage_into_the_left_side < 20)
		{
			//percentage_into_the_left_side = 10;
			
			sliding = false;
			return false;
		}
		
		var interval_from_one_to_ten = Math.round(percentage_into_the_left_side/10);
		var reversed_interval = (interval_from_one_to_ten*-1)+11;
		slide_speed = reversed_interval*speed_multiplier;
		slide_direction = "left";
		
		/** Now we can call the slider **/
		if(!sliding)
		{
			sliding = true;
			slide();	
		}
		
	}
}

function reactivatedSliding()
{
	sliding_allowed = true;
}

function deactivateSliding()
{
	sliding = false;
	sliding_allowed = false;
	setTimeout("reactivatedSliding()", 2000);	
}

function stopScroll()
{
	sliding = false;
}

function slide()
{
	if(sliding)
	{
		/** We determine in which direction we should scroll **/
		if(slide_direction == "right")
		{
			/** We scroll right **/
			/** We check if the last element is already visible, if so we shouldn't scroll anymore **/
			var last_obj_position = array_data.length-1;
			var obj_last_element = document.getElementById("slide_image_"+last_obj_position);
			var last_elements_right_side = (obj_last_element.style.left.replace("px", "")*1)+image_width+2;
			if(last_elements_right_side > container_width)
			{
				/** We run through the array, changing the left with 1 each time until the last image reaches the size of the display area **/
				for(var i=0;i<array_data.length;i++)
				{
					var obj_id_string = "slide_image_" + i;
					var obj = document.getElementById(obj_id_string);
					obj.style.left = ((obj.style.left.replace("px", "")*1) - number_of_pixels_to_move_per_round) + "px";
				}
			}
			else
			{
				sliding = false;
			}
			
		}
		else
		{
			/** We scroll left **/
			/** We check if the first element is already visible, if so we shouldn't scroll anymore **/
			var obj_first_element = document.getElementById("slide_image_0");
			var first_elements_left_side = (obj_first_element.style.left.replace("px", "")*1);		
			if(first_elements_left_side < 0)
			{
				/** We run through the array, changing the left with 1 each time until the last image reaches the size of the display area **/
				for(var i=0;i<array_data.length;i++)
				{
					var obj_id_string = "slide_image_" + i;
					var obj = document.getElementById(obj_id_string);
					obj.style.left = ((obj.style.left.replace("px", "")*1) + number_of_pixels_to_move_per_round) + "px";
				}		
			}
			else
			{
				sliding = false;
			}
		}
		
		setTimeout("slide()", slide_speed);
	}

}

function handle(event) 
{
	mouse_x = (event.clientX)-findPosX(document.getElementById('slide_show_container'));
	mouse_y = (event.clientY)-findPosY(document.getElementById('slide_show_container'));
	
	scroll(mouse_x, mouse_y);
}

function findPosX(obj) 
{
	var curleft = 0;
	if (obj) {
		if (obj.offsetParent) {
			while (obj.offsetParent) {
				curleft += obj.offsetLeft
				obj = obj.offsetParent;
			}
		}
		else if (obj.x) {
			curleft += obj.x;
		}
	}
	return curleft;
}

function findPosY(obj) 
{
	var curtop = 0;
	if (obj) {
		if (obj.offsetParent) {
			while (obj.offsetParent) {
				curtop += obj.offsetTop
				obj = obj.offsetParent;
			}
		}
		else if (obj.y) {
			curtop += obj.y;
		}
	}
	return curtop;
}