var effects = Array();
	var positions = Array();
	var fullWidth = 250;
	var initWidth = 120;
	var newWidth = 100;
	//var firstFocus = (Math.round(Math.random()*(4)));
	var firstFocus = 0;

	window.onload=function(){
	
		Window.disableImageCache(); // Trying to disable the imageCache to fix IE6 issues
		showCases = document.getElementsByClassName('showCase'); // fetch showcase objects
		bgInitialMove = Math.round((showCases[0].getStyle('width').toInt()-newWidth)/2); // calculate how much the background should move when the initial shrink animation runs
		var numCasesCount = showCases.length; // count number of showcases


//		$S('#showCaseContainer a.readMore').each(function(el) {
//			effect = el.effect('opacity', {duration: 750, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(0.35);		
//            el.addEvent('mouseover', effect.goTo.pass(0.9, effect)).addEvent('mouseout', effect.goTo.pass(0.35, effect));			                                                     		            
//		});	
//		
//		
//		$S('#showCaseContainer .showCase').each(function(el) {
//			effect = el.effect('opacity', {duration: 750, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(0.6);		
//            el.addEvent('mouseover', effect.goTo.pass(0.9, effect)).addEvent('mouseout', effect.goTo.pass(0.6, effect));			                                                     		            
//		});	
		
		
		
		// loop through all showcases
		showCases.each(function(showCase, i) {
			showCase.id = 'showCase'+i; // assign id
			effects[showCase.id] = showCase.effects(showCase.id, {duration: 500});
			effects[showCase.id]['bgPos'] = showCase.getStyle('background-position').toInt() - bgInitialMove; // save the original bg position

			if (i != firstFocus) {
				// shrink + move the background so it stays centered
				effects[showCase.id].custom({'width': [initWidth,newWidth], 'background-position': [showCase.getStyle('background-position').toInt(),effects[showCase.id]['bgPos']]});
			} else {
				// expand!
				effects[showCase.id].custom({'width': [initWidth,fullWidth], 'background-position': [showCase.getStyle('background-position').toInt(),0]});				
			}
			
			// add mouseover/mouseout events
			showCase.addEvent('click', function(){effects[this.id].emphasize()});
			//showCase.addEvent('mouseover', function(){effects[this.id].emphasize()});			
			
		});
	}
	
	fx.Styles.implement({
    emphasize: function(){ // mouseover
		for(var i=0; i<showCases.length; i++) {
			if ('showCase'+i != this.element.id && showCases[i].getStyle('width').toInt() > newWidth) {
				effects[showCases[i].id].clearTimer();
				effects[showCases[i].id].custom({'width': [showCases[i].getStyle('width').toInt(),newWidth], 'background-position': [showCases[i].getStyle('background-position').toInt(),effects[showCases[i].id]['bgPos']]});
			} else if ('showCase'+i == this.element.id) {
				effects[showCases[i].id].clearTimer();
				effects[showCases[i].id].custom({'width': [showCases[i].getStyle('width').toInt(),fullWidth], 'background-position': [showCases[i].getStyle('background-position').toInt(),0]});							
			}
		}
    }
	});