// JavaScript Document
// Script slideShow.js
// this script only handles the loading of the slides and thumbnail menus.
var ie = navigator.userAgent.indexOf("MSIE");
var ie7 = navigator.userAgent.indexOf('MSIE 7');
var ie6 = navigator.userAgent.indexOf('MSIE 6');

var Images = new Array(); // For the Photos
var loaded = new Array();
// Handle the Categories links onclick events
function prepareNavigationLinks() {

DBquery(initCat,0);
//alert(catID)
	var nav = document.getElementById("nav");
	
	var links = nav.getElementsByTagName("a");
	
	for(var i=0; i < links.length; i++) {
		
		if(links[i].id == catID) { // Change the link colour to selected.
			links[i].style.color="#FFD930";
		}
		if(links[i].parentNode.className == "cats") {
			
			links[i].onclick=function() {
				for(i = 0; i < links.length; i++) {
	
					links[i].style.color=""; // unhighlight the links
					
				}
				var cat = this.id;
				
				this.style.color="#FFD930"; // highlight the clicked link	

				$("img#slide").attr("style","display:none");
	
				DBquery(cat,0); //call XmlRequest function
				return false;
				}
			}
		}
		
	
}
function GetXmlHttpObject() { 

 var objXMLHttp=null;
 
	 if (window.XMLHttpRequest) {
	  objXMLHttp=new XMLHttpRequest();
	  
	  } else if (window.ActiveXObject) {
	  
	  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
 return objXMLHttp;
 
}
function DBquery(categoryID,start) { // Sends a query to the database.
	// In this script the prepareNavigationLinks() function passes the id attribute of the clicked link to the DBquery() as the 'category' argument.  'start' is set to 0 so that the query returns records starting at the first record.  This value may be modified later on if you need to accommodate more images per category.

// Check if browser supports HTTP Requests object.	
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }

var url="xmlRequest.php";
url=url+"?cat="+categoryID;
url=url+"&s="+start;

xmlHttp.onreadystatechange=function() {
		
		updateContent(categoryID); 
		
		}

	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);

}
			
		
function updateContent(category) { 


if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 

  xmlDoc=xmlHttp.responseXML;

if(!Images[category] && category != indexCat) {
Images[category] = new Array(); // For the Photos
//loaded[category] = false;
  loadAnimation();
}

var currImage = 0; // Set this counter to 0, i.e. the first image.
var caption = new Array();

var slide = document.getElementById("slide");
var mycaption = document.getElementById("mycaption");
var imagemenu = document.getElementById("imagemenu");
var textwrapper = document.getElementById("textwrapper");

// Collect the xmlRequest document data:
var images = xmlDoc.getElementsByTagName("image"); // The array of image files return by the query.
var startimg = xmlDoc.getElementsByTagName("image")[0].childNodes[0].nodeValue; // The first image returned in the array
if(xmlDoc.getElementsByTagName("mytext")[0].childNodes[0]) {
var text = xmlDoc.getElementsByTagName("mytext")[0].childNodes[0].nodeValue;
} else {
var text = '';
}
if(xmlDoc.getElementsByTagName("background")[0].childNodes[0]) {
var bgImage = xmlDoc.getElementsByTagName("background")[0].childNodes[0].nodeValue;
} else {
	bgImage = '';
}
if(xmlDoc.getElementsByTagName("mycaption")[0].childNodes[0]) {
var firstCaption = xmlDoc.getElementsByTagName("mycaption")[0].childNodes[0].nodeValue;
} else {
var firstCaption = " ";
}

imagemenu.innerHTML=""; // Clear the existing menu.

textwrapper.style.display="none"; // Hide the text if it is displayed.

slide.src = "../uploads/" + startimg;

if(category != indexCat) { // If it's not the home page:
$("div#controls").attr("style","visibility:visible"); // Show the arrows and info button.
$("div#textlinkwrapper").attr("style","visibility:visible");
$("#copyright").show();
// Collect the relevant image data from the xmlRequest document.
for(var i=0; i < images.length; i++) { //for each image returned
		
		var img = xmlDoc.getElementsByTagName("image")[i].childNodes[0].nodeValue; // The filename of the image.
		var title = xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue; // The image title, if specified
		var t = xmlDoc.getElementsByTagName("thumbnail")[i].childNodes[0].nodeValue; // The short filename of the thumbnail image
		var w = xmlDoc.getElementsByTagName("width")[i].childNodes[0].nodeValue; // thumbnail width
		var h = xmlDoc.getElementsByTagName("height")[i].childNodes[0].nodeValue; // thumbnail height
		var m = xmlDoc.getElementsByTagName("margin")[i].childNodes[0].nodeValue; // thumbnail margin, used to vertically centre the image if required
		var size = xmlDoc.getElementsByTagName("filesize")[i].childNodes[0].nodeValue; // the size of the file.
		if(xmlDoc.getElementsByTagName("mycaption")[i].childNodes[0]) {
	caption[i] = xmlDoc.getElementsByTagName("mycaption")[i].childNodes[0].nodeValue;
		} else {
	caption[i] = ' ';
		}
		
	// Cache each image:
	Images[category][i] = new Image();
	Images[category][i].src = "../uploads/"+img;

		if(images.length > 1) { // If there is more than one image display the thumbnails:
			
			var menuitem = document.createElement("div");
			menuitem.className = "photomenuitem";	
			var a = document.createElement("a");
			a.href = "../uploads/"+img;
			a.id = i;
			a.name = caption[i];
			a.target = "photos";
			a.onclick = function() {
				swapImage(this, images.length,category); 
				return false;
			}
			var imgel = document.createElement("img");
			imgel.src="../uploads/thumbnails/"+t;
			a.appendChild(imgel);
			// Set the opacity to 80% ready for the mouseover effect:
			if(ie != -1) {
				imgel.style.filter = "alpha(opacity=80)";
			} else {
				imgel.style.opacity = 0.8;
			}
			
			$(imgel).mouseover(function () {
						
						$(this).fadeTo("normal",1);
					});
			  $(imgel).mouseout(function () {
						
						$(this).fadeTo("normal",0.8);
					});
			  
			 menuitem.appendChild(a);
	
			imagemenu.appendChild(menuitem); // Insert the new thumbnail link into the menu wrapper
		} // End if(images.length..
		
	} // End for loop.
	
if(mycaption.childNodes.length > 0) { // If there is a caption display it under the photo.
mycaption.childNodes[0].nodeValue = firstCaption;
} else {
	mycaption.appendChild(document.createTextNode(firstCaption));
}
// Insert the text:
document.getElementById("mytext").innerHTML = text;

// Set the background image:
textwrapper.style.background = "url(./images/" + bgImage + ") no-repeat";

// When all images are loaded hide the animation

stopAnimation(category,Images[category]);
	

// If Images[category] fails to trigger stopAnimation() here is a failsafe:
// setTimeout(function() {stopAnimation();$("img#slide").fadeIn("normal");},5000);

	createArrows(Images[category].length,currImage,category); // Call the function to create the navigation arrows
	
} // End if(category != indexCat)

	 } // End of if(readystatechange)
 
} // End of createImages() function.


