// PanicGoods DynaCart(TM)
// (C) 2009 Panic, Inc. / Cabel Sasser
// Patent Pending
//
// All Rights Reserved. Must not be reproduced without express written permission of Panic, INc.
//
// For questions or licensing contact Panic: goods @ panic dot com

// TODO: In the future, OnUnload should save the cart (for "back" buttons, once we have more than one item page)
// TODO: Rollovers for arrows?
// TODO: Test if IE in transitional (standards) mode means I can remove IE event code

// 
// Recent Changes:
// - Domain for cookie is pulled out of HTML-based JS configuration
// - Removed boatloads of IE conditional code and fixed tons of standards issues. It's 2009!

// Initializations

var cartScroll				= 0;
var leftScrollAct			= 0;
var rightScrollAct			= 0;
var currentlyResizingFlag	= 0;
var removeOccured			= 0;
var finalDestination		= "";

var isNotIE;
isNotIE  = (navigator.appName.indexOf("Microsoft") != -1) ? false : true

// PRELOAD the important images

poof1 = new Image(64,64); poof1.src = "images/poof-1.png";
poof2 = new Image(64,64); poof2.src = "images/poof-2.png";
poof3 = new Image(64,64); poof3.src = "images/poof-3.png";
poof4 = new Image(64,64); poof4.src = "images/poof-4.png";
poof5 = new Image(64,64); poof5.src = "images/poof-5.png";

cartl = new Image(20,55); cartl.src = "images/cart-leftarrow.png";
cartr = new Image(20,55); cartr.src = "images/cart-rightarrow.png";
cartldis = new Image(20,55); cartldis.src = "images/cart-leftarrow-dis.png";
cartrdis = new Image(20,55); cartrdis.src = "images/cart-rightarrow-dis.png"; 

////////////////
//
// CARTBAR related code
//
////////////////

// ADD Item To Cart

function addToCart(theItemName) {
	
	// Next, add the item to the array of ordered items
	
	orderedArray = orderedArray.concat(theItemName);
	
	// Then, add the quantity and size to their arrays, if they exist

	if (document.orderform[theItemName+"-var"]) {
		varietyArray = varietyArray.concat(document.orderform[theItemName+"-var"].value);
	} else {
		varietyArray = varietyArray.concat("null");
	}

	if (document.orderform[theItemName+"-qty"]) {
		quantityArray = quantityArray.concat(document.orderform[theItemName+"-qty"].value);
	} else {
		quantityArray = quantityArray.concat("null");
	}

	// Then, display the thumbnails
	// - If we have more than we can dispaly, scroll to the right
	// - If we're already scrolled, reset view right
	
	if (orderedArray.length > cartSpaces) {
		cartScroll++;
		if (cartScroll != (orderedArray.length - cartSpaces)) {
			cartScroll = (orderedArray.length - cartSpaces);
		}
	}

	// Draw the thumbnails

	displayCartThumbs(cartScroll);

	// Draw the total

	displayTotalPrice();
		
	// Update the cookie

	setCartCookie();
}
	
// REMOVE Item From Cart

function removeFromCart(removedSlot) {

	// Iterate through the array of cart items, and remove SLOT + SCROLL
	
	var tempArray = new Array();
	var tempQtyArray = new Array();
	var tempVarArray = new Array();

	for (var i=0; i < orderedArray.length; i++) {
		if (i != (parseInt(removedSlot) + parseInt(cartScroll))) { 
			// Not the one we removed, keep it in
			tempArray = tempArray.concat(orderedArray[i]);
			tempQtyArray = tempQtyArray.concat(quantityArray[i]);
			tempVarArray = tempVarArray.concat(varietyArray[i]);
		} else {
			removedItem = orderedArray[i];
			removedQty = quantityArray[i];
			removedVar = varietyArray[i];
		}
	}

	orderedArray = tempArray;	 
	quantityArray = tempQtyArray;
	varietyArray = tempVarArray;

	// Reduce the scroll pointer, if we're showing more than can fit
	
	if (orderedArray.length > (cartSpaces - 1) && cartScroll != 0) {
		// Note to self. cartSpaces - 1 exists above because the array starts at 0,
		// but the number of cart slots starts at 1. It was not setting the scroll
		// amount back to zero, ever, because the legnth of items was matching too soon.
		cartScroll--;
	}

	// Now, redraw the cart thumbs
	
	displayCartThumbs(cartScroll);

	// Draw the total

	displayTotalPrice();

	// Update the cookie

	setCartCookie();
}

