// lorsque le dom est chargé
window.addEvent('domready', function() {
	
	
	// lorsque la souris passe sur un block sous-titre + image, 
	// on change la couleur du background et du texte et l'image passe en couleur
	$$('a.container').addEvent('mouseover', function(){
	
		switch(this.get('rel')) {
		
			case "green":
				var couleur = "#00a2a5";
			break;
			
			case "darkblue":
				var couleur = "#123F90";
			break;
			
			case "blue":
				var couleur = "#5e89c2";
			break;
			
			case "orange":
				var couleur = "#F0960B";
			break;
			
			case "lightblue":
				var couleur = "#009bd5";
			break;
			
			case "darkred":
				var couleur = "#94231c";
			break;
			
			case "darkorange":
				var couleur = "#c38d4d";
			break;
			
			case "pink":
				var couleur = "#dc006b";
			break;
		}
		
		this.getElement('.title').setStyles({
			background: couleur,
			color: '#ffffff'
		});
		
		this.getElement('div.image').setStyles({
			'background-position': '-245px 0',
		});
		
	});
	
	// lorsque la souris quitte un block sous-titre + image, 
	// on remet tout par défaut
	$$('a.container').addEvent('mouseout', function(){
		
		// on remet la couleur du background et du texte en noir et blanc
		this.getElement('.title').setStyles({
			background: '#dfdfdf',
			color: '#000'
		});
		
		this.getElement('div.image').setStyles({
			'background-position': '0 0', // background on position initiale
		});
		
	});
	
});