// chnage the main image on hover
function hoverImage(imageName) {
    var imagePath = "/Assets/Images/Map/" + imageName;
    $("#imgMain").attr("src", imagePath);
}

// click an area of the map, change to the region image and image map
function clickMap(region) {
    switch (region) {
        case "west":
            changeMap("West-Zoom.jpg", "#West");
            break;
        case "south":
            changeMap("South-Zoom.jpg", "#South");
            break;
        case "midlands":
            changeMap("Midlands-Zoom.jpg", "#Midlands");
            break;
        case "north":
            changeMap("North-Zoom.jpg", "#North");
            break;
        case "ireland":
            changeMap("Ireland-Zoom.jpg", "#Ireland");
            break;
        case "east":
            changeMap("East-Zoom.jpg", "#East");
            break;
        case "main":
            changeMap("Main.jpg", "#Main");
            break;
    }
}

// perfom the image and imagemap change
function changeMap(imageName, imageMap) {
    $("#imgMain").fadeOut(300, function () {
        $("#imgMain").fadeIn(1300);

        if (imageMap != "#Main")
            $(".coordinates").removeAttr("onmouseout");
        else
            $(".coordinates").attr("onmouseout", "javascript:hoverImage('Main.jpg');");

        hoverImage(imageName);
    });

    $("#imgMain").attr("usemap", imageMap);
}