numImages=0;
currentImage=1;
currentPanel="none";

$(document).ready(function(){
    
    SelectButton("none");
	$("#flecha").fadeOut(0);
    
    $("#logo").click(function(){
		ShowPanel("none");
	});
    
    //Operaciones sobre los iconos
    $("#iconoNosotros").mouseenter(function(){
		SelectButton("nosotros");
	});
    
    $("#iconoPortafolio").mouseenter(function(){
		SelectButton("portafolio");
	});
    
    $("#iconoServicios").mouseenter(function(){
		SelectButton("servicios");
	});
    
    $("#iconoContacto").mouseenter(function(){
		SelectButton("contacto");
	});
    
    $("#iconoBlog").mouseenter(function(){
		SelectButton("blog");
	});
    
    $("#iconoNosotros, #iconoPortafolio, #iconoServicios, #iconoContacto, #iconoBlog").mouseleave(function(){
		SelectButton("none");
	});
    
    $("#iconoNosotros").click(function(){
		ShowPanel("nosotros");								 
	});
    
    $("#iconoPortafolio").click(function(){
		ShowPanel("portafolio");								 
	});
    
    $("#iconoServicios").click(function(){
		ShowPanel("servicios");								 
	});
    
    $("#iconoContacto").click(function(){
		ShowPanel("contacto");								 
	});
    
    $("#iconoBlog").click(function(){
		ShowPanel("blog");								 
	});
    
    //Calcula el ancho del contenedor de la galería
	$("#galeriaLista").children().each(function(){
		numImages++;									   
	});
	$("#imageWrapper").css({"width":(numImages*519)});
    
    //Botones previo y siguiente para la galería de imágenes
	$("#prevButton").click(function(){
		if (currentImage==1){
			currentImage=numImages;
		} else {
			currentImage--;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*519)},500);
	});
	$("#nextButton").click(function(){
		if (currentImage==numImages){
			currentImage=1;
		} else {
			currentImage++;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*519)},500);
	});
    
    //Inicia jQuery Fancybox
    $("a.sliderImage").fancybox({
		'zoomSpeedIn':200, 
		'zoomSpeedOut':200, 
		'overlayShow':true,
		'padding':4
	});
    
    //Controla la validación del formulario y la apariencia de los campos	
	$("#nombre").focus(function(){
		$("#nombre").css({"background-color":"#FFFFFF"});
		if ($("#nombre").val()=="nombre"){
			$("#nombre").val("");
			$("#nombre").css({"color":"#444444"});
		};
	});
	$("#nombre").blur(function(){
		if ($("#nombre").val()==""){
			$("#nombre").val("nombre");
			$("#nombre").css({"color":"#888888"});
			$("#nombre").css({"background-color":"#ffdddd"});
		};
	});
    $("#email").focus(function(){
		$("#email").css({"background-color":"#FFFFFF"});
		if ($("#email").val()=="email"){
			$("#email").val("");
			$("#email").css({"color":"#444444"});
		};
	});
	$("#email").blur(function(){
		if ($("#email").val()==""){
			$("#email").val("email");
			$("#email").css({"color":"#888888"});
			$("#email").css({"background-color":"#ffdddd"});
		};
		if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
			$("#email").css({"background-color":"#ffdddd"});
		};
	});
	$("#mensaje").focus(function(){
		$("#mensaje").css({"background-color":"#FFFFFF"});
		if ($("#mensaje").val()=="mensaje"){
			$("#mensaje").val("");
			$("#mensaje").css({"color":"#444444"});
		};
	});
	$("#mensaje").blur(function(){
		if ($("#mensaje").val()==""){
			$("#mensaje").val("mensaje");
			$("#mensaje").css({"color":"#888888"});
			$("#mensaje").css({"background-color":"#ffdddd"});
		};
	});
	$("#submit").mousedown(function(){
		$("#submit").attr({"src":"/public/images/boton_enviar_sel.png"});
	});
	$("#submit").mouseup(function(){
		$("#submit").attr({"src":"/public/images/boton_enviar_ok.png"});
	});
	$("#submit").mouseout(function(){
		$("#submit").attr({"src":"/public/images/boton_enviar_ok.png"});								
	});
	$("#nombre,#email,#mensaje").keyup(function(){
		if ($("#nombre").val()!="" && $("#nombre").val()!="nombre" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#mensaje").val()!="" && $("#mensaje").val()!="mensaje"){
			EnableSubmitButton();
		} else {
			DisableSubmitButton();
		};
	});
	$("#submit").click(function(){
		DisableSubmitButton();
        $("#enviandoMensaje").fadeIn(10);
		var dataString="nombre=" + $("#nombre").val() + "&email=" + $("#email").val() + "&mensaje=" + $("#mensaje").val();
		$.ajax({  
			type: "POST",  
			url: "/portada/mail",  
			data: dataString,  
			success: function() {
			    ResetForm();
                setTimeout('$("#enviandoMensaje").fadeOut(50);',3000);
                setTimeout('$("#mensajeEnviado").fadeIn(500);',3000);
				setTimeout('$("#mensajeEnviado").fadeOut(2000);',8000);
			}
		});
		return false; 
	});
    $("#resetFormulario").click(function(){
        ResetForm();
        return false;
    });
    
});

