Team:GeorgiaTech/mainPage

From 2013.igem.org

Revision as of 21:43, 27 September 2013

//Loads when the document is ready. $(document).ready(function() {

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

   //Binds the functions to the masks
   $("#logoMask").hover(
           function() {
               $("#gtLogo").show();
               $("#menu").show();
           },
           function() {
               $("#gtLogo").fadeOut();
               $("#menu").fadeOut();
           }
   );
   $("#logoMask").sidr({body: ""});
   $('#return').click(function() {
       $.sidr('close');
   });

   $(function() {
       var pop = function() {
           $('#screen').css({'width': $(document).width(), 'height': $(document).height()});
           $("#screen").fadeIn(2000, function() {
           });
           $('body').css({'overflow': 'hidden'});
           $('#box').fadeIn(3000, function() {
           });
           $("#screen").click(function() {
               $(this).css('display', 'none');
               $('#box').css('display', 'none');
           });
       };
       $("#bigCellMask").click(pop);
   });

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

   //Calls when the logo is fully loaded.
   var width = $(window).width();
   $("iframe").css({
       width: width * 0.5 + "px",
       height: width * 0.5 * 315 / 420 + "px"
   });
   $("p").addClass("text");
   var pos = $("#logo").offset();
   $("#gtLogo").css({
       width: "40%",
       position: "absolute",
       top: (pos.top + 80) + "px",
       left: pos.left-20 + "px"
   });
   $("#bigCell, #bigCellRest").css({
       width: "40%",
       position: "fixed",
       top: (pos.top + 80) + "px",
       left: pos.left-20 + "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 - 200) + "px"
   });

   $("#menu").css({
               'position': "absolute",
       'top': (pos.top + 100 + $("#logo").outerHeight()/2) + "px",
       'left': (pos.left +$("#logo").outerWidth()) + "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();
           }
   );

}

$(window).bind('resize', function() {

   resize();

});