(function($) {

  "use strict";




  var configureSlideshow = function() {

    //scrollpane parts
  	var scrollPane = $(this).find( ".scroll-pane" ),
  		scrollContent = $(this).find( ".scroll-content" ),
  		scrollbar = $(this).find( ".scroll-bar" );

  	//build slider
  	scrollbar.slider({
  		slide: function( event, ui ) {
  			var margin = 0;
  			if ( scrollContent.width() > scrollPane.width() ) {
  				margin = Math.round(
  					ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
  				);
  			}

  			scrollContent.css( "margin-left", margin + "px" );
  		}
  	});

  	//append icon to handle
  	var handleHelper = scrollbar.find( ".ui-slider-handle" )
  	.mousedown(function() {
  		scrollbar.width( handleHelper.width() );
  	})
  	.mouseup(function() {
  		scrollbar.width( "100%" );
  	})
  	.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
  	.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();

  	//change overflow to hidden now that slider handles the scrolling
  	scrollPane.css( "overflow", "hidden" );

  	//change handle position on window resize
  	$( window ).resize(function() {
  		resetValue(scrollContent, scrollPane, scrollbar);
  		sizeScrollbar(scrollContent, scrollPane, scrollbar, handleHelper);
  		reflowContent(scrollContent, scrollPane, scrollbar);
  	});

  	//init scrollbar size
  	setTimeout( function() {
  	  sizeScrollbar(scrollContent, scrollPane, scrollbar, handleHelper);
  	}, 10 );//safari wants a timeout

  }



  //reset slider value based on scroll content position
  var resetValue = function(scrollContent, scrollPane, scrollbar) {
  	var remainder = scrollPane.width() - scrollContent.width();
  	var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
  		parseInt( scrollContent.css( "margin-left" ) );
  	var percentage = Math.round( leftVal / remainder * 100 );
  	scrollbar.slider( "value", percentage );
  }



  //size scrollbar and handle proportionally to scroll distance
  var sizeScrollbar = function(scrollContent, scrollPane, scrollbar, handleHelper) {
  	var remainder = scrollContent.width() - scrollPane.width();
  	var proportion = remainder / scrollContent.width();
  	var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
  	scrollbar.find( ".ui-slider-handle" ).css({
  		width: handleSize,
  		"margin-left": -handleSize / 2
  	});
  	handleHelper.width( "" ).width( scrollbar.width() - handleSize );
  }



  //if the slider is 100% and window gets larger, reveal content
  var reflowContent = function(scrollContent, scrollPane, scrollbar) {
  	var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
  	var gap = scrollPane.width() - showing;
  	if ( gap > 0 ) {
  		scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
  	}
  }



  $.fn.extend({configureSlideshow : configureSlideshow});



  //init
  $(function() {

    var slideshowSelectors = ['#slideshow1', '#slideshow2', '#slideshow3'],
      slideshowSelector,
      i;

    for (i in slideshowSelectors) {
      slideshowSelector = slideshowSelectors[i];
      $(slideshowSelector).configureSlideshow();
    }

  });

})(jQuery);