// copyright 2009 Laura Shaffer Mills

var gSquareSize = 100;				// size of color square
var gColorSample = ["images/sample0.jpg", "images/sample1.jpg", "images/sample2.jpg"];

// set up "onload" to initialize
window.onload = function()
{
	if ( (document.images) && (document.getElementById) ) {
		var images = document.getElementById("colors").getElementsByTagName("img");
		var image0 = new Image();
		var image1 = new Image();
		var image2 = new Image();

		// preload sample images
		image0.src = "images/sample0.jpg";
		image1.src = "images/sample1.jpg";
		image2.src = "images/sample2.jpg";

		// set up functions on all color squares (for dragging and front/back)
		for (var i = 0; i < images.length; i++) {
			// since the whole point of the page is to drag, always keep mouse handlers active
			images[i].onmousedown = dragToFrontStart;
			images[i].onmousemove = dragTracking;
			images[i].onmouseup = dragEnd;
			images[i].ondblclick = moveImageToBack;
		}

		// set up menus
		document.getElementById("inBackgroundColor").onchange = getBackground;
		document.getElementById("inSquareSize").onchange = getSquareSize;

		// draw color squares
		drawSquares();
	}
}			// window.onload


// reset my menus when unload (fix for "refresh" button)
window.onbeforeunload = function()
{
	var myElement;

	if (document.getElementById) {
		// some browsers will keep the form data on a refresh, leaving the
		//	background color choice inconsistent with the actual color
		myElement = document.getElementById("inBackgroundColor");
		for (var i = 0; i < myElement.length; i++)
			myElement.options[i].selected = false;		// set all to "unselected"
		myElement.options[0].selected = true;		// select the default option
	
		// fix the "square size" menu too
		myElement = document.getElementById("inSquareSize");
		for (var i = 0; i < myElement.length; i++)
			myElement.options[i].selected = false;		// set all to "unselected"
		myElement.options[0].selected = true;		// select the default option
	}
}			// window.onbeforeunload()


// place the squares
function drawSquares() {
	if ( (document.images) && (document.getElementById) ) {
		var kSpacer = 10;	// pixels between color squares
		var locX;
		var locY;
		var kPerRow = 6;		// no more than this!
		var numRows;
		var images = document.getElementById("colors").getElementsByTagName("img");
		var dragArea = document.getElementById("colors");	// div

		numItems = Math.floor( (dragArea.offsetWidth - 20 - kSpacer) / (gSquareSize + kSpacer) );
		if ( (numItems > 0) && (numItems < kPerRow) )		// no more than 6
			kPerRow = numItems;

		numRows = Math.ceil(images.length/kPerRow);

		dragArea.style.height = ( kSpacer + (numRows+1) * (gSquareSize + kSpacer) ) + "px";

		locX = kSpacer;				// to set locations for color squares
		locY = kSpacer - (gSquareSize + kSpacer);
		for (var i = 0; i < images.length; i++) {
			// set size
			images[i].style.width = gSquareSize + "px";
			images[i].style.height = gSquareSize + "px";
	
			// set square locations, next row
			if (i % kPerRow == 0) {			// put six (or calculated value) across
				locX = kSpacer;			// back to left side
				locY += (gSquareSize + kSpacer);		// move down to next row
			}
			// set pixel location
			images[i].style.left = locX + "px";
			images[i].style.top = locY + "px";
			// move right for next square
			locX += (gSquareSize + kSpacer);
			images[i].style.zIndex = i + 1;		// set front/back location (higher in front)
		}
	}
}			// drawSquares()


// change the background color for page, and sample image to match
// the HTML must have the color code as the option value
function getBackground() {
	if (document.getElementById) {
		var colorChoice = this.options[this.selectedIndex].value;
		document.getElementById("bodystyle").className = colorChoice + "glass";
	
		// change the sample image to match background
		switch (colorChoice) {
			case "white":
				document.getElementById("colorsample").src=gColorSample[0];
				break;
			case "black":
				document.getElementById("colorsample").src=gColorSample[1];
				break;
			case "gray":
				document.getElementById("colorsample").src=gColorSample[2];
				break;
			default:
				document.getElementById("colorsample").src=gColorSample[0];
				break;
		}
	}
}			// getBackground()


// change the square size for images
// the HTML must have the pixel count as the option value
function getSquareSize() {
	var sqSize = parseInt( this.options[this.selectedIndex].value, 10 );

	if (sqSize >= 100)
		gSquareSize = sqSize;		// change size
	drawSquares();
}			// getSquareSize()


function moveImageToBack() {
	imageToBack(this);
}			// moveImageToBack()