// JavaScript Document
$(document).ready(function(){
	var Imagen = new JOw.Imagen();
	var Elementos = new Object();
	Elementos = {
		Menu 		:  $("#menu"),
		Imagenhover :  $(".imagenh")
	}
	$.Preload("images/menu/bt_tiposdepiel2.jpg","images/menu/bt_preguntasfrecuentes2.jpg");
	
	Elementos.Menu.append('<div id="sub_menu" class="submenuinfo" >'+
							'<a href="tipos_de_piel.html"><img src="images/menu/bt_tiposdepiel.jpg" width="121" height="31" alt="Tipos de Piel" class="imagenh" border="0" /></a>'+
							'<a href="preguntas_frecuentes.php"><img src="images/menu/bt_preguntasfrecuentes.jpg" width="121" height="39" alt="Preguntas Frecuentes" class="imagenh" border="0"  /></a>'+
						  '</div>');
	Elementos.Imagenhover
	.live("mouseover",function(){Imagen.Hover($(this),"2",true);})
	.live("mouseout",function(){Imagen.Normal($(this),"2",true);});	
	
	var showmenu=0;
	$.Menu = function(active){
		switch(active){
			case 1:$(".submenuinfo").slideDown();break;
			case 0:if(showmenu==1){$(".submenuinfo").slideUp()}break;}
	};	
	$("#sub_menu")
	.live("mouseover",function(){showmenu=0;$(this).show();})
	.live("mouseout",function(){showmenu=1;$(this).hide();})

	/*Tooltip*/

	
		
     var html = new JOw.Html();
	 var br  = new JOw.Pagina();
     var pagina = html.getNombrePagina();
     
	 $.verBronceadores = function(){
		 br.setPlantilla('<li><a href="pop.php?Producto=#(id)" onclick="return hs.htmlExpand(this, {  objectType: \'iframe\', preserveContent: false , width: 730 , height : 420 } )" class="centrado"><img src="images/#(thumbnail) " title="Click para ver detalle" alt="Click para ver detalle"  border="0" />'+
									 '<div class="centrado">'+'#(nombre)'+'</div>'+
						 '</a></li>');
		
		br.setElementos($("#catalogo_bronceadores"),$("#paginacion"),{primera: "primera", anterior :"anterior" ,siguiente:"siguiente",ultima:"ultima"});
		br.setJSON("_data.php?Lista=bronceador");
		br.setItems(12);
		br.getPagina();
		
	 }
	 $.verWebamigas = function(){
		 br.setPlantilla('<li><table width="285" border="0">'+
								'<tr>'+'<td align="right"><a href="#(url)" target="_blank"><div class="logo_webamigas"><img src="images/#(logo)" title="Click para ir a enlace" alt="Click para ir a enlace" width="137" height="60" border="0" /></div>'+'</a><img src="images/web_amigas.png" alt="Click para ir a link" width="274" height="227" border="0" align="right" title="Click para ir a link" /></td>'+'</tr>'+
								'<tr>'+'<td align="left"><a style="font-size:15px;font-weight:bold" href="#(url)" target="_blank" class="link">#(url)</a></td>'+'</tr>'+
								'<tr>'+'<td class="justificado">#(descripcion)</td>'+'</tr>'+
						 ' </table></li>');
	
		br.setElementos($(".lista_webamigas"),$("#paginacion_wa"),{primera: "primera", anterior :"anterior" ,siguiente:"siguiente",ultima:"ultima"});
		br.setJSON("_data.php?Lista=webamigas");
		br.setItems(3);
		br.getPagina();
	}
	 $.verGalerias = function(){
		 br.setPlantilla('<li  onclick="Galeria(#(id));" ><img src="images/galeria/#(thumbnail)" class="marco" title="Click para ver ampliar" alt="Click para ver ampliar" width="200" height="150" />'+
    	'<div><a href="javascript:void(0)" class="centrado">#(titulo)</a></div></li>');
	
		br.setElementos($("#lista_galeria"),$("#p_galeria"),{primera: "primera", anterior :"anterior" ,siguiente:"siguiente",ultima:"ultima"});
		br.setJSON("_data.php?Lista=galeria");
		br.setItems(6);
		br.getPagina();
	}
	 
	 switch(pagina.Nombre){
		case 'bronceadores':
			$.verBronceadores();
		break;	
		case 'web_amigas':
			 $.verWebamigas();
		break;
		case 'galeria_de_fotos':
			
			Galeria = function(Galeria){
				var ContenedorGaleria = '<div id="JOw-Mascara"></div><div id="JOw-Galeria" ><div id="JOw-Galeria-cab" ></div><div id="JOw-Galeria-con"></div><div id="JOw-Galeria-pie" ></div></div>'; 
				$("body").append(ContenedorGaleria);
				
				var Cabecera 	= $("#JOw-Galeria-cab");
				var Contenido 	= $("#JOw-Galeria-con");
				var Pie 		= $("#JOw-Galeria-pie");
				
				
				var Ubicar = function(){
						var Ventanaw = $(window).width();
						var Ventanah = $(window).height();
						var Modalh   = $("#JOw-Galeria").outerHeight();
						var Modalw   = $("#JOw-Galeria").outerWidth();			   
						
						var top  = (Ventanah-Modalh)/2;
						var left = (Ventanaw-Modalw)/2;
						
						$("#JOw-Mascara")
						.css({
							'position':'absolute',
							'background-color':'black',
							'top':0 + $(document).scrollTop() ,
							'left':0,
							'width' :Ventanaw,
							'height':Ventanah,
							opacity : 0.8
						}).fadeIn("slow");

						
						$("#JOw-Galeria")
						.css({
							 'position':'absolute',
							 'z-index':'9999',
							 'top' : (top + $(document).scrollTop() ), 
							 'left' : left})
						.fadeIn("slow");

				}
				
				$(window).bind("scroll resize",function(){
						Ubicar(); 
				});
				
				Ubicar();
				
				/* Contenido */
				
				Cabecera.html('<center><img src="galeria/anterior.png" id="btnAnterior1" class="Control"  /><img src="galeria/siguiente.png" id="btnSiguiente1"  class="Control" /><div id="JOw-Galeria-Cerrar" style="float:right;width:20px;height:20px;cursor:pointer;margin-right:70px;margin-top:20px"><img src="galeria/close.png" /></div></center>');
				Contenido.html('<center><img src="" /></center>');
				var arrFotos = new Array(); 	
				   $.getJSON("_data.php",{Lista : "fotos",Galeria:Galeria},function(html){
						var gFotos = '<center><ul><li><img src="galeria/flecha_izquierda.png" align="top" class="Control" id="btnAnterior" /></li><li><div id="JOw-Slider" style="display:inline-block;overflow:hidden;width:660px" ><div id="ListaThumb" >';
				
						for(var ig in html){
							 gFotos +='<a href="images/galeria/'+html[ig].foto+'" class="Thumb" ><img src="images/galeria/'+html[ig].thumbnail+'" width="100" height="80" /></a>';
						}	
						
						gFotos +='</div></div></li><li><img src="galeria/flecha_derecha.png"  align="top" class="Control" id="btnSiguiente" /></li></ul></center>';
						Pie.html(gFotos);	
						$(".Control")
                                .live("mouseover",function(){Imagen.Hover($(this),"2",true);})
                                .live("mouseout",function(){Imagen.Normal($(this),"2",true);});
								
								
								
                                /* Lista */
				
				var thumbList 	    = $("#ListaThumb");
				var botonSig		= $("#btnSiguiente");
				var botonAnt 		= $("#btnAnterior");
				var cbotonSig		= $("#btnSiguiente1");
				var cbotonAnt 		= $("#btnAnterior1");
				
				var thumbItems	 	= thumbList.find("a").length;
				var thumbWidth 		= thumbList.find("a:eq(0)").width();
				var mostrarItems    = 6;
				var itemsleft		= 0;
				var left			= 0;
				var CurrentFoto		= 0;
				
				thumbList.css({'width': (thumbItems*thumbWidth )+(thumbItems*(5*2))})
				$("#JOw-Slider").css({'width': (mostrarItems*thumbWidth )+(mostrarItems*(5*2))});
				
				var ArrayFotos = new Array();
				thumbList.find("a.Thumb").each(function(){
					ArrayFotos.push($(this).attr("href"));	
				})
				$.Preloads(ArrayFotos);
	
                var BtnActive = 0;    	          
				cbotonSig.click(function(){
					
						if( (CurrentFoto+1) < thumbItems ){
							if(BtnActive == 0){
								BtnActive = 1;
								CurrentFoto+=1;
								verFoto(CurrentFoto);	
							}
						}
						if(thumbItems-itemsleft != mostrarItems){
									itemsleft+=1;left-=thumbWidth+10;
									thumbList.animate({marginLeft:left},500);
						}
										 
					
				})
				cbotonAnt.click(function(){
					
						if(CurrentFoto != 0){	
							if(BtnActive == 0){
								BtnActive=1;
								CurrentFoto-=1;
								verFoto(CurrentFoto);
							}
						}
						if(thumbItems > 4){if(left!=0){
								left+=(thumbWidth+10);	
								thumbList.animate({marginLeft:left},500);
								itemsleft-=1;
						}}
					
				})
				
				/*Botones*/
					botonSig.click(function(){ // siguiente
						if(thumbItems > mostrarItems){
							if(BtnActive == 0){
								BtnActive=1;
								if(thumbItems-itemsleft != mostrarItems){
									itemsleft+=1;left-=thumbWidth+10;
									thumbList.animate({marginLeft:left},500);
									CurrentFoto+=1;
									verFoto(CurrentFoto);
								}
							}
						}
					});
					botonAnt.click(function(){ //anterior
						if(thumbItems > 4){if(left!=0){
								BtnActive=1;
								left+=(thumbWidth+10);	
								thumbList.animate({marginLeft:left},500);
								itemsleft-=1;
								CurrentFoto-=1;
								verFoto(CurrentFoto);
						}}
					});
				
				
				var verFoto = function(index){
					
							CurrentFoto = index;
							Contenido.fadeOut("fast",function(){
									Contenido.find("img").attr("src",$("#ListaThumb a:eq("+index+")").attr("href"));
									$("#ListaThumb a").css({'border-color':'#333',opacity:0.8});
									$("#ListaThumb a:eq("+index+")").css({'border-color':'white'}).fadeTo(200,1);
									
									Contenido.ready(function(){
										Contenido.fadeIn(500);					 
									});
									FotoActive = 0;
									BtnActive = 0;
							});		
					
				}	
					
				$("#ListaThumb a").click(function(){
					CurrentFoto = $("#ListaThumb a").index(this);
					verFoto(CurrentFoto);
					return false;
				})	
					
				$("#JOw-Galeria-Cerrar").click(function(){
					$("#JOw-Galeria").fadeOut("slow",function(){
						$(this).remove();
						$("#JOw-Mascara").fadeOut("fast").remove();
					})										
				})	
					
				verFoto(0);	
					})
				 
				
					
			}
			 $.verGalerias();
			 
			
		break;
	 }
	 	$(".tooltip").hide();
     	$(".linkTool").Tooltip({ofX:50,ofY:-80});
	 
})