// Pre-load the images for the trees.
if (document.images) {
    var tree = new Array();
    var treeL = new Array();
    var treeR = new Array();

    for (var i = 0; i < 9; i++) {
        var idx = i%5;
        tree[i] = new Image();
        tree[i].src = "Images/t" + idx + ".gif";
        treeL[i] = new Image();
        treeL[i].src = "Images/t" + idx + "l.gif";
        treeR[i] = new Image();
        treeR[i].src = "Images/t" + idx + "r.gif";
    }
}

// variables
var mapDivId = "MapDiv";        // <div> containing the map.
var imageMapId = "ParkMap";     // Id of the imageMap.
var imageWidth = 1680;          // Original width of the map measured in pixels.
var currentAlert = "";          // Id of the label currently being displayed.
var direction = "L";            // Direction the moue is moving.
var lastX = 0;                  // Last x coord of the mouse, used for calculating direction.

var footieX = 31;               // X coord (%) of the footballers.
var footieDir = 1;              // Direction the footballers are moving in.
var busDist = -1;               // Distance the bus has moved along the A6.


// Initialise everything.
function BuildMap() {
    if (document.images) {
        var mapDiv = document.getElementById(mapDivId);
        DefineImageMap();
        CreateTrees(mapDiv);
        AddFootie();
        
        addEvent(mapDiv, "mousemove", MapMouseMove);
        addEvent(mapDiv, "resize", ResetImageMap);
    }
}

// Define areas on the map that display alerts etc.
function DefineImageMap() {
    var imageMap = document.getElementById(imageMapId);
    AddMapArea(imageMap, [790, 330, 880, 270, 890, 330],
        "AddAlert('CarParkBmx', 48, 25, 'right', '<span>Car Park </span><img src=\"Images/Parking.gif\"/>');");
    AddMapArea(imageMap, [820, 510, 945, 540, 920, 610, 870, 600, 880, 540, 843, 522, 814, 520],
        "AddAlert('CarParkPav', 53, 52, 'left', '<img src=\"Images/Parking.gif\"/><span> Car Park</span>');");
    AddMapArea(imageMap, [794, 520, 830, 538, 867, 532, 864, 555, 845, 614, 758, 598, 755, 570],
        "AddAlert('Pavilion', 53, 50, 'right', '<img src=\"Images/Pavilion.gif\"/><span> Pavilion</span>');");
    AddMapArea(imageMap, [420, 540, 470, 550, 390, 630, 330, 630],
        "AddAlert('Trees', 25, 50, 'left', '<img src=\"Images/Tree.gif\"/><span> Tree Trail</span>');");
    AddMapArea(imageMap, [490, 600, 700, 600, 620, 870, 340, 840, 400, 670, 490, 670, 490, 770, 570, 770, 600, 650, 420, 650],
        "AddAlert('Fishing', 21, 74, 'left', '<img src=\"Images/Fish.gif\"/><span> Fishing</span>');");
    AddMapArea(imageMap, [770, 610, 842, 622, 860, 670, 840, 710, 780, 770, 712, 748],
        "AddAlert('Play', 47, 61, 'left', '<img src=\"Images/Play.gif\"/><span> Play Area</span>');");
    AddMapArea(imageMap, [848, 715, 910, 730, 867, 765, 816, 747],
        "AddAlert('Adizone', 51, 68, 'left', '<img src=\"Images/Adizone.gif\"/><span> adiZone</span>');");
    AddMapArea(imageMap, [780, 783, 848, 798, 832, 850, 768, 838],
        "AddAlert('Tennis', 53, 75, 'right', '<img src=\"Images/Tennis.gif\"/><span> Tennis</span>');");
    AddMapArea(imageMap, [863, 787, 930, 795, 930, 855, 858, 850],
        "AddAlert('Ball', 55, 75, 'left', '<img src=\"Images/Ball.gif\"/><span> Ball Court</span>');");
    AddMapArea(imageMap, [610, 440, 710, 450, 675, 540, 550, 520],
        "AddAlert('Cricket', 60, 42, 'right', '<img src=\"Images/Cricket.gif\"/><p style=\"margin: 0px; text-align:center\">Cricket</p>');");
    AddMapArea(imageMap, [1000, 550, 1300, 550, 1400, 660, 1000, 600],
        "AddAlert('Football', 25, 50, 'right', '<span> Football </span><img src=\"Images/Ball.gif\"/>');AddFootie();");
    AddMapArea(imageMap, [915, 325, 905, 270, 920, 240, 920, 195, 955, 195, 955, 235, 990, 235, 990, 265, 960, 325],
        "AddAlert('BMX', 44, 20, 'right', '<span>BMX Track </span><img src=\"Images/BMX.gif\"/>');");
    AddMapArea(imageMap, [977, 297, 1016, 298, 1008, 327, 973, 323],
        "AddAlert('Skateboard', 59, 25, 'left', '<img src=\"Images/Skateboard.gif\"/><span>Skateboard </span>');");

    AddMapArea(imageMap, [1250, 750, 1550, 770, 1590, 900, 1270, 900],
        "AddAlert('School', 5, 80, 'right', '<span>Lakeside School&nbsp;</span><img src=\"Images/School.gif\"/>');");
    AddMapArea(imageMap, [865, 0, 890, 0, 910, 100, 875, 100],
        "AddAlert('Elvaston', 54, 2, 'left', '<span>To Elvaston&nbsp;</span><img src=\"Images/Bike.gif\"/>');");
    AddMapArea(imageMap, [50, 880, 140, 880, 0, 960, 0, 920],
        "AddAlert('City', 2, 87, 'left', '<span>To City Centre&nbsp;</span><img src=\"Images/Bike.gif\"/>');");
    AddMapArea(imageMap, [1200, 950, 1270, 950, 1260, 1048, 1210, 1048],
        "AddAlert('Chellaston', 75, 90, 'left', '<span>To Chellaston&nbsp;</span><img src=\"Images/Bike.gif\"/>');");

    AddMapArea(imageMap, [1450, 330, 1680, 330, 1680, 1050], "AddBus();");
    AddMapArea(imageMap, [0, 0, 1680, 0, 1680, 10, 750, 10, 0, 700], "RemoveAlert(document.getElementById('" + mapDivId + "'));");
}

