$(document).ready(function(){

  if($('#reference').length > 0)
  {
    $('#reference ul li').children('.vcard').children('.photo').css('opacity', 0);
    $('#reference ul li').children('.vcard').children('.description').css('margin-left', 600);
    var currentPosition = 0;
    var slideWidth = '100%';
    var slides = $('#reference ul li');
    var numberOfSlides = slides.length;
    var myTimetout = null;
    var interval = 10000;
    
    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position){
      if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
      if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
    }

    function moveSlideClick(el)
    {
      $('.control').unbind('click');
    
      var position = currentPosition;
      $(slides[currentPosition]).children('.vcard').children('.photo').animate({
        'opacity' : 0
      }, 1000); 
      $(slides[currentPosition]).children('.vcard').children('.description').animate({
        'marginLeft' : 600
      }, 1000, function() {
        $(slides[position]).hide();
      });       
    
      // Determine new position
      currentPosition = ($(el).attr('id')=='rightControl') ? currentPosition + 1 : currentPosition - 1;

      // Hide / show controls
      manageControls(currentPosition);

      $(slides[currentPosition]).show();
      $(slides[currentPosition]).children('.vcard').children('.photo').animate({
        'opacity' : 1
      }, 1000);
      $(slides[currentPosition]).children('.vcard').children('.description').animate({
        'marginLeft' : 0
      }, 1000, function() {
        // Create event listeners for .controls clicks
        $('.control')
          .bind('click', function(){
            moveSlideClick($(this));
        });      
      });        
      
      clearTimeout(myTimetout);
      startTimeOut();
    }    

    function moveSlide()
    {
      $('.control').unbind('click');
    
      var position = currentPosition;
      $(slides[currentPosition]).children('.vcard').children('.photo').animate({
        'opacity' : 0
      }, 1000); 
      $(slides[currentPosition]).children('.vcard').children('.description').animate({
        'marginLeft' : 600
      }, 1000, function() {
        $(slides[position]).hide();
      });  
      
    
      // Determine new position
      if(currentPosition == numberOfSlides - 1)
        currentPosition = 0;
      else
        currentPosition = currentPosition + 1
        
      // Hide / show controls
      manageControls(currentPosition);        
 
      $(slides[currentPosition]).show();
      $(slides[currentPosition]).children('.vcard').children('.photo').animate({
        'opacity' : 1
      }, 1000);
      $(slides[currentPosition]).children('.vcard').children('.description').animate({
        'marginLeft' : 0
      }, 1000, function() {
        // Create event listeners for .controls clicks
        $('.control')
          .bind('click', function(){
            moveSlideClick($(this));
        });      
      });          
      
      clearTimeout(myTimetout);
      startTimeOut();
    }

    function startTimeOut()
    {
      myTimetout = setTimeout(
        function() {
          moveSlide();
        },
        interval
      );
    }
    
    // Insert controls in the DOM
    $('#reference').prepend('<div class="controls"></div>');
    $('#reference .controls')
      .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
      .append('<span class="control" id="rightControl">Clicking moves right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control')
      .bind('click', function(){
        moveSlideClick($(this));
    }); 

    $(slides[0]).show();
    $(slides[0]).children('.vcard').children('.photo').css('opacity', 1);
    $(slides[0]).children('.vcard').children('.description').css('margin-left', 0);
    startTimeOut();
  }

});