/* Warex3D Front-End Effects */


// var url_base = "http://" + location.host + "/dev";

var section_container_scroll_destroy = function ()
{
  var obj = $("#section-container").data("jsp");
  if (obj != undefined)
  {
    //console.log('destroying');
    obj.destroy();
  }
};

var section_container_scroll = function ()
{
  //console.log("settig load function...");
  $("#section-container img").bind('load', function() {
    
    section_container_scroll_destroy();
    //console.log("setting container height: " + $("body").height());
    $("#section-container").height($(window).height());
    $("#section-container").width($("#content").width() - 295);
    //console.log('creating jscrollpane');
    $("#section-container").jScrollPane();
  
  });
};

var show_section_container = function(load_function)
{
  
  //console.log("showing section container");
  $("body").css("overflow-y", "hidden");
  
  var content_properties =
  {
    paddingLeft: "0px"
  };
  
  var content_options = 
  {
    duration: "slow",
    complete: function()
    {
      
      var grid_properties = {
        width: 265,
        height: $(window).height()
      }
      
      var grid_options = {
        duration: "slow",
        complete: function () {
        
          //Agregamos un margen al último li del grid para que
          //no se oculte detrás del menú al hacer scrollbar
          $("#video-grid li").last().css("margin-bottom", "95px");
          
          //Agregamos el scrollbar
          $("#video-grid").jScrollPane({animateScroll: true});

          var content_width = $("#content").width();
          
          var section_properties = {
            width: content_width - 295,
          };

          var section_options = {
            duration: "slow",
            complete: load_function
            
          }
          
          //si estamos mostrando un video hacemos scroll a la posición del video
          if ($(".showing").size() > 0)
          {
            var position = $(".showing").index() * 160;
            var api = $("#video-grid").data("jsp");
            api.scrollToY(position);
          }
          
          //Tercero se anima el contenedor de la sección que se está cargando
          $("#section-container").animate(section_properties, section_options);
        }
      }
          
      //Segundo: se anima el listado de videos
      $("#section-container").css("display", "block");
      $("#video-grid").animate(grid_properties, grid_options);
    }
  };
  
  //Primero se anima el contenedor general
  $("#content").animate(content_properties, content_options);
}

var hide_section_container = function()
{
  
  $("#section-container").css("display","none");
  
  var section_properties = {
    width: 0
  };
  
  var section_options = {
    duration: "slow",
    complete: function() {
      var grid_properties = {
        width: "95%",
        height: "100%"
      };
      
      var grid_options = {
        duration: "slow",
        complete: function () {
          
          var content_properties = {
            paddingLeft: "100px"
          };
          
          var content_options = {
            duration: "slow"
          };
          
          //por último se anima el contenedor general
          $("#content").animate(content_properties, content_options);
        }
      };
      
      
      //Tercero, se anima el listado de videos
      $("#video-grid").data("jsp").destroy();
      
      //regresamos el margen original al último li
      $("#video-grid li").last().css("margin-bottom", "20px");
      $("#video-grid").animate(grid_properties, grid_options);
    }
  }
  
  //Segundo, se anima el contenedor de la sección que estaba visible
  $("#section-container").animate(section_properties, section_options);
  
  $("body").css("overflow-y", "auto");
  
}


$(window).resize(function(event){
  
  //si la sección de contenido es visible
  if ($("#section-container").width() != 0)
  {
    $("#video-grid").data("jsp").destroy();
    var grid = $("#video-grid");
    grid.css("height", $(window).height());
    grid.css("width", "265px");
    grid.jScrollPane({animateScroll: true});
    
    section_container_scroll_destroy();
    $("#section-container").height($(window).height());
    $("#section-container").width($("#content").width() - 295);
    //console.log('creating jscrollpane by resize');
    $("#section-container").jScrollPane();
  }
  
});


var removeShowing = function () 
{
  var video = $("#video-grid li.showing");
  video.removeClass("showing");
}

