var
	works,
	worksKeys;

var prep = function() {
	// fx used to fade in label text & bg
	[
		$$('#label-wrap label span')[0],
		$$('#label-wrap label del')[0]
	].each(function(o) {
		o.store('fx', new Fx.Morph(o, {
			duration: o.get('tag') == 'del' ? 1600 : 1000,
			transition: Fx.Transitions.Sine.easeOut
		}));
	});
	
	// bool used to stop prev / next events if already moving
	$('carousel')
		.store('auto', true)
		.store('moving', false);
};

var prepLater = function() {
	var lis = $$('#carousel li');
	
	// fx to move works forward
	lis[2].store('fx', new Fx.Elements($$('.work-img-wrap ol'), {
		duration: 2000,
		transition: Fx.Transitions.Sine.easeOut,
		onComplete: function() {
			// making the old images the same as the new
			$$('.work-img-wrap ol li:first-child img').each(function(o) {
				o.set('src', o
					.getParent('li')
					.getNext('li')
					.getElement('img')
					.get('src'));
			});
			// putting ols back in their place
			$$('.work-img-wrap ol').setStyle('margin-left', '0');
			$('label-wrap').fireEvent('update', works.getKeys()[$('carousel').retrieve('i')]);
			$('carousel').store('moving', false);
		}
	}));
	
	// fx to move works backward
	lis[0].store('fx', new Fx.Elements($$('.work-img-wrap ol'), {
		duration: 2000,
		transition: Fx.Transitions.Sine.easeOut,
		onComplete: function() {
			// making the old images the same as the new
			$$('.work-img-wrap ol li:last-child img').each(function(o) {
				o.set('src', o
					.getParent('li')
					.getPrevious('li')
					.getElement('img')
					.get('src'));
			});
			$('label-wrap').fireEvent('update', works.getKeys()[$('carousel').retrieve('i')]);
			$('carousel').store('moving', false);
		}
	}));
};

var listen = function() {
	var lis = $$('#carousel li');
	
	// function that will be fired when label is updated
	$('label-wrap').addEvent('update', function(label) {
		this
			.getElement('span')
			.setStyle('opacity', 0)
			.set('text', label);
		this
			.getElement('del')
			.setStyle('opacity', 0);
		$('label-wrap').removeClass('nosee');
		this
			.getElement('del')
			.fireEvent('update');
	}.bind($('label-wrap').getElement('label')));
	
	// function fired within label update event - fades in the label transparent background
	var labelDel = $$('#label-wrap label del')[0];
	labelDel.addEvent('update', function() {
		var size = this
			.getParent('label')
			.getSize();
		this.setStyles({
			width: size.x,
			hegith: size.y
		});
		this
			.retrieve('fx')
			.start({
				'opacity': [0, .1]
			});
		(function() {
			$$('#label-wrap label span')[0]
				.retrieve('fx')
				.start({
					'opacity': [0, 1]
				});
		}).delay(this
			.retrieve('fx')
			.options
			.duration / 2);
	}.bind(labelDel));
	
	// page forward in works
	lis[2].addEvent('click', function(auto) {
		if($('carousel').retrieve('moving') === true)
			return;

		if(!$chk(auto) || auto !== true) {
			$clear($('carousel').retrieve('hitatus'));
			$('carousel').store('auto', false);
		}
		
		$('carousel-focus').loading();
		
		$('label-wrap').addClass('nosee');
		$('carousel').store('moving', true);
		
		var
			i = $('carousel').retrieve('i'),
			newI = [],
			imgs = $$('.work-img-wrap ol li:last-child img');
			
		(3).times(function(z) {
			newI.push(z === 0 ? i :
				z === 1 ? (worksKeys.length === i + 1 ? 0 : i + 1) :
				worksKeys.length === newI[1] + 1 ? 0 : newI[1] + 1);
		});
			
		imgs.each(function(o, i) {
			o.addEvent('load', function() {
				this[1].removeEvents('load');
				// once last image is loaded we will start the fx
				if(this[0] === 2) {
					$('carousel-focus').loaded();
					$$('#carousel li')[2]
						.retrieve('fx')
						.start({
							'0': {
								'margin-left': [0, -186]
							},
							
							'1': {
								'margin-left': [0, -300]
							},
							
							'2': {
								'margin-left': [0, -186]
							}
						});
					return;
				}
				// must not be last image - continue with load queue
				var i = this[0] + 1;
				imgs[i].set('src', '_carousel/' + works[worksKeys[newI[i]]] + '/' + (i === 1 ? 'focus' : 'th') + '.jpg');
			}.bind([i, o]));
		});
		
		$('carousel').store('i', newI[1]);
		imgs[0].set('src', '_carousel/' + works[worksKeys[newI[0]]] + '/th.jpg');
	});
	
	// page back in works
	lis[0].addEvent('click', function() {
		if($('carousel').retrieve('moving') === true)
			return;
			
		$clear($('carousel').retrieve('hitatus'));
		$('carousel-focus').loading();
			
		$('label-wrap').addClass('nosee');
		$('carousel')
			.store('auto', false)
			.store('moving', true);
		
		var
			i = $('carousel').retrieve('i'),
			newI = [],
			imgs = $$('.work-img-wrap ol li:first-child img');
			
		(3).times(function(z) {
			newI.push(z === 0 ? 'tmp' :
				z === 1 ? (i === 0 ? worksKeys.length - 1 : i - 1) :
				i);
		});
		newI[0] = newI[1] === 0 ? worksKeys.length - 1 : newI[1] - 1;
		
		// jumping image ahead to prep for the move
		$$('.work-img-wrap ol').each(function(o) {
			o.setStyle('margin-left', o
				.getParent('ins')
				.getParent('li')
				.get('id') == 'carousel-focus' ? '-300px' : '-186px');
		});
		
		imgs.each(function(o, i) {
			o.addEvent('load', function() {
				this[1].removeEvents('load');
				// once last image is loaded we will start the fx
				if(this[0] === 2) {
					$('carousel-focus').loaded();
					$$('#carousel li')[0]
						.retrieve('fx')
						.start({
							'0': {
								'margin-left': [-186, 0]
							},
							
							'1': {
								'margin-left': [-300, 0]
							},
							
							'2': {
								'margin-left': [-186, 0]
							}
						});
					return;
				}
				// must not be last image - continue with load queue
				var i = this[0] + 1;
				imgs[i].set('src', '_carousel/' + works[worksKeys[newI[i]]] + '/' + (i === 1 ? 'focus' : 'th') + '.jpg');
			}.bind([i, o]));
		});
		
		$('carousel').store('i', newI[1]);
		imgs[0].set('src', '_carousel/' + works[worksKeys[newI[0]]] + '/th.jpg');
	});
};

