Difference between revisions of "Template:Hong Kong HKUST/coverpageJS"

 
(54 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
     var $coverAboutTeam = $('#coverAboutTeam'),
 
     var $coverAboutTeam = $('#coverAboutTeam'),
 
         $coverAboutAttribution = $('#coverAboutAttribution'),
 
         $coverAboutAttribution = $('#coverAboutAttribution'),
−
         $coverAbout = $('#coverAbout');
+
         $coverAbout = $('#coverAbout'),
−
    $coverAboutAttribution.lettering();
+
        $coverProjectOverview = $('#coverProjectOverview'),
−
     $coverAboutTeam.lettering(); // wrap <span class="charx"/ > around each character within header
+
        $coverProjectIdea = $('#coverProjectIdea'),
−
     var $coverAboutTeamSpans = $coverAboutTeam.find('span'),
+
        $coverProjectResults = $('#coverProjectResults'),
 +
        $coverProject = $('#coverProject'),
 +
        $coverModelingModel = $('#coverModelingModel'),
 +
        $coverModelingStability = $('#coverModelingStability'),
 +
        $coverModeling = $('#coverModeling'),
 +
        $coverHPIntroduction = $('#coverHPIntroduction'),
 +
        $coverHPProduct = $('#coverHPProduct'),
 +
        $coverHPInfo = $('#coverHPInfo'),
 +
        $coverHPLearning = $('#coverHPLearning'),
 +
        $coverHP = $('#coverHP'),
 +
        $coverAchievementsParts = $('#coverAchievementsParts'),
 +
        $coverAchievementsMedal = $('#coverAchievementsMedal'),
 +
        $coverAchievements = $('#coverAchievements'),
 +
        $coverLabProtocol = $('#coverLabProtocol'),
 +
        $coverLabSafety = $('#coverLabSafety'),
 +
        $coverLab = $('#coverLab');
 +
 
 +
     $coverAboutAttribution.lettering(); // wrap <span class="charx"/ > around each character within the element
 +
    $coverAboutTeam.lettering();
 +
    $coverProjectOverview.lettering();
 +
    $coverProjectIdea.lettering();
 +
    $coverProjectResults.lettering();
 +
    $coverModelingModel.lettering();
 +
    $coverModelingStability.lettering();
 +
    $coverHPIntroduction.lettering();
 +
    $coverHPProduct.lettering();
 +
    $coverHPInfo.lettering();
 +
    $coverHPLearning.lettering();
 +
    $coverAchievementsParts.lettering();
 +
    $coverAchievementsMedal.lettering();
 +
    $coverLabProtocol.lettering();
 +
    $coverLabSafety.lettering();
 +
 
 +
     var $coverAboutTeamSpans = $coverAboutTeam.find('span'),                 //Get all letters in each subtaby as an array
 
         $coverAboutAttributionSpans = $coverAboutAttribution.find('span'),
 
         $coverAboutAttributionSpans = $coverAboutAttribution.find('span'),
−
         tlCoverAbout = new TimelineMax({
+
        $coverProjectOverviewSpans = $coverProjectOverview.find('span'),
−
            paused: true,
+
        $coverProjectIdeaSpans = $coverProjectIdea.find('span'),
−
            onStart: aboutArrowsAppear
+
        $coverProjectResultsSpans = $coverProjectResults.find('span'),
−
         }),
+
        $coverModelingModelSpans = $coverModelingModel.find('span'),
−
         $svgAbout = $('svg').drawsvg(),
+
        $coverModelingStabilitySpans = $coverModelingStability.find('span'),
−
         $aboutTab = document.getElementById("coverAboutTab"),
+
        $coverHPIntroductionSpans = $coverHPIntroduction.find('span'),
−
         p = 0
+
        $coverHPProductSpans = $coverHPProduct.find('span'),
−
         $coverWindowHeight = $(window).width();
+
        $coverHPInfoSpans = $coverHPInfo.find('span'),
−
         document.getElementById(#conetent).style.height = coverWindowHeight;
+
        $coverHPLearningSpans = $coverHPLearning.find('span'),
−
         arrowSel = 0;
+
        $coverAchievementsPartsSpans = $coverAchievementsParts.find('span'),
 +
        $coverAchievementsMedalSpans = $coverAchievementsMedal.find('span'),
 +
        $coverLabProtocolSpans = $coverLabProtocol.find('span'),
 +
        $coverLabSafetySpans = $coverLabSafety.find('span'),
 +
         tlCoverAbout = new TimelineMax({paused: true}),                //Declare animation timeline
 +
        tlCoverProject = new TimelineMax({paused: true}),
 +
        tlCoverModeling = new TimelineMax({paused: true}),
 +
         tlCoverHP = new TimelineMax({paused: true}),
 +
        tlCoverAchievements = new TimelineMax({paused: true}),
 +
        tlCoverLab = new TimelineMax({paused: true}),
 +
         $svgAbout = $('#svgAbout').drawsvg(),                //Initialise svg drawing (also hide them when page loads)
 +
        $svgProject = $('#svgProject').drawsvg(),
 +
         $svgModeling = $('#svgModeling').drawsvg(),
 +
         $svgHP = $('#svgHP').drawsvg(),
 +
         $svgAchievements = $('#svgAchievements').drawsvg(),
 +
        $svgLab = $('#svgLab').drawsvg(),
 +
        pAbout = 0,              //Arrows progress
 +
        pProject = 0,
 +
        pModeling = 0,
 +
        pHP = 0,
 +
        pAchi = 0,
 +
        pLab = 0,
 +
        aboutArrSel = 0,              //Directs arrows movement
 +
        projectArrSel = 0,
 +
        modelingArrSel = 0,
 +
        HPArrSel = 0,
 +
        achiArrSel = 0,
 +
        labArrSel = 0,
 +
        coverWindowHeight = $(window).height(),
 +
        tlPlayDelay,
 +
        aboutArrDisappearDelay,                //Variables for arrows shrinking
 +
        projectArrDisappearDelay,
 +
        modelingArrDisappearDelay,
 +
        HPArrDisappearDelay,
 +
        achiArrDisappearDelay,
 +
        labArrDisappearDelay,
 +
        tlDuration = 0.1;
 +
    var tlEntry = new TimelineMax(),
 +
        $circleContainer = $("#circleContainer"),
 +
        $tramWrapper = $("#tramWrapper")
 +
        $tram = $("#tram");
 +
 
 +
/*Strand centering and scaling*/
 +
        console.log(450/648*coverWindowHeight);
 +
         document.getElementById("content_wrapper").style.height = coverWindowHeight + "px";
 +
         var contentHeight = document.getElementById("content_wrapper").style.height;
 +
        console.log(contentHeight);
 +
        $circleContainer.css("transform", "scale("+coverWindowHeight/648+") translate(-50%, -50%)");
 +
 
 +
/*Animation*/
 +
//Entry animation
 +
    tlEntry
 +
        .from($circleContainer, 1, {scale:0.1, rotation:-180, ease:Power4.easeIn})
 +
        .to($circleContainer, 2, {autoAlpha: 1}, 0)
 +
        .fromTo($tramWrapper, 2, {autoAlpha:0}, {autoAlpha:0}, 0)
 +
        .to($tramWrapper, 2, {autoAlpha:1}, 1.1)
 +
        .from($tram, 2, {top:"-=150px", scale:0.1}, 1.1);
 +
//Staggered letters
 
     tlCoverAbout
 
     tlCoverAbout
−
         .staggerFrom($coverAboutTeamSpans, 0.1,  
+
         .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
−
            {left:"+=10px", autoAlpha:0.2}, 0.05, 0.8)
+
        .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
−
         .staggerFrom($coverAboutAttributionSpans, 0.1,  
+
    tlCoverProject
−
            {left:"+=10px", opacity:0.2}, 0.05, 0.8);
+
        .staggerFrom($coverProjectOverviewSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
−
     $("#coverAbout").click(function(){console.log(1);});
+
         .staggerFrom($coverProjectIdeaSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0)
 +
        .staggerFrom($coverProjectResultsSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
 +
    tlCoverModeling
 +
        .staggerFrom($coverModelingModelSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
 +
        .staggerFrom($coverModelingStabilitySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
 +
     tlCoverHP
 +
        .staggerFrom($coverHPIntroductionSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
 +
        .staggerFrom($coverHPProductSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0)
 +
        .staggerFrom($coverHPInfoSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
 +
        .staggerFrom($coverHPLearningSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
 +
    tlCoverAchievements
 +
        .staggerFrom($coverAchievementsPartsSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
 +
        .staggerFrom($coverAchievementsMedalSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
 +
    tlCoverLab
 +
        .staggerFrom($coverLabProtocolSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
 +
        .staggerFrom($coverLabSafetySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
 +
//Tab hover effect   
 
     $coverAbout.hover(
 
     $coverAbout.hover(
−
         function() {
+
         function(){
−
             console.log("its on");
+
             $("div",this).css("visibility", "visible");
−
            $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/4/4c/T--Hong_Kong_HKUST--singleStrand_focus.png) 0 0";
+
             coverHoverIn('About', '0 -365px');
−
             tlCoverAbout.play();
+
         },  
−
         },
+
         function(){coverHoverOut('About', '0 -365px');}
−
         function() {
+
−
            console.log("its off");
+
−
            tlCoverAbout.reverse();
+
−
            $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/5/52/T--Hong_Kong_HKUST--singleStrand.png) 0 0";
+
−
            setTimeout(aboutArrowsDisappear, 500);
+
−
        }
+
 
     );
 
     );
 +
    $coverProject.hover(
 +
        function(){
 +
            $("div",this).css("visibility", "visible");
 +
            coverHoverIn('Project', '0 -729px');
 +
        }, function(){coverHoverOut('Project', '0 -729px');}
 +
        );
 +
    $coverModeling.hover(
 +
        function(){
 +
            $("div",this).css("visibility", "visible");
 +
            coverHoverIn('Modeling', '0 -1093px');
 +
        },
 +
        function(){coverHoverOut('Modeling', '0 -1093px');}
 +
        );
 +
    $coverHP.hover(
 +
        function(){
 +
            $("div",this).css("visibility", "visible");
 +
            coverHoverIn('HP', '0 -1457px');
 +
        }, function(){coverHoverOut('HP', '0 -1457px');}
 +
        );
 +
    $coverAchievements.hover(
 +
        function(){
 +
            $("div",this).css("visibility", "visible");
 +
            coverHoverIn('Achievements', '-700px -366px');
 +
        },
 +
        function(){coverHoverOut('Achievements', '-700px -366px');}
 +
        );
 +
    $coverLab.hover(
 +
        function(){
 +
            $("div",this).css("visibility", "visible");
 +
            coverHoverIn('Lab', '-697px -729px');
 +
        },
 +
        function(){coverHoverOut('Lab', '-697px -729px');}
 +
        );
 +
//Functions called when hovering the tabs
 +
    function coverHoverIn(coverTab, DNAposition){
 +
        var $tab = document.getElementById("cover"+coverTab+"Tab");
 +
        $tab.style.background = "url(https://static.igem.org/mediawiki/2016/f/ff/T--Hong_Kong_HKUST--DNAStrandSpriteFocus.png)" + DNAposition;
 +
        switch (coverTab) {
 +
            case "About":
 +
                aboutArrSel = 1;
 +
                clearTimeout(aboutArrDisappearDelay);
 +
                if (pAbout == 100){tlCoverAbout.play();}
 +
                else {
 +
                    tlAboutDelay = setTimeout(function(){ tlCoverAbout.play(); }, 500-pAbout);
 +
                }
 +
                break;
 +
            case "Project":
 +
                projectArrSel = 1;
 +
                clearTimeout(projectArrDisappearDelay);
 +
                if (pProject == 100){tlCoverProject.play();}
 +
                else {tlProjectDelay = setTimeout(function(){ tlCoverProject.play(); }, 500-pProject);}
 +
                break;
 +
            case "Modeling":
 +
                modelingArrSel = 1;
 +
                clearTimeout(modelingArrDisappearDelay);
 +
                if (pModeling == 100){tlCoverModeling.play();}
 +
                else {
 +
                    tlModelingDelay = setTimeout(function(){ tlCoverModeling.play(); }, 500-pModeling);
 +
                }
 +
                break;
 +
            case "HP":
 +
                HPArrSel = 1;
 +
                clearTimeout(HPArrDisappearDelay);
 +
                if (pHP == 100){tlCoverHP.play();}
 +
                else {
 +
                    tlHPDelay = setTimeout(function(){ tlCoverHP.play(); }, 500-pHP);
 +
                }
 +
                break;
 +
            case "Achievements":
 +
                achiArrSel = 1;
 +
                clearTimeout(achiArrDisappearDelay);
 +
                if (pAchi == 100){tlCoverAchievements.play();}
 +
                else {
 +
                    tlAchiDelay = setTimeout(function(){ tlCoverAchievements.play(); }, 500-pAchi);
 +
                }
 +
                break;
 +
            case "Lab":
 +
                labArrSel = 1;
 +
                clearTimeout(labArrDisappearDelay);
 +
                if (pLab == 100){tlCoverLab.play();}
 +
                else {
 +
                    tlLabDelay = setTimeout(function(){ tlCoverLab.play(); }, 500-pLab);
 +
                }
 +
                break;
 +
        }
 +
    }
 +
    function coverHoverOut(coverTab, DNAposition){
 +
        var $tab = document.getElementById("cover"+coverTab+"Tab");
 +
        $tab.style.background = "url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png)" + DNAposition;
 +
        switch (coverTab) {
 +
            case "About":
 +
                var tlProgress = tlCoverAbout.progress();
 +
                tlCoverAbout.reverse();
 +
                clearTimeout(tlAboutDelay);
 +
                if (tlProgress == 0) {aboutArrSel = 0;}
 +
                else {
 +
                    aboutArrDisappearDelay = setTimeout(function(){ aboutArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
 +
                }
 +
                break;
 +
            case "Project":
 +
                var tlProgress = tlCoverProject.progress();
 +
                tlCoverProject.reverse();
 +
                clearTimeout(tlProjectDelay);
 +
                if (tlProgress == 0) {projectArrSel = 0;}
 +
                else {
 +
                    projectArrDisappearDelay = setTimeout(function(){ projectArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
 +
                }
 +
                break;
 +
            case "Modeling":
 +
                var tlProgress = tlCoverModeling.progress();
 +
                tlCoverModeling.reverse();
 +
                clearTimeout(tlModelingDelay);
 +
                if (tlProgress == 0) {modelingArrSel = 0;}
 +
                else {
 +
                    modelingArrDisappearDelay = setTimeout(function(){ modelingArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
 +
                }
 +
                break;
 +
            case "HP":
 +
                var tlProgress = tlCoverHP.progress();
 +
                tlCoverHP.reverse();
 +
                clearTimeout(tlHPDelay);
 +
                if (tlProgress == 0) {HPArrSel = 0;}
 +
                else {
 +
                    HPArrDisappearDelay = setTimeout(function(){ HPArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
 +
                }
 +
                break;
 +
            case "Achievements":
 +
                var tlProgress = tlCoverAchievements.progress();
 +
                tlCoverAchievements.reverse();
 +
                clearTimeout(tlAchiDelay);
 +
                if (tlProgress == 0) {achiArrSel = 0;}
 +
                else {
 +
                    achiArrDisappearDelay = setTimeout(function(){ achiArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
 +
                }
 +
                break;
 +
            case "Lab":
 +
                var tlProgress = tlCoverLab.progress();
 +
                tlCoverLab.reverse();
 +
                clearTimeout(tlLabDelay);
 +
                if (tlProgress == 0) {labArrSel = 0;}
 +
                else {
 +
                    labArrDisappearDelay = setTimeout(function(){ labArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
 +
                }
 +
                break;
 +
        }
 +
    }
 +
//Update the arrows constantly
 
     var myArrow = setInterval(function(){  
 
     var myArrow = setInterval(function(){  
−
         if (arrowSel == 1) {
+
        drawAbout()
−
             if (p == 100) {}
+
        drawProject()
 +
        drawModeling()
 +
        drawHP()
 +
        drawAchi()
 +
        drawLab()
 +
    }, 1);
 +
//Functions controling the arrow drawing
 +
    function drawAbout(){
 +
         if (aboutArrSel == 1) {
 +
             if (pAbout == 100) {}
 
             else {
 
             else {
−
                 p+=1;
+
                 pAbout+=1;
−
                 $svgAbout.drawsvg('progress', p/100);
+
                 $svgAbout.drawsvg('progress', pAbout/100);          
−
                console.log(p);
+
 
             }
 
             }
 
         }
 
         }
−
         else if (arrowSel ==2){
+
         else if (aboutArrSel ==0){
−
             if (p == 0){}
+
             if (pAbout == 0){
 +
                if(tlCoverAbout.progress() == 0){
 +
                    $coverAbout.children(":first").siblings().css("visibility", "hidden");
 +
                }
 +
            }
 
             else {
 
             else {
−
                 p-=1;
+
                 pAbout-=1;
−
                 $svgAbout.drawsvg('progress', p/100);
+
                 $svgAbout.drawsvg('progress', pAbout/100);
−
                console.log(p);
+
 
             }
 
             }
 
         }
 
         }
−
    }, 1);
 
−
    function aboutArrowsAppear(){
 
−
        arrowSel = 1;
 
 
     }
 
     }
−
     function aboutArrowsDisappear(){
+
     function drawProject(){
−
         arrowSel = 2;
+
         if (projectArrSel == 1) {
 +
            if (pProject == 100) {}
 +
            else {
 +
                pProject+=1;
 +
                $svgProject.drawsvg('progress', pProject/100);           
 +
            }
 +
        }
 +
        else if (projectArrSel ==0){
 +
            if (pProject == 0){
 +
                if(tlCoverProject.progress() == 0){
 +
                    $coverProject.children(":first").siblings().css("visibility", "hidden");
 +
                }
 +
            }
 +
            else {
 +
                pProject-=1;
 +
                $svgProject.drawsvg('progress', pProject/100);
 +
            }
 +
        }
 +
    }
 +
    function drawModeling(){
 +
        if (modelingArrSel == 1) {
 +
            if (pModeling == 100) {}
 +
            else {
 +
                pModeling+=1;
 +
                $svgModeling.drawsvg('progress', pModeling/100);           
 +
            }
 +
        }
 +
        else if (modelingArrSel ==0){
 +
            if (pModeling == 0){
 +
                if(tlCoverModeling.progress() == 0){
 +
                    $coverModeling.children(":first").siblings().css("visibility", "hidden");
 +
                }
 +
            }
 +
            else {
 +
                pModeling-=1;
 +
                $svgModeling.drawsvg('progress', pModeling/100);
 +
            }
 +
        }
 +
    }
 +
    function drawHP(){
 +
        if (HPArrSel == 1) {
 +
            if (pHP == 100) {}
 +
            else {
 +
                pHP+=1;
 +
                $svgHP.drawsvg('progress', pHP/100);           
 +
            }
 +
        }
 +
        else if (HPArrSel ==0){
 +
            if (pHP == 0){
 +
                if(tlCoverHP.progress() == 0){
 +
                    $coverHP.children(":first").siblings().css("visibility", "hidden");
 +
                }
 +
            }
 +
            else {
 +
                pHP-=1;
 +
                $svgHP.drawsvg('progress', pHP/100);
 +
            }
 +
        }
 +
    }
 +
    function drawAchi(){
 +
        if (achiArrSel == 1) {
 +
            if (pAchi == 100) {}
 +
            else {
 +
                pAchi+=1;
 +
                $svgAchievements.drawsvg('progress', pAchi/100);           
 +
            }
 +
        }
 +
        else if (achiArrSel ==0){
 +
            if (pAchi == 0){
 +
                if(tlCoverAchievements.progress() == 0){
 +
                    $coverAchievements.children(":first").siblings().css("visibility", "hidden");
 +
                }
 +
            }
 +
            else {
 +
                pAchi-=1;
 +
                $svgAchievements.drawsvg('progress', pAchi/100);
 +
            }
 +
        }
 +
    }
 +
    function drawLab(){
 +
        if (labArrSel == 1) {
 +
            if (pLab == 100) {}
 +
            else {
 +
                pLab+=1;
 +
                $svgLab.drawsvg('progress', pLab/100);           
 +
            }
 +
        }
 +
        else if (labArrSel ==0){
 +
            if (pLab == 0){
 +
                if(tlCoverLab.progress() == 0){
 +
                    $coverLab.children(":first").siblings().css("visibility", "hidden");
 +
                }
 +
            }
 +
            else {
 +
                pLab-=1;
 +
                $svgLab.drawsvg('progress', pLab/100);
 +
            }
 +
        }
 
     }
 
     }
 +
//Tram animation
 +
    $('#tram')
 +
    .hover(function () {$(this).attr("src", "https://static.igem.org/mediawiki/2016/d/dd/T--Hong_Kong_HKUST--tram.gif");},
 +
        function () {$(this).attr("src", "https://static.igem.org/mediawiki/2016/7/74/T--Hong_Kong_HKUST--tram.png");});
 
});
 
});

Latest revision as of 08:28, 19 September 2016

$(document).ready(function(){ 

   var $coverAboutTeam = $('#coverAboutTeam'),
       $coverAboutAttribution = $('#coverAboutAttribution'),
       $coverAbout = $('#coverAbout'),
       $coverProjectOverview = $('#coverProjectOverview'),
       $coverProjectIdea = $('#coverProjectIdea'),
       $coverProjectResults = $('#coverProjectResults'),
       $coverProject = $('#coverProject'),
       $coverModelingModel = $('#coverModelingModel'),
       $coverModelingStability = $('#coverModelingStability'),
       $coverModeling = $('#coverModeling'),
       $coverHPIntroduction = $('#coverHPIntroduction'),
       $coverHPProduct = $('#coverHPProduct'),
       $coverHPInfo = $('#coverHPInfo'),
       $coverHPLearning = $('#coverHPLearning'),
       $coverHP = $('#coverHP'),
       $coverAchievementsParts = $('#coverAchievementsParts'),
       $coverAchievementsMedal = $('#coverAchievementsMedal'),
       $coverAchievements = $('#coverAchievements'),
       $coverLabProtocol = $('#coverLabProtocol'),
       $coverLabSafety = $('#coverLabSafety'),
       $coverLab = $('#coverLab');

   $coverAboutAttribution.lettering(); // wrap  around each character within the element
   $coverAboutTeam.lettering();
   $coverProjectOverview.lettering();
   $coverProjectIdea.lettering();
   $coverProjectResults.lettering();
   $coverModelingModel.lettering();
   $coverModelingStability.lettering();
   $coverHPIntroduction.lettering();
   $coverHPProduct.lettering();
   $coverHPInfo.lettering();
   $coverHPLearning.lettering();
   $coverAchievementsParts.lettering();
   $coverAchievementsMedal.lettering();
   $coverLabProtocol.lettering();
   $coverLabSafety.lettering();

   var $coverAboutTeamSpans = $coverAboutTeam.find('span'),                 //Get all letters in each subtaby as an array
       $coverAboutAttributionSpans = $coverAboutAttribution.find('span'),
       $coverProjectOverviewSpans = $coverProjectOverview.find('span'),
       $coverProjectIdeaSpans = $coverProjectIdea.find('span'),
       $coverProjectResultsSpans = $coverProjectResults.find('span'),
       $coverModelingModelSpans = $coverModelingModel.find('span'),
       $coverModelingStabilitySpans = $coverModelingStability.find('span'),
       $coverHPIntroductionSpans = $coverHPIntroduction.find('span'),
       $coverHPProductSpans = $coverHPProduct.find('span'),
       $coverHPInfoSpans = $coverHPInfo.find('span'),
       $coverHPLearningSpans = $coverHPLearning.find('span'),
       $coverAchievementsPartsSpans = $coverAchievementsParts.find('span'),
       $coverAchievementsMedalSpans = $coverAchievementsMedal.find('span'),
       $coverLabProtocolSpans = $coverLabProtocol.find('span'),
       $coverLabSafetySpans = $coverLabSafety.find('span'),
       tlCoverAbout = new TimelineMax({paused: true}),                 //Declare animation timeline
       tlCoverProject = new TimelineMax({paused: true}),
       tlCoverModeling = new TimelineMax({paused: true}),
       tlCoverHP = new TimelineMax({paused: true}),
       tlCoverAchievements = new TimelineMax({paused: true}),
       tlCoverLab = new TimelineMax({paused: true}),
       $svgAbout = $('#svgAbout').drawsvg(),                //Initialise svg drawing (also hide them when page loads)
       $svgProject = $('#svgProject').drawsvg(),
       $svgModeling = $('#svgModeling').drawsvg(),
       $svgHP = $('#svgHP').drawsvg(),
       $svgAchievements = $('#svgAchievements').drawsvg(),
       $svgLab = $('#svgLab').drawsvg(),
       pAbout = 0,               //Arrows progress
       pProject = 0,
       pModeling = 0,
       pHP = 0,
       pAchi = 0,
       pLab = 0,
       aboutArrSel = 0,               //Directs arrows movement
       projectArrSel = 0,
       modelingArrSel = 0,
       HPArrSel = 0,
       achiArrSel = 0,
       labArrSel = 0,
       coverWindowHeight = $(window).height(),
       tlPlayDelay,
       aboutArrDisappearDelay,                //Variables for arrows shrinking
       projectArrDisappearDelay,
       modelingArrDisappearDelay,
       HPArrDisappearDelay,
       achiArrDisappearDelay,
       labArrDisappearDelay,
       tlDuration = 0.1;
   var tlEntry = new TimelineMax(),
       $circleContainer = $("#circleContainer"),
       $tramWrapper = $("#tramWrapper")
       $tram = $("#tram");

/*Strand centering and scaling*/ 

       console.log(450/648*coverWindowHeight);
       document.getElementById("content_wrapper").style.height = coverWindowHeight + "px";
       var contentHeight = document.getElementById("content_wrapper").style.height;
       console.log(contentHeight);
       $circleContainer.css("transform", "scale("+coverWindowHeight/648+") translate(-50%, -50%)");

/*Animation*/ //Entry animation 

   tlEntry
       .from($circleContainer, 1, {scale:0.1, rotation:-180, ease:Power4.easeIn})
       .to($circleContainer, 2, {autoAlpha: 1}, 0)
       .fromTo($tramWrapper, 2, {autoAlpha:0}, {autoAlpha:0}, 0)
       .to($tramWrapper, 2, {autoAlpha:1}, 1.1)
       .from($tram, 2, {top:"-=150px", scale:0.1}, 1.1);

//Staggered letters 

   tlCoverAbout
       .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverProject
       .staggerFrom($coverProjectOverviewSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverProjectIdeaSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0)
       .staggerFrom($coverProjectResultsSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverModeling
       .staggerFrom($coverModelingModelSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverModelingStabilitySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverHP
       .staggerFrom($coverHPIntroductionSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverHPProductSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0)
       .staggerFrom($coverHPInfoSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverHPLearningSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverAchievements
       .staggerFrom($coverAchievementsPartsSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverAchievementsMedalSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverLab
       .staggerFrom($coverLabProtocolSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverLabSafetySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);

//Tab hover effect 

   $coverAbout.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('About', '0 -365px');
       }, 
       function(){coverHoverOut('About', '0 -365px');}
   );
   $coverProject.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('Project', '0 -729px');
       }, function(){coverHoverOut('Project', '0 -729px');}
       );
   $coverModeling.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('Modeling', '0 -1093px');
       }, 
       function(){coverHoverOut('Modeling', '0 -1093px');}
       );
   $coverHP.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('HP', '0 -1457px');
       }, function(){coverHoverOut('HP', '0 -1457px');}
       );
   $coverAchievements.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('Achievements', '-700px -366px');
       }, 
       function(){coverHoverOut('Achievements', '-700px -366px');}
       );
   $coverLab.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('Lab', '-697px -729px');
       }, 
       function(){coverHoverOut('Lab', '-697px -729px');}
       );

//Functions called when hovering the tabs 

   function coverHoverIn(coverTab, DNAposition){
       var $tab = document.getElementById("cover"+coverTab+"Tab");
       $tab.style.background = "url(T--Hong_Kong_HKUST--DNAStrandSpriteFocus.png)" + DNAposition;
       switch (coverTab) {
           case "About":
               aboutArrSel = 1;
               clearTimeout(aboutArrDisappearDelay);
               if (pAbout == 100){tlCoverAbout.play();}
               else {
                   tlAboutDelay = setTimeout(function(){ tlCoverAbout.play(); }, 500-pAbout);
               }
               break;
           case "Project":
               projectArrSel = 1;
               clearTimeout(projectArrDisappearDelay);
               if (pProject == 100){tlCoverProject.play();}
               else {tlProjectDelay = setTimeout(function(){ tlCoverProject.play(); }, 500-pProject);}
               break;
           case "Modeling":
               modelingArrSel = 1;
               clearTimeout(modelingArrDisappearDelay);
               if (pModeling == 100){tlCoverModeling.play();}
               else {
                   tlModelingDelay = setTimeout(function(){ tlCoverModeling.play(); }, 500-pModeling);
               }
               break;
           case "HP":
               HPArrSel = 1;
               clearTimeout(HPArrDisappearDelay);
               if (pHP == 100){tlCoverHP.play();}
               else {
                   tlHPDelay = setTimeout(function(){ tlCoverHP.play(); }, 500-pHP);
               }
               break;
           case "Achievements":
               achiArrSel = 1;
               clearTimeout(achiArrDisappearDelay);
               if (pAchi == 100){tlCoverAchievements.play();}
               else {
                   tlAchiDelay = setTimeout(function(){ tlCoverAchievements.play(); }, 500-pAchi);
               }
               break;
           case "Lab":
               labArrSel = 1;
               clearTimeout(labArrDisappearDelay);
               if (pLab == 100){tlCoverLab.play();}
               else {
                   tlLabDelay = setTimeout(function(){ tlCoverLab.play(); }, 500-pLab);
               }
               break;
       }
   }
   function coverHoverOut(coverTab, DNAposition){
       var $tab = document.getElementById("cover"+coverTab+"Tab");
       $tab.style.background = "url(T--Hong_Kong_HKUST--DNAStrandSprite.png)" + DNAposition;
       switch (coverTab) {
           case "About":
               var tlProgress = tlCoverAbout.progress();
               tlCoverAbout.reverse();
               clearTimeout(tlAboutDelay);
               if (tlProgress == 0) {aboutArrSel = 0;}
               else {
                   aboutArrDisappearDelay = setTimeout(function(){ aboutArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "Project":
               var tlProgress = tlCoverProject.progress();
               tlCoverProject.reverse();
               clearTimeout(tlProjectDelay);
               if (tlProgress == 0) {projectArrSel = 0;}
               else {
                   projectArrDisappearDelay = setTimeout(function(){ projectArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "Modeling":
               var tlProgress = tlCoverModeling.progress();
               tlCoverModeling.reverse();
               clearTimeout(tlModelingDelay);
               if (tlProgress == 0) {modelingArrSel = 0;}
               else {
                   modelingArrDisappearDelay = setTimeout(function(){ modelingArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "HP":
               var tlProgress = tlCoverHP.progress();
               tlCoverHP.reverse();
               clearTimeout(tlHPDelay);
               if (tlProgress == 0) {HPArrSel = 0;}
               else {
                   HPArrDisappearDelay = setTimeout(function(){ HPArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "Achievements":
               var tlProgress = tlCoverAchievements.progress();
               tlCoverAchievements.reverse();
               clearTimeout(tlAchiDelay);
               if (tlProgress == 0) {achiArrSel = 0;}
               else {
                   achiArrDisappearDelay = setTimeout(function(){ achiArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "Lab":
               var tlProgress = tlCoverLab.progress();
               tlCoverLab.reverse();
               clearTimeout(tlLabDelay);
               if (tlProgress == 0) {labArrSel = 0;}
               else {
                   labArrDisappearDelay = setTimeout(function(){ labArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
       }
   }

//Update the arrows constantly 

   var myArrow = setInterval(function(){ 
       drawAbout()
       drawProject()
       drawModeling()
       drawHP()
       drawAchi()
       drawLab()
   }, 1);

//Functions controling the arrow drawing 

   function drawAbout(){
       if (aboutArrSel == 1) {
           if (pAbout == 100) {}
           else {
               pAbout+=1;
               $svgAbout.drawsvg('progress', pAbout/100);            
           }
       }
       else if (aboutArrSel ==0){
           if (pAbout == 0){
               if(tlCoverAbout.progress() == 0){
                   $coverAbout.children(":first").siblings().css("visibility", "hidden");
               }
           }
           else {
               pAbout-=1;
               $svgAbout.drawsvg('progress', pAbout/100);
           }
       }
   }
   function drawProject(){
       if (projectArrSel == 1) {
           if (pProject == 100) {}
           else {
               pProject+=1;
               $svgProject.drawsvg('progress', pProject/100);            
           }
       }
       else if (projectArrSel ==0){
           if (pProject == 0){
               if(tlCoverProject.progress() == 0){
                   $coverProject.children(":first").siblings().css("visibility", "hidden");
               }
           }
           else {
               pProject-=1;
               $svgProject.drawsvg('progress', pProject/100);
           }
       }
   }
   function drawModeling(){
       if (modelingArrSel == 1) {
           if (pModeling == 100) {}
           else {
               pModeling+=1;
               $svgModeling.drawsvg('progress', pModeling/100);            
           }
       }
       else if (modelingArrSel ==0){
           if (pModeling == 0){
               if(tlCoverModeling.progress() == 0){
                   $coverModeling.children(":first").siblings().css("visibility", "hidden");
               }
           }
           else {
               pModeling-=1;
               $svgModeling.drawsvg('progress', pModeling/100);
           }
       }
   }
   function drawHP(){
       if (HPArrSel == 1) {
           if (pHP == 100) {}
           else {
               pHP+=1;
               $svgHP.drawsvg('progress', pHP/100);            
           }
       }
       else if (HPArrSel ==0){
           if (pHP == 0){
               if(tlCoverHP.progress() == 0){
                   $coverHP.children(":first").siblings().css("visibility", "hidden");
               }
           }
           else {
               pHP-=1;
               $svgHP.drawsvg('progress', pHP/100);
           }
       }
   }
   function drawAchi(){
       if (achiArrSel == 1) {
           if (pAchi == 100) {}
           else {
               pAchi+=1;
               $svgAchievements.drawsvg('progress', pAchi/100);            
           }
       }
       else if (achiArrSel ==0){
           if (pAchi == 0){
               if(tlCoverAchievements.progress() == 0){
                   $coverAchievements.children(":first").siblings().css("visibility", "hidden");
               }
           }
           else {
               pAchi-=1;
               $svgAchievements.drawsvg('progress', pAchi/100);
           }
       }
   }
   function drawLab(){
       if (labArrSel == 1) {
           if (pLab == 100) {}
           else {
               pLab+=1;
               $svgLab.drawsvg('progress', pLab/100);            
           }
       }
       else if (labArrSel ==0){
           if (pLab == 0){
               if(tlCoverLab.progress() == 0){
                   $coverLab.children(":first").siblings().css("visibility", "hidden");
               }
           }
           else {
               pLab-=1;
               $svgLab.drawsvg('progress', pLab/100);
           }
       }
   }

//Tram animation 

   $('#tram')
   .hover(function () {$(this).attr("src", "T--Hong_Kong_HKUST--tram.gif");},
       function () {$(this).attr("src", "T--Hong_Kong_HKUST--tram.png");});

});