// Re-calculate the image map after the window size has been changed.
function ResetImageMap() {
    var imageMap = document.getElementById(imageMapId);
    while (imageMap.childNodes.length) {
        imageMap.removeChild(imageMap.firstChild)
    }
    DefineImageMap();
}

// Add an area to the imageMap
function AddMapArea(imageMap, coords, action) {
    var area = document.createElement("AREA");
    area.shape = "polygon";
    area.coords = ScaleCoords(coords);
    area.onmouseover = function () { eval(action); };
    imageMap.appendChild(area);
}

// Calculate the current coordinates for the areas on the imageMap.
function ScaleCoords(origCoords) {
    var currentWidth = WindowWidth();
    numOrds = origCoords.length;
    scaledOrds = new Array(numOrds);
    for (var i = 0; i < numOrds; i++) {
        scaledOrds[i] = Math.round(origCoords[i] * currentWidth / imageWidth);
    }
    return scaledOrds.join(",");
}


// Get browser window.innerWidth.  Ued to scale the imageMap
function WindowWidth() {
    var resultWidth = 0;
    if (typeof (window.innerWidth) == "number") {
        //Non-IE
        resultWidth = window.innerWidth;
    } else if (document.documentElement && (document.documentElement.clientWidth)) {
        //IE 6+ in 'standards compliant mode'
        resultWidth = document.documentElement.clientWidth;
    } else if (document.body && (document.body.clientWidth)) {
        //IE 4 compatible
        resultWidth = document.body.clientWidth;
    }
    return resultWidth;
}

// Pop up a label for an area on the map.
function AddAlert(id, xPercent, yPercent, align, innerHTML) {
    var mapDiv = document.getElementById(mapDivId);
    var alertDiv = document.createElement("div");
    RemoveAlert(mapDiv)
    eval("alertDiv.style." + align + " = '" + xPercent + "%';");
    alertDiv.style.top = yPercent + "%";
    alertDiv.id =  id;
    alertDiv.className = "MapAlert";
    alertDiv.innerHTML = innerHTML;
    mapDiv.appendChild(alertDiv);
    currentAlert = id;
}

// Remove a current label.
function RemoveAlert(mapDiv) {
    if (currentAlert != "") {
        var alertDiv = document.getElementById(currentAlert);
        mapDiv.removeChild(alertDiv);
        currentAlert = "";
    }
}

// Add the footballers running across the park.
function AddFootie() {
    if (footieX < 32) {
        footieX = footieX + footieDir;
        var mapDiv = document.getElementById(mapDivId);
        var footieDiv = document.createElement("div");
        footieDiv.id = "Footie";
        footieDiv.style.left = footieX + "%"
        footieDiv.style.top = "42.2%";
        footieDiv.style.position = "absolute";
        footieDiv.innerHTML = "<img src='Images/GameR.gif'/>";
        mapDiv.appendChild(footieDiv);
        var timer = setTimeout("MoveFootie()", 2000);
    }
}

