/* ***************************
 * misc functions
 * toggle, bottom yellow boxes
 */
 
/* Toolmenu text, needed to create the menu. */
var tooltipHtml = document.getElementById("mouseOverDiv").innerHTML;
	
$(document).ready(function() {

	$(".welcome-fadehover").each(function(){
		var a = $(this).find("a");
		
		/* By default, there's a link for users with javascript disabled. So we remove it to avoid users clicking on phone. */
		a.attr("href", "javascript:void(0);");
		a.prepend("<span></span>");
	
		img = $(this).find("img");
		imgSrc = img.attr("src");
	    var an = $(this).find("a");
		var dimImg = an.attr("rev");
		/* IE doesn't tolerate opacity attribute, we simply remove it. */
		if(!$.browser.msie) {

			a.find("span").css({
				backgroundImage: "url("+dimImg+")",
				position:"absolute",
				display:"block",
				cursor:"pointer",
				width:img.attr("width"),
				height:img.attr("height"),
				opacity: 0,
				visibility: "visible"
			})
		} else {
			a.find("span").css({
				backgroundImage: "url("+dimImg+")",
				position:"absolute",
				display:"block",
				cursor:"pointer",
				width:img.attr("width"),
				height:img.attr("height"),
				visibility: "visible"
			})
			a.find("span").hide();
		}
	})
	
	$(".welcome-fadehover").hover (
	function() {  
	
		/* If browser is IE, JQuery animate can't be used, we simply show the image directly. */
		if(!$.browser.msie) {
			$(this).find("span").stop()
			$(this).find("span:not(:animated)").animate({opacity: 1}, 300)
		} else {
			$(this).find("span").show();
		}
		
		/* We append text to create toolmenu when fadehover is activated */
		$(this).append(tooltipHtml);
		var a = $(this).find("a");
		var phoneId = a.attr("rel");
		var phoneimg = $(this).find("img");
		var prodId=phoneimg.attr("id")

		/* Get phones' name */
		var hoverPhoneObj=$(this).find("#welcome-hover-phone");
		hoverPhoneObj.html(phoneId);
		var hoverButtonsObj=$(this).find("#welcome-hover-buttons");
		hoverButtonsObj.html(document.getElementById('mouseOverButtons'+prodId).innerHTML);
		
		/* Activate proper redirect for each button */
		//$("#welcome-button-monthlypackage").click(function() { document.location = ""; });
		//$("#welcome-button-prepaid").click(function() { document.location = ""; });
		
		/* Execute the toolsMenu fade in. */
		var hoverToolMenuObj=$(this).find("#welcome-telephone-toolmenu");
		
		hoverToolMenuObj.fadeIn("fast");
	},  
	function() {  
		
		/* If browser is IE, JQuery animate can't be used, we simply show the image directly. */
		if(!$.browser.msie) {
			$(this).find("span").animate({opacity: 0},250)
		} else {
			$(this).find("span").hide();
		}
		
		/* When the mouse exits the fadehover zone, we want to remove the toolmenu. */
		var hoverToolMenuObj=$(this).find("#welcome-telephone-toolmenu");
		hoverToolMenuObj.remove();
	}); 
});