// copyright 2009 Laura Shaffer Mills

var gkRampHeight = 100;			// size of ramp bars
var gkRampLength = 750;			// length of color bars
var gChessboard = new Object;
var gCube = new Object;


// set up "onload" to initialize
window.onload = function()
{
	var images;

	if ( (document.images) && (document.getElementById) ) {
		// set up squares
		images = document.getElementById("squares").getElementsByTagName("img");
		// set up functions on all squares (for dragging) -- don't change 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 = dragStart;		// drag; do NOT bring to front
			images[i].onmousemove = dragTracking;
			images[i].onmouseup = dragEnd;
		}
		// set up reset button
		document.getElementById("squaresButton").onclick = drawSquares;
		drawSquares();		// draw bars

		// set up illusionbars div with blue bars
		images = document.getElementById("illusionbars").getElementsByTagName("img");
		// set up functions on all color bars (for dragging) -- don't change 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 = dragStart;
			images[i].onmousemove = dragTracking;
			images[i].onmouseup = dragEnd;
		}
		// set up reset button
		document.getElementById("illusionBarsButton").onclick = drawBarsBlue;
		drawBarsBlue();		// draw bars

		// set up next illusionbars2 div with red bars
		images = document.getElementById("illusionbars2").getElementsByTagName("img");
		// set up functions on all color bars (for dragging) -- don't change 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 = dragStart;
			images[i].onmousemove = dragTracking;
			images[i].onmouseup = dragEnd;
		}
		// set up reset button
		document.getElementById("illusionBarsButton2").onclick = drawBarsRed;
		drawBarsRed();		// draw bars

		// set up next div with color ramps
		images = document.getElementById("ramps").getElementsByTagName("img");
		// set up functions on all bars (for dragging) -- don't change 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 = dragStart;
			images[i].onmousemove = dragTracking;
			images[i].onmouseup = dragEnd;
		}
		// set up reset button
		document.getElementById("rampButton").onclick = drawBarsRamp;
		drawBarsRamp();		// draw bars

		// set up next div with rings
		images = document.getElementById("ring").getElementsByTagName("img");
		// set up functions on all bars (for dragging) -- don't change 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 = dragStart;
			images[i].onmousemove = dragTracking;
			images[i].onmouseup = dragEnd;
		}
		// set up reset button
		document.getElementById("ringButton").onclick = drawRings;
		drawRings();		// draw bars

		// set up next div with chessboard
		images = document.getElementById("chessboard").getElementsByTagName("img");
		// set up functions on all squares/cylinder (for dragging) -- don't change 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;	// drag AND bring to front
			images[i].onmousemove = dragTracking;
			images[i].onmouseup = dragEnd;
		}
		// set up image ordering (required if dragging brings current image to front)
		setImageOrder("chessboard");
		// set up reset button
		document.getElementById("chessButton").onclick = drawChessboard;
		// set up locations
		setupChessboard();
		drawChessboard();		// draw squares/cylinder

		// set up next div with cube
		images = document.getElementById("cube").getElementsByTagName("img");
		// set up functions on all squares (for dragging) -- don't change front/back
		for (var i = 0; i < images.length; i++) {
			images[i].onmousedown = dragStart;
			images[i].onmousemove = dragTracking;
			images[i].onmouseup = dragEnd;
		}
		// set up reset button
		document.getElementById("cubeButton").onclick = drawCube;
		// set up locations
		setupCube();
		drawCube();
	}
}			// window.onload