// CLEAR the entire cart

function clearCart() {

	var cartScroll = 0;
	emptyArray = new Array();

	orderedArray = emptyArray;
	quantityArray = emptyArray;
	varietyArray = emptyArray;

	displayCartThumbs(cartScroll);
	displayTotalPrice();
	setCartCookie();

}

// DISPLAY TOTAL - Itereate, calculate, and draw the total price

function displayTotalPrice() {
	theTotal = 0;
	for (var i=0; i < orderedArray.length; i++) {

		// Get the price of the item

		for (var j=0; j < itemArray.length; j++) {
			if (itemArray[j] == orderedArray[i]) {
				thePrice = priceArray[j];
			}
		}

		// Add it up

		theTotal = theTotal + (thePrice * quantityArray[i]);
	}

	displayTotal = theTotal + "";

	if (theTotal > 100) {
		displayTotal = displayTotal.substring(0, displayTotal.length - 2) + "." + displayTotal.substring(displayTotal.length - 2, displayTotal.length);
	}

	// Display the updated total in the DIV
	
	if (document.getElementById) {
		document.getElementById('total').innerHTML = displayTotal;
	}

	return;
}

// DISPLAY THUMBS - Iterate through and display the thumbnails
// Both change the src image, and display the image itself via CSS

function displayCartThumbs(cartStartPos) {

	// cartStartPos = the item to show on the left edge (if more than 8 presumably)

	// Should we turn off the help text?

	if (orderedArray.length > 0) {
		document.getElementById("carthelp").style.visibility = "hidden";
		document.getElementById("cartcontents").style.visibility = "visible";
		document.getElementById("carthelp2").style.visibility = "visible";
	}
	
	// Now go through and draw each of the items

	var j=0; // J is the number of the cart image we're working with
	
	for (var i = cartStartPos; i < (cartStartPos + cartSpaces); i++) {
		if (orderedArray[i]) {

			document.getElementById("cartslot-"+j+"-item").style.backgroundImage = "url(images-items/"+orderedArray[i]+"/small.png)";

			if (varietyArray[i] && varietyArray[i] != "null") {
				document.getElementById("cartslot-"+j+"-var").style.backgroundImage = "url(images-badges/var-"+varietyArray[i]+".png)";
			} else {
				document.getElementById("cartslot-"+j+"-var").style.backgroundImage = "url(images/spacer.gif)";
			}
			
			if (quantityArray[i] && quantityArray[i] > 1 && varietyArray[i] && varietyArray[i] != "null") {
				document.getElementById("cartslot-"+j+"-qty").style.backgroundImage = "url(images-badges/qtyl-"+quantityArray[i]+".png)";
			} else if (quantityArray[i] && quantityArray[i] > 1 && ! varietyArray[i]) {
				document.getElementById("cartslot-"+j+"-qty").style.backgroundImage = "url(images-badges/qtyr-"+quantityArray[i]+".png)";
			} else {
				document.getElementById("cartslot-"+j+"-qty").style.backgroundImage = "url(images/spacer.gif)";
			}
	  
			document.getElementById("cartslot-"+j+"-block").style.display = "block";
		} else {
			document.getElementById("cartslot-"+j+"-block").style.display = "none";
			document.getElementById("cartslot-"+j+"-item").style.backgroundImage = "url(images/spacer.gif)";
			document.getElementById("cartslot-"+j+"-qty").style.backgroundImage = "url(images/spacer.gif)";
			document.getElementById("cartslot-"+j+"-var").style.backgroundImage = "url(images/spacer.gif)";
		}
		j++;
	}

	// Do we need to display the left arrow?
	
	if (cartStartPos > 0) {
		if (document.images["cartleft"].src != cartl.src) {
			document.images["cartleft"].src = cartl.src;
		}
		leftScrollAct = 1;
	} else {
		if (document.images["cartleft"].src != cartldis.src) {
			document.images["cartleft"].src = cartldis.src;
		}
		leftScrollAct = 0;
	}
	
	// Do we need to display the right arrow?
	
	if ((cartStartPos + cartSpaces) < orderedArray.length) {
		if (document.images["cartright"].src != cartr.src) {
			document.images["cartright"].src = cartr.src;
		}
		rightScrollAct = 1;
	} else {
		if (document.images["cartright"].src != cartrdis.src) {
			document.images["cartright"].src = cartrdis.src;
		}
		rightScrollAct = 0;
	}

	// Should we turn on the help layer?

	if (orderedArray.length == 0) {
		document.getElementById("carthelp").style.visibility = "visible";
		document.getElementById("cartcontents").style.visibility = "hidden";
		document.getElementById("carthelp2").style.visibility = "hidden";
	}
	
	return;
}