function swapImage(image,numImgs,category) {
	var Imgnum = image.id;
	var slide = document.getElementById("slide");
	var caption = document.getElementById("mycaption");


//if(ie6 == -1) { // If it's not IE 6
	//slide.style.visibility="hidden";
//} else {
	$(slide).attr("style","display:none");
//}

slide.src = image;

if(ie6 != -1) {
	
	setTimeout(function() {$(slide).fadeIn("normal");},300);
	
} else {
$(slide).fadeIn("normal");
}

createArrows(numImgs,Imgnum,category);
caption.childNodes[0].nodeValue = image.name;
caption.style.visibility="visible";
document.getElementById("textwrapper").style.display="none";
}

function createArrows(numImgs,count,category) {
	
	// Left and right arrow containers:
var larrow = document.getElementById("leftarrow"); // The left arrow wrapper
var rarrow = document.getElementById("rightarrow"); // The right arrow wrapper
var larrLink = document.getElementById("larrowLink"); // The left arrow link
var rarrLink = document.getElementById("rarrowLink"); // The right arrow link
//if(!document.getElementById("slide")) alert ("no slide")
var slide = document.getElementById("slide");
var caption = document.getElementById("mycaption");

	if(numImgs > 1) {
		
		larrow.style.visibility="visible";
		rarrow.style.visibility="visible";
		
		// Create the arrows:
		if(count != 0) { // If the currently showing image is not the first slide.
	
			larrLink.style.display = "block"
			larrLink.onmouseover=function() {
				this.style.backgroundPosition="-30px 0";
			}
			larrLink.onmouseout=function() {
				this.style.backgroundPosition="0 0";
			}
			larrLink.onclick=function() {
				count--;
				createArrows(numImgs,count,category);
				//if(ie6 == -1) {
					//slide.style.visibility="hidden";
				//} else {
					//slide.style.opacity=0;
				//}
				$(slide).attr("style","display:none");
				//}
				slide.src = Images[category][count].src;
				if(ie6 != -1) {
					setTimeout(function() {$(slide).fadeIn("normal");},200); 
				} else {
					$(slide).fadeIn("normal");
				}
					$("#textwrapper").fadeOut("normal");
					
					
				//}
				if(xmlDoc.getElementsByTagName("mycaption")[count].childNodes[0]) { // If there is a caption for this image:
				caption.firstChild.nodeValue = xmlDoc.getElementsByTagName("mycaption")[count].childNodes[0].nodeValue;
					} else {
					caption.firstChild.nodeValue = '';
					}
				
				//document.getElementById("textwrapper").style.display="none";
				caption.style.visibility = "visible";
				return false; 
			}
				
		} else { 
		
			larrLink.style.display="none";
			
		}

		
		if(count != numImgs-1) { // If the currently showing image is not the end of the slide show	
		
			rarrLink.style.display = "block";
	
			rarrLink.onmouseover=function() {
				rarrLink.style.backgroundPosition="-30px 0";
			}
			rarrLink.onmouseout=function() {
				rarrLink.style.backgroundPosition="0 0";
			}
			rarrLink.onclick=function() {
				count++;
				createArrows(numImgs,count,category);
				//if(ie6 == -1) {
					//slide.style.visibility="hidden";
				//} else {
					//slide.style.opacity=0;
				//}
				
				$(slide).attr("style","display:none");
				//}
				slide.src = Images[category][count].src;
				if(ie6 != -1) {
					setTimeout(function() {$(slide).fadeIn("normal");},200); 
				} else {
					
					$(slide).fadeIn("normal");
				}
				$("#textwrapper").fadeOut("normal");
				
					if(xmlDoc.getElementsByTagName("mycaption")[count].childNodes[0]) {
				caption.firstChild.nodeValue = xmlDoc.getElementsByTagName("mycaption")[count].childNodes[0].nodeValue;
					} else {
					caption.firstChild.nodeValue = '';
					}
				
				//document.getElementById("textwrapper").style.display="none";
				caption.style.visibility = "visible";
				return false;
			}
		} else { 
			
			rarrLink.style.display="none";

		}

	}

}
function loadAnimation() {
var loaderwrapper = document.getElementById("loaderwrapper");
	loaderwrapper.style.display="block";
	loaderwrapper.innerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="60" height="46"><param name="movie" value="media/loading_circle.swf"><param name="quality" value="high"><param name="wmode" value="transparent" /><embed src="media/loading_circle.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="60" height="46" wmode="transparent"></embed></object>';
	//loaderwrapper.innerHTML = '<span>Loading images...</span>';
}
function stopAnimation(category,images) {
	//alert(images.length);
	//alert("Category is " + category);
if(images[images.length-1].complete) {
	//alert("loaded!")
	document.getElementById("loaderwrapper").innerHTML = '';
	document.getElementById("loaderwrapper").style.display="none";
	$("img#slide").fadeIn("normal"); // Show the image.
	} else {
	//var group = category;
	//var pics = images;
	setTimeout(function() {
						//alert("Group is " + category + ", pics is " + images.length);
						stopAnimation(category,images);},500);
	}
}