<!--
/*
This code is from Dynamic Web Coding
www.dyn-web.com
Copyright 2002 by Sharon Paine
Permission granted to use this code
as long as this entire notice is included.

The drag layer code borrows some ideas
from Mike Hall's at http://www.brainjar.com
*/

// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
	origWidth = window.innerWidth; origHeight = window.innerHeight;
	window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

// avoid error of passing event object in older browsers
if (!document.getElementById && !document.all && !document.layers)
	event = "";

/////////////////////////////////////////////////////////////////////
//  CUSTOMIZE HERE
// preload images to appear in infoLyr
// include close-box image

//ERROR If you changed The ORIGINAL folder "IMAGES" in the
//string below the image will not show at all in the header.
//New Variable to combat this.. 

//Set Variable for image folder 
//this works off-line only

//Your old array looked like the following..

//*var imgAr = new Array(
//	"images/bx.gif",
//	"images/xs-duck.gif"
//);

//New code: NOTE variable folder
var imgFolder = '../img/'

var imgAr = new Array(
	imgFolder + "bx.gif",
	imgFolder + "xs-duck.gif"
);
//end new code
//here
		//alert(imgFolder + imgAr[0]);
if (document.images) {
	var imgs = new Array();
	
	//because the following code
	//is not acurate you cannot code
	//for a variable image folder
	//you are limited to "images" as the folder........
	
	//but what if you want to use "img"
	//or something else as the folder name?
	
	//I suspect that this has something to do 
	//with the fact that the header image 
	//"bx.gif" disappears on-line..
	for (var i=0; i<imgAr.length; i++) {
	
  	imgs[i] = new Image();
		imgs[i].src = imgAr[i];
		
  }
}

// ugly var names for drag-write layer (dwt_)
// original width of layer (can be changed for each link)
var dwt_width = 240;
var dwt_pad = 4;	// padding (integer, pixel value)
// for drag-write layer background and border
// background color "transparent" okay - but ns4 workaround necessary
// in wrapInfo function (set to white but you can change it)
var dwt_bgClr = "#dee7f7";
// border color
// leave a color in here even if you don't want a border
var dwt_bdClr = "#333366";
// border width
var dwt_bdWd = 1;		// integer (pixel value) 0 if no border
// border style
// if you don't want a border, set dwt_bdSty to "none"
// options for border style: "none", "solid", "ridge", "outset",
// "inset", "groove", "double", "dashed"
// (they won't look the same in all browsers though!)
var dwt_bdSty = "ridge";
// color of bar across top of layer
var dwt_barClr = "#333388";
// close box image

//I have set the variable above as it is inserted into the Array
//given that the Folder variable does in fact exist as a folder.

//i refer directly to the array item index of the image.
var dwt_closeImg = imgAr[0]; // "images/bx.gif";
//I have inserted the msg vars into an js file for easy editing....
//The msg.js file is loaded when the page loads.

// content to be written to infoDiv onmouseover of links
// as many as you need, named however you like
//var msg1 = '<table cellpadding="2" cellspacing="0" border="0"><tr><td class="msgHd" colspan="4">Getting all our ducks in a row.</td></tr><tr><td><img src="images/xs-duck.gif" width="60" height="32" alt="" border="0"></td><td><img src="images/xs-duck.gif" width="60" height="32" alt="" border="0"></td><td><img src="images/xs-duck.gif" width="60" height="32" alt="" border="0"></td><td><img src="images/xs-duck.gif" width="60" height="32" alt="" border="0"></td></tr><tr><td colspan="4" class="tdMsg">You can write just about anything you want to the layer. This is a 3-row, 4-column table. You can move it, close it, and it will appear at the offsets from the click event specified for the link each time you click it.</td></tr></table>';
//var msg2 = 'This message is plain text. Notice the layer is a different width. You can specify the width, along with positioning values, from each link for the write-drag layer.';
//var msg3 = '<div class="msgDiv1">This is another example of how you can format the content. This text is in a div with its own class.</div>';


// end customization area
// you can make some changes in wrapInfo though, if you dare, e.g.,
// to change ns4's handling of transparent background
/////////////////////////////////////////////////////////////////////

// controls layout/formatting of layer
function wrapInfo(msg,wd) {
	var cntnt = "";
	if (document.layers) {
		if (wd) dwt_width = wd;
		// if background transparent, sets it to white (you can change that)
		// or it will be the border color
		// another option: remove border in this mess
		// other adjustments would also need to be made here
		dwt_bgClr = (dwt_bgClr=="transparent")? "#ffffff": dwt_bgClr;
		// outer table for border
		cntnt = '<table bgcolor="' + dwt_bdClr + '" width="' + dwt_width + '" cellspacing="0" cellpadding="' + dwt_bdWd + '" border="0"><tr><td>';
		// nested table, top row for bar and close box link
		cntnt = cntnt + '<table bgcolor="' + dwt_bgClr + '" width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td bgcolor="'+dwt_barClr+'" align="right"><a href="javascript: void hideInfo()"><img src="'+dwt_closeImg+'" border="0"></a></td></tr>';
		
		
		
		// nested table for content written
		cntnt = cntnt + '<tr><td><table border="0" cellpadding="' + dwt_pad + '" cellspacing="0"><tr><td><div class="info">' + msg  + '</div></td></tr></table></td></tr></table></td></tr></table>';
	} else {
		if (wd) infoLyr.css.width = wd + "px";
		
		cntnt = '<div style="background-color:'+dwt_barClr+'; text-align:right"><a href="javascript: void hideInfo()"><img src="'+dwt_closeImg+'" border="0"></a></div>';
		
		//The below was the error in the old code
		//cntnt += '<div class="info" style="padding:'+dwt_pad+'px">'+msg+'</div>';
		
		//New code follows
		cntnt = cntnt + '<div class="info" style="padding:'+dwt_pad+'px">'+msg+'</div>';
	        //End new code
	}
	return cntnt;
	dragEnd();
}

