function scrollHortizontial(newPos, max, slider){
	var contentDiv = $$('ul.slidercontent')[slider];
	var contentList = contentDiv.select('li');
	var width = 0;
	contentList.each(function(s){
		width += s.getWidth();
		width += parseInt(s.getStyle('marginLeft'));
		width += parseInt(s.getStyle('marginRight'));
	});
	width = width-$$('div.sliderbox')[slider].getWidth();
	var leftOffset = -1*(Math.round(newPos/max*width));
	contentDiv.style.left = leftOffset+"px";
}
function scrollVertical(newPos, scrollingContent, slider){
	scrollingContent.scrollTop = Math.round(newPos/slider.maximum*(scrollingContent.scrollHeight-scrollingContent.offsetHeight));
}
function scrollButton(newPos, sliderControl, slider){
	if (newPos >= 0 && newPos <= 100){
		if (sliderControl.value != 0 && newPos < 0){ newPos = 0; }
		if (sliderControl.value != 100 && newPos > 100){ newPos = 100; }
		sliderControl.setValue(newPos);
		scrollHortizontial(newPos, sliderControl.maximum, slider);
	}
}

// Declare our class
slideGallery = Class.create();

// Define our class
slideGallery.prototype = {
	//initialize()
	initialize: function(csb, index) {
		//Variables
		this.viewableWidth=0;
		this.contentWidth=0;
		this.offsetContentWidth=0;
		this.handle=$$('div.sliderhandle')[index];
		this.track=$$('div.slidertrack')[index];
		this.sliderControl=new Control.Slider(this.handle,this.track,{
			range: $R(0, 100),
			maximum: 100,
			axis:'horizontal',
			onSlide: function(newPos) { scrollHortizontial(newPos, this.maximum, index);  },
			onChange: function(newPos) { scrollHortizontial(newPos, this.maximum, index); }
		});

		// observe slider right button down
		Event.observe($$('div.slider-right')[index], 'mousedown', (function() {
			var tempSliderControl = this.sliderControl;
			$$('div.slider-right')[index].animationId=window.setInterval(function() {
				newPos = tempSliderControl.value+1;
				scrollButton(newPos, tempSliderControl, index);
			}, 30);
		}).bind(this), false);

		// observe slider right button up
		Event.observe($$('div.slider-right')[index], 'mouseup', (function() {
			window.clearInterval($$('div.slider-right')[index].animationId);
		}).bind(this), false);

		// observe slider left button down
		Event.observe($$('div.slider-left')[index], 'mousedown', (function() {
			var tempSliderControl = this.sliderControl;
			$$('div.slider-right')[index].animationId=window.setInterval(function() {
				newPos = tempSliderControl.value-2;
				scrollButton(newPos, tempSliderControl, index);
			}, 45);
		}).bind(this), false);

		// observe slider left button up
		Event.observe($$('div.slider-left')[index], 'mouseup', (function() {
			window.clearInterval($$('div.slider-right')[index].animationId);
		}).bind(this), false);
	}
}

// load slider object on page load
Event.observe(window, 'load', function() {
	var slideBoxes = $A($$('div.sliderbox'));
	slideBoxes.each(function(slide, index){
		new slideGallery(slide, index);
	});
}, false);