//INTERCALA TABELA DE PRODUTOS
$(function () {
	$(".table_prod tr:even td").addClass("line_escura");
});


//FUNCIONAMENTO DE HOVER
var hLabel = 10;
$(function() {
	//highlight de mouseOver
	$(".table_prod tr").hover(function() {
			var altToFind = $(this).attr("id");
			altToFind = altToFind.substr(1, altToFind.length);
			altToFind = prodNameTranslate(altToFind);
			$("#mapProd area[alt='"+altToFind+"']").mouseover();
		}, function () {
			var altToFind = $(this).attr("id");
			altToFind = altToFind.substr(1, altToFind.length);
			altToFind = prodNameTranslate(altToFind);
			if ($("#mapProd area[alt='"+altToFind+"']").data("overDiv")) {
				$("#mapProd area[alt='"+altToFind+"']").data("overDiv").mouseout();
			}
		});
	//click na tabela - executa zoom
	$(".table_prod tr").click(function () {
		var altToFind = $(this).attr("id");
		altToFind = altToFind.substr(1, altToFind.length);
		altToFind = prodNameTranslate(altToFind);
		//clica no DIV associado ao AREA
		$("#mapProd area[alt='"+altToFind+"']").data("overDiv").click();
	});
	//hover na imagem - aparece contorno e legenda do produto
	$("#mapProd area").mouseover(function() {
		//oculta outros overlays e remove highlights das tabelas
		$("#imgProd div").hide();
		$(".table_prod td.highlight").removeClass("highlight");
		//mostra overlay
		$(this).data("overDiv").show();
		$("#p"+prodNameTranslate($(this).attr("alt"))+" td").addClass("highlight");
	});
	//pré-criar overlays
	$("#mapProd area").each(function (i) {
			//pega coordenadas do AREA para aplicar no DIV
			var coords 	= $(this)[0].coords.split(",");
			var left 	= coords[0];
			var top 	= coords[1] - hLabel;
			var width 	= coords[2] - left;
			var height 	= coords[3] - top + hLabel;
			
			var id = i;
			var alt = $(this).attr("alt");
			
			//cria DIV sobre AREA
			$("#imgProd").prepend("<div id='contentArea"+id+"' class='overlay' style='margin:"+top+"px 0 0 "+left+"px;width:"+width+"px;height:"+height+"px;'>"+alt+"</div>");
			var divOverlay = $("#contentArea"+id);
			divOverlay.hide();
			
			//cria relacionamento AREA <-> DIV por variáveis overDiv e anchor
			$(this).data("overDiv", divOverlay);
			divOverlay.data("anchor", this);
			divOverlay.data("myAreaId", id);
			
			divOverlay.mouseout(function() {
				//oculta layer e remove destaques
				$(this).hide();
				$(".table_prod td.highlight").removeClass("highlight");
			});
			divOverlay.click(function() {
				/*
				* funções do Zoom
				*/
				$(this).hide();
				
				//mostra zoom
				if (!$("#bgOverlayZoom").is(':visible')) {
					$("#bgOverlayZoom").show();
					$("#bgOverlayZoom").fadeTo(0, 0);
					$("#bgOverlayZoom").fadeTo("fast", 0.5, function () {});
					$("#infoOverlayZoom").fadeIn("fast");
					
					//posiciona
					adaptaDimensoesLayer();
					$(window).bind("scroll", adaptaDimensoesLayer);
					$(window).bind("resize", adaptaDimensoesLayer);
					
					//duplica tabela
					if ($("#infoZoomTable .table_prod").length == 0) {
						//duplica dentro da div infoZoomTable
						$(".table_prod").clone().appendTo("#infoZoomTable");
						//remove highlight e linha intercalada
						$("#infoZoomTable .table_prod td.highlight").removeClass("highlight");
						$("#infoZoomTable .table_prod td").removeClass("line_escura");
						//rename IDs das TRs
						$("#infoZoomTable .table_prod tbody tr").each(function (i) {
							var myId = $(this).attr("id");
							if (myId) {
								//ex.: id="p100-S" fica id="zoomp100-S"
								$(this).attr("id", "zoom"+myId);
							}
						});
					}
					
					//fechar
					$("#bgOverlayZoom, #btZoomClose").click(function() {
						$("#bgOverlayZoom").hide();
						$("#infoOverlayZoom").fadeOut("fast");
						$(window).unbind("scroll", adaptaDimensoesLayer);
						$(window).unbind("resize", adaptaDimensoesLayer);
						
						$("#infoZoomImg img").attr("src", "../../imagens/produtos/empty.jpg");
						return false;
					});
				}
				
				//dados
				var areaRef = $(this).data("anchor");
				$("#infoZoomImg img").attr("src", $(areaRef).attr("href"));
				var idAreaAtual = $(this).data("myAreaId");
				
				//filtra tabela
				var alt = $("#mapProd area").eq(idAreaAtual).attr("alt");
				alt = prodNameTranslate(alt);
				$("#infoZoomTable .table_prod tbody tr").hide();
				$("#zoomp"+alt).show();
				
				//prepara botões de navegação linear < | >
				nextArea = $("#mapProd area").eq(idAreaAtual).next();
				prevArea = $("#mapProd area").eq(idAreaAtual).prev();
				if (nextArea.length > 0) {
					$("#btZoomNext").show();
					$("#btZoomNext").attr("href", "javascript:nextArea.data('overDiv').click();void(0);");
				} else {
					$("#btZoomNext").hide();
				}
				if (prevArea.length > 0) {
					$("#btZoomPrev").show();
					$("#btZoomPrev").attr("href", "javascript:prevArea.data('overDiv').click();void(0);");
				} else {
					$("#btZoomPrev").hide();
				}
				
				return false;
			});	
			
	});
});

function adaptaDimensoesLayer() {
	/*
	* adapta background e centraliza conteúdo do layer
	*/
	var scrTop = $(document).scrollTop();
	
	//layer conteudo
	var top = ($(window).height() - $("#infoOverlayZoom").height()) * .5;
	var left = ($(window).width() - $("#infoOverlayZoom").width()) * .5;
	top += scrTop;
	$("#infoOverlayZoom").css("top", top+"px");
	$("#infoOverlayZoom").css("left", left+"px");
	//layer bg
	var wHtml = $("body").width();
	$("#bgOverlayZoom").css("width", wHtml+"px");
	var hHtml = $("body").height();
	$("#bgOverlayZoom").css("height", hHtml+"px");
}


function prodNameTranslate(str) {
	/*
	* tratamento de caracteres especiais
	*/
	var newStr = str;
	//1. se tem "_", replace por "/"
	if (str.indexOf("_") > 0) {
		newStr = str.replace("_","/");
	}
	//2. se tem "/", replace por "_"
	if (str.indexOf("/") > 0) {
		newStr = str.replace("/","_");
	}
	return newStr;
}