// Cuando el documento esté listo ...
$(document).ready(function()
{
  // Medida en pixeles que debe subir el menú. El cálculo se realiza entre el Top actual, el tamaño
  // de la imagen del título "Menú" y la altura actual del menú, que depende del listado del menú.
  //
  // 507 -> Top actual
  // 97  -> Imagen del título "Menú"
  // $("#menu").height() -> Nos retorna la altura del menú
  var menu_top = 507 + 91 - $("#menu").height();
  
  // Captura el valor de la propiedad top del div module_login
  var modlogin_top = $("#module_login").css('top').substr(0, $("#module_login").css('top').length-2);
  
  // Variable que lleva el actual div visualizado en la sección de contenidos
  var divactual = "inicio";
  
  // Variable que contiene el nombre del objeto actual, al cual se le ha invocado por un evento
  var objactual = "";
  
  // Si se encuentra el mouse sobre el menú
  $("#menu_container").mouseover(function()
  {
    aparecer("#menu", menu_top + "px");
  });
  
  // Si el mouse se encuentra fuera del menú
  $("#menu_container").mouseout(function()
  {
    desaparecer("#menu", menu_top + "px");
  });
  
  // Si hicieron click en el botón enviar, envía un correo con la información del contacto
  $("#enviar").click(function(){
    $.post('send.php', { nombre: $("#nombre").val(), titulo: "www.del.com.co", mail: $("#correo").val(), mensaje: $("#mensaje").val(), pais: $("#pais").val(), ciudad: $("#ciudad").val(), telefono: $("#telefono").val() }, function(data) {
      $.jGrowl("Gracias por contactarnos. Muy pronto alguno de nuestros asesores se comunicará con usted para atender sus sugerencias.", { life: 10000 });
    });
  });
  
  // Si hacen click a un tag <a>
  $("a").click(function(){
  
    // Si es un botón del menú
    if ($(this).attr('id').substr(0,3) == "btn")
    {
        // Obtenemos el id del objeto actual, al cual se le invocó el evento "click"
        objactual = $(this).attr('id').substr(4);
        
        // Cambiamos el título
        $("#titulo").html($(this).html());
        
	if ($(this).attr('id') == "btn_clientes")
		return true;
        // Ocultamos el div con el contenido actual
        $("#module_" + divactual).hide();
        
        // Si hay que mostrar el login, lo mostramos con el efecto rebote, sino, entonces mostramos el div que se desea visualizar
        if($(this).attr('id') == "btn_login")
            $("#module_login").stop(true,true).fadeIn(100).animate({top: (modlogin_top - 20) + "px"},100).animate({top: modlogin_top + "px"},100).animate({top: (modlogin_top - 20) + "px"},100).animate({top: modlogin_top + "px"},100).animate({top: (modlogin_top - 20) + "px"},100).animate({top: modlogin_top + "px"},100);
        else
            $("#module_" + objactual).fadeIn(100);
        
        // Ahora el div actual es el que se encuentra visualizado
        divactual = objactual;
    
        // No dejamos que redireccione el sitio
        return false;
    }
    
  });
  
  
  // Evento que permite desplegar el popup de inicio de sesión. En el momento se encuentra oculto
  $("#btn_login").hover(function(){
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
  }, function(){
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
  });

});
  
// Función que permite expander el menú hacia arriba. La cantidad de pixeles a subir
// depende del porcentaje que se encuentra en la variable caida
function aparecer(objeto, caida)
{
    // Anime desde marginTop: 507px hasta marginTop: 507px-302px el objeto "#menu"
    $(objeto).stop().animate({
      opacity: 1.0,
      top: caida,
    }, 500);
}
  
// Función que permite esconder el menú hacia abajo. La cantidad de pixeles a bajar
// depende del porcentaje que se encuentra en la variable caida
function desaparecer(objeto, caida)
{
    // Anime desde marginTop: 507px-307px hasta marginTop: 507px el objeto "#menu"
    $(objeto).stop().animate({
      opacity: '1.0',
      top: caida,
    }, 10 ).show().stop().animate({
      opacity: '1.0',
      top: "507px",
    }, 1000);
}