// JavaScript Document


var current = null;


function slideShow(ImageSelector, ThumbSelector)
{
	
	
	$(document).ready(function()
	{
		var back = $(ThumbSelector + " div.slideBack");
		var next = $(ThumbSelector + " div.slideNext");
		var frame = $(ThumbSelector + " div.slideFrame");
		var links = $(ThumbSelector + " div.slideFrame li img")		
		var image = $(ImageSelector);
		var panel = frame.find("div.slidePanel");
		
		

		
		var waitTime = 15;
		var moveStep = 8;
		
		
		
		
		
		
		//very queries
		if (back != null && next != null && frame != null && panel != null && image != null && 	panel != null)
		{
			if (links.length > 0)
			{
				source = $(links[0]);
				
				changeSource(source,image,panel,frame,null);
				
			
				
				
			}
			
			//alert(frameWidth + " : " + panelWidth);
			
			var backTimer = null;
			var nextTimer = null;
			
			//wire up events
			links.click(function()
			{
				if (image.length > 0)
				{		
					//image.attr("src",$(this).attr("lrgImg"));
					//var source = $(this).find("img");
					var source = $(this);
					
					changeSource(source,image,panel,frame,null);
					
					
				}
				
				
				
			});
									
			$(document).keydown(function (e){
			
				//alert(e.keyCode);
				switch (e.keyCode)
				{
					 case 37:
					 	
						
						//find previous
						if (current != null)
						{
							var listQuery = $(current).prev("li");
							
							//alert(sourceQuery.length);
							
							if(listQuery.length > 0)
							{
								var source = $(listQuery[0]).find("img")[0];
								
								
								changeSource(source,image,panel,frame,"prev");
								
								
								
								
								
								
								
								
							}
							
							
							
							
							
						}
						
						
						break;        
					
					case 39:
						//find previous
						if (current != null)
						{
							var listQuery = $(current).next("li");
							
							//alert(sourceQuery.length);
							
							if(listQuery.length > 0)
							{
								var source = $(listQuery[0]).find("img")[0];
								
								
								changeSource(source,image,panel,frame,"next");
								
								
								
							}
							
						}
						break;        	
					
					
					
				}
					
				
					
					
					
					
			});
			
			back.hover(
				function()
				{
					var frameWidth = frame.width();
					var panelWidth = panel.width();
					
					
					var panelLeft = parseFloat(panel.css("left")); 
					
					
					backTimer = setInterval(
											function()
											{
												if (panelLeft < 0)
												{
													panelLeft = panelLeft + moveStep;
													
													if (panelLeft > 0)
													{
														panelLeft = 0;
													}
													
													panel.css("left",panelLeft + "px");
												
													
												}
											},
											waitTime);
					
					
				},
				function()
				{
					clearInterval(backTimer);
				});
			
			
			next.hover(
				function()
				{
					var frameWidth = frame.width();
					var panelWidth = panel.width();
					
					var maxSlide = frameWidth - panelWidth;
					var panelLeft = parseFloat(panel.css("left")); 
					
					
					
					
					nextTimer = setInterval(
											function()
											{
												if (panelLeft > maxSlide)
												{
													panelLeft = panelLeft - moveStep;
													
													if (panelLeft < maxSlide)
													{
														panelLeft = maxSlide;
													}
													
													panel.css("left",panelLeft + "px");
												
													//alert(panel.css("left"));
												}
											},
											waitTime);
					
				},
				function()
				{
					clearInterval(nextTimer);
				});
			
			
			
		}	
		
		
	});

	
}


changeSource = function(source,image,panel,frame, direction)
{
	if (source != null && image != null && panel != null && frame != null)
	{
		
		
		//get the image path
		var sourcePath = $(source).attr("src").toLowerCase();
		
		//get the array						
		var sourceArray =sourcePath.split("/");
		
		if (sourceArray.length > 1)
		{
			//insert 'large
			sourceArray.splice(sourceArray.length-1,0,"large");
		}
		
		sourcePath = sourceArray.join("/");

		
		$(image).attr("src",sourcePath);
		$(image).css("display","block");
		
		//set focus ------------------------
		if (current != null)
		{
			$(current).removeClass("focus");							
		}
		
		current = $(source).parent("li");
		
		
		$(current).addClass("focus");
		
		
		if (direction != null)
		{

			
			
			//move the slider
			var listItem = current;
			
			var itemRight = listItem.position().left + listItem.width();
			
			var panelLeft = parseFloat(panel.css("left"));
			
			
			
			
			switch (direction)
			{
				case "next":
					var movePanel = (itemRight - frame.width()) * -1;
				
					if (movePanel < 0)
					{
						panel.css("left",(movePanel + "px"));
					}
					break;
					
				case "prev":
					
					
					var movePanel = panelLeft +  listItem.width();
				
					
					//alert(itemRight + " : " + panelLeft + " : " + movePanel);
					
					
					if (movePanel > 0)
					{
						movePanel = 0;
					}
					
					
					if (movePanel <= 0)
					{
						panel.css("left",(movePanel + "px"));
					}
					
					
				
					break;
			}
			
			
		}
		
		

		
	}

	
	
	
}