// you can just call this by the variable name floatBox . 
// you can also override elements like floatBox.boxHtml = ".. something more elaborate .. ";
// you should also be able to do var differentBox = floatBox; and change the varaibles to 
// possibly have multiple boxes for different purposes? not really sure how that will work out.

// it will likely benefit to pre-load any images the box uses so it is in cache.
// excluding the user's image. that will just have to come down when the box loads it. 
// image inside elements that are display:none do not get loaded right away.

var boxBackground = new Image();
boxBackground.src = "images/boxBack.png";



// the box object.

var floatBox = {
	
	anchor : 'nameList',
	boxId : 'fltBox',
	contentId : 'fltBoxContent',
	positionX : 5,	// offset to compensate for the shadow
	positionY : 5, 	// offset to compensate for the shadow
	overhangT : 1,	
	overhangB : 20, 
	overhangL : 1, 
	overhangR : 20,
	// how far over the box can hang from it's anchor box
	// 0 means don't use.
	
	boxHtml : "<div class='boxPadding'><div id='fltBoxContent'></div><div class='close' onClick='floatBox.close()'>X&nbsp;</div></div>",
	// note, the close has to call 'variableName'.close() not 'elementName'.close()
	
	open : function (onElm) 
	{
		floatBox.setup();
		// get the html from the info class object in side the provided element
		var oneDown = $(onElm).down();
		var nextInfo = $(oneDown).next('.info');
		var infoHTML = $(nextInfo).innerHTML;
		// set that HTML in to the content for the box.
		$(floatBox.contentId).update(infoHTML);
		// call to move the box to the onElm
		floatBox.move(onElm);
		// turn it on
		$(floatBox.boxId).show();
	},
	
	close : function ()
	{
		// hides
		$(floatBox.boxId).hide();
		// removes content
		$(floatBox.contentId).update();
	},
	
	move : function (onElm)
	{		
		var cumOffset = $(onElm).cumulativeOffset();
		var anchorOffset = $(floatBox.anchor).cumulativeOffset();
		
		var myLeft = cumOffset[0] - anchorOffset[0];
		var myTop = cumOffset[1] - anchorOffset[1];
		
		myLeft = (myLeft - ($(floatBox.boxId).getWidth()/2)) + floatBox.positionX;
		myTop = (myTop - ($(floatBox.boxId).getHeight()/2)) + floatBox.positionY;
		
		if (myLeft < 0) {
			if (floatBox.overhangL > 0) {
				var l = myLeft * -1;
				if (l > floatBox.overhangL) {
					myLeft = (floatBox.overhangL * -1);
				}
			}
		} else {
			if (floatBox.overhangR > 0) {
				var myWidth = $(floatBox.boxId).getWidth();
				var maxWidth = $(floatBox.anchor).getWidth() + floatBox.overhangR;
				if (maxWidth <
					(myLeft + myWidth)) {
						myLeft = maxWidth - myWidth;
					}
			}
		}
		if (myTop < 0) {
			if (floatBox.overhangT > 0) {
				var t = myTop * -1;
				if (t > floatBox.overhangT) {
					myTop = (floatBox.overhangT * -1);
				}
			}
		} else {
			if (floatBox.overhangB > 0) {
				var myHeight = $(floatBox.boxId).getHeight();
				var maxHeight = $(floatBox.anchor).getHeight() + floatBox.overhangB;
				if (maxHeight <
					(myTop + myHeight)) {
						myTop = maxHeight - myHeight;
					}
			}
		}
		
		$(floatBox.boxId).setStyle({ 'left': myLeft +'px','top': myTop +'px' });
		
	},
	
	setup : function ()
	{
		if ($(floatBox.boxId)) {
			if ($(floatBox.boxId).visible()) {
				floatBox.close(); 				// if it is visible, lets hide it. 
			}
		} else {
			// set up the new element
			var elm = new Element('div',{'id':floatBox.boxId,'style':'position:absolute;top:0px;left:0px;'});
			elm.update(floatBox.boxHtml);					// update elm with design html
			elm.hide();										// make sure it is hidden
			$(floatBox.anchor).appendChild(elm);			// append it to the anchor div

		}
	}

}