$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 1024;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  $('#slidewrapper').css('overflow', 'hidden');
  slides.wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : slideWidth});

  $('#slideInner').css('width', slideWidth * numberOfSlides + slideWidth);
  $('#slidewrapper').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');
  $('#slidewrapper').append('<div class="titleWrapper"></div>');
  
  $('.slide').each(function(index) {
	  theCounter = '<a href="#" id="i-'+ index +'" class="pip" title="' + $('h3',this).text() + '">'+ (index+1) +'</a>';
	  $('#slidewrapper .counter').append(theCounter);
  });  
  
  $('.slide').first().clone().appendTo('#slideInner').addClass('firstSlide');

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

  $('#slidewrapper .counter').wrapInner('<div class="wrap"></div>');
  
  // create event listeners for pip interactions
  $('.pip').hover(function(){
	  thisTitle = $(this).attr('title');
	  $('.titleWrapper').append('<div class="title">' + thisTitle + '</div>');
  }, function(){
	  $('.title').detach();
  });
  
  $('.pip').click(function(){
	 pipNumber = $(this).attr('id');
	 pipNumber = pipNumber.substr(2);
	 currentPosition = pipNumber; 
	 manageControls(currentPosition); 
	 
     // Move slideInner using margin-left
     $('#slideInner').animate({
    	 'marginLeft' : slideWidth*(-currentPosition)},
    	 'slow',
    	 'easeInOutQuart'
     );
     return false;
  });
  
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl') ? parseInt(currentPosition)+1 : parseInt(currentPosition)-1;
      if(currentPosition == numberOfSlides){
    	  rewindSlideshow();   	  
      } else if (currentPosition < numberOfSlides){
    	// Hide / show controls
          manageControls(currentPosition);
          // Move slideInner using margin-left
          $('#slideInner').animate({
        	  'marginLeft' : slideWidth*(-currentPosition)},
        	  'slow',
        	  'easeInOutQuart'
          ); 
      }      
    });

  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    if(position == 0){ 
    	$('#leftControl').hide();
    } else{ 
    	$('#leftControl').show() 
    }
    $('#rightControl').show(); 

    prevPos = position - 1;    
    currentCounter = '#i-'+position;
    prevCounter = '#i-'+prevPos;
    $('.pip').removeClass('current'); 
	$(currentCounter).addClass('current');
  }
  
  function rewindSlideshow(){   
		$('#slideInner').animate({
		  'marginLeft' : slideWidth*(-currentPosition)},
		  'slow',
		  'easeInOutQuart',function(){
			 $('#slideInner').css({'marginLeft':'0'});
		  }
		);
	    currentCounter = '#i-0'; 
	    $('.pip').removeClass('current'); 
		$(currentCounter).addClass('current');
		currentPosition = 0;
		position = 0;
		$('#leftControl').hide();
  }
  
});