$(document).ready(function() {

    // initialize
//    $('#legend').hide();
    $('#tooltip').hide();
    $('.div-area').hide();
    $('.div-area img.point').hide();

//    // set the legend button click event
//    $('#legend-button').click(function() {
//        if ($('#legend').is(':visible') == true) {
//            $('#legend').hide('slide', { direction: 'down' }, 500);
//        }
//        else {
//            $('#legend').show('slide', { direction: 'down' }, 500);
//        }
//    });

    // set the map area click event
    $('#map area').click(function() {
        // show the zoom image if the legend is not visible
        // ($('#legend').is(':visible') == false) && 
        if (!$('#' + $(this).attr("name") + ' img.area').is(':animated')) {
            $('#' + $(this).attr("name")).show();
            $('#' + $(this).attr("name") + ' img.area').stop().show('scale', { percent: 100 }, 500);
            $('#' + $(this).attr("name") + ' img.point').show();
        }
        return false;
    });

    // set the events for the tooltip & lightbox for the containing div
    $('.div-area').mouseenter(function(e) {
        if ($(this).find('img.point').length == 0) {
            // set the cursor
            $(this).css('cursor', 'pointer');

            // get the alt which contains the title
            $("#tooltip").html($(this).find('img.area').attr("alt") + '<br />(click for more info)');

            // set the top and left values
            $("#tooltip").css('top', e.pageY + 10);
            $("#tooltip").css('left', e.pageX + 10);

            // fade in
            $("#tooltip").stop().fadeIn('300').fadeTo('5', 0.9);
        }

    }).mousemove(function(e) {
        if ($(this).find('img.point').length == 0) {

            // set the top and left values
            if ($('#tooltip').is(':visible') == true) {
                $("#tooltip").css('top', e.pageY + 10);
                $("#tooltip").css('left', e.pageX + 10);
            }
        }

    }).mouseleave(function() {
        // fade out
        if (!$(this).find('img.area').is(':animated')) {
            $("#tooltip").stop().hide();
            $('.div-area img.point').hide();
            $(this).find('img.area').stop().hide('scale', { percent: 0 }, 500, function() {
                $("#tooltip").stop().hide();
                $('.div-area').hide();
            });
        }
    });

    // set the detail click event for the area image
    $('.div-area img.area').click(function(e) {
        // show the lightbox with the details for the clicked area
        if (($(this).attr('id') != null) && ($(this).attr('id') != '') && (!$(this).is(":animated"))) {
            showMapDetailLightbox($(this).attr('id'));
            return false;
        }
    });

    // point image tooltip & lightbox events
    $('.div-area img.point').mouseenter(function(e) {

        // set the cursor
        $(this).css('cursor', 'pointer');

        // get the alt which contains the title
        $("#tooltip").html($(this).attr("alt") + '<br />(click for more info)');

        // set the top and left values
        $("#tooltip").css('top', e.pageY + 10);
        $("#tooltip").css('left', e.pageX + 10);

        // fade in
        $("#tooltip").stop().fadeIn('300').fadeTo('5', 0.9);

    }).mousemove(function(e) {

        // set the top and left values
        if ($('#tooltip').is(':visible') == true) {
            $("#tooltip").css('top', e.pageY + 10);
            $("#tooltip").css('left', e.pageX + 10);
        }

    }).mouseleave(function() {
        // fade out
        $("#tooltip").stop().hide();

    }).click(function(e) {
        // show the lightbox with the details for the clicked area
        if ($(this).attr('id') != null && ($(this).attr('id') != '')) {
            showMapDetailLightbox($(this).attr('id'));
            return false;
        }
    }); ;
});