// SCROLL the cart view left

function scrollCartLeft() {
	// Only if the arrow is active, as determined by displayCartThumbs
	if (leftScrollAct == 0) {
		return;
	} else {
		cartScroll--;
		displayCartThumbs(cartScroll);
	}
}

// SCROLL the cart view right

function scrollCartRight() {
	// Only if the arrow is active, as set by displayCartThumbs
	if (rightScrollAct == 0) {
		return;
	} else {
		cartScroll++;
		displayCartThumbs(cartScroll);
	}
}

// SET COOKIE install the current cart in the browser cookie

function setCartCookie() {
	document.cookie = "PG_REQUIRED_o="+escape(orderedArray)+"; path=/; domain=" + cookieDomain;
	document.cookie = "PG_REQUIRED_v="+escape(varietyArray)+"; path=/; domain=" + cookieDomain;
	document.cookie = "PG_REQUIRED_q="+escape(quantityArray)+"; path=/; domain=" + cookieDomain;
}

// READ COOKIE setup the cart when the pages lodes

function initializeCart() {

	// Get the individal cookies, if they exist

	if (getCookie("PG_REQUIRED_o")) { orderedArray  = getCookie("PG_REQUIRED_o").split(","); }
	if (getCookie("PG_REQUIRED_v")) { varietyArray  = getCookie("PG_REQUIRED_v").split(","); } 
	if (getCookie("PG_REQUIRED_q")) { quantityArray = getCookie("PG_REQUIRED_q").split(","); }
	
	console.log("1: "+getCookie("PG_REQUIRED_o"));
	console.log("2: "+getCookie("PG_REQUIRED_v"));
	console.log("3: "+getCookie("PG_REQUIRED_q"));
	
	// If we got stuff, redraw the cart

	if (orderedArray.length > 0) {
		displayCartThumbs(cartScroll);
		displayTotalPrice();
	}
}

// UTIL: Get a single cookie
// Source: http://www.netspade.com/articles/javascript/cookies.xml

function getCookie(name) {
	var dc = document.cookie;
	var prefix = name + "=";
	var begin = dc.indexOf("; " + prefix);
	if (begin == -1) {
		begin = dc.indexOf(prefix);
		if (begin != 0) return null;
	} else {
		begin += 2;
	}
	var end = document.cookie.indexOf(";", begin);
	if (end == -1) {
		end = dc.length;
	}
	return unescape(dc.substring(begin + prefix.length, end));
}

////////////////
//
// DRAGGING / DROPPING related code
//
////////////////

var cartLayer = "cart";
var dragLayer = "ItemDrag";
var dragImage = "DragImage";
var highlightElement = "cart-main";

// ROLLOVER - Layer capable rollover function

function hiLite(imgDocID, imgObjName, imgLayerID) {
	if (imgLayerID) {
		theObj = document.getElementById(imgDocID);
		theObj.setAttribute("src", eval(imgObjName + ".src"));
	}
	else {
		document.images[imgDocID].src = eval(imgObjName + ".src");
	}
}

var oldX, oldY, movingStatus, layerClicked, what, clickURL, helpUp;

// SHOW/HIDE - This will show/hide an element

function toggleVisibility(what) {
	theObj = document.getElementById(what);
	if (theObj.style.visibility == "hidden" || theObj.style.visibility == "") {
		theObj.style.visibility = "visible";
	} else {
		theObj.style.visibility = "hidden";
	}
}

// MOUSEDOWN
// See if we've clicked something that should be dragged, and if so, init the drag