// place the bars
function drawBars(here) {
	var kSolidBarSize = 50;		// size of solid color bars

	if ( (document.images) && (document.getElementById) ) {
		var kSplits = 5;		// no more then this!
		var kSpacer = 25;		// pixels between edges
		var locX;
		var locY;
		var pixSpots;
		var images = document.getElementById(here).getElementsByTagName("img");

// hold down Shift to only slide horizontally? ###

		// I know all the dark bars (4) are listed first, then the light bars (6)
		// so can place by image index

		pixSpots = gkRampLength / kSplits;	// or could calculate to fit current window width
		// place dark bars
		for (var i = 0; i < 4; i++) {
			if (i < images.length) {
				locX = kSpacer;
				locY = kSpacer + (2 * i * kSolidBarSize);
				// set pixel location
				images[i].style.left = locX + "px";
				images[i].style.top = locY + "px";
			}
		}
		// place first set of light bars (3)
		for (var i = 4; i < 7; i++) {
			if (i < images.length) {
				locX = kSpacer + pixSpots;
				locY = kSpacer + kSolidBarSize + ( 2 * kSolidBarSize * (i-4) );
				// set pixel location
				images[i].style.left = locX + "px";
				images[i].style.top = locY + "px";
			}
		}
		// place second set of light bars (3)
		for (var i = 7; i < 10; i++) {
			if (i < images.length) {
				locX = kSpacer + 3*pixSpots;
				locY = kSpacer + ( 2 * kSolidBarSize * (i-6) );
				// set pixel location
				images[i].style.left = locX + "px";
				images[i].style.top = locY + "px";
			}
		}
	}
}			// drawBars()


// illusionbars 1; blue
function drawBarsBlue() {
	drawBars("illusionbars");
}			// drawBarsBlue()


// place the bars
function drawBarsRamp() {
	var kBarSmall = 25;
	var kBarMedium = 125;
	var kBarLarge = 650;
	var kBarHeight = 25;
	var solidBar, colorRampBar;
	var locX;
	var locY;
	var kSpacer = 25;		// pixels between edges

	if ( (document.images) && (document.getElementById) ) {
		var images = document.getElementById("ramps").getElementsByTagName("img");

		// place ramp bars
		for (var i = 0; i < 6; i++) {
			if (i < images.length) {
				locX = kSpacer;
				locY = (i * gkRampHeight) + ( (i + 1) * kSpacer );
				// set pixel location
				images[i].style.left = locX + "px";
				images[i].style.top = locY + "px";
			}
		}

		// place solid bar -- red ramp
		colorRampBar = document.getElementById("oneRamp");
		solidBar = document.getElementById("oneSolidLong1");
		// calculate spot
		locX = parseInt(colorRampBar.style.left) + (gkRampLength - kBarLarge)/2;
		locY = parseInt(colorRampBar.style.top) + 35;
		solidBar.style.left = locX + "px";		// set pixel location
		solidBar.style.top = locY + "px";

		// place solid bars -- green ramp
		colorRampBar = document.getElementById("twoRamp");
		solidBar = document.getElementById("twoSolidShort1");
		locX = parseInt(colorRampBar.style.left) + 50;		// calculate spot
		locY = parseInt(colorRampBar.style.top) + 35;
		solidBar.style.left = locX + "px";		// set pixel location
		solidBar.style.top = locY + "px";
		solidBar = document.getElementById("twoSolidShort2");
		// calculate spot
		locX = parseInt(colorRampBar.style.left) + gkRampLength - 50 - kBarSmall;
		locY = parseInt(colorRampBar.style.top) + 35;
		solidBar.style.left = locX + "px";		// set pixel location
		solidBar.style.top = locY + "px";

		// place solid bars -- blue ramp
		colorRampBar = document.getElementById("threeRamp");
		solidBar = document.getElementById("threeSolidMedium1");
		// calculate spot
		locX = parseInt(colorRampBar.style.left) + 50;		// calculate spot
		locY = parseInt(colorRampBar.style.top) + 35;
		solidBar.style.left = locX + "px";		// set pixel location
		solidBar.style.top = locY + "px";
		solidBar = document.getElementById("threeSolidMedium2");
		// calculate spot
		locX = parseInt(colorRampBar.style.left) + gkRampLength - 50 - kBarMedium;
		locY = parseInt(colorRampBar.style.top) + 35;
		solidBar.style.left = locX + "px";		// set pixel location
		solidBar.style.top = locY + "px";

		// place solid bars -- yellow ramp
		colorRampBar = document.getElementById("fourRamp");
		solidBar = document.getElementById("fourSolidShort1");
		// calculate spot
		locX = parseInt(colorRampBar.style.left) + 50;		// calculate spot
		locY = parseInt(colorRampBar.style.top) + 35;
		solidBar.style.left = locX + "px";		// set pixel location
		solidBar.style.top = locY + "px";
		solidBar = document.getElementById("fourSolidShort2");
		// calculate spot
		locX = parseInt(colorRampBar.style.left) + (gkRampLength/2) - (kBarSmall/2);
		locY = parseInt(colorRampBar.style.top) + 35;
		solidBar.style.left = locX + "px";		// set pixel location
		solidBar.style.top = locY + "px";
		solidBar = document.getElementById("fourSolidShort3");
		// calculate spot
		locX = parseInt(colorRampBar.style.left) + gkRampLength - 50 - kBarSmall;
		locY = parseInt(colorRampBar.style.top) + 35;
		solidBar.style.left = locX + "px";		// set pixel location
		solidBar.style.top = locY + "px";

		// place solid bars -- orange ramp
		colorRampBar = document.getElementById("fiveRamp");
		locY = parseInt(colorRampBar.style.top) + 35;
		locX = parseInt(colorRampBar.style.left) - 1.5 * kBarMedium;
		for (var i = 0; i < 3; i++) {
			solidBar = document.getElementById( "fiveSolidMedium" + (i+1) );
			if (solidBar) {
				// calculate spot
				locX += 2 * kBarMedium;		// calculate spot
				solidBar.style.left = locX + "px";		// set pixel location
				solidBar.style.top = locY + "px";
			}
		}

		// place solid bars -- purple ramp
		colorRampBar = document.getElementById("sixRamp");
		locY = parseInt(colorRampBar.style.top) + 35;
		locX = parseInt(colorRampBar.style.left) - 2 * kBarSmall;
		for (var i = 0; i < 10; i++) {
			solidBar = document.getElementById( "sixSolidShort" + (i+1) );
			if (solidBar) {
				// calculate spot
				locX += 50 + kBarSmall;		// calculate spot
				solidBar.style.left = locX + "px";		// set pixel location
				solidBar.style.top = locY + "px";
			}
		}

		// place solid bars -- extra gray
		colorRampBar = document.getElementById("sixRamp");
		locY = parseInt(colorRampBar.style.top) + gkRampHeight;
		locX = parseInt(colorRampBar.style.left);
		for (var i = 0; i < 10; i++) {
			solidBar = document.getElementById( "zeroSolid" + (i+1) );
			if (solidBar) {
				// calculate spot
				locY += kBarHeight;		// calculate spot
				solidBar.style.left = locX + "px";		// set pixel location
				solidBar.style.top = locY + "px";
			}
		}
	}
}			// drawBarsRamp()


