/***********************************************************************************************\
*	resizeImage.js																				*
*	created: 12/12/06 by Darren Smith															*
*																								*
*	purpose: resize an image on load															*
*	to whatever width and height limits															*
*	are passed to the function																	*
*																								*
*	usage:																						*
*	1. create empty target div with styling														*
*	2. call resizeImage() passing the following variables:										*
*	resizeImage([image path], [target div id], [alt text], [max width], [max height]);			*
*	3. enjoy																					*
\***********************************************************************************************/

//global vars
var workingImagePath;
var maxWidth;
var maxHeight;
var destinationDivID;
var alt;
var newWidth;
var newHeight;
var garbageVar;

//pass image path, target div, alt text, max width, and max height to function
function resizeImage(image, containerDivID, altText, width, height){
	workingImagePath = image;
	destinationDivID = containerDivID;
	alt = altText;
	maxWidth = width;
	maxHeight = height;
	setLoadingMsg();
}

//set loading message
function setLoadingMsg(){
	var objDestination = document.getElementById(destinationDivID);
	objDestination.style.width = maxWidth + "px";
	objDestination.style.height = maxHeight + "px";
	objDestination.style.textAlign = "center";
	objDestination.style.fontSize = "10px";
	objDestination.innerHTML = "Loading Image...";
	createTempDiv();
}

//create a hidden workspace
function createTempDiv(){
	var tempImageDiv = window.document.createElement("div");
	tempImageDiv.setAttribute("id", "tempImageDiv");
	window.document.body.appendChild(tempImageDiv);
	var objTempDiv = document.getElementById("tempImageDiv");
	objTempDiv.style.width = "1px";
	objTempDiv.style.height = "1px";
	objTempDiv.style.overflow = "hidden";
	objTempDiv.style.marginLeft = "-1000px";
	loadTempImage();
}

//load image into workspace
function loadTempImage(){
	//avoid cache problems with garbage variable
	garbageVar = new Date();
	document.getElementById("tempImageDiv").innerHTML = '<img src="' + workingImagePath + '?blah=' + garbageVar + '" id="tempImage" onLoad="setTempDimensions()" />';
}

//resize temp image to desired dimensions
function setTempDimensions(){
	var objTempImg = document.getElementById("tempImage");
	//get current dimensions
	var currentWidth = elmWidth("tempImage");
	var currentHeight = elmHeight("tempImage");
	//set width
	if(currentWidth > maxWidth){
		objTempImg.style.width = maxWidth + "px";
		//maintain aspect ratio
		objTempImg.style.height = (currentHeight*(maxWidth/currentWidth)) + "px";
	}
	//get current dimensions
	currentWidth = elmWidth("tempImage");
	currentHeight = elmHeight("tempImage");
	//set height
	if(currentHeight > maxHeight){
		objTempImg.style.height = maxHeight + "px";
		//maintain aspect ratio
		objTempImg.style.width = (currentWidth*(maxHeight/currentHeight)) + "px";
	}
	//record final dimensions
	newWidth = elmWidth("tempImage");
	newHeight = elmHeight("tempImage");
	loadFinalImage();
}

//load image into final position with adjusted dimensions
function loadFinalImage(){
	//use same garbage var so that cached version can be used
	var newImageSource = '<img src="' + workingImagePath + '?blah=' + garbageVar + '" style="width: ' + newWidth + 'px; height: ' + newHeight + 'px;" alt="' + alt + '" />'; 
	document.getElementById(destinationDivID).innerHTML = newImageSource;
	removeTempDiv();
}

//clean up
function removeTempDiv(){
	var elementToRemove = document.getElementById("tempImageDiv");
    elementToRemove.parentNode.removeChild(elementToRemove);
}


//functions to determine width and height of HTML elements
function elmHeight(elmID){
	var objElement = document.getElementById(elmID);
	if(objElement.clientHeight){
		return objElement.clientHeight;
	} else {
		if(objElement.offsetHeight){
			return objElement.offsetHeight;
		}
	}
}
function elmWidth(elmID){
	var objElement = document.getElementById(elmID);
	if(objElement.clientWidth){
		return objElement.clientWidth;
	} else {
		if(objElement.offsetWidth){
			return objElement.offsetWidth;
		}
	}
}