$(document).ready(function(){

//Animate Social Icons bar - begin
var show_icons = function ()
{
  $(this).animate({"top": "0px"}, "fast");
};
var hide_icons = function ()
{
  $(this).animate({"top": "-28px"}, "fast");
};
$("#social").hoverIntent(show_icons, hide_icons);
//Animate Social Icons bar - end

//Animate Video preview - begin
var bring_up = function()
{
  
  $(this).animate({
    backgroundColor: "#b2bc4e"
  }, "fast");

};

var send_down = function()
{
  $(this).animate({
    backgroundColor: "#000000"
  }, "fast");
};

var config = {
  over: bring_up,
  out: send_down,
  interval: 1,
  sensitivity: 1,
  timeout: 100
};
$("#video-grid li").hoverIntent(config);


//Show video
$("#video-grid a").click(function()
{
  
  //removeshowing
  removeShowing();
  $(this).parent().addClass("showing");  
  $("#options a").removeClass("active");
  
  //si el section-container aún no está visible
  if ($("#section-container").width() == 0)
    show_section_container();
  else
  {
    //scroll to this video
    var position = $(this).parent().index() * 160;
    var api = $("#video-grid").data("jsp")
    api.scrollToY(position);
  }

  var descriptionbox = function()
  {
    //console.log("loading video callback...");
    section_container_scroll();
    $("#video-description-link a").fancybox();
  }
  
  //loads video in section container using id from <a>
  var id = $(this).attr("id");
  //console.log("loading video...");
  $("#section-container").delay(1000).load("video/" + id + " #section-contents", descriptionbox);

});

var hide_contact_form = function ()
{
  contact_container = $("#contact-container");
  if (contact_container.css("display") != "none")
  {
    contact_container.css("display", "none"); 
    contact_container.empty();
    $("#overlay").css("display", "none");
  }
}



  
//---- Menu Options ----
  

//Menu Option: About
$("#about a").click(function(event)
{
  
  event.preventDefault();
 
  var load_about_section = function () {
    //console.log("pre-destroy");
    section_container_scroll_destroy();
    //console.log("loading about section...");
    $("#section-container").load("about/ #section-contents", section_container_scroll);
    $("#options a").removeClass("active");
    $("#about a").addClass("active");
    
  }

  hide_contact_form();
  if ($("#section-container").width() == 0)
    show_section_container(load_about_section);
  else
      load_about_section();

});
  
//Menu Option: Clients
$("#clients a").click(function(event)
{
  event.preventDefault();
  
  var load_clients_section = function() {
  
    //console.log("pre-destroy");
    section_container_scroll_destroy();
    //console.log("loading clients section...");
    $("#section-container").load("clients/ #section-contents", section_container_scroll);
    $("#options a").removeClass("active");
    $("#clients a").addClass("active");
  }
  
  
  hide_contact_form();
  if ($("#section-container").width() == 0)
    show_section_container(load_clients_section);
  else
    load_clients_section();

});

//Menu Option: Contact
$("#contact a").click(function(event)
{
  event.preventDefault();
  var contact_container = $("#contact-container");
  contact_container.load("contact/ #contact-contents", prepare_form);
  contact_container.css("display", "block").css("z-index", 100);
  $("#options a").removeClass("active");
  $("#contact a").addClass("active");
  
  var maxh = $("body").height();
  $("#overlay").css("z-index", 99).css("display", "block");
  
  
});


//Menu Option: Home (hide content area)
$("#home").click(function(event)
{
  event.preventDefault();
  hide_contact_form();
  removeShowing();
  if ($("#section-container").width() != 0)
  { 
    hide_section_container();
    $("#section-container").empty();
  }
  $("#options a").removeClass("active");
});
  
//Make menu float
//$("#menu").makeFloat({x: "current", y: "current", speed: "fast"});

$("#overlay").click(function()
{
  hide_contact_form();
});

  
}); //document ready