var initializeSliderBottom = function(){
   var $container = $("#sliderBottom"),
      $scrollPane = $(".scroll-pane", $container),
      $scrollContent = $(".scroll-content", $container),
      $buttonLeft = $(".scroll-button.left", $container),
      $buttonRight = $(".scroll-button.right", $container),
      $items = $(".scroll-item", $container),
//      settings = $.parseJSON($(".settings", $container).text()),
      contentWidth,
      containerWidth;

   var fixScrollContentWidth = function(){
      $scrollContent.width(function(index, width){
         contentWidth = $items.size() * $items.outerWidth(true);
         containerWidth = $scrollPane.width();

         if(contentWidth > containerWidth){
            width = contentWidth;
         }
         else {
            width = containerWidth;
         }
         return width;
      });
   }
   fixScrollContentWidth();

   var $scrollBar = $(".scroll-bar", $container).slider({
      slide: function(event, ui){
         slide(event, ui);
      }
      , change: function(event, ui){
         slide(event, ui);
      }
      , min: 0
      , step: $items.outerWidth(true)
      , max: ($scrollContent.width() - $scrollPane.width())
      , animate: true
   });
   $("a", $scrollBar).removeClass("ui-corner-all");

   function activate(selector){
      if($(selector).hasClass("inactive")){
         $(selector).stop().fadeTo("normal", 1).removeClass("inactive");
      }
   }
   function deactivate(selector){
      if(!$(selector).hasClass("inactive")){
         $(selector).stop().fadeTo("normal", 0.3).addClass("inactive");
      }
   }

   function loadMore(){
      if(!settings.load.stop){
         $.ajax({
            type: "post",
            dataType: "json",
            url: settings.load.url,
            success: function(data, textStatus, XMLHttpRequest){
               // add items to list
               // change scrollContent size
               // bind new slider value
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
               // do nothing?
               // add settings.load.stop if no more data is available
            },
            beforeSend: function(XMLHttpRequest){
               // show loader
            },
            complete: function(XMLHttpRequest, textStatus){
               // hide loader
            }
         });
      }
   }

   /**
    * Takes care of buttons behavior
    * and initiates loading more content
    */
   function handleButtons(value){
      if(contentWidth <= containerWidth){
         deactivate($buttonLeft.selector+","+$buttonRight.selector);
         return;
      }
      if(value == undefined){
         value = $scrollBar.slider("value");
      }

      if(value <= $scrollBar.slider("option", "min")){
         deactivate($buttonLeft);
         activate($buttonRight);
      } else if(value >= $scrollBar.slider("option", "max")){
         deactivate($buttonRight);
         activate($buttonLeft);
         // loadMore here?
//         loadMore();
      }
      else {
         activate($buttonLeft.selector+","+$buttonRight.selector);
      }
   }
   handleButtons();

   function slide(event, ui){
      if($scrollContent.width() > $scrollPane.width()){
         $scrollContent.stop();
         $scrollContent.animate({"margin-left": Math.round(ui.value * -1) + "px"}, "slow", "easeOutQuad");
      }
      handleButtons(ui.value);
   }

   var moveSlider = function(direction){
      var value = $scrollBar.slider("value");
      var step = $scrollBar.slider("option", "step");

      switch (direction){
         case "right":
            var max = $scrollBar.slider("option", "max");
            if(value < max){
               $scrollBar.slider("value", value + step);
            }
            break;
         case "left":
            var min = $scrollBar.slider("option", "min");
            if(value > min){
               $scrollBar.slider("value", value - step + (value % step));
            }
            break;
      }
   }

   /**
    * Buttons: left & right
    */
   $($buttonLeft.selector+","+$buttonRight.selector).bind("click dblclick", function(event){
      if(event.type == "dblclick"){
         return false;
      }
      direction = "right";
      if($(this).hasClass("left")){
         direction = "left";
      }
      moveSlider(direction);
   }).show();

   /**
    * Wheel
    */
   if($scrollContent.width() > $scrollPane.width()){
      $($container).mousewheel(function(event, delta) {
         if(delta > 0){
            moveSlider("left");
         } else if(delta < 0){
            moveSlider("right");
         }
         return false;
      });
   }

   /**
    * Desaturates and adds hover-colorize animation to list items
    */
   function addImgHoverSaturation(img){
      var canvas = img.clone().insertAfter(img).css({
         position: "absolute",
         top: 0,
         left: 0,
         display: "block"
      }).desaturate();
      img.parents("li").hover(function(){
         canvas.stop().animate({"opacity": 0});
      }, function(){
         canvas.stop().animate({"opacity": 1});
      });
   }
   $("img", $items.selector).each(function(){
      if(this.complete || this.readyState === 4){
         addImgHoverSaturation($(this));
      } else {
         $(this).load(function(){
            addImgHoverSaturation($(this));
         });
      }
   });

   $scrollPane.css("overflow", "hidden");
   $scrollBar.show();
}

//if(Cufon){
//   Cufon.replace("#sliderBottom .notice");
//}