// copyright 2009 Laura Shaffer Mills

var gColorSources = new Object;


// initialize variables for colors
function initialize() {
	// set up "color source" object (spotlight or paint can)
	gColorSources.imageList = new Array(12);	// color source graphics
	gColorSources.isOn = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];	// on/off for each light
	// colors from one o'clock to twelve o'clock
	gColorSources.colors = [0xff0080, 0xff00ff, 0x8000ff, 0x0000ff, 0x0080ff, 0x00ffff, 
		0x00ff80, 0x00ff00, 0x80ff00, 0xffff00, 0xff8000, 0xff0000];
}			// initialize()


// initialize images
function initializeImages(imageDiv, postfix) {
	if (document.images) {
		var images = document.getElementById(imageDiv).getElementsByTagName("img");

		if (postfix == null)
			postfix = ".gif";

		// handle images; last image is center color
		for (var i = 0; i < images.length-1; i++) {		// skip last image (is center color)
			// preload images
			gColorSources.imageList[i] = new Array(2);
			gColorSources.imageList[i][0] = new Image();
			gColorSources.imageList[i][0].src = "images/d" + (i+1) + postfix;
			gColorSources.imageList[i][1] = new Image();
			gColorSources.imageList[i][1].src = "images/" + (i+1) + postfix;

			// want color sources in front and center color in back
			images[i].style.zIndex = i+1;

			// set up functions on color source images
			images[i].onmousedown = toggleOnOff;
//			images[i].onmousedown = function(evt) {myCall(param1,evt);};
		}		// loop through images

		// last image is center color; move to back
		images[images.length-1].style.zIndex = 0;
	}
}			// initializeImages()


// change the graphic for on/off
function toggleOnOff() {
	var item;		// array index for light or paint can

	item = parseInt(this.id.substr(2)) - 1;		// which item is this (by clock location); id is "lt" + number
	if (gColorSources.isOn[item] > 0) {		// is it currently on or off?
		this.src = gColorSources.imageList[item][0].src;	// change graphic to "off"
		gColorSources.isOn[item] = 0;
	}
	else {
		this.src = gColorSources.imageList[item][1].src;	// change graphic to "on"
		gColorSources.isOn[item] = 1;
	}
	paintColor();		// change the color; added or subtracted one source
}			// toggleOnOff()


// place the color sources in a circle
function drawClock(imageDiv) {
	var kLightSize = 100;			// size of color sources graphic
	var kMargin = 10;				// top/left blank margin
	var kBorders = 8;				// pixels for div borders
	var centerSize = 0;				// size of light in middle
	var radius;						// size of circle of color sources
	var centerX = 0, centerY = 0;	// location of center of color sources
	var centerSpot;					// index of center color
	var divWidth;					// width of container div
	var clockArea = document.getElementById(imageDiv);	// container div

	// find smallest dimension of div
	divWidth = Math.min(clockArea.offsetHeight,clockArea.offsetWidth);

	// calculate circle radius (width - imageSize - margins - divBorders)
	radius = Math.floor( (divWidth - kLightSize - 2*kMargin - kBorders) / 2 );
	// calculate center of circle for color sources
	centerX = Math.floor( (clockArea.offsetWidth - kLightSize - kBorders) / 2 );
	centerY = Math.floor( (clockArea.offsetHeight - kLightSize - kBorders) / 2 );

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

		// place color sources images on circle
		for (var i = 0; i < images.length-1; i++) {
			// set pixel locations, each at 30 degrees; start at one o'clock
			images[i].style.left = centerX - 
				radius * Math.sin( (-2*Math.PI*(i+1)*30) / 360 ) + "px";
			images[i].style.top = centerY - 
				radius * Math.cos( (-2*Math.PI*(i+1)*30) / 360 ) + "px";
		}

		// set up the center color spot at 80% size
		centerSize = Math.floor( .80 * (2 * radius - kLightSize) );
		if (centerSize < 1)
			centerSize = 1;
		centerSpot = images.length - 1;			// last image
		images[centerSpot].style.width = centerSize + "px";
		images[centerSpot].style.height = centerSize + "px";
		// center location is relative to top-left corners of all color source graphics
		images[centerSpot].style.left = centerX +
			Math.floor( (kLightSize - centerSize)/2 ) + "px";
		images[centerSpot].style.top = centerY +
			Math.floor( (kLightSize - centerSize)/2 ) + "px";
	}

	// now the color sources are in position, so show them
	clockArea.style.visibility = "visible";
}			// drawClock()


// resize the div if necessary
function sizeDiv(imageDiv) {
	// for images at 100 pixels and margins at 10 pixels --
	// 540 overlaps in white area only; 670 has no overlap; for transparency, no overlap at 430
	var minSize = 540;	// minimum size for div
	var clockArea = document.getElementById(imageDiv);	// container div

	if (clockArea.offsetHeight < minSize)		// minimum size
		clockArea.style.height = minSize + "px";
	if (clockArea.offsetWidth < minSize)		// minimum size
		clockArea.style.width = minSize + "px";
}			// sizeDiv()