Team:University College London/js/frontslide

From 2012.igem.org

$(document).ready(function(){

    var currentSlide = 1;
    var inTransition = false;
    function transition(newSlide){
           if((newSlide != currentSlide) && (inTransition == false)){
                 inTransition = true;
                 $('#bottle'+(newSlide-1)).unbind('mouseenter').unbind('mouseout').animate({opacity:1},1);
                 $('#bottle'+(currentSlide-1)).animate({opacity:0.4},1).mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);});
                 if(newSlide > currentSlide){
                       $('#slide'+newSlide).animate({left:'990px'},1).animate({left:'0px'},1000,"easeInOutCubic");
                       $('#slide'+currentSlide).animate({left:'0px'},5).animate({left:'-990px'},1000,"easeInOutCubic",function(){ currentSlide = newSlide; inTransition = false;  });
                 } else {
                       $('#slide'+newSlide).animate({left:'-990px'},1).animate({left:'0px'},1000,"easeInOutCubic");
                       $('#slide'+currentSlide).animate({left:'0px'},5).animate({left:'+990px'},1000,"easeInOutCubic",function(){ currentSlide = newSlide; inTransition = false;  });
                 }

           }
    }
     function pinHop(pin){
              if($('#pin'+pin).hasClass('animating') == false){
                  $('#pin'+pin).addClass('animating').animate({top:'-=15px'},200,function(){$('#pin'+pin).animate({top:'+=15px'},200,function(){$('#pin'+pin).removeClass('animating');});});
                  }
            if($('#pin'+pin+'shadow').hasClass('animating') == false){
                  $('#pin'+pin+'shadow').addClass('animating').animate({left:'+=12px',top:'-=12px'},200,function(){$('#pin'+pin+'shadow').animate({left:'-=12px',top:'+=12px'},200,function(){$('#pin'+pin+'shadow').removeClass('animating');});});
                  }
             }
     // bottle setup
     $('#bottle0').click(function(){transition(1);});
     $('#bottle1').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(2);});
     $('#bottle2').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(3);});
     $('#bottle3').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(4);});
     // Slide 1 setup
     $('#label1').hover(function(){pinHop(1);});
     $('#pin1').hover(function(){pinHop(1);});
     $('#label1').click(function(){transition(2);});
     $('#pin1').click(function(){transition(2);});
     $('#label2').hover(function(){pinHop(2);});
     $('#pin2').hover(function(){pinHop(2);});
     $('#label2').click(function(){transition(3);});
     $('#pin2').click(function(){transition(3);});
     $('#label3').hover(function(){pinHop(3);});
     $('#pin3').hover(function(){pinHop(3);});
     $('#label3').click(function(){$('#mapopen').fadeIn(300);});
     $('#mapopen').mouseout(function(){$('#mapopen').fadeOut(300);});
     $('#label4').hover(function(){pinHop(4);});
     $('#pin4').hover(function(){pinHop(4);});
    $('#label4').click(function(){transition(4);});
     $('#pin4').click(function(){transition(4);});


     $('#label5').hover(function(){pinHop(5);});
     $('#pin5').hover(function(){pinHop(5);});
     // Slide 2 setup
     $('#zoom1').mouseenter(function(){$('#popup1').show();}).mouseout(function(){$('#popup1').fadeOut(150);});
     $('#zoom2').mouseenter(function(){$('#popup2').show();}).mouseout(function(){$('#popup2').fadeOut(150);});
     $('#zoom3').mouseenter(function(){$('#popup3').show();}).mouseout(function(){$('#popup3').fadeOut(150);});
$('#s2back').mouseenter(function(){$('#s2back').animate({opacity:1},100);}).mouseout(function(){$('#s2back').animate({opacity:0.7},100);});
     $('#s2back').click(function(){$('#s2back').animate({opacity:0.7},100); transition(1);});
      //Slide 3 setup
     $('#s3back').mouseenter(function(){$('#s3back').animate({opacity:1},100);}).mouseout(function(){$('#s3back').animate({opacity:0.7},100);});
     $('#s3back').click(function(){$('#s3back').animate({opacity:0.7},100); transition(1);});
     $('#course1').mouseenter(function(){$('#line1').show();}).mouseout(function(){$('#line1').hide();});
     $('#course2').mouseenter(function(){$('#line2').show();}).mouseout(function(){$('#line2').hide();});
     $('#course3').mouseenter(function(){$('#line3').show();}).mouseout(function(){$('#line3').hide();});
     $('#course4').mouseenter(function(){$('#line4').show();}).mouseout(function(){$('#line4').hide();});
     $('#course5').mouseenter(function(){$('#line5').show();}).mouseout(function(){$('#line5').hide();});
     $('#course6').mouseenter(function(){$('#line6').show();}).mouseout(function(){$('#line6').hide();});
     $('#course7').mouseenter(function(){$('#line7').show();}).mouseout(function(){$('#line7').hide();});
     $('#course11').mouseenter(function(){$('#line1').show();}).mouseout(function(){$('#line1').hide();});
     $('#course22').mouseenter(function(){$('#line2').show();}).mouseout(function(){$('#line2').hide();});
     $('#course33').mouseenter(function(){$('#line3').show();}).mouseout(function(){$('#line3').hide();});
     $('#course44').mouseenter(function(){$('#line4').show();}).mouseout(function(){$('#line4').hide();});
     $('#course55').mouseenter(function(){$('#line5').show();}).mouseout(function(){$('#line5').hide();});
     $('#course66').mouseenter(function(){$('#line6').show();}).mouseout(function(){$('#line6').hide();});
     $('#course77').mouseenter(function(){$('#line7').show();}).mouseout(function(){$('#line7').hide();});
    
     //slide4 setup
     $('#s4back').mouseenter(function(){$('#s4back').animate({opacity:1},100);}).mouseout(function(){$('#s4back').animate({opacity:0.7},100);});
     $('#s4back').click(function(){$('#s4back').animate({opacity:0.7},100); transition(1);});
     $('#hover').mouseenter(function(){$('#tools').show();}).mouseout(function(){$('#tools').hide();});



      });