/*
This script is completely free and open source.
Inspired by EzSlide http://bizwidgets.biz/solutions/ezslide/
special thanks to briahn06 and insanekane
*/

var ProductSlider = new Class({
	Implements: Options,
	options: {
		products: 'productslider',
		slider: 'slider',
		knob: 'knob',
		offset: 0,
		set: 0,
		fxscroll: {
			wait: false,
			duration: 1500,
			transition: Fx.Transitions.Expo.easeOut
		}
	},
	initialize: function(options) {
		this.setOptions(options);
		this.products = $(this.options.products);
		this.ul = this.products.getElement('ul');
		this.ul.setStyle('width', 280 + this.ul.getElement('li').getStyle('width').toInt() * this.ul.getElements('li').length);
		this.pScroll = new Fx.Scroll(this.products, this.options.fxscroll);
		this.pSlide = new Slider($(this.options.slider), $(this.options.knob), {
			steps: this.ul.getElements('li').length-1,
			offset: this.options.offset,
			onChange: function(step){
				this.pScroll.toElement(this.products.getElements('li')[step]);
			}.bind(this)
		}).set(this.options.set);
	},
	move: function(where){
		this.pSlide.set(where);
	}
});

window.addEvent('domready', function() {
	
	$('slider').setStyle('display', 'block');
	var myProducts = new ProductSlider({set: 1});
	$('productslider').getElements('div').setStyles({'position': 'relative','left': 145});
	
});