var infoLyr;
function initInfoLyr() {
	infoLyr = new dynObj('infoDiv');
	// ns4 restricted to infoLyr drag
	// 2 ref's to same object didn't work
	// (i.e., initNS4Capture used in drag-v4.html)
	// and infoLyr.el didn't either
	if (document.layers) {
		infoLyr.doc.captureEvents(Event.MOUSEDOWN);
		infoLyr.doc.onmousedown=dragInit;
	}
	if (infoLyr.el.style) {	// ns4 would lose all this on rewrites
		with (infoLyr.css) {
			width = dwt_width + "px";
			backgroundColor = dwt_bgClr;
			borderColor = dwt_bdClr;
			borderWidth = dwt_bdWd + "px";
			borderStyle = dwt_bdSty;
		}
	}
}

window.onload =	initInfoLyr;



function showInfo(evt,msg,offx,offy,wd) {
	if (!infoLyr) return;
	infoLyr.hide();
	dragEnd();
	var cntnt = wrapInfo(msg,wd);
	infoLyr.writeLyr(cntnt);
	evt = (window.event)? window.event: evt;
	
	if (evt) {
	
		var x = (evt.pageX)? evt.pageX: evt.clientX + getScrollX();
		var y = (evt.pageY)? evt.pageY: evt.clientY + getScrollY();
		// adjust with offsets passed
		x += offx; y += offy;
	  infoLyr.shiftTo(x,y);
		infoLyr.show();
	}
}

function hideInfo() {
	if (!infoLyr) return;
	dragEnd();
	infoLyr.hide();
}

// begin drag layer code
// some ideas borrowed from brainjar

var dragObj = new Object();
dragObj.zOrder = 1000;

function dragInit(e,obj) {
	e = (e)? e: (window.event)? window.event: "";
	if (obj) dragObj.css = obj.style;
	else if (infoLyr) dragObj.css = infoLyr.css;	// ns4 restricted
	if (!e || !dragObj.css) return;

  // Save mousedown location
  dragObj.downX = (e.layerX)? e.layerX: (e.offsetX)? e.offsetX: 0;
  dragObj.downY = (e.layerY)? e.layerY: (e.offsetY)? e.offsetY: 0;

  // bring to top of stack
  dragObj.css.zIndex = ++dragObj.zOrder;

	if (document.addEventListener) {
    document.addEventListener("mousemove",dragStart,true);
    document.addEventListener("mouseup",dragEnd,true);
    e.preventDefault();
	} else if (document.attachEvent) {
    document.attachEvent("onmousemove",dragStart);
    document.attachEvent("onmouseup",dragEnd);
		return false;
	} else {
		if (document.captureEvents)
			document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
		document.onmousemove=dragStart;
		document.onmouseup=dragEnd;
	}
}

function dragStart(e) {
	e = (e)? e: window.event;

 	var x = (e.pageX)? e.pageX: (e.clientX)? e.clientX + getScrollX(): 0;
	var y = (e.pageY)? e.pageY: (e.clientY)? e.clientY + getScrollY(): 0;

 	var px = (document.layers)? "": "px";
  // Move drag element by the amount the cursor has moved.
  dragObj.css.left = (x - dragObj.downX) + px;
  dragObj.css.top  = (y - dragObj.downY) + px;

	if (e.preventDefault) e.preventDefault();
	else return false;
}

function dragEnd(e) {
	e = (e)? e: window.event;
  // Stop capturing mousemove and mouseup events.
	if (document.removeEventListener) {
		document.removeEventListener("mousemove",dragStart,true);
    document.removeEventListener("mouseup",dragEnd,true);
  } else if (document.detachEvent) {
    document.detachEvent("onmousemove",dragStart);
    document.detachEvent("onmouseup",dragEnd);
	} else {
		if (document.releaseEvents)
			document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
		document.onmousemove=null;
		document.onmouseup=null;
	}
}

// adapted from http://13thparallel.com/?issue=2002.06&title=viewport
// returns amount of vertical scroll
function getScrollY() {
	var scroll_y = 0;
	if (document.documentElement && document.documentElement.scrollTop)
		scroll_y = document.documentElement.scrollTop;
	else if (document.body && document.body.scrollTop)
		scroll_y = document.body.scrollTop;
	else if (window.pageYOffset)
		scroll_y = window.pageYOffset;
	else if (window.scrollY)
		scroll_y = window.scrollY;
	return scroll_y;
}

// returns amount of horizontal scroll
function getScrollX() {
	var scroll_x = 0;
	if (document.documentElement && document.documentElement.scrollLeft)
		scroll_x = document.documentElement.scrollLeft;
	else if (document.body && document.body.scrollLeft)
		scroll_x = document.body.scrollLeft;
	else if (window.pageXOffset)
		scroll_x = window.pageXOffset;
	else if (window.scrollX)
		scroll_x = window.scrollX;
	return scroll_x;
}
//-->

