var slider;
var steps = 10000;

function makeScrollbar(content,scrollbar,handle){
  var scrollSize = content.getSize().scrollSize.x - content.getSize().size.x;
  handle.setStyle('width', Math.floor(content.getSize().size.x * (content.getSize().size.x/content.getSize().scrollSize.x)) + 'px');  
	slider = new Slider(scrollbar, handle, {	
		steps: steps,
		mode: 'horizontal',
		onChange: function(step){
			var x = scrollSize/(steps/step);
			content.scrollTo(x,0);
		}
	}).set(0);
}
		
window.addEvent('load', function(){
  var picturesWidth = 0;
  $('pictures').getChildren().each(function(el) {
   picturesWidth += el.getSize().size.x;
  });
  $('pictures').setStyle('width', picturesWidth + 'px');
  makeScrollbar( $('pictures_container'), $('scrollbar'), $('handle') );	
});

window.addEvent('resize', function(){
  var oldpos = slider.step;
  $('scrollbar').removeEvents('mousedown');
  $('handle').removeEvents('mousedown');
  makeScrollbar( $('pictures_container'), $('scrollbar'), $('handle') );	
	slider.set(oldpos);
});

var scroller = new Scroller('pictures_container', {
  area: 300,
  velocity: 0.1,
  onChange: function(x,y) {
    var scrollSize = $('pictures_container').getSize().scrollSize.x - $('pictures_container').getSize().size.x;
    var step = Math.round(steps/(scrollSize/x));
    slider.set(step);
  }
});

$('pictures_container').addEvent('mouseenter', scroller.start.bind(scroller));
$('pictures_container').addEvent('mouseleave', scroller.stop.bind(scroller));
// $('pictures_container').setStyle('overflow', 'hidden');

// var mySort = new Sortables($('pictures'));