window.onload = function (e) {onLoadInit();};

    function onLoadInit() {
        makeTip();
        getTargetImage();
        musicImgSwap();
        floodmap();
        euromap();
		foodmiles()
		vegGrid()
    }
	
	
// --------------------------------------------------------

// VEG GRID ROLLOVER	
    function vegGrid() {
        if (document.getElementById("vegGrid")) {
			pldVegON= new Image(503,372); 
			pldVegON.src="content_img/veggrid_on.jpg"; 
            if (window.addEventListener) {
                document.getElementById("vegGrid").addEventListener("mouseover", gridOn, false);
                document.getElementById("vegGrid").addEventListener("mouseout", gridOff, false);
            } else if (window.attachEvent) {
                document.getElementById("vegGrid").attachEvent("onmouseover", gridOn);
                document.getElementById("vegGrid").attachEvent("onmouseout", gridOff);
            } else {
                return null;
            }
        }
    }
    function gridOn() {
		document.getElementById("vegGrid").src = "content_img/veggrid_on.jpg";
		
	}
	function gridOff() {
		document.getElementById("vegGrid").src = "content_img/veggrid_off.jpg";
		
	}
	
	
	
// --------------------------------------------------------

// FOOD MILES ROLLOVERS
    function foodmiles() {
		if (document.getElementById("foodMilesQText")) {
			document.getElementById("foodMilesAText").firstChild.nodeValue="Click the correct picture to find out!";
			
			for (var i = 1; i < 5; i++) {
				var thisFoodPic="fm"+i;
			if (window.addEventListener) {
                document.getElementById(thisFoodPic).addEventListener("click", cancelClick, false);
				document.getElementById(thisFoodPic).addEventListener("mouseout", hideFoodText, false);
            } else if (window.attachEvent) {
                document.getElementById(thisFoodPic).attachEvent("onclick", cancelClick);
				document.getElementById(thisFoodPic).attachEvent("onmouseout", hideFoodText);
            } else {
                return null;
				document.getElementById("foodMilesQText").firstChild.nodeValue="It's 50,000km!";
            }
            document.getElementById(thisFoodPic).onclick = cancelClickSafari;
			}

if (window.addEventListener) {
                document.getElementById("fm1").addEventListener("click", foodmilesWrong, false);
				document.getElementById("fm2").addEventListener("click", foodmilesWrong, false);
				document.getElementById("fm3").addEventListener("click", foodmilesRight, false);
				document.getElementById("fm4").addEventListener("click", foodmilesWrong, false);
            } else if (window.attachEvent) {
                document.getElementById("fm1").attachEvent("onclick", foodmilesWrong);
				document.getElementById("fm2").attachEvent("onclick", foodmilesWrong);
				document.getElementById("fm3").attachEvent("onclick", foodmilesRight);
				document.getElementById("fm4").attachEvent("onclick", foodmilesWrong);
            } else {
                return null;
            }
			
		}		
	}
	
	function foodmilesWrong() {
	document.getElementById("foodMilesQText").firstChild.nodeValue="WRONG!";
	document.getElementById("foodMilesAText").firstChild.nodeValue="Click the correct picture to find out!";
	}
	function foodmilesRight() {
	document.getElementById("foodMilesQText").firstChild.nodeValue="RIGHT!";
	document.getElementById("foodMilesAText").firstChild.nodeValue="The food you eat may have travelled a long way to reach you: from the field to the supermarket can be hundreds of food miles – sometimes even as much as all the way around the world!";
	document.getElementById("foodMilesAText").className="pinkText";
	}
	function hideFoodText() {
	if (document.getElementById("foodMilesQText").firstChild.nodeValue!="What is the answer?") {
		if (document.getElementById("foodMilesQText").firstChild.nodeValue!="RIGHT!") {document.getElementById("foodMilesQText").firstChild.nodeValue="Try again!";}
		else document.getElementById("foodMilesQText").firstChild.nodeValue="RIGHT!";
	}}
		
// --------------------------------------------------------

