var tooltip = {
	element: false,
	on:      false,
	lastSpan : null,

	init: function(){
		if (tooltip.on) return;
		tooltip.on = true;
		
		var currentLocation = 0;
		var As = document.getElementsByTagName('div');
		for (var i = 0; i < As.length; i++) {
			if (As[i].className == 'square') {
				currentLocation = As[i];
				tooltip.stripWhitespace(currentLocation);
				tooltip.addEvt(currentLocation,'mousemove',tooltip.moveTooltip);
				tooltip.addEvt(currentLocation,'mouseover',tooltip.showTooltip);//displays tooltip on mouse over
				tooltip.addEvt(currentLocation,'mouseout',tooltip.hideTooltip);//hide tooltip on mouse out
				tooltip.addEvt(currentLocation,'focus',tooltip.showTooltip);//display tooltip on focus, for added keyboard accessibility
				tooltip.addEvt(currentLocation,'blur',tooltip.hideTooltip);//hide tooltip on focus, for added keyboard accessibility
			}
		}
	},

	showTooltip: function(evt) {
		var source = this;
		var SPANs = source.getElementsByTagName('div');
		for (var i = 0; i < SPANs.length; i++) {
			if (SPANs[i].className == 'tip') {
				tooltip.lastSpan = SPANs[i];
				SPANs[i].className += ' on';
				SPANs[i].style.left = (document.body.scrollLeft + document.documentElement.scrollLeft + evt.clientX + 16) + 'px';
				SPANs[i].style.top = (document.body.scrollTop + document.documentElement.scrollTop + evt.clientY + 16) + 'px';
				return;
			}
		}
	},
	
	moveTooltip: function(evt) {
		if (tooltip.lastSpan) {
			tooltip.lastSpan.style.left = (document.body.scrollLeft + document.documentElement.scrollLeft + evt.clientX + 16) + 'px';
			tooltip.lastSpan.style.top = (document.body.scrollTop + document.documentElement.scrollTop + evt.clientY + 16) + 'px';
		}
	},	

	hideTooltip: function() {
		if (tooltip.lastSpan) {
			tooltip.lastSpan.className = tooltip.lastSpan.className.replace(' on', '');
			tooltip.lastSpan = null;
		}
	},
	
	addEvt: function(element, type, handler) {
		// assign each event handler a unique ID
		if (!handler.$$guid) handler.$$guid = tooltip.addEvt.guid++;
		// create a hash table of event types for the element
		if (!element.events) element.events = {};
		// create a hash table of event handlers for each element/event pair
		var handlers = element.events[type];
		if (!handlers) {
			handlers = element.events[type] = {};
			// store the existing event handler (if there is one)
			if (element["on" + type]) {
				handlers[0] = element["on" + type];
			};
		};
		// store the event handler in the hash table
		handlers[handler.$$guid] = handler;
		// assign a global event handler to do all the work
		element["on" + type] = tooltip.handleEvent;
	},

	handleEvent: function(event) {
		var returnValue = true;
		// grab the event object (IE uses a global event object)
		event = event || tooltip.fixEvent(window.event);
		// get a reference to the hash table of event handlers
		var handlers = this.events[event.type];
		// execute each event handler
		for (var i in handlers) {
			this.$$handleEvent = handlers[i];
			if (this.$$handleEvent(event) === false) {
				returnValue = false;
			};
		};
		return returnValue;
	},
	
	fixEvent: function(event) {
		// add W3C standard event methods
		event.preventDefault = tooltip.fixEvent.preventDefault;
		event.stopPropagation = tooltip.fixEvent.stopPropagation;
		return event;
	},
	
	stripWhitespace: function( el ){
		for(var i = 0; i < el.childNodes.length; i++){
			var node = el.childNodes[i];
			if( node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
				node.parentNode.removeChild(node);
			};
		};
	}
};
tooltip.fixEvent.preventDefault = function() {this.returnValue = false;};
tooltip.fixEvent.stopPropagation = function() {this.cancelBubble = true;};
tooltip.addEvt.guid = 1;

/**
* Function : dump()
* Arguments: The data - array,hash(associative array),object
*    The level - OPTIONAL
* Returns  : The textual representation of the array.
* This function was inspired by the print_r function of PHP.
* This will accept some data as the argument and return a
* text that will be a more readable version of the
* array/hash/object that is given.
*/
function dump(arr,indent,max_depth) {
	var dumped_text = "";
	if(!indent) indent = 0;
	if (!max_depth) max_depth = 0;
	if (max_depth < 0) return;

	//The padding given at the beginning of the line.
	var indent_padding = "";
	for(var j=0;j<indent+1;j++) indent_padding += "    ";
	if(typeof(arr) == 'object') { //Array/Hashes/Objects
		for(var item in arr) {
			var value = arr[item];
	 
			if(typeof(value) == 'object') { //If it is an array,
				dumped_text += indent_padding + "'" + item + "' ...\n";
				dumped_text += dump(value,indent+1,max_depth-1);
			} else {
				dumped_text += indent_padding + "'" + item + "' => \"" + value + "\"\n";
			}
		}
	} else { //Stings/Chars/Numbers etc.
		dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
} 

tooltip.addEvt( window, 'load', tooltip.init);