//######## MAKE SURE WINDOW LOADS BEFORE ATTEMPTING TO RUN SCRIPTS, AND THAT ONE SCRIPT DOESN'T OVERWRITE THE LAST ########
addOnload(rolloverInit);
addOnload(dropMenu);
//addOnload(initThree);

//Create a new function and pass in the name of another function
function addOnload(newFunction) {
  //Declare a new variable to store any existing window.onload value
	var oldOnload = window.onload;
	
	//Check if the variable oldOnload contains a function (i.e. if an onload event has already been triggered)
	if (typeof oldOnload == "function") {
		//Set window.onload event handler to be an anonymous function
		window.onload = function() {
			//If oldOnload has a value then carry on with that function AND ALSO run the new function
			if (oldOnload) {
				oldOnload();
			}
			newFunction();
		}
	}
	//If oldOnload os empty (no script has been called yet) then just run the new function
	else {
		window.onload = newFunction;
	} 
}

//-------------------------------------------------------------------------------------------------------				

//Script to make navigation buttons change when mouse moves over or clicks them - a three-state rollover
//Note: it does this by creating new images to sit on top of the original images so new images must be the same size & not transparent!
//Images are automatically loaded into cache when page loads so there is no delay when rollover occurs

//Find all the navigation images and store them in an array
function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if ((document.images[i].parentNode.tagName == "A") && (document.images[i].parentNode.parentNode.parentNode.id == "nav")) {
		  //If the link does NOT have the "current" class then call the setupRollover function 
			//Otherwise do nothing (link is to current page so shouldn't change on rollover)
		  if (document.images[i].parentNode.className != "current") {
				setupRollover(document.images[i]);
			}
		}
	}
}


function setupRollover(thisImage) {
	thisImage.outImage = new Image(); //Create a new image object for the image in question
	thisImage.outImage.src = thisImage.src; //Set the source of the new image object to be the same as the source of the main image (i.e. the default image)
	thisImage.onmouseout = rollOut; //When the mouse rolls off the image call the rollOut function
	
	thisImage.overImage = new Image(); //Create a new image to appear when mouse moves over the original image
	thisImage.overImage.src = "http://www.romseytherapies.co.uk/images/" + thisImage.id + "_on.gif"; //Set the source of the new image by adding "_on.gif" to the id name of the original image, which is set in the HTML to be the same as the first part of the new image's name
	thisImage.onmouseover = rollOver;	//Call rollOver function when mouse moves over the image

	thisImage.clickImage = new Image(); //Create new image to appear when original image clicked
	thisImage.clickImage.src = "http://www.romseytherapies.co.uk/images/" + thisImage.id + "_current.gif"; //Set the source of the new image by adding "_current.gif" to the id name of the original image
	thisImage.onclick = rollClick; //Call rollClick function when image is clicked
}

//Change the source of the current image to the new image source for hovered-over images found above
function rollOver() {
	this.src = this.overImage.src;
}

//Return the image source to the original
function rollOut() {
	this.src = this.outImage.src;
}

//Change the image source to the clicked version, which is the same as the version for the current page
function rollClick() {
  this.src = this.clickImage.src;
}
	
//-------------------------------------------------------------------------------------------------------				

//Script to display submenus when cursor hovers over the main navigation buttons
function dropMenu() {
  
	//Make an array of all the navigation links. 
	var navLinks = document.getElementById("nav").getElementsByTagName("a");
	
	//Loop through to add onmouseover and onmouseout handlers to each li element (as long as the link is not 'current')
	for (var i=0; i<navLinks.length; i++) {
	  if (navLinks[i].className != "current") {
      navLinks[i].parentNode.onmouseover = showSub;
		  navLinks[i].parentNode.onmouseout = hideSub;
		}
	}		
}
//Display submenus
function showSub() {
	var subMenu = this.getElementsByTagName("ul"); //Find out if the li element contains a submenu (an ul element). 
	if(subMenu[0]) subMenu[0].style.display = "block"; //If so, then show the submenu 
}
//Hide submenus
function hideSub() {
	var subMenu = this.getElementsByTagName("ul"); //Find out if the li element contains a submenu (an ul element). 
	if(subMenu[0]) subMenu[0].style.display = "none"; //If so, then hide the submenu 
}