// Move the footballers.
function MoveFootie() {
    var footieDiv = document.getElementById("Footie");
    footieX = footieX + footieDir;
    footieDiv.style.left = footieX + "%";
    if (footieX < 32) {
        footieDir = footieDir * (-1);
        document.getElementById(mapDivId).removeChild(footieDiv);
    }
    else {
        if (footieX > 43) {
            footieDir = footieDir * (-1);
            footieDiv.innerHTML = "<img src='Images/GameL.gif'/>";
        }
        var timer = setTimeout("MoveFootie()", 2000);
    }
}

// Add the bu on the A6.
function AddBus() {
    if (busDist < 0) {
        busDist = 0;
        var mapDiv = document.getElementById(mapDivId);
        var busDiv = document.createElement("div");
        busDiv.id = "Bus";
        busDiv.style.left = "89%";
        busDiv.style.top = "40%";
        busDiv.style.width = "2%"
        busDiv.style.height = "6.3%"
        busDiv.style.position = "absolute";
        busDiv.innerHTML = "<img src='Images/Bus.gif' width='100%'/>";
        mapDiv.appendChild(busDiv);
        var timer = setTimeout("MoveBus();", 500);
    }
}

// Move the bus.
function MoveBus() {
    var busDiv = document.getElementById("Bus");
    busDist = busDist + 2;
    busDiv.style.left = 89 + (busDist * 7.8 / 100) + "%";
    busDiv.style.top = 40 + (busDist * 45 / 100) + "%";
    if (busDist > 80) {
        var timer = setTimeout("RemoveBus();", 5000);
    }
    else {
        var timer = setTimeout("MoveBus();", 500);
    }
}

// Remove the bus from the A6.
function RemoveBus() {
    var busDiv = document.getElementById("Bus");
    document.getElementById(mapDivId).removeChild(busDiv);
    busDist = -1;
}

