$(document).ready(function() {
  //scrollpane parts
  var scrollPane = $( ".scroll-pane" ),
    scrollContent = $( ".scroll-content" ),
    scrollContentWidth = scrollContent.width(),
    scrollPaneWidth = scrollPane.width();
  
  
  
  function slideFluid( event, ui ) {
    if ( scrollContent.width() > scrollPane.width() ) {
      var offset = Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) );
      scrollContent.css( "margin-left", offset + "px" );
    } else {
      scrollContent.css( "margin-left", 0 );
    }
  }
  
  function slideStepped( event, ui ) {
    if ( scrollContent.width() > scrollPane.width() ) {
      var offset = ui.value * colWidth * -1;
      scrollContent.css( "margin-left", offset + "px" );
    } else {
      scrollContent.css( "margin-left", 0 );
    }
  }
  
  
  // stepped slider or fluid slider
  if (scrollPane.hasClass('stepped')) {
    var steps = $('.scroll-content .c').length;
    var colWidth = $('.scroll-content').data('colwidth') ? $('.scroll-content').data('colwidth') : Math.ceil( $('.scroll-content').width() / steps );
    var scrollbar = $( ".scroll-bar" ).slider({
      slide: slideStepped,
      change: slideStepped,
      min: 0,
      max: steps - 1 
    });
    $('a#scroll-bar-left-btn').mousedown( function() {
      scrollbar.slider('value', scrollbar.slider('value') - 1 );
      return false;
    });
    $('a#scroll-bar-right-btn').mousedown( function() {
      scrollbar.slider('value', scrollbar.slider('value') + 1 );
      return false;
    });
    scrollContent.mousewheel(function(e, delta) {
      var value = scrollbar.slider('value');
      scrollbar.slider('value', value - delta );
      return false;
    });    
  } else {
    var steps = false;
    var factor = 5;
    var scrollbar = $( ".scroll-bar" ).slider({
      slide: slideFluid,
      change: slideFluid
    });
    scrollContent.mousewheel(function(e, delta) {
      scrollbar.slider('value', scrollbar.slider('value') + ( delta  * factor * - 1 ) );
      return false;
    }); 
    $('#scroll-bar-left-btn').mousedown( function() {
      scrollbar.slider('value', scrollbar.slider('value') - factor );
      return false;
    });
    $('#scroll-bar-right-btn').mousedown( function() {
      scrollbar.slider('value', scrollbar.slider('value') + factor );
      return false;
    });
  }
  
  // handle swiping accordingly
  $('.scroll-content').swipe({
    allowPageScroll: 'vertical',
    swipeStatus: function(event, phase, direction, distance) {
      // stepped swiping or value swiping
      if ( !steps ) {
        if( phase=="move" && (direction=="left" || direction=="right") ) {
          var duration=0;
          var factor = ( direction == "left" ) ? 1 : -1; 
          scrollbar.slider('value', scrollbar.slider('value') + ( scrollPaneWidth / 100 * factor ) );
        }
      } else {
        // we wait for the end to slide
        if (phase=='end') {
          var factor = ( direction == "left" ) ? 1 : -1; 
          scrollbar.slider('value', scrollbar.slider('value') + ( 1 * factor ) ); 
        }        
      }
    },
    click: function(event, target) {
      if ( $(this).attr('href') ) {
        $(this).click();
      }
    }
  });
  
  
  //build slider
  
  //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" );
  
  //size scrollbar and handle proportionally to scroll distance
  function sizeScrollbar() {
    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 );
  }
  
  //reset slider value based on scroll content position
  function resetValue() {
    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 );
  }
  
  //if the slider is 100% and window gets larger, reveal content
  function reflowContent() {
      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 );
      }
  }
  
  //change handle position on window resize
  $( window ).resize(function() {
    resetValue();
    sizeScrollbar();
    reflowContent();
  }); 
  //init scrollbar size
  setTimeout( sizeScrollbar, 10 );//safari wants a timeout
});