$(document).ready(function(){

  var currentPosition = 0;
  var slideWidth = 800;
  var slideDuration = 1000;
  var numberOfSlides = 5;
  
  var slides = $('.slide');

  // 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 * numberOfSlides)+'px'
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

	// Set #slidesBottom width equal to total width of all slides
	$('#slidesBottom').css('width', (slideWidth * numberOfSlides) * 2);
  
  var slideShow = $('#slideshow');
  
  slideShow.append('<div id="imageDetails"></div>');
  
  slideShow.append('<div id="slideshowControls"></div>');
  for(var n = 0; n < numberOfSlides; n++) {
  	($('#slideshowControls')).append('<a class="control" id="ubiSlideshowImage'+n+'"></a>');
  	$('ubiSlideshowImage'+n).append('<span>'+n+'</span>');
  }
  
  // display initial image details and set active button
  var title = $('#title1');
  var subtitle = $('#subtitle1');
  $('#imageDetails').html(title.html() + subtitle.html());
  $('#ubiSlideshowImage0').addClass('active');

  // Create event listeners for .controls clicks
  $('.control').bind('click', function(e){
    // Determine new position
    var id = $(this).attr('id').substr(17);
    currentPosition = id;

    // Move slideInner using margin-left
    $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }, { duration: slideDuration });
    
    // Move slidesBottom in a similar manner
    $('#slidesBottom').animate({ 'marginLeft' : slideWidth*(-currentPosition) / 2 }, { duration: slideDuration });
      
    //change class of button
    $('.control').removeClass('active');
    $(this).addClass('active');
    e.stopPropagation();
  
    // display image details
    // var title = $('#title'+(parseInt(id)+1));
    // var subtitle = $('#subtitle'+(parseInt(id)+1));
    // $('#imageDetails').html(title.html() + subtitle.html());
  
  });

}); // end of ready

  
  $(window).load(function() {
  	$('#slideshow .slide img').each(function(index, e) {
		// we have to do a fade in as this will be triggered prior to the image
		// loading
		//$(e).css({'margin-left': parseInt(-($(e).width() / 2)), 'margin-top': parseInt(-($(e).height() / 2)) }).fadeIn(800);
		$(e).fadeIn(800);
		
	});

});