// kickoff all initialising functions
function init() {
	collection.each(function(item) {
		thumbs = $ES('li', item);
		var thumbIndex = 1;
		thumbs.each(function(thumb) {
			showThumbnail('images/work/'+item+'_'+thumbIndex+'.jpg', thumb);
			//thumb.setStyle('background-image', 'url("images/work/'+item+'_'+thumbIndex+'.jpg")');
			thumb.getElements('a')[0].addEvent('click', function(e){flipItem(e,item,this)});
			thumbIndex++;
		});
	});
}

function showThumbnail(thumbPath, element) {
	var placeholder = $E('img', element);
	myThumb = new Element('img', { 'src': thumbPath	});
	myThumb.injectBefore(placeholder);
	var fadeIn = new Fx.Elements($ES('img',element),{duration:300});
	fadeIn.start({
		'0': { 'opacity': [0,1] },
		'1': { 'opacity': [1,0] }
	});
	fadeIn.addEvent('onComplete',function(){placeholder.remove()});
}

function flipItem(e, item, element) {
	new Event(e).stop();
	oldView = $E('img[class=view]', item);
	newView = new Element('img', {
		'src': element,
		'class': 'view'
	});
	newView.injectBefore(oldView);
	var imageSwap = new Fx.Elements($ES('img[class=view]',item),{duration:300});
	imageSwap.start({
		'0': { 'opacity': [0,1] },
		'1': { 'opacity': [1,0] }
	});
	imageSwap.addEvent('onComplete',function(){oldView.remove()});
}