function doDown(e) {

	// Calculate the mouse's click position

	if (isNotIE) {
		theTarget = e.target;
		xWin = e.pageX;
		yWin = e.pageY;
	} else {
		theTarget = window.event.srcElement;
		xWin = window.event.clientX;
		yWin = window.event.clientY + document.body.scrollTop;  		
	}

	// Get the name of what we've clicked, and initialize a drag
	//
	// If it has "-drag" in the name, we know this is something to be dragged
	// The part before the "-drag" is used to set the proper drag image
	// I.e., "shirt-drag" would be the source image ID
	// "images-items/shirt/drag.png" would be the drag image

	if (theTarget.name && theTarget != "") {
		if (theTarget.name.indexOf("-drag") != -1 && movingStatus == "drag") {
			// alert("A drag is already active / finishing!");
		}
		if (theTarget.name.indexOf("-drag") != -1) {

			// Clear some things just in case
  
			itemName = "";
			itemCartSlot = "";
			layerClicked = "";
			theLayer = "";
	
			// Get the itemname from the image 'name' tag, in 95% of the cases
	
			itemName = theTarget.name.substring(0,theTarget.name.lastIndexOf("-"));
		
			// However, if it's a dynamic shopping cart thumb, get it from the array
		
			if (itemName.indexOf("cartslot") != -1) {
				// Determine which thumb was chosen, add the scroll offset to get the item name 
				itemCartSlot = theTarget.name.substring(theTarget.name.indexOf("-") + 1, theTarget.name.lastIndexOf("-"));
				itemName = orderedArray[parseInt(itemCartSlot) + parseInt(cartScroll)];
			}
	
			// Initialize some stuff.
			// "ItemDrag" is the hard-coded DIV we're using that contains the dragging picture
			// Since only one layer drags on this page, we assume it to be the value of "dragLayer".		

			layerClicked = dragLayer;
	  
			// Grab the layer
	  
			theLayer = document.getElementById(layerClicked);
			// alert("Layer: " + layerClicked + " Object: " + theLayer + " Left: " + theLayer.style.left);
			
			// Find out what button was pressed -- only drag if it's the left
	
			if (isNotIE) {
				theButton = e.which;
			} else {
				theButton = event.button;
			}
	  
			// If it's the left... do it!
	  
			if (theButton == 1) {
	  
				// Set the Icon to the right drag image
				// Test it, and only change it if it actually needs to be changed
				// Also get half the width and the height of the image being dragged, for layer calcuations.
 
				theObj = document.getElementById(dragImage);
				if (theObj.getAttribute("src") != "images-items/"+itemName+"/drag.png") {
					theObj.setAttribute("src", "images-items/"+itemName+"/drag.png");
				}

				dragImageWidth = Math.round(theObj.getAttribute("width") / 2);
				dragImageHeight = Math.round(theObj.getAttribute("height") / 2);

				// Object's style.left can't be read until it is first set
				// We move it up and to the left half of the item's size, so the drag is from the item's middle
				// TODO: This should be dynamically calculated, really!
		  
				theLayer.style.left = (xWin - dragImageWidth) + 'px';
				theLayer.style.top = (yWin - dragImageHeight) + 'px';
				
				// alert(theLayer.style.left);

				// Start Drag
 
				movingStatus = "drag";
			  	 
				// Now initialize mouse tracking, and set the first position for dragging
		
				if (isNotIE) {
					document.captureEvents(Event.MOUSEMOVE);
					oldX = e.clientX;
					oldY = e.clientY;
					startX = parseInt(theLayer.style.left);
					startY = parseInt(theLayer.style.top);
				} else {
					oldX = window.event.offsetX;
					oldY = window.event.offsetY;
				}
					  
				// Set the INITIAL drag icon layer to the mouse position
				// Also, get the initial position for snapback

				snapStartX = parseInt(theLayer.style.left);
				snapStartY = parseInt(theLayer.style.top); 

				dropperHighlight = 0;
				removeHighlight = 0;
				layerShowing = "false";
		 
				document.onmousemove = drag;
		  
				return false;
			}
		}
	}
}

// DRAGGING

