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

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
		.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  
	var controller_html ='<div class="slideshow_bindings">';
	controller_html += '<span class="slideshow_arrow" id="leftArrow">Clicking moves left</span>';
	controller_html += '<div class="bindings_picker">';
		
	for(i=0; i<numberOfSlides; i++){
		controller_html += '<span class="slideshow_picker" id="sld_pkr'+i+'">'
		controller_html += i+1;
		controller_html += '</span>';
	}
	
	controller_html += '</div>';
	controller_html += '<span class="slideshow_arrow" id="rightArrow">Clicking moves right</span>';
	controller_html += '</div>';
	
  // Insert controls in the DOM
  $('#content_header').append(controller_html);

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

  // Create event listeners for .controls clicks
  $('.slideshow_arrow')
    .bind('click', function(){
    // Determine new position
		currentPosition = ($(this).attr('id')=='rightArrow') ? currentPosition+1 : currentPosition-1;
		doAnimation(currentPosition);
  });
		
  $('.slideshow_picker')
    .bind('click', function(){
    // determine new position in array
		currentPosition = eval($(this).attr('id').substring(7));
		doAnimation(currentPosition);
  });		
	
	function doAnimation(currentPosition){
		// hide / show controls
    manageControls(currentPosition);
		
		// check current slide height ***** add-on;
		h = $('.slide:eq(' + currentPosition + ')').height();
		
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth * -currentPosition
    }, function() {
			// Animation complete.
		});
		
    setLayout();
		
	}

	function getSlideHeight(){
		h = $('.slide:eq(' + currentPosition + ')').height();
		h += parseInt($('.slide:eq(' + currentPosition + ')').css("padding-top"));
		h += parseInt($('.slide:eq(' + currentPosition + ')').css("padding-bottom"));
		h += parseInt($('.slide:eq(' + currentPosition + ')').css("margin-top"));
		h += parseInt($('.slide:eq(' + currentPosition + ')').css("margin-bottom"));
		return h;
	}

	function setLayout(){
		$('#slidesContainer').animate({'height' : getSlideHeight()});
		$('#slideshow').animate({'height' : getSlideHeight()});
	}
	
	setLayout();

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
		$('.slideshow_picker').removeClass('selected');
		$('#sld_pkr' + position).addClass('selected');
		
    // Hide left arrow if position is first slide
		if(position==0){ $('#leftArrow').hide() } else{ $('#leftArrow').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightArrow').hide() } else{ $('#rightArrow').show() }
  }
	
});