/*
 * HorizontalSlider - jQuery Plugin
 * This plugin lets content slide with a horizontal slider
 * using jQuery UI, jQuery Mousewheel
 *
 * Copyright 2011, Ulrich Lehner
 *
 */
(function($) {
  $.fn.horizontalSlider = function(options) {
    
    // internal parameter
    var totalContainerWidth = 0;
    var containerElem;
    var wrapperElem;
    
    var settings = {
      autoHideScrollBar: true,
      debug: false,
      invertScroll: true,
      scrollBarId: "content-scroll-bar",
      scrollOffset: 5,
      wrapper: "<div class=\"horizontal-slider-wrapper\" />"
    };
    
    // internal functions
    sliderHandler = function(event, ui) {
      var contentPaneWidth = $(containerElem).width();
      var scrollOffset = Math.round(ui.value / 100 * (totalContainerWidth - contentPaneWidth))  * -1;
      $(wrapperElem).css({
        marginLeft: scrollOffset
      });
    };
    
    debug = function(msg) {
      if (settings.debug)
        console.log(msg);
    };
    
    // the fun starts
    return this.each(function() {
      if (options) {
        $.extend(settings, options);
      }
      
      // Setup CSS
      $(this).css({
        "overflow": "hidden",
        "position": "relative"
      });
      
      // Ensure that wrapper need no extra space      
      $(this).wrapInner($(settings.wrapper).css({
        "border-width": 0,
        "padding": 0,
        "margin": 0
      }));
      
      wrapperElem = $(this).children();

      // Calculate total width and heightfor container
      var maxHeight = 0;
      wrapperElem.children().each(function() {
        totalContainerWidth += $(this).outerWidth(true);
        if ($(this).outerHeight() > maxHeight) maxHeight = $(this).outerHeight();
      });
      
      $(wrapperElem).width(totalContainerWidth);
      $(wrapperElem).height(maxHeight);
      
      // Add a slider
      $("<div />").attr("id", settings.scrollBarId).css({
        "bottom": 25,
        "left": 20,
        "position": "absolute",
        "right": 20
      }).appendTo(this);
      
      // Init
      if (settings.autoHideScrollBar) {
        $("#" + settings.scrollBarId).hide();
        $(this).hover(function() {
          $("#" + settings.scrollBarId).show();
        }, function() {
          $("#" + settings.scrollBarId).hide();
        });
      }
      containerElem = this;
      
      // Event handler
      $(this).mousewheel(function(event, delta) {
        event.preventDefault();
        debug("delta=" + delta);
        var value = $("#" + settings.scrollBarId).slider("option", "value");
        value += delta*(settings.invertScroll?(-settings.scrollOffset):settings.scrollOffset);
        
        debug(value);
        
        if (value < 0) value = 0;
        if (value > 100) value = 100;
        
        $("#" + settings.scrollBarId).slider("option", "value", value);
      });
        
      
      $("#" + settings.scrollBarId).slider({
        slide:  function(event, ui) { sliderHandler(event, ui); },
        change: function(event, ui) { sliderHandler(event, ui); }
      });
    });
  };
})(jQuery);