// ADJUST THE FOLLOWING AS REQUIRED
var theDIVname = "header"; // name of the div to add the lines to
var theColour = "#009245"; // colour of lines - NOTE: Could make an array and alternate through them, or create a gradient between them
var theStrokeWidth = 1;
var startX = 0; // starting X position WITHIN THE DIV (0 is far left)
var startY = 0; // starting Y position WITHIN THE DIV (0 is top)
var numLines = 9; // not including the first vertical or last horizontal, ie. 8 (+2) = 10 in total

// Tracking - how do you want the start and end points to behave?
	// case 1: points are static at initial start/end point
	// case 2: points follow mouse dynamically
	// case 0 (default): points are static equally spread along width/height
var trackStartX = 1;
var trackStartY = 0;
var trackEndX = 2;
var trackEndY = 1;
///////////////////////////////////////////////////////////

//// DO NOT ADJUST ANYTHING BELOW THIS LINE /////////////////
var IE = document.all?true:false; // check for Internet Explorer...
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;

// create the drawing object
var jg = new jsGraphics(theDIVname);
jg.setColor(theColour);
jg.setStroke(theStrokeWidth); // NOTE: Need to SUBTRACT stroke width from numbers, else extends outside the div by the width in BOTH DIRECTIONS!

var mouseX = "initial";
var mousey = "initial";

function getMouseXY(e) {
	if (mouseX != "initial") {
		// grab the mouse x and y - note: don't really need to worry about y, IF we aren't manipulating it - faster if only doing x?
		if (IE) {
			mouseX = event.clientX + document.body.scrollLeft;
			mouseY = event.clientY + document.body.scrollTop;
		} else {
			mouseX = e.pageX;
			mouseY = e.pageY;
		}
	} else {
		mouseX = 100;
		mouseY = 100;
	}
	
	// NOTE!! I Don't want to reset these on every mouse move, so make it an object or whatever it takes that a windows resize cn reset the same variables this is using
	var theDIV = document.getElementsByTagName("div")[theDIVname];
	var divLeft = theDIV.offsetLeft;
	var divTop = theDIV.offsetTop;
	var divWidth = theDIV.offsetWidth - theStrokeWidth; // needs to be added to loop for resizing of window
	var divHeight = theDIV.offsetHeight - theStrokeWidth; // also could be resized?
	var divRight = divLeft + divWidth;
	var divBottom = divTop + divHeight;
	
	var endX = startX; // since first line is perfectly vertical
	var endY = divHeight;
	
	var staticSpacingX = divWidth/(numLines + 1);
	var staticSpacingY = divHeight/(numLines + 1);
	//////////// END of duplication
	
	divX = Math.min(Math.max(mouseX,divLeft),divRight) - divLeft; // divLeft offsets the right end by the left start of the div
	divY = Math.min(Math.max(mouseY,divTop),divBottom) - divTop; // divTop offsets the bottom end by the top start of the div
		
	var spacingX = Math.max(0,(divX - startX)/(numLines + 1));
	var spacingY = Math.max(0,(divY - startY)/(numLines + 1));
	
	jg.clear();
	var startPointsX =""; // for display only
	var startPointsY = "";
	var endPointsX = "";
	var endPointsY = "";

	for (i=0;i<=numLines+1;i++) {
//		if(i%2) { // is odd
//			jg.setColor("#FF0000");
//		} else {
//			jg.setColor("#009245");
//		}

		// Tracking
			// case 1: points are static at initial start/end point
			// case 2: points follow mouse dynamically
			// case 0 (default): points are static equally spread along width/height
		switch(trackStartX) {
			case 1:
				var currStartX = startX;
				break;
			
			case 2:
				var currStartX = Math.round(startX + (spacingX * i));
				break;
			
			default:
				var currStartX = Math.round(startX + (staticSpacingX * i));
				break;
		}
		
		switch(trackStartY) {
			case 1:
				var currStartY = startY;
				break;
			
			case 2:
				var currStartY = Math.round(startY + (spacingY * i));
				break;
			
			default:
				var currStartY = Math.round(startY + (staticSpacingY * i));
				break;
		}
		
		switch(trackEndX) {
			case 1:
				var currEndX = endX;
				break;
			
			case 2:
				var currEndX = Math.round(endX + (spacingX * i));
				break;
			
			default:
				var currEndX = Math.round(endX + (staticSpacingX * i));
				break;
		}
		
		switch(trackEndY) {
			case 1:
				var currEndY = endY;
				break;
			
			case 2:
				var currEndY = Math.round(endY + (spacingY * i));
				break;
			
			default:
				var currEndY = Math.round(endY + (staticSpacingY * i));
				break;
		}
		
		// create the line in the drawing object's buffer
		jg.drawLine(currStartX, currStartY, currEndX, currEndY);
		
		var startPointsX = startPointsX+" "+String(currStartX); // for display only
		var startPointsY = startPointsY+" "+String(currStartY);
		var endPointsX = endPointsX+" "+String(currEndX);
		var endPointsY = endPointsY+" "+String(currEndY);
	} // next line
	
	// finally draw all lines to screen
	jg.paint();


	return true;
}
getMouseXY();