var fx = null;

// TODO: slide forward by increasing speed, slide backward could be a problem
// TODO: alternative: slide to end, slide back to 0

var AutomaticSlider = Class.create();
Object.extend(AutomaticSlider.prototype, {
	initialize: function(id)
	{
		// default speed
		this._speed = 1;
		
		// set class variables
		this.id = id;
		this.slider = $(id);
		this.sliderWrapper = this.slider.parentNode;
		/*this.wrapper = this.sliderWrapper.parentNode; */
		this.slides = $$('#' + this.slider.id + ' li');
		
		// set slider width
		this.maxWidth = 0;
		this.arrayCounter = 0;
		this.counter = 0;
		var slideClass;
		
		this.slides.each(function(slide) { 
			this.maxWidth += slide.childNodes[0].offsetWidth + 5;
			slideClass = 'slide slide_' + this.counter++;
			Element.addClassName(slide, slideClass); 
		}.bind(this));
		this.slider.style.width = this.maxWidth + 'px';
		this.slider.style.left = "0px";
		
		this.showButtons();
		
		this.forwardButton = $$('#' + this.sliderWrapper.id + ' a.forward')[0];
		this.reverseButton = $$('#' + this.sliderWrapper.id + ' a.reverse')[0];

		Event.observe(this.forwardButton, 'mouseover', function(){ fx.cancel(); this.forward(5 * this._speed, 1); }.bind(this));
		Event.observe(this.forwardButton, 'mouseout', function(){ fx.cancel(); this.reverse(this._speed); }.bind(this));
		Event.observe(this.reverseButton, 'mouseover', function(){ fx.cancel(); this.reverse(5 * this._speed, 1); }.bind(this));
		Event.observe(this.reverseButton, 'mouseout', function(){ fx.cancel(); this.forward(this._speed); }.bind(this));
		
		// start sliding and set handlers
		this.forward(this._speed);
		this.setPauseHandler();
	},
	showButtons:function(){
		this.distance = this.slider.offsetWidth - this.sliderWrapper.offsetWidth;
		if(this.distance > 0) {
			$$('#' + this.sliderWrapper.id + ' .buttons').each(function(button){
				button.show();
			});
		} else {
			$$('#' + this.sliderWrapper.id + ' .buttons').each(function(button){
				button.hide();
			});
		}
		this.slider.style.left = "0px";
	},
	forward:function(speed, button){
			this.direction = "forward";
			if(parseInt(this.slider.style.left) <= -this.distance) {
				fx.cancel();
				this.slider.style.left = -this.distance + 5 + "px";
				if(!button) {
					this.reverse(speed);
				}
			} else { 
				fx = new Effect.Move(this.slider, {
					x: -speed, 
					mode: 'relative', 
					duration: 0, 
					delay: 0.03,
					afterFinish:function(){
						this.forward(speed, button)
					}.bind(this)
				});
			}
	},
	reverse:function(speed, button){
			this.direction = "reverse";
			if(parseInt(this.slider.style.left) >= 0) {
				fx.cancel();
				this.slider.style.left = "0px";
				if(!button) {
					this.forward(speed);
				}
			} else { 
				fx = new Effect.Move(this.slider, {
					x: speed, 
					mode: 'relative', 
					duration: 0, 
					delay: 0.03,
					afterFinish:function(){
						this.reverse(speed, button)
					}.bind(this)
				});
			}
	},
	setPauseHandler: function()
	{
		Event.observe(this.slider, 'mouseover', function(){ fx.cancel();});
		Event.observe(this.slider, 'mouseout', function(){
			if(this.direction == "forward") {
				this.forward(this._speed);
			} else {
				this.reverse(this._speed);
			}
		}.bind(this));
	}
});