$(document).ready(function() {

    //Set flag to know whether click on image has happened
    currentNameCardId = 0;

    //set absolute positioning
    $("#namecards").addClass("pos");
    //hide the span inside namecard div
    $("#namecards div span").hide();


    //hover over any link will whiteout bg image
    $("#hotspots a").mouseenter(function() {
        $("#img-map").addClass("whiteout");
        //$("#img-map li#ecm" + $(this).attr("id")).addClass("ecm" + $(this).attr("id"));

        $("#img-map li[class*='ecm']").removeClass();
        $("#img-map li#ecm" + $(this).attr("id")).addClass("ecm" + $(this).attr("id"));

        //apply opacity
        $("#img-map").addClass("whiteout");
        //close any open namecards
        $("#namecards div").hide();
        //return the id
        $divID = $(this).attr("ID");

        //open corresponding namecard
        $("#namecards #nc" + $divID).show();


    });

    $("#img-map li, #hotspots a,  #namecards div").mouseleave(function() {

        $("#img-map").removeClass("whiteout");
        $("#namecards div").hide();
        $("#img-map li").attr('class', '');

    });

    //hide all namecards on page load
    $("#namecards div").hide();

    $("#hotspots a").click(function() {
        return false;
    });





});