// JScript File

var kDefaultMagnifierSize = 2; // index into the arrays below
var kMagnifierSizes = new Array(0, 100, 150, 300);
var kMagnifierSizeNames = new Array('off', 'small', 'medium', 'large');
var kControllerPrefix = 'magnifier: ';


function MagnifierPosition()
{			
	this.style.left = Math.round(this.xPosition - 1 - this.size/2) + "px"; // -1 to account for the border
	this.style.top = Math.round(this.yPosition - 1 - this.size/2) + "px";
	
	var magnifierCenterX = Math.round(this.xPosition * this.xMultiplier - this.size/2);
	var magnifierCenterY = Math.round(this.yPosition * this.yMultiplier - this.size/2);
	//this.style.visibility = 'hidden';	
	this.style.backgroundPosition = -magnifierCenterX + "px " + -magnifierCenterY + "px";
	//this.style.visibility = 'visible';	
//	document.getElementById("debugx").innerHTML = normalImage.x;
//	document.getElementById("debugy").innerHTML = normalImage.y;
}

function ControllerSizeButtonClick(event)
{
	if (!event) event = window.event;
	
	var button = event.currentTarget || event.srcElement;
	
	button.parentNode.magnifier.resize(button.magnifierSize);
}

function MagnifierResize(size)
{
	this.size = kMagnifierSizes[size];
	
	for (var i=0; i < this.controller.sizeButtons.length; i++)
	{
		if (i == size)
			this.controller.sizeButtons[i].className = "magnifierControllerButtonSelected";
		else
			this.controller.sizeButtons[i].className = "magnifierControllerButton";
	}
	
	if (this.size == 0)
	{
		this.style.display = "none";
	}
	else
	{
		if (this.runtimeStyle) // msie counts the border as being part of the width
			this.size += 2; // must compensate
		
		this.style.width = this.size + "px";
		this.style.height = this.size + "px";
		this.style.display = "block";
		
		this.position();
	}
}

function MagnifierMouseDown(event)
{
	if (!event) event = window.event;
	
	document.body.magnifier = this;
	this.inDrag = true;
	if (event.pageX)
	{
		this.startX = event.pageX;
		this.startY = event.pageY;
	}
	else if (event.clientX)
	{
		this.startX = event.clientX;
		this.startY = event.clientY;
	}
	else
	{
		alert("don't know how to get position out of event");
		return;
	}
	this.savedCursor = this.style.cursor;
	//this.style.cursor = "crosshair";
}

function MagnifierMouseUp()
{
	if (this.inDrag)
	{
		this.inDrag = false;
		this.style.cursor = this.savedCursor;
		document.body.magnifier = null;
	}
}

var testi = 0;

function MagnifierDrag(event)
{
	if (!event) event = window.event;
	var magnifier = this.magnifier; // we're actually in the body's onmousemove handler
	
	if (magnifier && magnifier.inDrag)
	{
		var eventX;
		var eventY;
		
		if (event.pageX)
		{
			eventX = event.pageX;
			eventY = event.pageY;
		}
		else if (event.clientX)
		{
			eventX = event.clientX;
			eventY = event.clientY;
		}
		else
		{
			return;
		}
		
		magnifier.xPosition += eventX - magnifier.startX;
		magnifier.yPosition += eventY - magnifier.startY;
		
		magnifier.startX = eventX;
		magnifier.startY = eventY;
		
		// x borders
		if(magnifier.xPosition < normalImage.offsetLeft + magnifier.size/2 + 1)
			magnifier.xPosition = normalImage.offsetLeft + magnifier.size/2 + 1;
		else if(magnifier.xPosition > normalImage.offsetLeft + normalImage.width - magnifier.size/2 - 1)
			magnifier.xPosition = normalImage.offsetLeft + normalImage.width - magnifier.size/2 - 1 ;
			
		// y borders
		if(magnifier.yPosition < normalImage.offsetTop + magnifier.size/2 + 1)
			magnifier.yPosition = normalImage.offsetTop + magnifier.size/2 + 1;
		else if(magnifier.yPosition > normalImage.offsetTop + normalImage.height - magnifier.size/2 - 1)
			magnifier.yPosition = normalImage.offsetTop + normalImage.height - magnifier.size/2 - 1 ;
		
		//window.setTimeout("document.body.magnifier.position()", 500);
		magnifier.position();
	}
}

function loadMagnifier(image, zoomedURL, zoomedWidth, zoomedHeight)
{
	// get the zoomed image (load as early as possible)
	var zoomedImage = document.createElement("img");
	zoomedImage.src = zoomedURL;
	
	// get the div's
	var baseID = image.id;
	var magnifier = document.createElement("div");

	// get the regular image
	normalImage = image;
	
//	magnifier.xMultiplier = zoomedWidth/(normalImage.width-75);
//	magnifier.yMultiplier = zoomedHeight/(normalImage.height-75);

	magnifier.xMultiplier = zoomedWidth/normalImage.width;
	magnifier.yMultiplier = zoomedHeight/normalImage.height;

	magnifier.size = kMagnifierSizes[kDefaultMagnifierSize];
	magnifier.xPosition = normalImage.width - magnifier.size/2 - 20;
	magnifier.yPosition = normalImage.height - magnifier.size/2 - 20;
	
	magnifier.id = image.id + "Magnifier";
	magnifier.className = "magnifier";
	
	// styles (only dynamic ones, rest are part of the class)
	magnifier.style.backgroundImage = "url(" + zoomedURL + ")";
	
	// functions
	magnifier.onmousedown = MagnifierMouseDown;
	magnifier.onmouseup = MagnifierMouseUp;
	magnifier.onmouseout = MagnifierMouseUp;
	
	// we attach this handler to the body because if the user moves
   // the mouse fast enough, it'll go outside the boundaries of the
   // magnifier, and then the magnifier's mousemove handler won't fire
	document.body.onmousemove = MagnifierDrag; 

	magnifier.position = MagnifierPosition;
	magnifier.resize = MagnifierResize;
	
	// controller
	var controller = document.createElement("span");
	
	controller.id = baseID + "MagnifierController";
	controller.className = "magnifierController";
	
	var controllerPrefix = document.createElement("span");
	controllerPrefix.innerHTML = kControllerPrefix;

	controllerPrefix.className = "magnifierControllerPrefix";
	controller.appendChild(controllerPrefix);
	
	controller.sizeButtons = new Array(kMagnifierSizes.length);

	

	for (var i=0; i < kMagnifierSizes.length; i++)
	{
		var button = document.createElement("span");
		button.innerHTML = kMagnifierSizeNames[i];
		button.className = "magnifierControllerButton";
		button.onclick = ControllerSizeButtonClick;
		button.magnifierSize = i;
		
		controller.sizeButtons[i] = button;
		controller.appendChild(button);
	}
	
	// point objects at each other
	magnifier.controller = controller;
	controller.magnifier = magnifier;

	var controllerContainer = document.createElement("div");
	controllerContainer.className = "magnifierControllerContainer";
	controllerContainer.appendChild(controller);

	image.parentNode.appendChild(magnifier);
	magnifier.resize(kDefaultMagnifierSize); // also positions
}