/*************
Name:			mappreview.js
Description:	Functionality for displaying preview map as overview on
				product page.
Date:			14/06/2006
Author:			James Condliffe
**************/

// Relevant objects on page
var background;
var imageContainer;
var image;
var messageContainer;
var copyright;
var close;
var initialised; // used to only create the elements once

// Fading constants
var speed = 5; //speed for each frame
var opacStart = 0; // starting opacity
var opacEnd = 30; // ending opacity

// On load
addLoadEvent(initPreviewMap);

function initPreviewMap()
{
    var button = document.getElementById("previewbutton");
    
    if(button)
    {
        button.onclick = openPreviewMap;
    }
}

function createPreviewMap(src,ccf)
{
	var docbody = document.getElementsByTagName("body");
	
	// Create the translucent background and append to body
	background = document.createElement("div");		
	background.style.width = "100%";
	background.style.backgroundColor = "#000000";
	background.style.position = "absolute";
	background.style.top = "0";
	background.style.left = "0";
	background.style.height = getDocumentHeight() + "px";
	background.onclick = closePreviewMap;
	changeOpac(0,background);
	docbody[0].appendChild(background);

	// Create the image container and append to body
	imageContainer = document.createElement("div");		
	imageContainer.style.width = "100%";
	imageContainer.style.position = "absolute";
	imageContainer.style.top = "0";
	imageContainer.style.left = "0";
	imageContainer.style.textAlign = "center";
	imageContainer.style.padding = "20px";
	imageContainer.onclick = closePreviewMap;
	docbody[0].appendChild(imageContainer);

	// Create the image and append to the image container
	image = document.createElement("img");
	image.setAttribute("src",src);
	image.style.border = "5px solid #FFFFFF";
	image.style.borderBottom = "none";
	image.onclick = closePreviewMap;
	// Set the width of the copyright notice to the width of the image after it's loaded
	image.onload = function(){messageContainer.style.width = this.width+10+"px";};
	imageContainer.appendChild(image);

	// Create the message container
	messageContainer = document.createElement("div");
	messageContainer.style.backgroundColor = "#FFFFFF";
	messageContainer.style.margin = "-3px auto 0 auto";
	messageContainer.style.padding = "0 0 3px 0";
	imageContainer.appendChild(messageContainer);
	
	// Create Copyright noice and append to image container
	copyright = document.createElement("p");
	copyright.style.color = "#999999";
	copyright.style.fontStyle = "italic";
	//copyright.style.float = "right";
	copyright.style.margin = "0";
	if (ccf == 0)
	{
	copyright.appendChild(document.createTextNode("\u00A9 Crown Copyright, \u00A9 Copyright Geographers' A-Z Map Company Ltd."));
	}
	else
	{
	copyright.appendChild(document.createTextNode("\u00A9 Copyright Geographers' A-Z Map Company Ltd."));
	}
	messageContainer.appendChild(copyright);
    
    
	// Create close link and append to image container
	close = document.createElement("p");
	//close.style.float = "left";
	close.style.margin = "10px 0 0 0";
	close.onclick = closePreviewMap;
	close.innerHTML = "<a href='#'>Close Preview</a>";
	messageContainer.appendChild(close);
	
	// confirm initialisation
	initialised = true;
}


// Called by the page to display the preview map as a page overlay
function openPreviewMap()
{
    //alert("hello");
    //return;
    
    //var src = left(this.getAttribute("href"),len(this.getAttribute("href"),-7));
      var iLen = String(this.getAttribute("href")).length
      var src = String(this.getAttribute("href")).substring(0,iLen-6);
      var ccf = String(this.getAttribute("href")).substring(iLen ,iLen-1);
    //alert(src);
    //alert(ccf);
    
	// Initialise the map if necessary
	if (!initialised)
		createPreviewMap(src,ccf);

	// Display the objects
	imageContainer.style.display = "block";
	background.style.display = "block";

	// Loop through the opacities
	var timer = 0;
	for(i = opacStart; i < opacEnd; i++) 
	{
		setTimeout("changeOpac(" + i + ",background)",(timer * speed));
		timer++;
	}
	
	// Scroll the page
	window.scroll(0,0);
	
	return false;
}

function closePreviewMap()
{
	// Loop through the opacities
    var timer = 0;
	for(i = opacEnd; i >= opacStart; i--) 
	{
		setTimeout("changeOpac(" + i + ",background)",(timer * speed));
		timer++;
	}	
	imageContainer.style.display = "none";
	setTimeout("background.style.display='none'",(timer*speed));
	
	return false;
}


/*********
Change the object's opacity for different browsers
**********/
function changeOpac(opacity, object) 
{
	object.style.opacity = (opacity / 100);
	object.style.filter = "alpha(opacity=" + opacity + ")";
	object.style.KhtmlOpacity = (opacity / 100);
	object.style.MozOpacity = (opacity / 100);	
}