function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
function CreateElement(id,cl){
	
	if (document.getElementById(id)){
		return $(id);
		
	} else {
		var newdiv = document.createElement('div');
		var divIdName = id;
		newdiv.setAttribute('id',divIdName);
		//newdiv.innerHTML = 'Div tag created on the fly';
		document.body.appendChild(newdiv);
		return $(newdiv);
	}
	
}

function FindPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

function SwitchClass(target,newclass){
var el = $(target);
var cl = newclass;
if(el.className.indexOf(cl) == -1){
		el.className += " "+cl;
	} else {
		el.className = el.className.replace(cl, "");
	}
}

function HideHint(obj){
	//alert(obj);
	var tooltip = $('tooltip');
	tooltip.style.visibility = 'hidden';
}

	
function ShowHint(){
	var el = this;
	var parent = el.parentNode;
	var tooltip = $('tooltip');
	var enabled = "hint_enabled";
	var disabled = "hint_disabled";  
	var msg;
    
	switch (el.nodeName){
		case ('INPUT'):
			msg = el.parentNode.getElementsByTagName('span')[0].innerHTML;
			break;
        case ('SELECT'):
            msg = el.parentNode.getElementsByTagName('span')[0].innerHTML;
			break;
		default:
            msg = el.getElementsByTagName('span')[0].innerHTML;
		
		document.onmousedown = function(e){
			// Read & report active element
			if (!e) var e = window.event;
			if (e.target){
				t=e.target;
			} else if (e.srcElement){
				t=e.srcElement;
			}
			if (t.nodeType==3){ t = t.parentNode; } // defeat Safari bug
		
			// Clicked off link
			if( (t.tagName != el.nodeName) && (t.tagName != tooltip.nodeName)){
				HideHint(el);
				
				if (!((el.nodeName == 'INPUT') || (el.nodeName == 'SELECT')) ){
					SwitchClass(el,enabled);
					SwitchClass(el,disabled);
				}
				this.onmousedown = null
			}
		}
		break;
	
	}
	tooltip.innerHTML = msg + '<span class="hint-pointer">&nbsp;</span>';
		
	tooltip.style.position = "absolute";
	tooltip.style.left = FindPos(el)[0] + el.offsetWidth +'px';
	tooltip.style.top = (FindPos(el)[1] - 8)+'px';
	
	tooltip.style.visibility = 'visible';
	tooltip.style.zIndex = 200;
	tooltip.style.width = '280px';
	//tooltip.style.width = el.getElementsByTagName(img).width+'px';
	tooltip.style.height = 'auto';
	tooltip.style.display = 'block';
	tooltip.style.float = 'left';
	tooltip.style.marginLeft = '10px';
	//alert(el.offsetWidth);
	
}

function EnableHints (){
	
	// Get Hints
	var h = $$('.hint');
	var enabled = "hint_enabled";
	var disabled = "hint_disabled";
	var tooltip = CreateElement('tooltip');
	tooltip.style.visibility = 'hidden';
	
	for (var i = 0; i < h.length; i++){
		var hnt = h[i];
		var el = hnt.parentNode;

		
		if(el.getElementsByTagName('input')[0]){
			el.getElementsByTagName('input')[0].onfocus = ShowHint;
			el.getElementsByTagName('input')[0].onblur = HideHint;
		} else if(el.getElementsByTagName('select')[0]){
			el.getElementsByTagName('select')[0].onfocus = ShowHint;
			el.getElementsByTagName('select')[0].onblur = HideHint;
			
		} else {	
			
			SwitchClass(el,disabled); 
			el.onmouseover = function(){ 
				if(this.hasClassName(disabled)){
					SwitchClass(this,enabled);
					SwitchClass(this,disabled);
				}
			}
			
			el.onmouseout = function(){ 
				var tX =  FindPos(tooltip)[0] - this.offsetWidth - 10;// 21 rep. size of icon
				var tY =  FindPos(tooltip)[1] + 8;// 8 rep the offset of the tooltip
				var elX = FindPos(this)[0];
				var elY = FindPos(this)[1];
				
				if(this.hasClassName(enabled)){
					// Get tooltip & EL position
					if((tX == elX && tY == elY) && (tooltip.style.visibility == 'visible')){
					} else {
						SwitchClass(this,enabled);
						SwitchClass(this,disabled);
					}
					
				}
			}
			el.onmousedown = ShowHint;
		}
		
	}	
	display();
}
function display()
			{	//dont change what is below please
			var questions = new Array()
			questions[0]= "<a style='text-decoration:none; color:#517279' href='http://www.toronto.ca/311/knowledgebase.htm'>How can I find out about road restrictions and closures?</a>"
			questions[1]= "<a style='text-decoration:none; color:#517279' href='http://www.toronto.ca/311/knowledgebase.htm'>What types of yard waste does the City collect?</a>"
			questions[2]= "<a style='text-decoration:none; color:#517279' href='http://www.toronto.ca/311/knowledgebase.htm'>What do those utility markings painted on the ground mean?<a/>"
			questions[3]= "<a style='text-decoration:none; color:#517279' href='http://www.toronto.ca/311/knowledgebase.htm'>How do I recycle unwanted electronics?</a>"
			questions[4]= "<a style='text-decoration:none; color:#517279' href='http://www.toronto.ca/311/knowledgebase.htm'>What are the City bylaws for graffiti on private property?</a>"
			questions[5]= "<a style='text-decoration:none; color:#517279' href='http://www.toronto.ca/311/knowledgebase.htm'>Where can I find information about special events?<a/>"
			
			
				a=Math.floor(Math.random()*questions.length);
				document.getElementById('questions').innerHTML=questions[a];
				document.getElementById('questions').style.display = 'block';
				document.getElementById('questions').style.width = '200px';
				setTimeout("display()",7000);
			}
addLoadEvent(EnableHints);