/**
	 * Binds am event to an element
	 * http://ejohn.org/blog/flexible-javascript-events/
	 *
	 * @param element
	 * @param string event type
	 * @param function callback
	 */
	var _addEvent = function( el, type, callback ) {
		if ( el.attachEvent ) {
			el['e'+type+callback] = callback;
			el[type+callback] = function(){el['e'+type+callback]( window.event );}
			el.attachEvent( 'on'+type, el[type+callback] );
		} else {
			el.addEventListener( type, callback, false );
		}
	};
	
	/**
	 * Removes an event from an element
	 * http://ejohn.org/blog/flexible-javascript-events/
	 *
	 * @param element
	 * @param string event type
	 * @param function callback
	 */
	var _removeEvent = function( el, type, callback ) {
		if ( el.detachEvent ) {
			el.detachEvent( 'on'+type, el[type+callback] );
			el[type+callback] = null;
		} else { 
			el.removeEventListener( type, callback, false );
		}
	};

	// Custom hasClass function
    var _hasClass = function(el, name) {
        return el.className.indexOf(name) !== -1;
    };


	var _listen = function(td) {
	   //get the span
	   var span = td.getElementsByTagName('span')[0];
	   if (!span){
	   	return;
	   }
	   //on mouseover
	   _addEvent(td, 'mouseover', function() {
	       //set span style to display="block"
	       span.style.display = 'block';
	   });
	   
	   //on mouseout
	   _addEvent(td, 'mouseout', function() {
	       //set span style to display="none"
	       span.style.display = 'none';
	   });
	};
	
	//---------------------------------------------//
	var tds = document.getElementById('table').getElementsByTagName('td');
	//for each td
	for(var i = 0; i < tds.length; i++) { 	
	   //if this td has class of uitooltip
	   if(_hasClass(tds[i], 'uitooltip')) { 
	       //then listen
	       _listen(tds[i]);
	   }
	}