/* MAXIM INTERACTIVE MAPS
*  A zone on the website design which contains an image is identified as a placeholder for 
*  an interactive element. This script works by taking a reference to an existing element on 
*  the page, and absolutely positioning two DIVs on top of this element on page load.
*/
var x_fudge;
var large_map_visible;

// prepare the map initial states
function initMaps()
{
    x_fudge = 0;
    
    // set visibilities
    $("#map-preview").show();
    $("#map-interactive").hide();
    
    // position both maps
    updateMapPositions();
    
    // register the click event with the small map, to show the large
    $('a[@href^="#minimap"]').click(function(){ toggleInteractiveMapVisibility(); return false; });
    $("#map-close-link").click(function(){ toggleInteractiveMapVisibility(); return false; });
    $('a[@href^="#maps-0"]').click(function(){ setLocationVisibility(0); return false; });
   
    
    // record visibility state
    large_map_visible = false;
    
}


// set the absolute positions of both maps
function updateMapPositions()
{
    // preview map
    var mapPosition = $("#banner-image").position();
    var mapPositionLeft = (mapPosition.left + $("#banner-image").width() - $("#map-preview").width() + x_fudge);
    var mapPositionTop = mapPosition.top;
    $("#map-preview").attr("style","top:"+mapPositionTop+"px; left:"+mapPositionLeft+"px;");
    
    // interactive map
    mapPositionLeft = (mapPosition.left + $("#banner-image").width() - $("#map-interactive").width() + x_fudge);
    $("#map-interactive").attr("style","top:"+mapPositionTop+"px; left:"+mapPositionLeft+"px;");
    
    if (large_map_visible==true)
    {
        $("#map-preview").hide();
        $("#map-interactive").show();
    }
}

// set visibility of the small (preview) map and the large (interactive) map
function toggleInteractiveMapVisibility()
{
    if (large_map_visible==false)
    {
        $("#map-preview").fadeOut("slow");
        $("#map-interactive").fadeIn("slow");
        setLocationVisibility( 0 );
    }
    else
    {
        $("#map-preview").fadeIn("slow");
        $("#map-interactive").fadeOut("slow");
    }
    
    // record visibility state
    large_map_visible = (!large_map_visible);
    return false;
}


function setLocationVisibility( zone )
{
    $(".zone-container").hide();
    $("#zone-container-" + zone.toString() ).fadeIn("slow"); //.show();
}



/* SPRITE STYLE IMAGE ROLLOVER
 *
 * One very wide gif image displayed as a background image which contains all 
 * map rollover variations is dynamically repositioned onmouseover. The viewport
 * is the width of one map image, meaning the remainder are off-screen.
 * The positionID is multiplied with the mapImageWidth to scroll the background image by 
 * the required amount to position it within the viewport.
 *
 *    default:      [#]######
 *    positionID=2: ##[#]####
 *    positionID=4: ####[#]##
 *     etc..
 * 
 * Note that the background is attached to the <img> with id=mapImage
 * and src= to a transparent GIF image. The width attribute specifies
 * the viewport width.
 * 
 * Producing one large gif of 39kb loads quicker over one http txn 
 * rather than 7 smaller gifs with a sum of 45kb.
*/

// scroll element background image x position by required amount
function mapHighlight(mapRef, mapId)
{ 
    mapImg = document.getElementById(mapRef);
	mapImageHeight = mapImg.height;
	mapImg.style.backgroundPosition = (mapId!=undefined) ? "0 -"+(mapImageHeight*mapId)+"px" : "0px 0px"; 
}