document.observe('dom:loaded', function(){
	$$('.product_showcase').each(function(container) {
		
		var hl = function(el) { el.style.border = '1px solid red'; }
		
		var prev_handle = container.down('.previous');
		var next_handle = container.down('.next');
		var showcase = container.down('.showcase');
		var table = showcase.down('table');
		var grid_width = 140;
		var locked = false;
		var timer = -1;
		var lock_handles = function() {
			locked = true;
		}
		var mover = -1;
		var unlock_handles = function() {
			locked = false;
			prev_handle.setOpacity(table.offsetLeft < 0 ? 1 : 0.2);
			next_handle.setOpacity(table.offsetWidth - showcase.offsetWidth + table.offsetLeft >= grid_width ? 1 : 0.2);
		}
		unlock_handles();
		
		var prev_clicked = function(ev) {
			if (!locked) {
				if (table.offsetLeft < 0) {	
					lock_handles();
					this.mover = new ElementMover(table, +grid_width, .5, unlock_handles);
				}
			} else {
				// doubleclick!
				this.mover.pause();
				this.mover = new ElementMover(table, Math.min(-table.offsetLeft,grid_width*4), .7, unlock_handles);
			}
		}

		
		prev_handle.onclick = prev_clicked.bind(this);

		var next_clicked = function(ev) {
			if (!locked) {
				if (table.offsetWidth - showcase.offsetWidth + table.offsetLeft >= grid_width) {	
					lock_handles();
					this.mover = new ElementMover(table, -grid_width, .5, unlock_handles);
				}
			} else {
				// doubleclick!
				this.mover.pause();
				this.mover = new ElementMover(table, Math.max(-(table.offsetWidth - showcase.offsetWidth + table.offsetLeft),-grid_width*4), .7, unlock_handles);
			}
		}		
		
		next_handle.onclick = next_clicked.bind(this);
		
	});
});

var ElementMover = Class.create({
	initialize: function(element, toLeft, duration, onFinish, grid) {
		this.duration = duration*1000;
		this.framerate = 33;
		this.target = element;
		this.target.style.position = 'relative';
		this.fromLeft = element.offsetLeft;
		this.toLeft = this.fromLeft + toLeft; // muss immer durch 144 teilbar sein
		this.toLeft = this.toLeft - this.toLeft % 140;
		this.onFinish = onFinish;
		this.run();
		//window.setTimeout(this.run.bind(this), delay*1000);
	},
	run: function() {
		this.counter = 0;
		this.timer = window.setInterval(this.step.bind(this), this.framerate);
	},
	pause: function() {
		window.clearInterval(this.timer);
	},
	step: function() {
		var t = this.counter * this.framerate;	
		var d = this.duration;
		var b = this.fromLeft;
		var c = this.toLeft - this.fromLeft;
		var new_left = ((t/=d/2) < 1) ? c/2*t*t + b : -c/2 * ((--t)*(t-2) - 1) + b;
		//var new_opacity = -c *(t/=d)*(t-2) + b;
		this.target.style.left = new_left + 'px';
		
		if (this.counter > this.duration/this.framerate) {
			clearInterval(this.timer);
			this.target.style.left = this.toLeft + 'px';
			this.onFinish();
		} 
		this.counter++;
	}
});