"

From 2013.igem.org

$(function(){

   var numDivs = $('#wrapper div').size();
   

for (var i = 2; i <= numDivs; i++)

   {

$('#carousel-'+i).css('left',$('#wrapper').width()).show();

   }
   
   for (var i = 1; i <= numDivs; i++)
   {

$('').appendTo('#carousel-selector');

       $('#carousel-selector-' + i + ' a').css('display','block')
                                           .css('text-decoration','none'); 
       $('#carousel-selector-' + i).css('width','15px')
                                   .css('height','15px')
                                   .css('float','left')
                                   .css('background-color','#3399cc')
                                   .css('margin','8px')
                                   .css('opacity','0.5')
                                   .css('position','relative')
                                   .css('z-index','200')
                                   .click(showDiv(i))
                                   .hover(function () {
                                       $(this).css('opacity', '1');
                                   }, function (){
                                       $(this).css('opacity', '0.5');
                                   });
   }
   
   var highlightPosition = ($('#carousel-selector-1').position().left) + 4;
   
   $('#carousel-selector-highlight').css('left', highlightPosition);
   

var currentOpen = 1; var autoSwapInt = 5000; var frontPageInterval = setInterval(rotation, autoSwapInt);

   var direction = 'right';

$('#left-arrow').click(showPrev); $('#right-arrow').click(showNext);

   function rotation()
   {
       if(direction == 'right')
       {
           showNext();
       } else
       {
           showPrev();
       }
   }
   

function showNext()

   {

clearInterval(frontPageInterval);

$('#right-arrow').off('click'); $('#left-arrow').off('click');

var nextOpen;

if(currentOpen < numDivs) { nextOpen = currentOpen + 1;

           highlightPosition = ($('#carousel-selector-' + nextOpen).offset().left) - ($('#carousel-selector').offset().left) - 4;

$('#carousel-' + currentOpen).animate({'left':-$('#wrapper').width()}, 'medium', function(){

               $('#right-arrow').click(showNext);
               $('#left-arrow').click(showPrev);

}); $('#carousel-' + nextOpen).animate({'left':0}, 'medium');

           $('#carousel-selector-highlight').animate({'left':highlightPosition});

} else {

           nextOpen = numDivs;
           direction = 'left';
           $('#right-arrow').click(showNext);
           $('#left-arrow').click(showPrev);

}

currentOpen = nextOpen; frontPageInterval = setInterval(rotation, autoSwapInt); }

function showPrev()

   {

clearInterval(frontPageInterval);

$('#left-arrow').off('click'); $('#right-arrow').off('click');

var nextOpen;

if(currentOpen > 1) { nextOpen = currentOpen - 1;

           highlightPosition = ($('#carousel-selector-' + nextOpen).offset().left) - ($('#carousel-selector').offset().left) - 4;

$('#carousel-' + currentOpen).animate({'left':$('#wrapper').width()}, 'medium', function(){ $('#left-arrow').click(showPrev);

               $('#right-arrow').click(showNext);

}); $('#carousel-' + nextOpen).animate({'left':0});

           $('#carousel-selector-highlight').animate({'left':highlightPosition});

} else

       {
           $('#left-arrow').click(showPrev);
           $('#right-arrow').click(showNext);
           nextOpen = 1;
           direction = 'right';
       }

currentOpen = nextOpen; frontPageInterval = setInterval(rotation, autoSwapInt); }

   function showDiv(index)
   {
       return function()
       {
           //alert(index);
           
           clearInterval(frontPageInterval);
           $('#left-arrow').off('click');
           $('#right-arrow').off('click');
           if(index < currentOpen)
           {
               var temp = (index + 1)
               highlightPosition = ($('#carousel-selector-' + index).offset().left) - ($('#carousel-selector').offset().left) - 4;
               $('#carousel-' + currentOpen).animate({'left':$('#wrapper').width()}, 'medium', function(){
                   $('#left-arrow').click(showPrev);
                   $('#right-arrow').click(showNext);
                   while (temp < currentOpen)
                   {
                       $('#carousel-' + temp).css('left', $('#wrapper').width());
                       temp++;
                   }
                   currentOpen = index;
                   frontPageInterval = setInterval(rotation, autoSwapInt);
               });
               $('#carousel-' + index).animate({'left':0});
               $('#carousel-selector-highlight').animate({'left':highlightPosition});
           } else if (index > currentOpen)
           {
               var temp = (index - 1)
               highlightPosition = ($('#carousel-selector-' + index).offset().left) - ($('#carousel-selector').offset().left) - 4;
               $('#carousel-' + currentOpen).animate({'left':-$('#wrapper').width()}, 'medium', function(){
                   $('#left-arrow').click(showPrev);
                   $('#right-arrow').click(showNext);
                   while (temp > currentOpen)
                   {
                       $('#carousel-' + temp).css('left', -$('#wrapper').width());
                       temp--;
                   }
                   currentOpen = index;
                   frontPageInterval = setInterval(rotation, autoSwapInt);
               });
               $('#carousel-' + index).animate({'left':0});
               $('#carousel-selector-highlight').animate({'left':highlightPosition});
           } else
           {
               $('#left-arrow').click(showPrev);
               $('#right-arrow').click(showNext);
           }
           
       }
   }

});