var $jq = jQuery.noConflict();
var width=0;
var maxScroll = 0;
var pos = 0;
var slwidth = 0;
$jq(document).ready(function(){
  var holder = $jq("#scrollerDemocontent-holder", $jq("#scrollerDemocontent-scroll"));
  var item = $jq(".scrollerDemocontent-item", $jq("#scrollerDemocontent-scroll"));
	
  //alert($jq('div.scrollerDemocontent-item').css('width'));
  
  $jq("div.scrollerDemocontent-item").each(function (i) {
        width = width + parseInt(this.style.width);
      });

  //set length of conveyor
  holder.css("width", width + "px" );
  //conveyor.css("width", item.length * parseInt(item.css("width")));	
  
  $jq("#scrollerDemocontent-slider").slider({
    animate: true,
    handle: ".scrollerDemocontent-slider-handle",
//    handle: ".scrollerDemocontent-slider-handle",
    change: handleSliderChange,
    slide: handleSliderSlide
  });
  maxScroll = $jq("#scrollerDemocontent-scroll").attr("scrollWidth") - $jq("#scrollerDemocontent-scroll").width();
  slwidth = $('#scrollerDemocontent-slider').width() - 48;
  
  $('#leftscroll').bind('click',function(){
    if(pos>0){
      if(pos - 5 < 0){
        pos = 0;
      }else{
        pos = pos - 5;
      }
      $jq('.scrollerDemocontent-slider-handle').css({left: (slwidth/100 * pos) +'px'});
      $jq("#scrollerDemocontent-scroll").animate({scrollLeft: pos * (maxScroll / 100) }, 10);
    }
  });
  $('#rightscroll').bind('click',function(){
    if(pos<100){
      if(pos + 5 > 100){
        pos = 100;
      }else{
        pos = pos + 5
      }
      $jq('.scrollerDemocontent-slider-handle').css({left: (slwidth/100 * pos) +'px'});
      $jq("#scrollerDemocontent-scroll").animate({scrollLeft: pos * (maxScroll / 100) }, 10);
    }
  });
});

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

function handleSliderSlide(e, ui)
{
  pos = $jq("#scrollerDemocontent-slider").slider('value');
  maxScroll = $jq("#scrollerDemocontent-scroll").attr("scrollWidth") - $jq("#scrollerDemocontent-scroll").width();
  $jq("#scrollerDemocontent-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

//$jq("#scrollerDemocontent-scroll").animate({scrollLeft: ui.value * ($jq("#scrollerDemocontent-scroll").attr("scrollWidth") - $jq("#scrollerDemocontent-scroll").width() / 100) }, 1000);