// JavaScript Document

createEventListener(window, "load", init);

function init(){
	var colours = ['#99FF99', '#FFFF99'];
	var alt = false;
	
	for(var i=0;i<document.getElementsByTagName("div").length;i++){
		if(document.getElementsByTagName("div")[i].className == "warning"){
			for(var j=0; j<document.getElementsByTagName("p").length;j++){
				if(document.getElementsByTagName("p")[j].getAttribute("title")){
					document.getElementsByTagName("p")[j].style.backgroundColor = alt ? colours[0] : colours[1];
					document.getElementsByTagName("p")[j].style.cursor = "pointer";
					alt = alt ? false : true;
					createEventListener(document.getElementsByTagName("p")[j], "click", attachBubble);
				}
			}
		}
	}
	
	document.getElementById("user_instruction1").replaceChild(document.createTextNode("Click on"), document.getElementById("user_instruction1").firstChild);
	document.getElementById("user_instruction2").replaceChild(document.createTextNode("Click on"), document.getElementById("user_instruction2").firstChild);
	document.getElementById("user_instruction3").replaceChild(document.createTextNode("Click on"), document.getElementById("user_instruction3").firstChild);
	document.getElementById("user_instruction4").replaceChild(document.createTextNode("Click on"), document.getElementById("user_instruction4").firstChild);
	document.getElementById("user_instruction5").replaceChild(document.createTextNode("Click on"), document.getElementById("user_instruction5").firstChild);

}

function attachBubble(e){
	e = e ? e : window.event;
	target = e.target ? e.target : e.srcElement;
	if(target.nodeName.toUpperCase() == "P"){
		content = target.getAttribute("title");
		createBubble(target, content);
	}
	
	cancelEvent(e);
}

function createBubble(target, content){
	
	if(!target.getElementsByTagName("span").length){
		bubble = document.createElement("span");
		bubble.appendChild(document.createTextNode(content));
		bubble.className = "bubble";
		bubble.style.backgroundColor = target.style.backgroundColor;
		target.appendChild(bubble);
		createEventListener(bubble, "click", hideBubble);
	} else {
		target.getElementsByTagName("span")[0].style.display = "block";
	}
}

function hideBubble(e){
	e = e ? e : window.event;
	target = e.target ? e.target : e.srcElement;
	target.style.display = "none";	
	cancelEvent(e);
}

function findX(element){
	x = 0;
	if(element.offsetParent){
		do {
			x += element.offsetLeft;
		} while (element = element.offsetParent);
	}
	
	return x;
}

function findY(element){
	y = 0;
	if(element.offsetParent){
		do {
			y += element.offsetTop;
		} while (element = element.offsetParent);
	}
	return y;
}

function createEventListener(element, eventName, callback)
{
  if(element.addEventListener)
  {
    if(eventName == 'mousewheel')
    {
      element.addEventListener('DOMMouseScroll', callback, false); 
    }
    element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function killEventListener(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
  {
    if(eventName == 'mousewheel')
    {
      element.removeEventListener('DOMMouseScroll', callback, false); 
    }
    element.removeEventListener(eventName, callback, false);
  }
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

function cancelEvent(e){
  if(!e){
		e = window.event;
	}
	
	if(e.stopPropagation){
		e.stopPropagation();
	}
	
	if(e.preventDefault){
    e.preventDefault();
	}
	
	e.cancelBubble = true;
	e.cancel = true;
	e.returnValue = false;
	
	return false;
}