//array to hold info on all rectangles for writing the code (multi dimensional with top, left, width, height)
	var dataArr = new Array();

	//array to hold coords of current rectangle (topleft x, topleft y, botright x, botright y)
	var thisRectArr = new Array();


	/*********************************************************
	doStuffWithInnerDivs function:
	Outer function to handle everything that happens when 
	the outer div is clicked.
	**********************************************************/
	function doStuffWithInnerDivs(e) {
		
		//fetch the coords of the click:
		var coords = getMouseCoordsWithinEventTarget(e);
				
		//if there are less than 2 points already defined (0 or 2 coords)... 
		if (thisRectArr.length < 3) {
	
			//define pointID depending whether it's the first or second point for this rectangle:
			if (thisRectArr.length == 0) { var pointID = "topleft"; }
			else { var pointID = "botright"; }
		
			//add a new point at click pos:
			overlay.innerHTML += '<div class="blob" id="' + pointID + '" style="top: ' + coords.y + 'px; left: ' + coords.x + 'px;"></div>';
			//record the coords of new point:
			thisRectArr.push(coords.x, coords.y);
	
		}
			
		//change instructions as appropriate:
		if (thisRectArr.length == 2 && dataArr.length < 1) { updateInstructions(2); }
		else if (thisRectArr.length == 2) { updateInstructions(5); }
		else if (thisRectArr.length > 2) { updateInstructions(3); }
							
	}
	
		
	/*********************************************************
	drawBox function
	Draw an inner retrangle.
	Erases its points from the page and thisRectArr.
	Place top / left / width / height vals in dataArr.
	**********************************************************/
	function drawBox() {	
		
		//create the div box:
		var topVal = thisRectArr[1];
		var leftVal = thisRectArr[0];
		var widthVal = thisRectArr[2] - thisRectArr[0];
		var heightVal = thisRectArr[3] - thisRectArr[1];
		
		overlay.innerHTML += '<div class="rectangle" style="top: ' + topVal + 'px; left: ' + leftVal + 'px; ' +
								'width: ' + widthVal + 'px; height: ' + heightVal + 'px;"></div>';
	
		//add top left width and height vals to dataArr:
		dataArr.push(new Array(topVal, leftVal, widthVal, heightVal));	
	
		//call clearPoints to delete the 2 point divs and update the instructions:
		clearPoints();
	
	}
		
			
	/*********************************************************
	clearPoints function
	Erases the contents of thisRectArr.
	Erases any points from the page.
	Updates instructions.
	**********************************************************/
	function clearPoints() {	
		
		//clear thisRectArr:
		thisRectArr.length = 0;
		
		//erase the points from the page:
		var topLeft = document.getElementById('topleft');	
		var botRight = document.getElementById('botright');
		if (topLeft) { overlay.removeChild(topLeft); }
		if (botRight) { overlay.removeChild(botRight); }
	
		//update instructions:
		if (dataArr.length < 1) { updateInstructions(1); }
		else { updateInstructions(4); }
		
	}	
		
		
	/*********************************************************
	clearAll function
	Erases the contents of dataArr AND thisRectArr.
	Erases all points AND rectangles from the page.
	Updates Instructions.
	**********************************************************/
	function clearAll() {	
		
		//clear dataArr:
		dataArr.length = 0;
		
		//clear any points from thisRectArr (also updates instructions):
		clearPoints();
	
		//clear any rectangles from the page: 
		var allDivs = overlay.getElementsByTagName('DIV');
		for (var i = allDivs.length; i > 0; i--) {
			var j = i - 1;
			if (allDivs[j].className == 'rectangle') { overlay.removeChild(allDivs[j]); }
		}
	
	}	
	
	
	/*********************************************************
	getCode function
	Generates code from the contents of dataArr.
	**********************************************************/	
	function getCode() {
	
		//get php generated styles:
		var phpStyleBox = document.getElementById('phpstyles');
		var overlayWidth = phpStyleBox.childNodes.item(0).innerHTML;
		var overlayHeight = phpStyleBox.childNodes.item(1).innerHTML;
		var overlayBg = phpStyleBox.childNodes.item(2).innerHTML;
		
		//generate the code!
		var newCode = '<style type="text/css">\n' +
						'.overlay {\n' + 
						'width: ' + overlayWidth + 'px;\n' +
						'height: ' + overlayHeight + 'px;\n' +
						'background: url(\'' + overlayBg + '\') 0px 0px no-repeat;\n' +
						'position: relative;\n' +
						'}\n\n' +
						'.innerbox {\n' +
						'overflow: auto;\n' +
						'border: 1px solid #333;\n' +
						'position: absolute;\n' +
						'}\n';
	
		for (var i = 0; i < dataArr.length; i++) {
			var j = i + 1;
			newCode += '#innerbox' + j + ' {\n' +
							'top: ' + dataArr[i][0] + 'px;\n' + 
							'left: ' + dataArr[i][1] + 'px;\n' + 
							'width: ' + dataArr[i][2] + 'px;\n' + 
							'height: ' + dataArr[i][3] + 'px;\n' +
							'}\n'; 
		}
		
		newCode	+= '</style>\n\n' +
					'<div class="overlay">\n';
		
		for (var i = 0; i < dataArr.length; i++) {
			var j = i + 1;
			newCode += '<div class="innerbox" id="innerbox' + j + '">Box ' + j + '</div>\n';
		}
		
		newCode += '</div>';
		
		//fetch the instructions p (will be changing the contents):
		var instructions = document.getElementById('instructions');
		
		//write in the form with the generated code in the textarea:
		instructions.innerHTML = 'Your code is below: <br /><br />\n' +
									'<form action="" method="">\n' +
									'<textarea name="code" rows="10" cols="80">' + newCode + '</textarea>\n' +
									'<br /><input type="button" value="Select All" onClick="this.form.code.focus(); this.form.code.select();" style="margin: 5px;" />\n' +
									'</form><br />\n\n' +
									'<a href="divoverlaygenerator.php" title="start another div overlay">[ Start Another Image? ]</a><br /><br />\n';
	
	}
		
				
	/*********************************************************
	updateInstructions function
	Updates instructions for the user.
	**********************************************************/
	function updateInstructions(msgNo) {
	
		//fetch the instructions p (will be changing the contents):
		var instructions = document.getElementById('instructions');
	
		//define the possible messages:
		var msgs = new Array();
		msgs[1] = 'Click on the image where you\'d like the TOP LEFT CORNER of your first box.<br /><br />';
		msgs[2] = 'Cool beans. Now Click on the image where you\'d like the BOTTOM RIGHT CORNER of your first box.<br /><br />';
		msgs[3] = 'Are you happy with these 2 points? &nbsp;' +
					'<a href="#" title="click here to draw a box using these 2 points" onClick="drawBox(); return false;">[ Yes, Draw Box ]</a> &nbsp;' +
					'<a href="#" title="click here to delete these 2 points" onClick="clearPoints(); return false;">[ No, Delete Them ]</a>.<br /><br />';
		msgs[4] = 'Click on the image where you\'d like the TOP LEFT CORNER of your next box.<br />' +
					'Or, if you\'re finished <a href="#" title="click here to get your code" onClick="getCode(); return false;">[ Click Here To Get Your Code ]</a>.<br />' +
					'Or, if you\'ve messed up irreparably <a href="#" title="click here to start over" onClick="clearAll(); return false;">[ Click Here To Start Over ]</a>.' +
					'<br /><br />';
		msgs[5] = 'Cool beans. Now Click on the image where you\'d like the BOTTOM RIGHT CORNER of your next box.<br /><br />';
		
		//write in the appropriate message:
		instructions.innerHTML = msgs[msgNo];
	
	}
	
	
	/*********************************************************
	getMouseCoordsWithinEventTarget function (author unknown)
	Passes back the mouse position (coords). Used onclick.
	**********************************************************/
	function getMouseCoordsWithinEventTarget(event) {
		var coords = { x: 0, y: 0};
	
		if(!event) { //then we have a non-DOM (probably IE) browser
			event = window.event;
			coords.x = event.offsetX;
			coords.y = event.offsetY;
		}
		else { //we assume DOM modeled JavaScript
			var Element = event.target;
			var CalculatedTotalOffsetLeft = 0;
			var CalculatedTotalOffsetTop = 0;
	
			while (Element.offsetParent) {
				CalculatedTotalOffsetLeft += Element.offsetLeft;     
				CalculatedTotalOffsetTop += Element.offsetTop;
				Element = Element.offsetParent;
			}
	
			coords.x = event.pageX - CalculatedTotalOffsetLeft;
			coords.y = event.pageY - CalculatedTotalOffsetTop;
		}
	
		return coords;
	}