//Makes up for the lack of getElementByClassName in Javascript
function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];      
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }   
    }
    return (arrReturnElements)
} 


//Function for converting title tags on images into caption
function addCaption(xClass) {
	var allImages = getElementsByClassName(document, "img", xClass);
	for ( var i=0; i < allImages.length; i++) {
		var imageCaption = document.createTextNode(allImages[i].title);
		var imageContainer = document.createElement("div");
		var imagePara = document.createElement("p");
		var imageWidth = allImages[i].getAttribute("width");
		var spareSpan = document.createElement("span"); //This adds an extra span. Useful for curved corners
		imagePara.appendChild(imageCaption);
		allImages[i].parentNode.insertBefore(imageContainer, allImages[i]);
		imageContainer.appendChild(allImages[i]);
		if ( allImages[i].title != "" ) {
		imageContainer.appendChild(imagePara); 
		}
		imageContainer.appendChild(spareSpan);		
		imageContainer.className = xClass
		spareSpan.className = "spareSpan"
		allImages[i].className = "imgCaption"
		imageContainer.style.width = imageWidth + "px";
		
    }
}

// ALTERNATING ROW COLOURS IN TABLE

// Main function, called when the page loads
function alternateRows() {
	var i, j;
	if (!document.getElementById) return
		var tables = document.getElementsByTagName("table");	  
		//search through tables in document
		for (i=0; i<tables.length; i++) {
			// If table has the right classname
				rows = tables[i].getElementsByTagName("tr");
				applyClasstoRows(rows);
		}
}

// Function, which is passed a table reference, applies the class 'even' to each even row, <tr> tag
function applyClasstoRows(myRows) {
	// search through rows
	for (j=0; j<rows.length; j++) {
	   // Set class for even rows (odd doesn't need to be set)
	   if (j%2 == 0) { 
		  rows[j].setAttribute("className", "even");
		  rows[j].setAttribute("class", "even");
	   } 
	}
}


// Function to swap out background images
function imageLinks(iImage) {
	if (!document.getElementById) return;
	if (!document.getElementsByTagName) return;
	var aLinks = document.getElementsByTagName("a");
	for (var i=0; i<aLinks.length; i++) {
		if (aLinks[i].getAttribute("rel")) {
		aLinks[i].onmouseover = function() {
			document.getElementById(iImage).style.background = "url("+ this.getAttribute("rel") + ") no-repeat bottom right";
		}
		}
	}
}

// Function to change li tag on hover

function hoverOnList() {
	if (!document.getElementsByTagName) return;
	var theList = getElementsByClassName(document, "ul", "rsList");
	for ( var i=0; i < theList.length; i++) {
		var theLinks = theList[i].getElementsByTagName("a");
		for ( var j=0; j < theLinks.length; j++) {
			theLinks[j].onmouseover = function() {
				this.parentNode.parentNode.className = "listHover";	
			}
			theLinks[j].onmouseout = function() {
				this.parentNode.parentNode.className = "";	
			}
		}
	}
}


// Hover for FAQs

function hoverOnFAQ() {
	if (!document.getElementsByTagName) return;
	var theList = getElementsByClassName(document, "ul", "rsList");
	for ( var i=0; i < theList.length; i++) {
		var theLinks = theList[i].getElementsByTagName("h4");
		for ( var j=0; j < theLinks.length; j++) {
			theLinks[j].onmouseover = function() {
				this.parentNode.className = "listHover";	
			}
			theLinks[j].onmouseout = function() {
				this.parentNode.className = "";	
			}
		}
	}
}



// Hides the target to start with
function hideTargets(iTag, iClass) {
	var targets = getElementsByClassName(document, iTag, iClass);
	for (var i=0; i<targets.length; i++) {
		targets[i].style.display="none";
	}
}

// Applies the onclick event to the trigger
function toggleClick(iTrig, iTar, iClass) {
	var trigger = getElementsByClassName(document, iTrig, iClass);
	for (var i=0; i<trigger.length; i++) {
		trigger[i].onclick = function(){toogleTarget(iTar, this.id)};
		}
}

// This acts as the show/hide toggle
function toogleTarget(tTar, tId) {
	var totarget = getElementsByClassName(document, tTar, tId);
	for (var i=0; i<totarget.length; i++) {
		if (totarget[i].style.display=="none") {
			totarget[i].style.display="block";
		}
		else {
			totarget[i].style.display="none";	
		}
		return false;
	}
}



function openWindow(url, width, height) {
  popupWin = window.open(url,'new_page','width=' + width + ',height=' + height + ',scrollbars=yes,resizable=yes')
}



window.onload=function(){
addCaption("imageLeft");
addCaption("imageRight");
alternateRows();
imageLinks("regions");
hoverOnList();
hoverOnFAQ();
hideTargets("div", "target")
toggleClick("h4", "div", "trigger")

}

// Swap campaign images

function hideDivs() {
	document.getElementById('health').style.display = 'none';
	document.getElementById('climate').style.display = 'none';
	document.getElementById('land').style.display = 'none';
	document.getElementById('marine').style.display = 'none';
}

var imgs = new Array(); var imgcnt = 0; var thisimg = 0;
imgs[imgcnt++] = 'health';
imgs[imgcnt++] = 'climate';
imgs[imgcnt++] = 'land';
imgs[imgcnt++] = 'marine';

function nextImg() {
if (document.images) {
  	thisimg++;
  	hideDivs();
  	if (thisimg > 3) {
  		thisimg = 0;
  		}
  	document.getElementById(imgs[thisimg]).style.display = 'inline';
	}
}

function prevImg() {
if (document.images) {
	thisimg--;
	hideDivs();
  	if (thisimg < 0) {
  		thisimg = 3;
  		}
  	document.getElementById(imgs[thisimg]).style.display = 'inline';
  	}
}