window.addEvent('domready', function(){
	if ($('showcase')) {
		var selected = 0;
		var showcase_play;
		
		$('showcase').getElement('.container').setStyles({
			position: 'relative',
			width: 643,
			height: 307,
			overflow: 'hidden'
		});
		
		var elements = document.getElements('#showcase .element');
		
		var strip = new Element('div').setStyles({
			position: 'absolute',
			width: (elements.length*643),
			height: 307,
			left: 0,
			top: 0
		}).set('tween', {
			duration: 1000,
			transition: 'sine:inOut'
		}).inject($('showcase').getElement('.container'));
		
		var control = null;
		
		if (document.getElements('.buttons').length == 0) {
			control = new Element('div').addClass('buttons').setStyles({
				position: 'relative',
				width: 645,
				height: 25,
				overflow: 'hidden'
			}).inject($('showcase'));
			
			var previous = new Element('a').addClass('previous').setProperties({
				href: '#'
			}).setStyles({
				position: 'absolute',
				width: 22,
				height: 19,
				right: 21,
				top: 3
			}).addEvent('click', function(e){
				new Event(e).stop();
				$clear(showcase_play);
				if (selected > 0) {
					selected = (selected-1);
					slide();
				}
			}).inject(control);
			
			var next = new Element('a').addClass('next').setProperties({
				href: '#'
			}).setStyles({
				position: 'absolute',
				width: 22,
				height: 19,
				right: 0,
				top: 3
			}).addEvent('click', function(e){
				new Event(e).stop();
				$clear(showcase_play);
				if ((selected+1) < control.getElements('.button').length) {
					selected = (selected+1);
					slide();
				}
			}).inject(control);
		}
		
		elements.each(function(element, i) {
			element.setStyles({
				position: 'absolute',
				width: 643,
				height: 282,
				left: (i*643),
				top: 0
			}).inject(strip);
			element.getElement('h2').addClass('title').setStyles({
				position: 'absolute',
				width: 643,
				height: 25,
				left: (i*643),
				bottom: 0,
				overflow: 'hidden'
			}).inject(strip);
			
			if (control != null) {
				var button = new Element('a').addClass('button').setProperties({
					href: '#'
				}).setStyles({
					position: 'absolute',
					width: 19,
					height: 19,
					left: (i*19),
					top: 3
				}).addEvent('click', function(e){
					new Event(e).stop();
					$clear(showcase_play);
					selected = i;
					slide();
				}).inject(control);
			}
		});
		var buttons = document.getElements('.buttons .button');
		if (control == null) {
			buttons.each(function(button, i){
				button.addEvent('click', function(e){
					new Event(e).stop();
					$clear(showcase_play);
					selected = i;
					slide();
				});
			});
		}
		selected = $random(0, buttons.length-1);
		buttons.removeClass('selected');
		buttons[selected].addClass('selected');
		strip.setStyle('left', -(selected*643));
		window.addEvent('load', function(){
			showcase_play = swap.periodical(4000);
		});
	}
	function swap() {
		var i = selected;
		while (i == selected) {
			i = $random(0, buttons.length-1);
		}
		selected = i;
		slide();
	}
	function slide() {
		var buttons = document.getElements('.buttons .button');
		buttons.removeClass('selected');
		buttons[selected].addClass('selected');
		strip.tween('left', -(selected*643));
	}
});