/*Photo Gallery script by Brandalyn Khumalo-Athons*/
	
	//global thumbnail variables
	var start_p = null;
	var end_p_right = null;
	var end_p_left = null;
	var interval = 10;
	var mouseover = false;
	
	//global largeimage variables
	var start_p_large = null; //current marginLeft position of large_image div
	var end_p_large = null; //width of large_image div
	var interval_large = 600; //number of pixels to move large image
	var slideShow = true; //slide show is working
	
	var type = "dino";
	var baseurl = "";
	if(type == 'dino'){ baseurl = "http://www.sgcity.org/leisure/assets/images/photogallery/dinotrax/"; }
	var images = new Array();
	images[0] = new Array('jrclub_01.jpg','jrclub_thumb_01.jpg');
images[1] = new Array('jrclub_02.jpg','jrclub_thumb_02.jpg');
images[2] = new Array('jrclub_03.jpg','jrclub_thumb_03.jpg');
images[3] = new Array('jrclub_04.jpg','jrclub_thumb_04.jpg');
images[4] = new Array('jrclub_05.jpg','jrclub_thumb_05.jpg');
 var cat_length = 5;	var category = 0;
	
	//animate
	function moveLargeImage(start,end){
		
		if(slideShow == false){
			return;
		}
		
		//change coordinates
		if(start > end){ //0 > -400
			start -= 20;
		}
		//move the margin
		document.getElementById("large_image").style.marginLeft = start + 'px';
		
		//if we're not to the edge yet
		if(start != end){ //-10 > -400
			//setTimeout('moveLargeImage',50, start, end); 
			setTimeout(function(){
				moveLargeImage(start,end);
			},50)
		}
		
		//we are at the end
		/*if(start<= end){
			return;
		}*/
	}
	
	function viewSlideshow(){
		
		start_p_large = parseInt(document.getElementById("large_image").style.marginLeft); //current marginLeft
		
		//set amount of pixels to move
		end_p_large = cat_length * -500;
		//alert(start_p_large);
		var next_p = start_p_large -500;
		
		//if(start_p_large > next_p){ //0 > -400
		if((start_p_large-500) > end_p_large){
			//alert(start_p_large + ' ' + next_p + ' ' + end_p_large);
			moveLargeImage(start_p_large,next_p);
			window.setTimeout('viewSlideshow()',5000);
		} else { //at the end
			setTimeout(function(){
				//reset margin-left
				document.getElementById("large_image").style.marginLeft = '0px';
				
				setTimeout(function(){
					viewSlideshow();
				},5000);
			
			},5000);
		}
		
		//if user clicked on thumbnail then the slideshow stops
		if(slideShow == false){
			return;
		}
	}
	
	function loadLargeImages(){
	
		//reset margin-left
		document.getElementById("large_image").style.marginLeft = '0px';
	
		var viewImage_html = "";
		
		for(var i = 0; i< images.length; i++){
			var viewImage = baseurl + images[i][0];
			viewImage_html += "<img src='" + viewImage + "' style='float:left;'>";
		}
		
		//set div width and load large image
		//width of image
		end_p_large = cat_length * 500;
		document.getElementById("large_image").style.width = end_p_large + 'px';
		document.getElementById("large_image").innerHTML = viewImage_html;
		
		//call slideshow function
		setTimeout("viewSlideshow()",5000);
	} //end function loadLargeImages
	
	function loadThumbnails(){
	
		//reset margin-left
		document.getElementById("thumbnails").style.marginLeft = '0px';
		
		var thumb_html = "";
		
		for(var i = 0; i < images.length; i++){
			var fullsize = baseurl + images[i][0];
			var thumbnail = baseurl + images[i][1];
			thumb_html += "<a onclick=\"setFullsize('" + fullsize + "'); slideShow=false;\"><img src='" + thumbnail + "'></a>";
		}		
		
		//set thumbnails div width and load thumbnails
		//width of thumbnail + margin width
		document.getElementById("thumbnails").style.width = ((cat_length * 92) + (cat_length * 10)) + 'px';
		document.getElementById("thumbnails").innerHTML = thumb_html;
		
		//call loadLargeImages()
		loadLargeImages();		
	
	} //end function loadThumbnails
	
	//show fullsize image when thumbnail is clicked
	function setFullsize(large_url){
		document.getElementById("large_image").style.marginLeft = '0px';
		document.getElementById("large_image").innerHTML = "<img src='" + large_url + "'>";
	}
	
	function scrollThumbs_right(){
		
		end_p_right = (parseInt(document.getElementById("thumbnails").style.width) - 500) * -1;
		
		//change the margin coordinates
		//moving right - moves div to left and marginLeft becomes negative
		if (start_p > end_p_right){ // starts at 0 > div width
			start_p = start_p - interval;
		}
		
		//move the margin
		document.getElementById("thumbnails").style.marginLeft = start_p + 'px';
		//if mouse is not on button
		if (mouseover == false){
			return;
			
		}
		//if div hasn't moved to the edge yet
		if(start_p > end_p_right){ //0 > div width
			window.setTimeout('scrollThumbs_right()',50);
		}	
	} //end function scrollThumbs_right()
	
	function scrollThumbs_left(){
		
		//change the margin coordinates
		//moving right - moves div to left and marginLeft becomes negative
		if (start_p < end_p_left){ // starts at -500 < 0
			start_p = start_p + interval;
		}
		
		//move the margin
		document.getElementById("thumbnails").style.marginLeft = start_p + 'px';
		//if mouse is not on button
		if (mouseover == false){
			return;
			
		}
		//if div hasn't moved to the edge yet
		if(start_p < end_p_left){ //-500 < 0
			window.setTimeout('scrollThumbs_left()',50);
		}	
		
	} //end function scrollThumbs_left()	
	
	//see if the window.onload is executing a function
	if(typeof window.onload == "function"){
		//put the original onload into a variable
		var old = window.onload;
		
		//need this because we are doing multiple onload events
		//execulte the new functions
		window.onload = function(){
			
			//thumbnail scroller variables
			start_p = parseInt(document.getElementById("thumbnails").style.marginLeft); //current position
			end_p_left = 0; //left edge of thumbnails div
			interval = 10; //how many pixels to move
		
			loadThumbnails();
			
			//execute the old saved functions
			old();
		}		
	}