var initWorks = function(i, imgs) {
	imgs = arguments.length > 1 ? imgs : [];
	if(i >= 3) {
		var lis = $$('#carousel li');
		lis.each(function(o, i) {
			o
				.empty()
				.adopt(
					new Element('ins')
						.addClass('work-img-wrap')
						.adopt(
							new Element('ol').adopt(
								new Element('li').adopt(imgs[i]),
								new Element('li').adopt(imgs[i].clone())
							)
						)
				);
			if(i !== 1 && !(Browser.Engine.trident && Browser.Engine.version <= 4))
				new Element('del').inject(o);
		});
		prepLater();
		$('label-wrap').fireEvent('update', worksKeys[1]);
		return;
	}
	if(i === 0) {
		works = $H(works);
		worksKeys = works.getKeys();
		$('carousel').store('i', 1);
	}
	var img = new Element('img');
	img.addEvent('load', function() {
		this[1].push(this[2]);
		initWorks(++this[0], this[1]);
		this[2].removeEvents('load');
	}.bind([i, imgs, img]));
	img.set('src', '_carousel/' + works[worksKeys[i]] + '/' + (i === 1 ? 'focus' : 'th') + '.jpg');
};

var autoCarousel = function(noob) {
	noob = $chk(noob) ? noob : false;
	if($('carousel').retrieve('auto') === false) {
		$clear($('carousel').retrieve('hitatus'));
		return;
	}
	if(noob !== true)
		$$('#carousel > li')[2].fireEvent('click', true);
	$('carousel').store('hiatus', autoCarousel.delay(11090));
};

window.addEvents({
	'domready': function() {	
		prep();
		listen();
		initWorks(0);
		autoCarousel(true);
	},
	
	'keyup': function(e) {
		switch(Event(e).key) {
			case 'left':
				$$('#carousel > li')[0].fireEvent('click');
				break;
			
			case 'right':
				$$('#carousel > li')[2].fireEvent('click');
				break;
		}
	}
});