var effects = Array();
	var positions = Array();
	var fullWidth = 400;
	var initWidth = 192;
	var newWidth = 140;
	//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
 
//		showCaseLinks = document.getElementsByClassName('showCaseLink');
//		var numCaseLinksCount = showCaseLinks.length; // count number of showcases
		
		showCaseSpan  = document.getElementsByClassName('showCaseSpan');
//		var numCaseSpansCount = showCaseSpan.length; // count number of showcases
			
		
		// 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]});				
			//}
			
			//Open all same width
			effects[showCase.id].custom({'width': [initWidth,initWidth], 'background-position': [showCase.getStyle('background-position').toInt(),effects[showCase.id]['bgPos']]});
			
			// add mouseover/mouseout events
			showCase.addEvent('mouseover', function(){effects[this.id].emphasize()});
			effect = showCase.effect('opacity', {duration: 750, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(0.75);		
         	showCase.addEvent('mouseover', effect.goTo.pass(1, effect)).addEvent('mouseout', effect.goTo.pass(0.75, effect));			

//			showCaseLinks[i].addEvent('mouseover', function(){effects[showCase.id].emphasize();});
//			showCaseLinks[i].addEvent('mouseover', effect.goTo.pass(1, effect)).addEvent('mouseout', effect.goTo.pass(0.75, effect));			

			//showCaseSpan[i].effect('opacity', {duration: 750, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(0.75);		
			//Make transparent so we don't see space
			showCaseSpan[i].effect('opacity', {duration: 750, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(0.0);		

		
		});
	}
	
	fx.Styles.implement({
    emphasize: function(){ // mouseover
		var activeid = -1;
		
		for(var i=0; i<showCases.length; i++) {
		
			if ('showCase'+i != this.element.id) { //always set size to avoid disappearing blocks
				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) {
				activeid = i;
			}
		}
		
		if (activeid != -1) { //set this last so others are all resized first and we don't get two large blocks
			i = activeid;
			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]});							
		}
    }
	});