function ShowPanel(panel){
	currentPanel=panel;
	SelectButton(panel);
	$(".contenido").fadeOut(250);
		switch(panel){
			case "none":
				$("#wrapperContenido").animate({"left":"100%"},500);
				$("#flecha").fadeOut(50)
			break;
			case "nosotros":
				$("#wrapperContenido").animate({"left":"100%"},500,function(){
					$("#nosotrosContenido").show();
					$("#wrapperContenido").animate({"left":"40%"},500);
				});
				$("#flecha").animate({"top":22},150,function(){$("#flecha").fadeIn(50)});
			break;
            case "portafolio":
				$("#wrapperContenido").animate({"left":"100%"},500,function(){
					$("#portafolioContenido").show();
					$("#wrapperContenido").animate({"left":"40%"},500);
				});
				$("#flecha").animate({"top":95},150,function(){$("#flecha").fadeIn(50)});
			break;
            case "servicios":
				$("#wrapperContenido").animate({"left":"100%"},500,function(){
					$("#serviciosContenido").show();
					$("#wrapperContenido").animate({"left":"40%"},500);
				});
				$("#flecha").animate({"top":168},150,function(){$("#flecha").fadeIn(50)});
			break;
            case "contacto":
				$("#wrapperContenido").animate({"left":"100%"},500,function(){
					$("#contactoContenido").show();
					$("#wrapperContenido").animate({"left":"40%"},500);
				});
				$("#flecha").animate({"top":241},150,function(){$("#flecha").fadeIn(50)});
			break;
            case "blog":
				$("#wrapperContenido").animate({"left":"100%"},500,function(){
					$("#blogContenido").show();
					$("#wrapperContenido").animate({"left":"40%"},500);
				});
				$("#flecha").animate({"top":314},150,function(){$("#flecha").fadeIn(50)});
			break;
        };
};

function SelectButton(button){
	if (currentPanel!="nosotros"){
		$("#captionNosotros").animate({"left":50},{queue:false, duration:250});
		$("#captionNosotros").animate({"opacity":0},{queue:false, duration:250});
		$("#iconoNosotros").css({"background-position":"-8px 0px"});
	};
    if (currentPanel!="portafolio"){
		$("#captionPortafolio").animate({"left":50},{queue:false, duration:250});
		$("#captionPortafolio").animate({"opacity":0},{queue:false, duration:250});
		$("#iconoPortafolio").css({"background-position":"-8px 280px"});
	};
    if (currentPanel!="servicios"){
		$("#captionServicios").animate({"left":50},{queue:false, duration:250});
		$("#captionServicios").animate({"opacity":0},{queue:false, duration:250});
		$("#iconoServicios").css({"background-position":"-8px 207px"});
	};
    if (currentPanel!="contacto"){
		$("#captionContacto").animate({"left":50},{queue:false, duration:250});
		$("#captionContacto").animate({"opacity":0},{queue:false, duration:250});
		$("#iconoContacto").css({"background-position":"-8px 134px"});
	};
    if (currentPanel!="blog"){
		$("#captionBlog").animate({"left":50},{queue:false, duration:250});
		$("#captionBlog").animate({"opacity":0},{queue:false, duration:250});
		$("#iconoBlog").css({"background-position":"-8px 61px"});
	};
	switch(button){
		case "none":
		break;
		case "nosotros":
			$("#captionNosotros").animate({"left":65},{queue:false, duration:250});
			$("#captionNosotros").animate({"opacity":1},{queue:false, duration:250});
			$("#iconoNosotros").css({"background-position":"74px 0px"});
		break;
        case "portafolio":
			$("#captionPortafolio").animate({"left":65},{queue:false, duration:250});
			$("#captionPortafolio").animate({"opacity":1},{queue:false, duration:250});
			$("#iconoPortafolio").css({"background-position":"74px 280px"});
		break;
        case "servicios":
			$("#captionServicios").animate({"left":65},{queue:false, duration:250});
			$("#captionServicios").animate({"opacity":1},{queue:false, duration:250});
			$("#iconoServicios").css({"background-position":"74px 207px"});
		break;
        case "contacto":
			$("#captionContacto").animate({"left":65},{queue:false, duration:250});
			$("#captionContacto").animate({"opacity":1},{queue:false, duration:250});
			$("#iconoContacto").css({"background-position":"74px 134px"});
		break;
        case "blog":
			$("#captionBlog").animate({"left":65},{queue:false, duration:250});
			$("#captionBlog").animate({"opacity":1},{queue:false, duration:250});
			$("#iconoBlog").css({"background-position":"74px 61px"});
		break;
	};
};

function EnableSubmitButton(){
	$("#submit").attr({"disabled":""});
	$("#submit").attr({"src":"/public/images/boton_enviar_ok.png"});
    $("#submit").css({"cursor":"pointer"});
};

function DisableSubmitButton(){
	$("#submit").attr({"disabled":"disabled"});
	$("#submit").attr({"src":"/public/images/boton_enviar_ko.png"});
    $("#submit").css({"cursor":"default"});
};

function ResetForm(){
	DisableSubmitButton();
	$("#nombre, #email, #mensaje").css({"background-color":"#FFFFFF"});
	$("#nombre, #email, #mensaje").css({"color":"#888888"});
	$("#nombre").val("nombre");
	$("#email").val("email");
	$("#mensaje").val("mensaje");
};