// Place all of the trees on the map.
function CreateTrees(mapDiv) {
    AddTreeRow(mapDiv, 49.6, 0, 49.5, 11, 5); // River (north)
    AddTreeRow(mapDiv, 19.8, 44, 14.8, 54, 5);
    AddTreeRow(mapDiv, 13.3, 56.5, 7, 66.6, 5);
    AddTreeRow(mapDiv, 5.5, 68.5, 0, 75, 4);
    AddTreeRow(mapDiv, 41, 27, 34.4, 32, 3); // River (south)
    AddTreeRow(mapDiv, 43, 26, 33, 34, 4);
    AddTreeRow(mapDiv, 46, 25.3, 31.2, 36, 5);
    AddTreeRow(mapDiv, 45, 26.5, 29.2, 39, 5);
    AddTreeRow(mapDiv, 20, 56, 19, 58, 2);
    AddRandomTree(mapDiv, 5.8, 77.2);
    AddTreeRow(mapDiv, 52.5, 0, 53.7, 7, 4); // Top of park
    AddTreeRow(mapDiv, 54, 9, 58.2, 9, 4);
    AddTreeRow(mapDiv, 57, 11, 58.5, 11.5, 2);
    AddRandomTree(mapDiv, 58.7, 13.3);
    AddTreeRow(mapDiv, 59, 17, 66.5, 17.5, 7);
    AddTreeRow(mapDiv, 58, 18, 57, 19.5, 2); // BMX track
    AddTreeRow(mapDiv, 67.5, 19, 70.3, 22, 4);
    AddTreeRow(mapDiv, 70.3, 24, 70.5, 28.5, 3);
    AddRandomTree(mapDiv, 49.6, 27.4); // BMX Car Park
    AddRandomTree(mapDiv, 51.9, 29);
    AddTreeRow(mapDiv, 44.2, 31.5, 51.8, 31.5, 5); // Between BMX and lake
    AddTreeRow(mapDiv, 51.5, 34, 48, 41, 4);
    AddRandomTree(mapDiv, 47.5, 44.5);
    AddTreeRow(mapDiv, 42.1, 32.5, 33, 38.5, 6);
    AddTreeRow(mapDiv, 31, 40, 26, 46, 4);
    AddTreeRow(mapDiv, 25, 48, 22, 56, 4);
    AddTreeRow(mapDiv, 27.2, 48, 29.6, 48.6, 2);
    AddTreeRow(mapDiv, 26, 50.3, 41.8, 53.6, 8);
    AddTreeRow(mapDiv, 25, 53.5, 20, 60, 5);
    AddRandomTree(mapDiv, 56.8, 31); // Meadow Lane
    AddTreeRow(mapDiv, 60, 31, 77, 30, 10);
    AddTreeRow(mapDiv, 86.5, 29.9, 88, 29.9, 2);
    AddTreeRow(mapDiv, 77.5, 32, 79.5, 64, 16);
    AddTreeRow(mapDiv, 77.2, 46, 77.3, 48, 2);
    AddTreeRow(mapDiv, 67, 45.3, 72.5, 45.7, 5);
    AddTreeRow(mapDiv, 81, 65.8, 84, 66.2, 3); // Pedestrian entrance
    AddTreeRow(mapDiv, 53.8, 31.5, 53.5, 33.9, 2);
    AddTreeRow(mapDiv, 53, 35.7, 50, 41.5, 4);
    AddTreeRow(mapDiv, 49.5, 43.7, 49.3, 46.3, 2);
    AddRandomTree(mapDiv, 52.5, 47.5); // Car Park
    AddRandomTree(mapDiv, 55.5, 52.5);
    AddTreeRow(mapDiv, 18, 65, 17.4, 80, 5); // Side of lake
    AddTreeRow(mapDiv, 17, 66.8, 16.2, 78, 4)
    AddRandomTree(mapDiv, 14.3, 76.8);
    AddTreeRow(mapDiv, 31, 62, 29, 67, 3); // Island
    AddTreeRow(mapDiv, 31.5, 64, 29.1, 70.5, 4);
    AddTreeRow(mapDiv, 33.3, 63, 30.4, 70, 4);
    AddTreeRow(mapDiv, 32, 69, 31.5, 70.8, 2);
    AddTreeRow(mapDiv, 39, 73, 38.6, 76, 2); // Play area
    AddTreeRow(mapDiv, 43.9, 57.2, 39.3, 78.5, 8);
    AddTreeRow(mapDiv, 54.6, 60.9, 54.5, 71, 4); // Ball court
    AddTreeRow(mapDiv, 57, 60.5, 68.7, 64, 7); // Cricket pitch
    AddTreeRow(mapDiv, 56, 61.5, 55.9, 81, 6);
    AddTreeRow(mapDiv, 60, 81.6, 70.7, 82.8, 6);
    AddTreeRow(mapDiv, 70.6, 64.7, 78, 65.8, 5); // School
    AddTreeRow(mapDiv, 91.9, 72, 94.3, 85, 4);
    AddTreeRow(mapDiv, 89, 75.5, 91, 75.5, 2);
    AddTreeRow(mapDiv, 10, 81, 15.5, 84.3, 4); // Bottom of park
    AddTreeRow(mapDiv, 7.4, 82, 0.6, 92, 5);
    AddTreeRow(mapDiv, 17.6, 85, 39.5, 85.2, 12);
    AddTreeRow(mapDiv, 43, 85.3, 60, 85.6, 5);
    AddTreeRow(mapDiv, 64, 85.7, 77, 85.8, 5);
    AddTreeRow(mapDiv, 69, 86.8, 71.2, 93, 2);
}

// Calculate the direction that the mouse is moving in.
function MapMouseMove(e) {
    if (e.screenX > lastX) {
        direction = "R";
    } 
    else {
        direction = "L";
    }
    lastX = e.screenX;
}

// Add a row of trees to the map.
function AddTreeRow(mapDiv, fromX, fromY, toX, toY, numTrees) {
    var treeGap = numTrees - 1;
    for (i = 0; i < numTrees; i++) {
        AddTree(mapDiv, fromX + (i / treeGap) * (toX - fromX), fromY + (i / treeGap) * (toY - fromY), RandomTree())
    }
}

// Add a tree of random type to the map.
function AddRandomTree(mapDiv, xPercent, yPercent) {
    AddTree(mapDiv, xPercent, yPercent, RandomTree())
}

// The inex of a random tree.
function RandomTree() {
    return Math.floor(Math.random() * 9);
}

// Add a tree to the map.
function AddTree(mapDiv, xPercent, yPercent, type) {
    var newTree = document.createElement("div");
    newTree.style.left = xPercent + "%";
    newTree.style.top = yPercent + "%";
    newTree.className = "Tree";
    newTree.innerHTML = "<img src='" + tree[type].src + "' id='" + type + "' width='100%' onMouseOver='tOvr(this);' onMouseOut='tOut(this);' />";
    mapDiv.appendChild(newTree);
}

// Mouse moves over a tree.
function tOvr(treeItem) {
    eval("treeItem.src = tree" + direction + "[" + treeItem.id + "].src");
}

// Mouse moves out of a tree.
function tOut(treeItem) {
    treeItem.src = tree[treeItem.id].src;
}