$(document).ready(function(){
	$("#content-slider").slider({
		animate: true,
		change: handleSliderChange,
		slide: handleSliderSlide
    });
  
	$("#content-sliderV").slider({
		animate: true,
		change: handleSliderChangeV,
		slide: handleSliderSlideV,
		orientation: 'vertical',
		value: 100
	  });  
});

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

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

function handleSliderChangeV(e, ui)
{
  var maxScroll =
  $("#content-scrollV").attr("scrollHeight") -
  $("#content-scrollV").height();
  $("#content-scrollV").animate({scrollTop:
  (100-ui.value) * (maxScroll / 100) }, 1000);
}

function handleSliderSlideV(e, ui)
{
  var maxScroll =
  $("#content-scrollV").attr("scrollHeight") -
  $("#content-scrollV").height();
  $("#content-scrollV").attr({scrollTop:
  (100-ui.value) * (maxScroll / 100) });
}


(function($){

   var SliderVertical = function(element, o)
   {
       element = $(element);
       var obj = this;
       var s = $.extend({
          element: $(element),
          height: 300,
          width: 100, //needed if element is initially display:none
          heightContent: '',
          elSlider: '',
          elScroll: '',
          elHolder: ''
       }, o || {});

       //init
       this.init = function() {

        //getting height of element even if it's hidden initially
        $(element).clone().attr('id', 'sliderTempXXX').css({'position': 'absolute', 'top': 0, 'width': s.width, 'visibility': 'hidden'}).appendTo('body');
        s.heightContent = $('#sliderTempXXX').height();
        $('#sliderTempXXX').remove();

        //alert(s.heightContent + 'xxx' + s.height);

        if (s.heightContent > s.height) {

            $(element).append('<div class="content-slider">content slider</div>')
            .wrapInner('<div class="content-holder">')
            .wrapInner('<div class="content-scroll">');

            $(element).height(s.height).css({'padding-right': '22px', 'position': 'relative'})
            s.elSlider = $(element).find('.content-slider').height(s.height).css({'position': 'absolute', 'right':'2px', 'top':0, 'text-indent':'-9999px'});
            s.elScroll = $(element).find('.content-scroll').height(s.height).css({'overflow': 'hidden'});
            s.elHolder = $(element).find('.content-holder').height(s.heightContent);

            //alert($(element).html());

            function handleSliderChange(e, ui)
            {
              var maxScroll = $(s.elScroll).attr("scrollHeight") - $(s.elScroll).height();
              $(s.elScroll).animate({scrollTop:
              (100-ui.value) * (maxScroll / 100) }, 1000);
            }

            function handleSliderSlide(e, ui)
            {
              var maxScroll = $(s.elScroll).attr("scrollHeight") - $(s.elScroll).height();

              $(s.elScroll).attr({scrollTop:
              (100-ui.value) * (maxScroll / 100) });
            }

            $(s.elSlider).slider({
                animate: true,
                change: handleSliderChange,
                slide: handleSliderSlide,
                orientation: 'vertical',
                value: 100
            });
        }

       }

   };

  $.fn.sliderVertical = function(o)
   {
       return this.each(function()
       {

           var element = $(this);

           // Return early if this element already has a plugin instance
           if (element.data('sliderVertical')) return;

           // pass options to plugin constructor
           var sliderVertical = new SliderVertical(this, o);
           sliderVertical.init();

           // Store plugin object in this element's data
           element.data('sliderVertical', sliderVertical);


       });
   };
});