function drag(e) {

	if (movingStatus == "drag") {
	
		// console.log = "Dragging...";
	
		// First, is the window still hidden? If so, show it.
	
		if (layerShowing == "false") {
			toggleVisibility(layerClicked);
			layerShowing = "true";
		}
	
		// Now, actually move the layer
		// Track the difference, and add the starting position to it  
		
		if (isNotIE) {
			theLayer.style.left = (startX + e.clientX - oldX) + 'px';
			theLayer.style.top = (startY + e.clientY - oldY) + 'px';
			// console.log = "DRAG! Start: " + startX + "," + startY + " - Pg: " + e.pageX + "," + e.pageY + " - Old: " + oldX + "," + oldY + " - L/T: " + theLayer.style.left + "," + theLayer.style.top + " TEST: " + document.body.scrollTop;
		} else {
			document.all[layerClicked].style.pixelLeft = window.event.clientX - dragImageWidth;
			document.all[layerClicked].style.pixelTop  = (window.event.clientY) + document.body.scrollTop - dragImageHeight;
		}
	
		// Now, check for the drop target.
		// Get the current location of the pointer...
	
		if (isNotIE) {
			currentX = e.pageX;
			currentY = e.pageY;
		} else {
			currentX = window.event.clientX;
			currentY = window.event.clientY;
		}
	
		// Now, get the top edge of the drop layer, accounting for any amount of scroll
	
		dropID = document.getElementById(cartLayer);
		dropperY = dropID.offsetTop + document.body.scrollTop;

		// console.log = "Drag! " + currentX + "/" + currentY + " - " + dropperY + " - " + dropID.offsetTop;
	
		// Now, we split depending on if we're to be dragging IN or OUT.

		if (theTarget.name.indexOf("cartslot") != -1) {

			// OUT - We are dragging an item OUT of the cart, since "cartslot" is in the name of what we're dragging.
			// So, if the mouse has moved above the "cart" area...

			if (currentY < dropperY) {

				// Only do this once
	
				if (removeHighlight != 1) {
					// The item left the cart, so setting this flag will remove it when the drag is done
	
					removeHighlight = 1;
					removeOccured = 1;
	
					// Now make this slot temporarily "dissapear" and slide it out by shrinking its width
	
					document.getElementById("cartslot-"+itemCartSlot+"-item").style.visibility = "hidden";
					document.getElementById("cartslot-"+itemCartSlot+"-qty").style.visibility = "hidden";
					document.getElementById("cartslot-"+itemCartSlot+"-var").style.visibility = "hidden";
					if (currentlyResizingFlag != 1 && rightScrollAct == 0 && leftScrollAct == 0) {
						resizeTimer = setInterval("resizeWidthElement('cartslot-"+itemCartSlot+"-block', 1, -15)", 25);
					}
				}
			}
			else {
				if (removeHighlight != 0) {
					// The item is still in the cart, so don't remove it when the drag is done!
		
					removeHighlight = 0;
		
					if (currentlyResizingFlag != 1 && rightScrollAct == 0 && leftScrollAct == 0) {
						resizeTimer = setInterval("resizeWidthElement('cartslot-"+itemCartSlot+"-block', cartSlotSize, 15)", 25);
					}
				}
			}
		} else {

			// IN - We're dragging an item INTO the cart. Highlight it in case they let go!

			if (currentY > dropperY) {
				// The mouse is in, so highlight!
				dropperHighlight = 1;
				hiElem = document.getElementById(highlightElement);
				hiElem.style.backgroundColor = '#cfebfc';
			}
			else {
				dropperHighlight = 0;
				hiElem = document.getElementById(highlightElement);
				hiElem.style.backgroundColor = '#edf8ff';
			}
		}
		return false;
	}

}

// MOUSEUP
// Do something once the mouse is released

function doUp(e) {
	if (movingStatus == "drag") {

		if (isNotIE) {
			testX = e.clientX;
			testY = e.clientY;
		} else {
			testX = window.event.offsetX;
			testY = window.event.offsetY;
		}
		
		// Did the user simply click the item? If so, take them where they want to go (if anywhere)

		// alert(oldX + " and " + e.clientX + " and " + oldY + " and " + e.clientY);

		if (oldX == testX && oldY == testY) {

			// Turn off the drag layer
	  
			if (layerShowing == "true") {
				layerShowing = "false";
				toggleVisibility(layerClicked);
			}
			movingStatus = "false";
			document.onmousemove = null;
			
				if (finalDestination != "") {
				eval(finalDestination);
				// finalDestination = "";
			}

			return false;
		}
   
		// Drag has ended. Tear down event.

		document.onmousemove = null;
	
		// Did the icon reach any drag target?
	
		if (dropperHighlight == 1) {
	
			// Yes, it did! The dropper is highlighted. ADD THE THING TO THE CART HERE
		
			addToCart(itemName);

			// Clear everything out
			
			dropperHighlight = 0;	
			hiElem = document.getElementById(highlightElement);
			hiElem.style.backgroundColor = '#edf8ff';
	  	
			toggleVisibility(layerClicked);
	  	
			layerShowing = "false";
			movingStatus = "false";

		}
		else if (removeHighlight == 1) {

			// Stop resizing (sliding) an element, if we still are

			if (currentlyResizingFlag == 1) {
				clearInterval(resizeTimer);
				currentlyResizingFlag = 0;
				// console.log = "RESIZE DONE";
			}

			// Animate the poof
	
			poofCount = 0;
			poofTimer = setInterval("animatePoof(dragImage)", 75);

			// Show the cart slot layer again (since it was likely hidden during the drag out)

			document.getElementById("cartslot-"+itemCartSlot+"-block").style.width = cartSlotSize + 'px';
			document.getElementById("cartslot-"+itemCartSlot+"-item").style.visibility = "visible";
			document.getElementById("cartslot-"+itemCartSlot+"-qty").style.visibility = "visible";
			document.getElementById("cartslot-"+itemCartSlot+"-var").style.visibility = "visible";

			// REMOVE THE ITEM FROM THE CART
		
			removeFromCart(itemCartSlot);
			removeHighlight = 0;
		}
	
		// If not, animate "snapping back", buy only if the DIV actually moved!
	
		else {
			snapEndX = parseInt(theLayer.style.left);
			snapEndY = parseInt(theLayer.style.top);  
			snapCurrent = 0;	 
			snapTimer = setInterval("snapBack(layerClicked, snapStartX, snapStartY, snapEndX, snapEndY, 15)", 10);

			// If a cart slot was hidden via drag out but not completed, make it re-appear after the snap-back

			if (removeOccured == 1) {
				document.getElementById("cartslot-"+itemCartSlot+"-block").style.width = cartSlotSize + 'px';
				document.getElementById("cartslot-"+itemCartSlot+"-item").style.visibility = "visible";
				document.getElementById("cartslot-"+itemCartSlot+"-qty").style.visibility = "visible";
				document.getElementById("cartslot-"+itemCartSlot+"-var").style.visibility = "visible";
			}
		}

		// Reset any flags

		removeOccured = 0;
	
		// Return click if all else fails.
	
		return false;
	}
}

