/*
Copyright (c) 2009-2010 Serafin Campestrini GmbH
Alle Rechte vorbehalten.
*/

var tween_to;

Event.observe(window, 'load', function(event) {
	var handle = $$('#browser div.slider div.track div.handle').first();
	var handleLeft = $$('#browser div.slider div.track div.handle div.left').first();
	var handleSlice = $$('#browser div.slider div.track div.handle div.slice').first();
	var handleRight = $$('#browser div.slider div.track div.handle div.right').first();
	var track = $$('#browser div.slider div.track').first();
	var items = $$('#browser ul.items').first();
	
	var options = {
		windowWidth: 960.0,
		handleMinWidth: 15.0
	};
	
	var itemsWidth = $$('#browser ul.items > li').inject(0, function(acc, el) {
		return acc + el.getWidth();
	});
	
	var itemsOverflow = itemsWidth - options.windowWidth;
	var handleWidth = track.getWidth() * (options.windowWidth / itemsWidth);
	handleWidth = handleWidth < options.handleMinWidth ? options.handleMinWidth : handleWidth;
	
	if (window.location.search.toQueryParams().developer) {
		alert(itemsWidth);
	}
	
	if (itemsWidth > options.windowWidth) {
		items.setStyle({'width': itemsWidth + 'px'});
	}
	
	handle.setStyle({'width': handleWidth  + 'px'});
	handleSlice.setStyle({'width': (handleWidth - (handleLeft.getWidth() + handleRight.getWidth())) + 'px'});
	
	var slider = new Control.Slider(handle, track, {
		range: $R(0, 1.0),
		sliderValue: 0,
		onSlide: function(value) {
			if (itemsOverflow > 0.0) {
				var left = -(itemsOverflow * value);
				
				items.setStyle({'left': left + 'px'});
			}
		}
	});
	
	slider.options.onChange = slider.options.onSlide;
	
	$$('#browser div.slider div.arrow.left').first().observe('click', function(event) {
		var step = 1.0 / $$('#browser ul.items > li').length;
		
		if (slider.values[0] - step >= 0) {
			slider.setValue(slider.values[0] - step, 0);
		}
		else {
			slider.setValue(0.0, 0);
		}
	});
	
	$$('#browser div.slider div.arrow.right').first().observe('click', function(event) {
		var step = 1.0 / $$('#browser ul.items > li').length;
		
		if (slider.values[0] + step <= 1.0) {
			slider.setValue(slider.values[0] + step, 0);
		}
		else {
			slider.setValue(1.0, 0);
		}
	});
	
	tween_to = function(from, to) {
		var startVal = 0.0;
		var endVal = 0.0;
		
		if (Object.isString(from)) {
			var accWidth = $$('#browser ul.items > li').inject(0, function(acc, el) {
				if (el.previous('#browser ul.items > li[data-id="' + from + '"]')) {
					return acc;
				}
				else {
					return acc + el.getWidth();
				}
			});
			
			var offset = accWidth - options.windowWidth + (options.windowWidth / 2) - ($$('#browser ul.items > li[data-id="' + from + '"]').first().getWidth() / 2);
			offset = offset < 0.0 ? 0.0 : offset > itemsOverflow ? itemsOverflow : offset;
			startVal = offset / itemsOverflow;
		}
		else {
			startVal = from;
		}
		
		if (Object.isString(to)) {
			var accWidth = $$('#browser ul.items > li').inject(0, function(acc, el) {
				if (el.previous('#browser ul.items > li[data-id="' + to + '"]')) {
					return acc;
				}
				else {
					return acc + el.getWidth();
				}
			});
			
			var offset = accWidth - options.windowWidth + (options.windowWidth / 2) - ($$('#browser ul.items > li[data-id="' + to + '"]').first().getWidth() / 2);
			offset = offset < 0.0 ? 0.0 : offset > itemsOverflow ? itemsOverflow : offset;
			endVal = offset / itemsOverflow;
		}
		else {
			endVal = to;
		}
		
		new Effect.Tween(slider, startVal, endVal, function(value) {
			this.setValue(value);
		});
	};
});