var effects = Array();
var positions = Array();
var fullWidth = 330;
var initWidth = 155;
var newWidth = 120;
//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

	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('#showcase_wrapper_front 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(1, effect)).addEvent('mouseout', effect.goTo.pass(0.4, effect));			
	});

	// loop through all showcases
	showCases.each(function(showCase, i) {
		showCase.id = 'showCase'+i; // assign id
		effects[showCase.id] = showCase.effects({duration: 700, transition: fx.Transitions.circOut});
		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']]});
			showCase.className = "showCaseInactive";
		} 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()});
	});
}

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']]});
			showCases[i].className = "showCaseInactive";
		} 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]});							
			showCases[i].className = "showCase";			
		}
	}
}
});