// illusionbars 2; red
function drawBarsRed() {
	drawBars("illusionbars2");
}			// drawBarsRed()


// place the chessboard squares
// have array of sizes and locations
function drawChessboard() {
	var locX, locY;
	var kSpacer = 25;		// pixels between edges
	var square;

	if ( (document.images) && (document.getElementById) ) {
		for (var i = 1; i <= 5; i++) {				// 5 x 5 matrix
			for (var j = 1; j <= 5; j++) {		// image IDs are sqr11 to sqr55
				square = document.getElementById( ("sqr" + j) + i );	// down then across
				if (square) {
					locX = kSpacer + gChessboard.X[j-1][i-1];
					locY = kSpacer + gChessboard.Y[j-1][i-1];
					square.style.left = locX + "px";		// set pixel location
					square.style.top = locY + "px";
				}
			}
		}
	}
}			// drawChessboard()


// place the cube squares
// have array of sizes and locations
function drawCube() {
	var locX, locY;
	var kSpacer = 25;		// pixels between edges
	var kSize = 335;
	var square;
	var startX, startY;

	if ( (document.images) && (document.getElementById) ) {
		// place yellow background color and square base
		startX = kSpacer;
		startY = kSpacer;
		square = document.getElementById("yellow");
		square.style.left = startX + "px";		// set pixel location
		square.style.top = startY + "px";
		square = document.getElementById("yellowcube");
		square.style.left = startX + kSpacer + "px";		// set pixel location
		square.style.top = startY + kSpacer + "px";

		// place blue background color and square base
		square = document.getElementById("blue");
		square.style.left = startX + kSpacer + kSize + "px";		// set pixel location
		square.style.top = startY + "px";
		square = document.getElementById("bluecube");
		square.style.left = startX + kSpacer + kSize + kSpacer + "px";		// set pixel location
		square.style.top = startY + kSpacer + "px";

		// yellow
		startX += kSpacer;
		startY += kSpacer;
		for (var i = 0; i < 3; i++) {				// 3 x 9 matrix
			for (var j = 0; j < 9; j++) {
				square = document.getElementById( "y" + (i+1) + (j+1) );
				if (square) {
					locX = startX + gCube.X[i][j];
					locY = startY + gCube.Y[i][j];
					square.style.left = locX + "px";		// set pixel location
					square.style.top = locY + "px";
				}
			}
		}

		// blue
		startX += kSize + kSpacer;
		for (var i = 0; i < 3; i++) {				// 3 x 9 matrix
			for (var j = 0; j < 9; j++) {
				square = document.getElementById( "b" + (i+1) + (j+1) );
				if (square) {
					locX = startX + gCube.X[i][j];
					locY = startY + gCube.Y[i][j];
					square.style.left = locX + "px";		// set pixel location
					square.style.top = locY + "px";
				}
			}
		}
	}
}			// drawCube()


