// JavaScript Document

$(document).ready(function(){
// add a click event, to a class of link which is applied to an image on the page:
	$(".gallerylb").click(function(){
								  
		// The gallery is needed to, so we chuck that in the 'id' attribute in html when it's generated in php:
		galleryID = $(this).attr("id").replace(/o_0/gi, "/");
		
		caption = getCaption(galleryID);
		//That's all we need for the first photo. Start the lightbox:
		window.startOverlay(galleryID, caption);
		return false;
	});
	
	// This one is for the ones in the articles:
	
	$(".lightbox").click(function(){
		//This is the link that it's connecting to:
		overlayLink = $(this).attr("href");
		// The caption is stored in the title tag of the link:
		caption = $(this).attr("title");
		// The gallery is needed to, so we chuck that in the 'name' attribute in html when it's generated in php:
		//galleryID = $(this).attr("name");
		galleryID = $(this).attr("id").replace(/o_0/gi, "/");
		//That's all we need for the first photo. Start the lightbox:
		window.startSingleOverlay(overlayLink);
		return false;
	});
	
		
});

function startOverlay(galleryID, caption) {

//animate the semitransparant layer
	$(".overlay")
		.css({ 
			 "height": "100%",
			 "width": "100%"
			 })
	$(".overlay").animate({"opacity":"0.7"}, 500, "linear");
	
	
	
	$("#lbcontainer").show();
	$("#lbcontainer").animate({"opacity":"1"}, 500, "linear");
	setTimeout(step2, 500);
	// you need to initiate the removeoverlay function here, otherwise it will not execute.
	window.removeOverlay();
}


// This is here because I'm having trouble with the timing:
function step2 () {
	window.makeLightbox(galleryID, caption);
	
}
	
	
	
function makeLightbox(galleryID, caption){
	
	
	// show the container:
		
	//add the lightbox image to the site, and all the other stuff within the box:
		
		document.getElementById("lbcontainer").innerHTML = '<div id=\"lbcontrols\"><div id=\"lbclose\"><img src=\"images/redx.png\" alt=\"close\" />Close</div><div class=\"lbnext\" onclick=\"getNext(\''+galleryID+'\')"><img src=\"images/rednext.png\" alt=\"next\" />Next&nbsp;&nbsp;</div><div class="lbprev" onclick="getPrev(\''+galleryID+'\')"><img src=\"images/redprev.png\" alt=\"prev\" style=\"float: left;\" />Previous</div></div><img src="images/galleries/'+galleryID+'"  alt="'+galleryID+'" id=\"lbmainimg\"/></div><div class=\"caption\">'+caption+'</div>';

			
			$("#lbcontainer")
				.css({
					"top":        "30px",
					"left":       "50%",				
					"width":      "800px",
					"height":     "90%",
					//"margin-top": -(imgHeight/2),
					"margin-left": "-400px" 
				})
				
	window.removeOverlay();

}



function removeOverlay() {
// allow users to be able to close the lightbox
	$(".overlay, #lbclose").click(function(){
		$("#lbcontainer, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
			$("#lbcontainer").hide();	
			$(".overlay")
				.css({ 
				 "height": "0%",
				 "width": "0%"
			 })
			
		});
		
	});
	
}


// The variable for counting through the arrays to get the next photo.
var j;
// The two arrays for the next function are in the page itself, and called 'galllerynames' (the gallery and image name of each image) and 'gallerycaptions' (the title and copyright for each). 

function getNext(galleryID) {
	
		//Counting through j, where j is less than the length of the arrays:
		for (j = 0; j <= gallerynames.length; j++)
		{
			
			// If there is a match:
			if (gallerynames[j] == galleryID)
			{
				// add one to j to get the next:
				j++;
				
				// fixing it in case it has now gone past the length of the gallery:
				if ( j >= gallerynames.length)
				{
					// Back to the first photo in the array:
					j = 0;
				}
				
				// Assigns the next item in the array to the galleryID variable:
				galleryID = gallerynames[j];
				caption = gallerycaptions[j];
				
				//Strips out the out lightbox:
				$("#lbcontainer")
				.css({
					"top":        "30px",
					"left":       "50%",				
					"width":      "800px",
					"height":     "90%",
					//"margin-top": -(imgHeight/2),
					"margin-left": "-400px" 
				})
			
				//.animate({"opacity":"0"}, 500, "linear");
				window.makeLightbox(galleryID, caption);
			}
		}
}



