// copyright 2009 Laura Shaffer Mills

var gImageToDrag = null;		// image for dragging
var gX, gY;						// mouse location


// stop the dragging (onmouseup)
function dragEnd() {
	gImageToDrag = null;
}			// dragEnd()


// find which bar to move; start dragging (onmousedown)
function dragStart(evt) {
	gImageToDrag = this;		// get the image

	evt = (evt) ? evt : window.event;	// some browsers won't pass event

	// ### if page scrolls while dragging, may have to adjust these numbers

	// get the mouse location for the starting point
	if ( evt.pageX == null && evt.clientX != null ) {
		gX = evt.clientX;
		gY = evt.clientY;
	}
	else {
		gX = evt.pageX;
		gY = evt.pageY;
	}

	return(false);		// tells browser I'm handling it -- not dragging to desktop
}			// dragStart()


// find which color square to move; start dragging (onmousedown) and move to front
function dragToFrontStart(evt) {
	gImageToDrag = this;		// get the image

	evt = (evt) ? evt : window.event;	// some browsers won't pass event

	// ### if page scrolls while dragging, may have to adjust these numbers

	// get the mouse location for the starting point
	if ( evt.pageX == null && evt.clientX != null ) {
		gX = evt.clientX;
		gY = evt.clientY;
	}
	else {
		gX = evt.pageX;
		gY = evt.pageY;
	}

	// always move drag image to front
	imageToFront(gImageToDrag);

	return(false);		// tells browser I'm handling it -- not dragging to desktop
}			// dragToFrontStart()


// show dragging -- browser won't handle (onmousemove)
function dragTracking(evt) {
	if (gImageToDrag != null) {		// currently moving an image
		var oldX, oldY;				// previous position of graphic
		var newX, newY;				// previous position of graphic
		var diffX, diffY;			// change in mouse position

		evt = (evt) ? evt : window.event;	// some browsers won't pass event

		// get current mouse location
		if ( evt.pageX == null && evt.clientX != null ) {
			newX = evt.clientX;
			newY = evt.clientY;
		}
		else {
			newX = evt.pageX;
			newY = evt.pageY;
		}

		// find out how far mouse moved
		diffX = newX - gX;
		diffY = newY - gY;

		// start from old position
		oldX = parseInt(gImageToDrag.style.left,10);	// remove "px" from string
		oldY = parseInt(gImageToDrag.style.top,10);

		// set new position
		gImageToDrag.style.left = oldX + diffX + "px";
		gImageToDrag.style.top = oldY + diffY + "px";

		// set the mouse location for the next starting point
		gX = newX;
		gY = newY;
	}					// have image to drag
	return(false);		// tells browser I'm handling it
}			// dragTracking()


// find the div that contains this element
function getContainingDiv(currElem) {
	var divID = null;

	if ( (document.images) && (document.getElementById) ) {
		// find containing div
		var nextElem = currElem;			// start at current element
		while (nextElem = nextElem.parentNode) {		// set to parent node; NOT "=="
			if (nextElem.nodeName.toUpperCase() == "DIV") {
				divID = nextElem.getAttribute("id");
				break;
			}				// while going through parents
		}			// searching through parents for "div"
	}				// if document.images
	return(divID);
}			// getContainingDiv()


// move the selected image to the back (within div)
function imageToBack(moveImage) {
	if ( (document.images) && (document.getElementById) ) {
		divID = getContainingDiv(moveImage);

		if (divID) {		// found containing div
			var currZIndex = parseInt(moveImage.style.zIndex,10);
			var images = document.getElementById(divID).getElementsByTagName("img");

			for (var i = 0; i < images.length; i++) {			// check all images
				if (images[i].style.zIndex < currZIndex) {	// if behind this one, move forward
					images[i].style.zIndex = +images[i].style.zIndex + 1;
				}
			}
			moveImage.style.zIndex = 1;		// move this element to back
		}
	}				// if document.images
}			// imageToBack()


// move the selected image to the front (within div)
function imageToFront(moveImage) {
	var divID = null;

	if ( (document.images) && (document.getElementById) ) {
		divID = getContainingDiv(moveImage);

		if (divID) {		// found containing div
			var currZIndex = parseInt(moveImage.style.zIndex,10);
			var images = document.getElementById(divID).getElementsByTagName("img");

			for (var i = 0; i < images.length; i++) {			// check all images
				if (images[i].style.zIndex > currZIndex) {	// if in front of this one, move back
					images[i].style.zIndex = +images[i].style.zIndex - 1;
				}
			}				// found containing div
			moveImage.style.zIndex = images.length;		// move this element to front
		}
	}				// if document.images
}			// imageToFront()


// assign zIndex values to all images in div -- then can change ordering later
function setImageOrder(divID) {
	if ( (document.images) && (document.getElementById) ) {
		var images = document.getElementById(divID).getElementsByTagName("img");
	
		for (var i = 0; i < images.length; i++) {
			images[i].style.zIndex = i + 1;		// set front/back location (higher # in front)
		}
	}
}			// setImageOrder()