/**
 * @author charlie.key
 */
$(document).ready(function() {
  var slider = $("#horz-scroller").slider({
    animate: true,
    handle: ".horz-scroller-handle",
    change: handleSliderChange,
    slide: handleSliderSlide
  });
  var curScroll = $("#horz-scroll-wrap").attr('scrollLeft');
  var maxScroll = $("#horz-scroll-wrap").attr("scrollWidth") - 
                  $("#horz-scroll-wrap").width();
  $("#horz-scroller").slider("option", "animate", false);
  $("#horz-scroller").slider("moveTo", curScroll / maxScroll * 100);
  $("#horz-scroller").slider("option", "animate", true);
});

function handleSliderChange(e, ui) {
  var maxScroll = $("#horz-scroll-wrap").attr("scrollWidth") - 
                  $("#horz-scroll-wrap").width();
  $("#horz-scroll-wrap").animate({
    scrollLeft: ui.value * (maxScroll / 100)
  }, 1000);
}

function handleSliderSlide(e, ui) {
  var maxScroll = $("#horz-scroll-wrap").attr("scrollWidth") - 
                  $("#horz-scroll-wrap").width();
  $("#horz-scroll-wrap").attr({
    scrollLeft: ui.value * (maxScroll / 100)
  });
}