function getPrev(galleryID) {
		//alert("getting prev");
		//Counting through j, where j is less than the length of the arrays:
		for (j = 0; j <= gallerynames.length; j++)
		{
			
			// If there is a match:
			if (gallerynames[j] == galleryID)
			{
				j--;
				
				if ( j == -1)
				{
					j = gallerynames.length-1;
				}
				
				// Assigns the next item in the array to the galleryID variable:
				galleryID = gallerynames[j];
				caption = gallerycaptions[j];
				
				//Strips out the out lightbox:
				//$("#lbcontainer").hide();
				window.makeLightbox(galleryID, caption);
			}
		}	
			
}

//mouseover event for the medium lightbox image in the photo gallery:

function showmedimage(filename, gallery) {
	closeCapbox();
	document.getElementById("lbmedium").style.backgroundImage = "url(images/galleries/" + gallery + "/med" + filename + ")";
	$thisCaption = getCaption(gallery + "/big" + filename);
	$capTimer = setTimeout(showCaption, 700);

}

// called from show med image by a timer (only activated if the timer is not cleared by mousing off the image)

function showCaption() {
	//alert ($thisCaption);
	document.getElementById("captionbox").innerHTML = $thisCaption+"<div id=\"capclose\" onclick=\"closeCapbox()\" ><h3>Close X</h3></div>";
	$("#captionbox").animate({ 
		height: "60px"
	},	400 );
}


// Called from the img divs on mouseout. Clears the timer that shows the caption if they hover

function clearcaptimer() {
	clearTimeout($capTimer);
}

// Called from the 'closecap' div on click, and the showmedimage function when another image is moused over. Animates the closing of the caption box.

function closeCapbox() {
	document.getElementById("captionbox").innerHTML = "";
	$("#captionbox").animate({ 
		height: "0px"
	},	200 );
}

//called from severl funcitons, gets the caption from the caption array by matching it with the image id

function getCaption (galleryID) {
	//alert(galleryID+" AND "+gallerynames[1]);
		//Counting through j, where j is less than the length of the arrays:
		for (j = 0; j <= gallerynames.length; j++)
		{
			
			// If there is a match:
			if (gallerynames[j] == galleryID)
			{
				var thisCaption	= gallerycaptions[j];
				//alert (thisCaption);
				return (thisCaption);
			}
		}
	
}

//The LB from article images:

function startSingleOverlay(overlayLink) {
//add the elements to the html of the site:
	$("body")
		.append('<div class="overlay"></div><div id="lbcontainer"></div>')
		//.css({"overflow-y":"hidden"});
		$(".overlay").show();
		$("#lbcontainer").show();

//animate the semitransparant layer
	$(".overlay").animate({"opacity":"0.7"}, 500, "linear");

//add the lightbox image to the site, and all the other stuff within the box:
	//$("#lbcontainer").html('<div class="lbclose">Click to close</div><div class="lbnext" onclick="getNext(\'galleryID\')">Next</div><div class="lbprev" onclick="getPrev(\'galleryID\')">Previous</div><img src="'+overlayLink+'" alt="" /></div>');
	$("#lbcontainer").html('<div id=\"lbcontrols\"><div class="lbclose">Click to close</div></div><img src="'+overlayLink+'" alt="galleryID" /></div><div class="caption"></div>');
//position it correctly after downloading
		$("#lbcontainer img").load(function() {
			var imgWidth = $("#lbcontainer img").width() + 100;
			var imgHeight = $("#lbcontainer img").height() + 100;
			$("#lbcontainer")
				.css({
					"top":        "50%",
					"left":       "50%",				
					"width":      imgWidth,
					"height":     imgHeight,
					"margin-top": -(imgHeight/2),
					"margin-left":-(imgWidth/2) 
				})
			
		.animate({"opacity":"1"}, 500, "linear");
		

		// you need to initiate the removeoverlay function here, otherwise it will not execute.
		window.removeOverlay();
	});
}
function removeSinlgeOlay() {
// allow users to be able to close the lightbox
	$(".lbclose, #lbcontainer img, .overlay").click(function(){
		$("#lbcontainer, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
			$("#lbcontainer, .overlay").remove();	
			
		});
		$("body")
		.css({"overflow-y":"auto"});
		
	});
	
}