// SNAPBACK v2 - The Snapback Animation Routine

function snapBack(layerToSnap, startX, startY, endX, endY, steps) {

	snapCurrent++;

	if (snapCurrent == 1) {
		multi = 0;
	} else { 
		multi = (1 - Math.pow(0.9, snapCurrent - 1)) / (1 - Math.pow(0.9, steps - 1));
	}

	snapX = endX + (startX - endX) * multi;
	snapY = endY + (startY - endY) * multi;

	// alert("Snap Back Step #" + snapCurrent + "/" + steps + " (move to " + snapX + " / " + snapY);
 
	document.getElementById(layerToSnap).style.left = snapX + 'px';
	document.getElementById(layerToSnap).style.top = snapY + 'px';

	if (snapCurrent == steps) {
		clearInterval(snapTimer);
		// console.log = "Snap complete.";
		toggleVisibility(layerToSnap);
		layerShowing = "false";
		movingStatus = "false";
	}
}

// POOF - Animate a Poof Ourselves (until animated .png's are standard!)

function animatePoof(imageToPoof) {

	poofCount++;

	if (poofCount == 6) {
		document.images[imageToPoof].src = "images/spacer.gif";
		clearInterval(poofTimer);
		toggleVisibility(layerClicked);
		layerShowing = "false";
		movingStatus = "false";
	}
	else {
		document.images[imageToPoof].src = eval("poof"+poofCount+".src");
	}
}

// RESIZE - Resize any item over a period of time
//
// To be called by a setInterval() call. I.e.:
// resizeTimer = setInterval("resizeWidthElement('testimg', 500, 10)", 50);
// Pass me the item to be resized, the goal size, and the amount to resize each interval
// If you want me smaller, make rszAmount a negative number!

function resizeWidthElement(theID, rszGoal, rszAmount) {
	currentlyResizingFlag = 1;

	rszElement = document.getElementById(theID);

	if ((rszAmount < 0 && (parseFloat(rszElement.style.width) + rszAmount) <= rszGoal) || (rszAmount > 0 && (parseFloat(rszElement.style.width) + rszAmount) >= rszGoal)) {
		rszElement.style.width = rszGoal + 'px';
		clearInterval(resizeTimer);
		currentlyResizingFlag = 0;
	} else {
		rszElement.style.width = (parseFloat(rszElement.style.width) + rszAmount) + 'px';
	}
}

// POPUP - Open a popup / more information window

function openWindow(url, winWidth, winHeight) {
	if (screen.availWidth) {
		var screenPosX, screenPosY;
		screenPosX = Math.round((screen.availWidth - winWidth) / 2);
		screenPosY = Math.round((screen.availHeight - winHeight) / 2);
		newWin = window.open(url, 'subwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width='+winWidth+',height='+winHeight+',left='+screenPosX+',top='+screenPosY+'');	  
	}
	else {
		newWin = window.open(url, 'subwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width='+winWidth+',height='+winHeight);
	}
}

// Initialize the Events!

document.onmousedown = doDown;
document.onmouseup = doUp;