var SynapseSlider = Class.create();
SynapseSlider.prototype = {
	initialize: function(id, view_width, item_width) {
		var options = Object.extend({
			inPlace: false
		}, arguments[3] || {});

		// Initialize Class vars
		
		this.id 			= id;
		this.el 			= $(this.id).select('ul')[0];				
		this.view_width 	= view_width;
		this.item_width 	= item_width;			
		this.item_count 	= this.el.childElements('li').length;		
		this.width 			= (this.item_width * this.item_count) - this.view_width;
		
		this.options      	= options;
		
		// Auto play
		this.pauseLength 	= 100;
		this.timer 			= 1;
		this.isStopped 		= false;
		this.isMoving 		= false;
		this.play 			= true;
		
		
		// Add extra html elements
		
		this.begin = new Element('a', { 'class': 'start', href: '#', 'style': 'display: block;width: 18px;height: 16px;position: absolute;text-indent: -9999px;overflow: hidden;bottom: 4px;left: 2px;', id: this.id + '_start' }).update("Start");
		$(this.id).appendChild(this.begin);
		
		this.end = new Element('a', { 'class': 'end', href: '#', 'style': 'display: block;width: 18px;height: 16px;position: absolute;text-indent: -9999px;overflow: hidden;bottom: 4px;right: 2px;', id: this.id + '_end' }).update("End");
		$(this.id).appendChild(this.end);
		
		this.track = new Element('div', { 'class': 'track', 'style': 'width: 253px;height: 16px;position: absolute;bottom: 4px;left: 23px;', id: this.id + '_track' });
		this.handle = new Element('div', { 'class': 'handle', 'style': 'width: 51px;height: 14px;background: transparent url(/images/360_handle.gif) no-repeat;cursor: pointer;top: 1px;position: relative;', id: this.id + '_handle' });		
		this.track.appendChild(this.handle);
		$(this.id).appendChild(this.track);
		
		// Initialize Control.Slider
		
		this.slider = new Control.Slider(this.id + '_handle', this.id + '_track',{
			maximum: this.width,
			onSlide: function(v) {
				this.changePos(v);
				//this.stop();
			}.bind(this),
			onChange: function(v) {
				this.changePos(v);
			}.bind(this)
		});
		
		// Add observers for buttons
		
		Event.observe(this.id + '_start', 'click', function() {
				this.changePos(0);
				this.slider.setValue(0);
				//this.stop();
			}.bind(this)
		);
		
		Event.observe(this.id + '_end', 'click', function() {			
				this.changePos(1);
				this.slider.setValue(1);
				//this.stop();
			}.bind(this)
		);
		
		//this.start();
	},
	
	changePos: function(v) {
		if (this.options.inPlace) {
			this.el.style.left = '-' + (Math.floor((v * this.width)/this.item_width) * this.item_width) + 'px';
		} else {
			this.el.style.left = '-' + Math.floor(v * this.width) + 'px';
		}
		
		//this.timer = (this.timer+2 == this.item_count) ? 0 : this.timer+1;
		
		//$('debug').value = v;
		
		//this.slider.setValue(v);
	},
	
	start: function() {
		clearInterval(this.interval);
		this.isStopped = false;				
		this.interval = setInterval(function(){ this.changePos((this.timer * this.item_width)/this.width) }.bind(this), this.pauseLength);
	},
	
	stop: function() {
		this.isStopped = true;
		clearInterval(this.interval);
	},
	
	reset: function(){
		this.stop();
		this.start();
	}

};