var padding = 20, head, slider, slider_element, container;

Event.observe(window, 'load', function() {
	container = $('container');
	var images = container.select('img'), width = 0;
	
	images.each(function(i) {
		var pd = i.up('div'),
			allow = !(pd.hasClassName('previous') || pd.hasClassName('next'));
		if (allow) {
			i.observe('click', switch_image);
		}
		width += parseInt(i.width) + padding;
	});
	
	container.style.width = width + 'px';
	container.show();
	
	$$('option').each(function(o) {
		if (o.value == TAG) {
			o.selected = true;
		}
	});
	head = $('head');
	
	slider_element = $('slider');
	slider_element.style.left = 0;
	slider = new Draggable(slider_element, {
		constraint: 'horizontal',
		starteffect: null, endeffect: null,
		change: constrain_scroll,
		onEnd: function(s) {
			constrain_scroll(s);
			update_scroll();
		}
	});
	
	Event.observe(window, 'mousewheel', function(e) {
		onwheel(e);
	});
});

function onwheel(event) {
	var delta = wheel(event) * 10,
		from = parseInt(slider_element.style.left.replace('px', '')),
		to = from - delta,
		max = document.viewport.getWidth() - slider_element.getWidth() - 40;
		
	if (to < 0) {
		to = 0;
	} else if (to > max) {
		to = max;
	}
		
	slider.element.style.left = to + 'px';
	update_scroll(true);
}

function wheel(event) {
	var delta = 0;
	if (!event) {
		event = window.event;
	}
	if (event.wheelDelta) {
		delta = event.wheelDelta/120;
		if (window.opera) {
			delta = -delta;
		}
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	return delta;
}

function switch_image(e) {
	var width = document.viewport.getWidth(),
		micex = Event.pointerX(e),
		element = Event.element(e),
		effect, from = container.positionedOffset()[0] - 20,
		to = element.positionedOffset()[0] - 100,
		max = container.getWidth() - width;
		
	if (to > max) {
		to = max + 20;
	} else if (to < 0) {
		to = 0;
	}
	
	effect = new Effect.Tween(null, from, -to, {duration: 0.5, afterFinish: function() {update_slider();}}, function(p) {
		container.style.left = p + 'px';
	});
}

function update_scroll(fast) {
	var width = document.viewport.getWidth(),
		slider_size = (slider.element.getWidth() + 40),
		slider_max = width - slider_size,
		scroll = slider.element.positionedOffset()[0] - 20,
		scroll_max = -container.getWidth() + (width - 20),
		from = container.positionedOffset()[0] - 20,
		to = scroll_max * (scroll / slider_max),
		effect;
	
	if (fast) {
		container.style.left = to + 'px';
	} else {
		effect = new Effect.Tween(null, from, to, {duration: 0.5}, function(p) {
			container.style.left = p + 'px';
		});
	}
}

function update_slider() {
	var width = document.viewport.getWidth(),
		slider_size = (slider.element.getWidth() + 40),
		slider_max = width - slider_size,
		scroll = container.positionedOffset()[0],
		scroll_max = -(container.getWidth() - width),
		from = slider.element.positionedOffset()[0] - 20,
		to = slider_max * (scroll / scroll_max),
		effect;
				
	effect = new Effect.Tween(null, from, to, {duration: 0.5}, function(p) {
		slider.element.style.left = p + 'px';
	});
}

function constrain_scroll(s) {	
	var left = s.element.positionedOffset()[0],
		width = s.element.getWidth() + 40,
		max = document.viewport.getWidth();
	
	if (left + width > max) {
		s.element.style.left = (max - width) + 'px';
	} else if (left < 0) {
		s.element.style.left = 0;
	}
}

function switch_tag() {
	var tag = $('tags').value, hide, show, width = 0;
	
	if (tag != '') {
		hide = $$('.image').invoke('hide');
		show = $$('.' + tag);
	} else {
		show = $$('.image');
	}
	
	show.invoke('show');
	show.each(function(img) {
		img = img.down('img');
		width += parseInt(img.width) + 20;
	});

	$('container').style.width = width + 'px';
}