Wiki/Team:GeorgiaTech/javascript/mainPage.js

From 2013.igem.org

$(document).ready(function() {

   $("#logo").load(reset);

   //Binds the functions to the masks
   $("#logoMask").hover(
           function() {
               $("#gtLogo").show();
               $("#menuText").show();
           },
           function() {
               $("#gtLogo, #menuText").fadeOut();
           }
   );
        $('#logoMask').sidr();

}); //Resets the positions of all the images function reset() {

   //Calls when the logo is fully loaded.
   var width = $(window).width();
   $("p").addClass("text");
   var pos = $("#logo").offset();
   $("#gtLogo").css({
       width: "39.7%",
       position: "absolute",
       top: (pos.top + 100) + "px",
       left: pos.left + "px"
   });
   $("#bigCell, #bigCellRest").css({
       width: "39.7%",
       position: "fixed",
       top: (pos.top + 100) + "px",
       left: pos.left + "px"
   });
   //Sets the properties of the mask that is over GT logo.
   $("#logoMask").css({
       'cursor': "pointer",
       position: "absolute",
       top: (pos.top + 100 + $("#logo").outerHeight() * 0.1) + "px",
       left: (pos.left + $("#logo").outerWidth() * 0.2) + "px"
   });
   $("#logoMask").height($("#logo").outerHeight() * 0.7 + "px");
   $("#logoMask").width($("#logo").outerWidth() * 0.8 + "px");
   $("#logoMask").children($("a")).css({
       'position': "absolute",
       'padding-left': $("#logoMask").outerWidth() + "px",
       'padding-right': $("#logoMask").outerWidth() + +"px",
       'padding-top': $("#logoMask").outerHeight() / 2 + "px",
       'padding-bottom': $("#logoMask").outerHeight() / 2 + "px"
   });

   //Sets the properties of the big cell mask
   $("#bigCellMask").css({
       'cursor': "pointer",
       'position': "absolute",
       'top': (pos.top + 100) + "px",
       'left': (pos.left) + "px"
   });

   $("#bigCellMask").show();

   $("#bigCellMask").height($("#logo").outerHeight() * 0.3 + "px");
   $("#bigCellMask").width($("#logo").outerWidth() * 0.5 + "px");
   $("#bigCellMask").children($("a")).css({
       'position': "absolute",
       'padding-left': $("#bigCellMask").outerWidth() + "px",
       'padding-right': $("#bigCellMask").outerWidth() + +"px",
       'padding-top': $("#bigCellMask").outerHeight() / 2 + "px",
       'padding-bottom': $("#bigCellMask").outerHeight() / 2 + "px"
   });

   $("#bigCellText").css({
       'position': "absolute",
       'top': (pos.top + 100) + "px",
       'left': (pos.left - 180) + "px"
   });
   $("#menuText").css({
       'position': "absolute",
       'top': (pos.top + 100) + "px",
       'left': (pos.left + width*0.35) + "px"  
   });
   $("#bigCellMask").hover(
           function() {
       pos = $("#logo").offset();
           $("#bigCell, #bigCellRest").css({
       width: "39.7%",
       position: "fixed",
       top: (pos.top + 100) + "px",
       left: pos.left + "px"
   });
               $("#logo, #logoMask").hide();
               $("#bigCell, #bigCellRest").show();
               $("#bigCell").transition({rotate: "+=10"}, 1000);
               $("#bigCellText").fadeIn();
           },
           function() {
               $("#bigCell").css({rotate: "-=10"});
               $("#bigCell, #bigCellRest").hide();
               $("#logo, #logoMask").show();
               $("#bigCellText").fadeOut();
           }
   );

   $("#bigCellMask").click(function() {
       if (!$("#objective").is(":visible")) {
           $("#sidr").show();
           $("#bigCellMask").unbind("mouseleave");
           $("#bigCellMask").unbind("mouseenter");
           $("#bigCell").transition({scale:0.7, rotate: "-=10", x: -width * 0.4, y: -100}, 860, 'ease');
           $("#bigCellMask, #bigCellRest").transition({scale:0.7, x: -width * 0.4, y:-100}, 1000, 'ease');

           $("#bigCellText").transition({x: width * 0.4, y: '-100'}, 1000, 'ease');
           $("#objective").css({
               position: "absolute",
               top: "150 px",
               left: (width * 0.5) + "px",
               width: width*0.4 + "px"
           });
           $("#objective").show();
       } else {
           $("#objective").hide();
           $("#bigCell, #bigCellRest").fadeOut();
           $("logo").delay("5000").fadeIn();
           location.reload();
       }
   });

}

$(window).bind('resize', function() { location.reload(); });