window.onload = function() {
	var items = document.getElementById("menu").getElementsByTagName("li");

	for (var i=0; i < items.length; i++) {
		(function() {
			var self = i;
		
			items[i].onmouseover = function() {
				var menu = document.getElementById("menu").getElementsByTagName("li");
				
				for (var k=0; k < menu.length; k++) {
					menu[k].getElementsByTagName('img')[0].style.display = 'inline';
				}
				
				this.getElementsByTagName('img')[0].style.display = 'none';
				
				var div = document.getElementById("submenu").getElementsByTagName("div");
				
				for (var j=0; j < div.length; j++) {
					div[j].style.display = "none";
				}

				div[self].style.display = "";			
			}
		})();
	}

	var items = document.getElementById("submenu").getElementsByTagName("div");

	for (var i=0; i < items.length; i++) {
		(function() {
			var timer = 0;
		
			items[i].onmouseover = function() {
				var a = this.getElementsByTagName("*");
				
				for (var j=0; j < a.length; a++)
					a.onmouseover = function() {
						window.clearTimeout(timer);
					}
					
				window.clearTimeout(timer);
			}
			
			items[i].onmouseout = function() {
				var self = this;
				
				timer = window.setTimeout(function() {
					self.style.display = "none";
					
					var menu = document.getElementById("menu").getElementsByTagName("li");
					for (var k=0; k < menu.length; k++) {
						menu[k].getElementsByTagName('img')[0].style.display = 'inline';
					}
				}, 500);
			}
		})();
	}
	
	var balls = [document.getElementById("ser"), document.getElementById("pensar"), document.getElementById("fazer")];
	var t1 = []; // Open
	var t2 = [];
	var t3 = [];

	for (var i=0; i < balls.length; i++) {
		(function() {
			var ball = balls[i];
			var n = i;
			
			ball.onmouseover = function() {
				if (t3[n]) {
					window.clearTimeout(t3[n]);
				}
				
				Animation.start(this, t1[n]);
			}
			
			ball.onmouseout = function() {
				var self = this;
			
				t3[n] = window.setTimeout(function() {
					Animation.end(self, t2[n])
				}, 200);
			}
		
		})();
	}
}

var Animation = {	
	start: function(a, b) {
		var self = a;
		self.style.zIndex = 6;
	
		b = window.setInterval(function() {
			if ((width = parseInt(self.style.width.replace("px", "")) + 10) > 257) {
				window.clearTimeout(b);
				self.getElementsByTagName("h2")[0].getElementsByTagName("a")[0].className = "in";
				self.getElementsByTagName("div")[2].style.display = "block";
				return;
			}
		
			self.style.width = width + "px";
			self.style.left = parseInt(self.style.left.replace("px", "")) - 5 + "px";
			
			self.style.height = parseInt(self.style.height.replace("px", "")) + 10 + "px";
			self.style.top = parseInt(self.style.top.replace("px", "")) - 5 + "px";
		}, 10);
	},
	
	end: function(a, b) {
		var self = a;
		self.style.zIndex = 5;
			
		b = window.setInterval(function() {
			if ((width = parseInt(self.style.width.replace("px", "")) - 10) < 114) {
				window.clearTimeout(b);
				return;
			}
		
			self.getElementsByTagName("div")[2].style.display = "none";
			self.getElementsByTagName("h2")[0].getElementsByTagName("a")[0].className = "";
		
			self.style.width = width + "px";
			self.style.left = parseInt(self.style.left.replace("px", "")) + 5 + "px";
			
			self.style.height = parseInt(self.style.height.replace("px", "")) - 10 + "px";
			self.style.top = parseInt(self.style.top.replace("px", "")) + 5 + "px";
			
		}, 10);
	}
};

function pop_img(url) {
	window.open(url, '', 'status=0,toolbar=0,location=0,menubar=0,directories=0,width=500,height=400');
}

var tooltip = {
	start: function(a) {

		var td = a.getElementsByTagName('td');
		
		for (var i=0; i < td.length; i++) {
			td[i].onclick = function() {
				if ((div = this.getElementsByTagName('div')) && div.length > 0)
					tooltip.display(div[0].innerHTML);
				else
					tooltip.remove();
			}
		}
	},
	
	display: function(txt) {
		if (!(tip = document.getElementById('__tip'))) {
			var tip = document.createElement('div');
			tip.id = '__tip';
			tip.innerHTML += '<span><a href="#" onclick="tooltip.remove()">Fechar</a></span><div></div>';
			document.getElementsByTagName('body')[0].appendChild(tip);
		}
		
		tip.childNodes[1].innerHTML = txt;
	},
	
	remove: function() {
		if (tip = document.getElementById('__tip'))
			document.getElementsByTagName('body')[0].removeChild(tip);
	}
}