// EUROPE MAP ROLLOVERS
    function euromap() {
		if(document.getElementById("hideText")){document.getElementById("hideText").style.display="none";}
        var tempTitle = " ";
        var allAreaTags = document.getElementsByTagName("area");
        var arrayLength = allAreaTags.length;
        for (var i = 0; i < arrayLength; i++) {
            var thisAreaId = allAreaTags[i].id;
            var thisArea = document.getElementById(thisAreaId);
            if (window.addEventListener) {
                document.getElementById(thisAreaId).addEventListener("mouseover", hideTitle, false);
                document.getElementById(thisAreaId).addEventListener("mouseout", getTitleBack, false);
                document.getElementById(thisAreaId).addEventListener("click", showDetails, false);
                document.getElementById(thisAreaId).addEventListener("click", cancelClick, false);
            } else if (window.attachEvent) {
                document.getElementById(thisAreaId).attachEvent("onmouseover", hideTitle);
                document.getElementById(thisAreaId).attachEvent("onmouseout", getTitleBack);
                document.getElementById(thisAreaId).attachEvent("onclick", showDetails);
                document.getElementById(thisAreaId).attachEvent("onclick", cancelClick);
            } else {
                return null;
            }
            document.getElementById(thisAreaId).onclick = cancelClickSafari;
        }
    }


    function hideTitle(e) {
        var target = findTargetImageMap(e);
        tempTitle = target.title;
        target.title = "";
    }


    function getTitleBack(e) {
        var target = findTargetImageMap(e);
        target.title = tempTitle;
    }


    function showDetails(e) {
        var target = findTargetImageMap(e);
        document.getElementById("mapText").firstChild.nodeValue = tempTitle + ",000 visits by UK residents";
 
    }


    function findTargetImageMap(e) {
        var target;
        if (window.event && window.event.srcElement) {
            target = window.event.srcElement;
        } else if (e && e.target) {
            target = e.target;
        }
        if (!target) {
            return null;
        }
        while (target != document.body &&
            target.nodeName.toLowerCase() != "area") {
            target = target.parentNode;
        }
        if (target.nodeName.toLowerCase() != "area") {
            return null;
        }
        return target;
    }

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

// LONDON FLOODING MAP ROLLOVERS
	function floodmap() {
        if (document.getElementById("floodMap")) {
            if (window.addEventListener) {
                document.getElementById("floodlo").addEventListener("click", showlo, false);
                document.getElementById("floodmed").addEventListener("click", showmed, false);
                document.getElementById("floodhi").addEventListener("click", showhi, false);
                document.getElementById("floodlo").addEventListener("click", cancelClick, false);
                document.getElementById("floodmed").addEventListener("click", cancelClick, false);
                document.getElementById("floodhi").addEventListener("click", cancelClick, false);
            } else if (window.attachEvent) {
                document.getElementById("floodlo").attachEvent("onclick", showlo);
                document.getElementById("floodmed").attachEvent("onclick", showmed);
                document.getElementById("floodhi").attachEvent("onclick", showhi);
                document.getElementById("floodlo").attachEvent("onclick", cancelClick);
                document.getElementById("floodmed").attachEvent("onclick", cancelClick);
                document.getElementById("floodhi").attachEvent("onclick", cancelClick);
            } else {
                return null;
            }
            document.getElementById("floodlo").onclick = cancelClickSafari;
			document.getElementById("floodmed").onclick = cancelClickSafari;
			document.getElementById("floodhi").onclick = cancelClickSafari;
        }
    }


    function showlo() {
        document.getElementById("floodMap").src = "content_img/londonflood_low.gif";
    }


    function showmed() {
        document.getElementById("floodMap").src = "content_img/londonflood_med.gif";
    }


    function showhi() {
        document.getElementById("floodMap").src = "content_img/londonflood_hi.gif";
    }

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

// IMAGE SWAP IN MUSIC SECTION
    function musicImgSwap() {
        if (document.getElementById("musicImgSwap")) {
            if (window.addEventListener) {
                document.getElementById("musicImgSwap").addEventListener("mouseover", musicOver, false);
                document.getElementById("musicImgSwap").addEventListener("mouseout", musicOut, false);
            } else if (window.attachEvent) {
                document.getElementById("musicImgSwap").attachEvent("onmouseover", musicOver);
                document.getElementById("musicImgSwap").attachEvent("onmouseout", musicOut);
            } else {
                return null;
            }
        }
    }


    function musicOver() {
        document.getElementById("musicImgSwap").src = "content_img/oompah.jpg";
    }


    function musicOut() {
        document.getElementById("musicImgSwap").src = "content_img/hiphop.jpg";
    }

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

// MAKE FADY DIVS FROM TITLE ATTRIBUTE
    function makeTip() {
        var tip = document.createElement("div");
        var tipInner = document.createElement("div");
        var tipPara = document.createElement("p");
        var newtext = document.createTextNode(".");
        tip.id = "toolTip";
        tipPara.id = "tipP";
        document.getElementsByTagName("body")[0].appendChild(tip);
        tip.appendChild(tipInner);
        tipInner.appendChild(tipPara);
        tipPara.appendChild(newtext);
        document.getElementById("toolTip").style.left = "-999px";
        document.getElementById("toolTip").style.top = "-999px";
        document.getElementById("toolTip").style.width = "100px";
        document.getElementById("toolTip").style.opacity = "0";
// Initialise vars for displaying and hiding

    }
        currentPic ="x"
        fader = "INITIALISED";
        itHasFaded = true;
        currentSrc = "INITIALISED";
		tempFadeTitle = "x"

