jQuery(document).ready(function() {

    

    jQuery("#map-container AREA").mouseover(function() {
        var regionMap = '.' + jQuery(this).attr('id') + '-map';
        jQuery(regionMap).css('display', 'inline');

        jQuery('.selected').css('display', 'none');
        
        if (jQuery(regionMap).hasClass('selected')) {
            jQuery(regionMap).css('display', 'inline');
        }
        
    }).mouseout(function() {
        var regionMap = '.' + jQuery(this).attr('id') + '-map';

        // Check if a click event has occured and only change the Region hover state accordingly
        if (!jQuery(regionMap).hasClass('selected')) {
            jQuery(regionMap).css('display', 'none');
        }

        jQuery('.selected').css('display', 'inline');
    });

    jQuery("#map-container AREA").click(function() {
        jQuery('#map-container img.region').removeClass('selected').css('display', 'none');

        var regionMap = '.' + jQuery(this).attr('id') + '-map';
        jQuery(regionMap).addClass('selected').css('display', 'inline');
    });
});