document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;
	
var dragTargets = new Array();
var styleTargets = new Array();
var balusterStyle = new Array();
var bigBaluster = new Array();
var mouseOffset = null;
var shouldDrag = false;
	
function windowLoad() {

	//Make all of the baluster image holders drop targets
	dragTargets[0] = "baluster0";
	dragTargets[1] = "baluster1";
	dragTargets[2] = "baluster2";
	dragTargets[3] = "baluster3";
	dragTargets[4] = "baluster4";
	dragTargets[5] = "baluster5";
	dragTargets[6] = "baluster6";
	dragTargets[7] = "baluster7";
	dragTargets[8] = "baluster8";
	dragTargets[9] = "baluster9";
	dragTargets[10] = "baluster10";
	dragTargets[11] = "baluster11";
	dragTargets[12] = "baluster12";
	
	//Make all the baluster images draggable
	for(var i = 0; i < dragTargets.length; i++)
		makeMoveable(document.images[dragTargets[i]]);
		
	styleTargets[0] = document.images["style0"];
	styleTargets[1] = document.images["style1"];
	styleTargets[2] = document.images["style2"];
	styleTargets[3] = document.images["style3"];
	styleTargets[4] = document.images["style4"];
	styleTargets[5] = document.images["style5"];
	
	//Make the different styles copyable
	for(var i = 0; i < dragTargets.length; i++)
		makeCopyable(styleTargets[i]);
		
	//Import all of the different images
	// 0 = Forged Series
	// 1 = Gothic Series
	// 2 = Santa Fe Series
	// 3 = Twist Series
	// 4 = Ribbon Series
	// 5 = Scroll Series
	var forged = new Array(3);
	forged[0] = "images/design/forged0.gif";
	forged[1] = "images/design/forged1.gif";
	forged[2] = "images/design/forged2.gif";
	balusterStyle[0] = forged;
	
	var gothic = new Array(4);
	gothic[0] = "images/design/gothic0.gif";
	gothic[1] = "images/design/gothic1.gif";
	gothic[2] = "images/design/gothic2.gif";
	gothic[3] = "images/design/gothic3.gif";
	balusterStyle[1] = gothic;

	var hammered = new Array(6);
	hammered[0] = "images/design/santafe0.gif";
	hammered[1] = "images/design/santafe1.gif";
	hammered[2] = "images/design/santafe2.gif";
	hammered[3] = "images/design/santafe3.gif";
	hammered[4] = "images/design/santafe4.gif";
	hammered[5] = "images/design/santafe5.gif";
	balusterStyle[2] = hammered;
	
	var twist = new Array(4);
	twist[0] = "images/design/twist0.gif";
	twist[1] = "images/design/twist1.gif";
	twist[2] = "images/design/twist2.gif";
	twist[3] = "images/design/twist3.gif";
	balusterStyle[3] = twist;
	
	var ribbon = new Array(6);
	ribbon[0] = "images/design/ribbon0.gif";
	ribbon[1] = "images/design/ribbon1.gif";
	ribbon[2] = "images/design/ribbon2.gif";
	ribbon[3] = "images/design/ribbon3.gif";
	ribbon[4] = "images/design/ribbon4.gif";
	ribbon[5] = "images/design/ribbon5.gif";
	balusterStyle[4] = ribbon;
	
	var scroll = new Array(6);
	scroll[0] = "images/design/scroll0.gif";
	scroll[1] = "images/design/scroll1.gif";
	scroll[2] = "images/design/scroll2.gif";
	scroll[3] = "images/design/scroll3.gif";
	scroll[4] = "images/design/scroll4.gif";
	scroll[5] = "images/design/scroll5.gif";
	balusterStyle[5] = scroll;
	
	//Sets up the big baluster images
	bigBaluster[0] = "images/design/bigForged.gif";
	bigBaluster[1] = "images/design/bigGothic.gif";
	bigBaluster[2] = "images/design/bigSantaFe.gif";
	bigBaluster[3] = "images/design/bigTwist.gif";
	bigBaluster[4] = "images/design/bigRibbon.gif";
	bigBaluster[5] = "images/design/bigScroll.gif";	
	//makeCopyable(document.images["style5"]);
	
	//Sets up the initial display for the forged set
	var list  = document.getElementById("styleList");
	var i = 0;
	for( ; i < balusterStyle[list.selectedIndex].length; i++) {
		styleTargets[i].src = balusterStyle[list.selectedIndex][i];
		styleTargets[i].style.visibility="visible";
	}
	for( ; i < 6; i++){
		styleTargets[i].style.visibility="hidden";
	}
	//Display the big image
	document.images["bigBaluster"].src = bigBaluster[list.selectedIndex];
}