// Attach over and out events to titled images (except activity thumbnails)
    function getTargetImage() {
        if (!document.images) {
            document.images = document.getElementsByClassName("img");
        }
        for (var imageNum = 0; imageNum < document.images.length; imageNum++) {
            var thisPicture = document.images[imageNum];
            if (thisPicture.title &&
                thisPicture.className != "activityImage") {
                if (window.addEventListener) {
                    thisPicture.addEventListener("mouseover", showTip, false);
                    thisPicture.addEventListener("mouseout", hideTip, false);
                    document.getElementById("toolTip").addEventListener("mouseover", keepTip, false);
                    document.getElementById("toolTip").addEventListener("mouseout", hideTip, false);
                } else if (window.attachEvent) {
                    thisPicture.attachEvent("onmouseover", showTip);
                    thisPicture.attachEvent("onmouseout", hideTip);
                    document.getElementById("toolTip").attachEvent("onmouseover", keepTip);
                    document.getElementById("toolTip").attachEvent("onmouseout", hideTip);
                } else {
                    return null;
                }
            }
        }
    }

// Show and hide tip functions - make the fady div, fade it up and down, and stop the 'normal' title from displaying
// if you mouse over a titled image
    function showTip(e) {
        clearTimeout(fader);
        var target;
        if (window.event && window.event.srcElement) {
            target = window.event.srcElement;
        } else if (e && e.target) {
            target = e.target;
        }
		// only runs if the mouse has moved very quickly onto another titled image
		if (target && target.src != currentSrc &&
            itHasFaded != true){
	        document.getElementById("toolTip").style.opacity = 0;
            document.getElementById("toolTip").style.filter = "alpha(opacity=" + 0 + ")";
            currentPic.title = tempFadeTitle;
            itHasFaded = true;
            currentPic = target;
            currentSrc = currentPic.src;
        }
		// checks if fade in is needed then gets everything ready
        if (target && target.src == currentSrc ||
            currentSrc == "INITIALISED" || itHasFaded == true) {
            currentPic = target;
            currentSrc = currentPic.src;
            if (itHasFaded == true) {
                tempFadeTitle = target.title;
                currentPic.title = "";
                itHasFaded = false;
            }
            document.getElementById("tipP").firstChild.nodeValue = tempFadeTitle;
            var positions = getPosition(target);
            var ttLeft = positions[0];
            var ttTop = positions[1] + target.offsetHeight;
            document.getElementById("toolTip").style.left = ttLeft + 2 + "px";
            document.getElementById("toolTip").style.width = target.width - 4 + "px";
            document.getElementById("toolTip").style.top = ttTop - document.getElementById("toolTip").offsetHeight - 2 + "px";
			document.getElementById("toolTip").title = "";
            fader = setTimeout("fade(0.8,0.1,30)", 30);
        } else {
            return null;
        }
    }

// if you mouse over a fady div
    function keepTip(e) {
        clearTimeout(fader);
        var target;
        if (window.event && window.event.srcElement) {
            target = window.event.srcElement;
        } else if (e && e.target) {
            target = e.target;
        }
        if (target) {
            fader = setTimeout("fade(0.8,0.1,30)", 30);
        } else {
            return null;
        }
    }

// if you mouse out of a titled image or a fady div	
    function hideTip(e) {
        clearTimeout(fader);
        var target;
        if (window.event && window.event.srcElement) {
            target = window.event.srcElement;
        } else if (e && e.target) {
            target = e.target;
        }
        if (target) {
            fader = setTimeout("fade(0,-1,1)", 1);
        } else {
            return null;
        }
    }

// this does the actual fading, both up and down, and resets the image title if the fady div has reached complete transparency	
    function fade(opacTarget, opacIncrement, fadeDelay) {
        wait = fadeDelay;
        goal = opacTarget;
        step = opacIncrement;
        oldOpac = parseFloat(document.getElementById("toolTip").style.opacity);
        if (oldOpac + step > goal && goal > 0 ||
            oldOpac + step < 0 && goal == 0) {
            var result = goal;
        } else {
            var result = oldOpac + step;
        }
        document.getElementById("toolTip").style.opacity = result.toString();
        document.getElementById("toolTip").style.filter = "alpha(opacity=" + (result * 100).toString() + ")";
        if (result == 0) {
            currentPic.title = tempFadeTitle;
            itHasFaded = true;
        }
        if (result != goal) {
            var fader = setTimeout("fade(goal,step,wait)", wait);
        }
    }

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

// GENERAL FUNCTIONS

// FIND ELEMENT COORDINATES
    function getPosition(theElement) {
        var positionX = 0;
        var positionY = 0;
        while (theElement != null) {
            positionX += theElement.offsetLeft;
            positionY += theElement.offsetTop;
            theElement = theElement.offsetParent;
        }
        return [positionX, positionY];
    }
	

// STOP LINKS FROM GOING ANYWHERE - 2 functions here!
	function cancelClick(e) {
        if (window.event) {
            window.event.returnValue = false;
        }
        if (e && e.preventDefault) {
            e.preventDefault();
        }
    }


    function cancelClickSafari() {
        return false;
    }