// JavaScript Document

	var effects = Array();
	var positions = Array();
	var fullWidth = 500;
	var initWidth = 310;
	var newWidth = 215;
	 //var firstFocus = (Math.round(Math.random()*(2)));


 
	
  
	//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.5);		
            el.addEvent('mouseover', effect.goTo.pass(0.95, effect)).addEvent('mouseout', effect.goTo.pass(0.5, effect));			
		});
   	$S('#showCaseContainer h1').each(function(el) {
			effect = el.effect('opacity', {duration: 750, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(1);		
            el.addEvent('mouseover', effect.goTo.pass(1, effect)).addEvent('mouseout', effect.goTo.pass(1, 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()});
		});
	}
	
	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]});							
			}
		}
    }
	});