//Defines the action to take when clicking on a style baluster
// Yeah, I know copyable isn't a word but it makes sense
function makeCopyable(item){
	if(!item) return;
	
	item.onmousedown = function(ev){
		ev = ev || window.event;
		var mousePos = mouseCoords(ev);
		mouseOffset = getMouseOffset(this, ev);
		
		//Takes care of the padding around the images
		mouseOffset.x -= 9;
		mouseOffset.y -= 9;
		
		document.images["dragObject"].style.top      = mousePos.y - mouseOffset.y;
		document.images["dragObject"].style.left     = mousePos.x - mouseOffset.x;
		document.images["dragObject"].src  = this.src
		document.images["dragObject"].style.visibility="visible";

		shouldDrag = true;
		return false;
	}
}

//Defines the action to take when clicking on a baluster already on the stairs
function makeMoveable(item){
	if(!item) return;
	
	item.onmousedown = function(ev){
	
		if(this.src != "images/design/blank.gif") {
			ev = ev || window.event;
			var mousePos = mouseCoords(ev);
			mouseOffset = getMouseOffset(this, ev);
			document.images["dragObject"].style.top      = mousePos.y - mouseOffset.y;
			document.images["dragObject"].style.left     = mousePos.x - mouseOffset.x;
			document.images["dragObject"].src  = this.src
			document.images["dragObject"].style.visibility="visible";
			
			this.src = "images/design/blank.gif";
		
			shouldDrag = true;
		}
		return false;
	}
}
function mouseUp(ev){
	ev = ev || window.event;
	var mousePos = mouseCoords(ev);

	for(var i=0; i<dragTargets.length; i++){
		var curTarget  = dragTargets[i];
		var targPos    = getPosition(document.images[dragTargets[i]]);
		var targWidth  = parseInt(document.images[dragTargets[i]].offsetWidth);
		var targHeight = parseInt(document.images[dragTargets[i]].offsetHeight);
window.status = "Hi" + mousePos.y;
		if(
			(mousePos.x> targPos.x) &&
			(mousePos.x < (targPos.x + targWidth)) &&
			(mousePos.y > targPos.y) &&
			(mousePos.y < (targPos.y + targHeight))){
				document.images[dragTargets[i]].src = document.images["dragObject"].src;
				
				
		}
	}

	shouldDrag = false
	document.images["dragObject"].style.visibility="hidden";
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);

	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}


function mouseMove(ev){
	ev           = ev || window.event
	var mousePos = mouseCoords(ev);

	if(shouldDrag){
		document.images["dragObject"].style.top      = mousePos.y - mouseOffset.y;
		document.images["dragObject"].style.left     = mousePos.x - mouseOffset.x;
		return false;
	}

}	

function dropDownListChange() {
	var list  = document.getElementById("styleList");
	var index = list.selectedIndex;
	
	// 0 = Forged Series
	// 1 = Gothic Series
	// 2 = Hammered Series
	// 3 = Twist Series
	// 4 = Scroll Series
	
	//Display the pictures
	var style = balusterStyle[index];
	var i = 0;
	for( ; i < style.length; i++) {
		styleTargets[i].src = style[i];
		styleTargets[i].style.visibility="visible";
	}
	for( ; i < 6; i++){
		styleTargets[i].style.visibility="hidden";;
	}
	
	//Display the big image
	document.images["bigBaluster"].src = bigBaluster[index];
	  
	return true;
}