// place the two ring rectangles
function drawRings() {
	var leftLoop, rightLoop;
	var kSpacer = 25;		// pixels between edges
	var kSize = 300;		// size of complete ring square

	if ( (document.images) && (document.getElementById) ) {
		leftLoop = document.getElementById("loopleft");
		rightLoop = document.getElementById("loopright");
		if (leftLoop) {
			leftLoop.style.left = kSpacer + "px";		// set pixel location
			leftLoop.style.top = kSpacer + "px";
		}
		if (rightLoop) {
			rightLoop.style.left = kSpacer + (kSize/2) + "px";		// set pixel location
			rightLoop.style.top = kSpacer + (kSize/4) + "px";
		}
	}
}			// drawRings()


// place the squares
function drawSquares() {
	var locX, locY;
	var kSpacer = 25;		// pixels between edges

	if ( (document.images) && (document.getElementById) ) {
		var images = document.getElementById("squares").getElementsByTagName("img");
		locY = kSpacer;
		locX = kSpacer;
		for (var i = 0; i < images.length; i++) {
			images[i].style.left = locX + "px";		// set pixel location
			images[i].style.top = locY + "px";
			// calculate next spot
			locX += 5;		// calculate spot
			locY += 5;		// calculate spot
		}
	}
}			// drawSquares()


// sets up locations for chessboard pieces
function setupChessboard() {
	// medium graphic
	gChessboard.X = new Array(
		[244, 184, 124, 62, 0],		// column 1
		[345, 287, 228, 167, 105],	// column 2
		[449, 392, 333, 273, 212],	// column 3
		[523, 497, 438, 381, 320],	// column 4
		[739, 603, 547, 489, 430]);	// column 5
	gChessboard.Y = new Array(
		[148, 205, 266, 327, 391],
		[169, 227, 288, 350, 414],
		[191, 250, 311, 374, 438],
		[0, 306, 334, 399, 462],
		[242, 315, 358, 422, 487]);
/*
	// larger graphic
	gChessboard.X = new Array(
		[300, 227, 152, 77, 0],
		[428, 355, 282, 207, 131],
		[555, 485, 413, 339, 263],
		[647, 615, 542, 471, 397],
		[912, 746, 677, 605, 531]);
	gChessboard.Y = new Array(
		[180, 252, 327, 403, 481],
		[206, 279, 356, 431, 510],
		[234, 308, 383, 461, 540],
		[0, 378, 413, 492, 570],
		[296, 387, 442, 521, 600]);
*/
}			// setupChessboard()


// sets up locations for cube pieces
function setupCube() {
	gCube.X = new Array(
		[108, 60, 149, 6, 99, 195, 46, 143, 89],			// top
		[3, 42, 87, 5, 43, 87, 7, 44, 86],					// left
		[133, 186, 238, 133, 186, 237, 133, 185, 236]);		// right
	gCube.Y = new Array(
		[3, 17, 19, 32, 34, 37, 51, 53, 71],
		[50, 69, 91, 113, 132, 153, 173, 193, 217],
		[93, 75, 58, 157, 137, 120, 220, 199, 181]);
}			// setupCube()