$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = setSlideWidth;
  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);
  $('#slidewrapper').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');
  
  $('.slide').each(function(index) {
	  theCounter = '<span id="i-'+ index +'" class="pip"></span>';
	  $('#slidewrapper .counter').append(theCounter);
  });  

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

  $('#slidewrapper .counter').wrapInner('<div class="wrap"></div>');
  
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
      
      // Hide / show controls
      manageControls(currentPosition);    
      
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

  // 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() 
    }
    prevPos = position - 1;    
    currentCounter = '#i-'+position;
    prevCounter = '#i-'+prevPos;
    
    $('.pip').removeClass('current'); 
	$(currentCounter).addClass('current');
  }
});