window.addEvent('domready', function() {
	
	/* Set up first details to be visible and rest hidden. */
	var thumbs = $$('.thumb');
	var details = $$('.detail').setStyle('display','none');
	var displayedDetail = $E('.detail').setStyle('display','block');
	thumbs[0].setStyle("background-color", "#cfe0ef");
	thumbs[0].setStyle("color","#369");	
	
 	// Setup click functions.
	thumbs.each(function(thumb) {
		/* Binding */
		var thumbid = thumb.getProperty('id');
		thumbid = 'detail_' + thumbid;
		var detail = $(thumbid);
	
		var fx = new Fx.Styles(detail, {duration:500, wait:false});
 		/* On Click */
		thumb.addEvent('click', function() {
			displayedDetail.setStyle('display', 'none');
			detail.setStyle('display', 'block');
			detail.setOpacity(0);
			fx.start( { opacity : 1 } );
			displayedDetail = detail;
			
			//alert(this.getProperty('id'));
			
			if (this.getProperty('id') == "survey") {
			this.setStyle("background-color", "#cfe0ef");
			this.setStyle("color","#369");
			thumbs[1].setStyle("background-color", "#FFF");
			thumbs[1].setStyle("color","#369");			
			thumbs[2].setStyle("background-color", "#FFF");
			thumbs[2].setStyle("color","#369");			
			thumbs[3].setStyle("background-color", "#FFF");
			thumbs[3].setStyle("color","#369");			
			thumbs[4].setStyle("background-color", "#FFF");
			thumbs[4].setStyle("color","#369");			
			thumbs[5].setStyle("background-color", "#FFF");
			thumbs[5].setStyle("color","#369");	
			thumbs[6].setStyle("background-color", "#FFF");
			thumbs[6].setStyle("color","#369");	
			thumbs[7].setStyle("background-color", "#FFF");
			thumbs[7].setStyle("color","#369");	
			}
			
			if (this.getProperty('id') == "prevention") {
			this.setStyle("background-color", "#cfe0ef");
			this.setStyle("color","#369");					
			thumbs[0].setStyle("background-color", "#FFF");
			thumbs[0].setStyle("color","#369");
			thumbs[2].setStyle("background-color", "#FFF");
			thumbs[2].setStyle("color","#369");			
			thumbs[3].setStyle("background-color", "#FFF");
			thumbs[3].setStyle("color","#369");			
			thumbs[4].setStyle("background-color", "#FFF");
			thumbs[4].setStyle("color","#369");				
			thumbs[5].setStyle("background-color", "#FFF");
			thumbs[5].setStyle("color","#369");	
			thumbs[6].setStyle("background-color", "#FFF");
			thumbs[6].setStyle("color","#369");	
			thumbs[7].setStyle("background-color", "#FFF");
			thumbs[7].setStyle("color","#369");	
			}
			
			if (this.getProperty('id') == "treatment") {
			this.setStyle("background-color", "#cfe0ef");
			this.setStyle("color","#369");					
			thumbs[0].setStyle("background-color", "#FFF");
			thumbs[0].setStyle("color","#369");					
			thumbs[1].setStyle("background-color", "#FFF");
			thumbs[1].setStyle("color","#369");					
			thumbs[3].setStyle("background-color", "#FFF");
			thumbs[3].setStyle("color","#369");					
			thumbs[4].setStyle("background-color", "#FFF");
			thumbs[4].setStyle("color","#369");		
			thumbs[5].setStyle("background-color", "#FFF");
			thumbs[5].setStyle("color","#369");	
			thumbs[6].setStyle("background-color", "#FFF");
			thumbs[6].setStyle("color","#369");	
			thumbs[7].setStyle("background-color", "#FFF");
			thumbs[7].setStyle("color","#369");	
				
			}
			
			if (this.getProperty('id') == "special") {
			this.setStyle("background-color", "#cfe0ef");
			this.setStyle("color","#369");					
			thumbs[0].setStyle("background-color", "#FFF");
			thumbs[0].setStyle("color","#369");					
			thumbs[1].setStyle("background-color", "#FFF");
			thumbs[1].setStyle("color","#369");					
			thumbs[2].setStyle("background-color", "#FFF");
			thumbs[2].setStyle("color","#369");					
			thumbs[4].setStyle("background-color", "#FFF");
			thumbs[4].setStyle("color","#369");	
			thumbs[5].setStyle("background-color", "#FFF");
			thumbs[5].setStyle("color","#369");	
			thumbs[6].setStyle("background-color", "#FFF");
			thumbs[6].setStyle("color","#369");	
			thumbs[7].setStyle("background-color", "#FFF");
			thumbs[7].setStyle("color","#369");	
				
			}
			
			if (this.getProperty('id') == "regular") {
			this.setStyle("background-color", "#cfe0ef");
			this.setStyle("color","#369");					
			thumbs[0].setStyle("background-color", "#FFF");
			thumbs[0].setStyle("color","#369");					
			thumbs[1].setStyle("background-color", "#FFF");
			thumbs[1].setStyle("color","#369");					
			thumbs[2].setStyle("background-color", "#FFF");
			thumbs[2].setStyle("color","#369");					
			thumbs[3].setStyle("background-color", "#FFF");
			thumbs[3].setStyle("color","#369");	
			thumbs[5].setStyle("background-color", "#FFF");
			thumbs[5].setStyle("color","#369");	
			thumbs[6].setStyle("background-color", "#FFF");
			thumbs[6].setStyle("color","#369");	
			thumbs[7].setStyle("background-color", "#FFF");
			thumbs[7].setStyle("color","#369");	
				
			}
			
			if (this.getProperty('id') == "caring") {
			this.setStyle("background-color", "#cfe0ef");
			this.setStyle("color","#369");					
			thumbs[0].setStyle("background-color", "#FFF");
			thumbs[0].setStyle("color","#369");					
			thumbs[1].setStyle("background-color", "#FFF");
			thumbs[1].setStyle("color","#369");					
			thumbs[2].setStyle("background-color", "#FFF");
			thumbs[2].setStyle("color","#369");					
			thumbs[3].setStyle("background-color", "#FFF");
			thumbs[3].setStyle("color","#369");	
			thumbs[4].setStyle("background-color", "#FFF");
			thumbs[4].setStyle("color","#369");		
			thumbs[6].setStyle("background-color", "#FFF");
			thumbs[6].setStyle("color","#369");	
			thumbs[7].setStyle("background-color", "#FFF");
			thumbs[7].setStyle("color","#369");	
			
			}		
			
			if (this.getProperty('id') == "forms") {
			this.setStyle("background-color", "#cfe0ef");
			this.setStyle("color","#369");					
			thumbs[0].setStyle("background-color", "#FFF");
			thumbs[0].setStyle("color","#369");					
			thumbs[1].setStyle("background-color", "#FFF");
			thumbs[1].setStyle("color","#369");					
			thumbs[2].setStyle("background-color", "#FFF");
			thumbs[2].setStyle("color","#369");					
			thumbs[3].setStyle("background-color", "#FFF");
			thumbs[3].setStyle("color","#369");	
			thumbs[4].setStyle("background-color", "#FFF");
			thumbs[4].setStyle("color","#369");	
			thumbs[5].setStyle("background-color", "#FFF");
			thumbs[5].setStyle("color","#369");	
			thumbs[7].setStyle("background-color", "#FFF");
			thumbs[7].setStyle("color","#369");	
			}		
			
			if (this.getProperty('id') == "credit") {
			this.setStyle("background-color", "#cfe0ef");
			this.setStyle("color","#369");					
			thumbs[0].setStyle("background-color", "#FFF");
			thumbs[0].setStyle("color","#369");					
			thumbs[1].setStyle("background-color", "#FFF");
			thumbs[1].setStyle("color","#369");					
			thumbs[2].setStyle("background-color", "#FFF");
			thumbs[2].setStyle("color","#369");					
			thumbs[3].setStyle("background-color", "#FFF");
			thumbs[3].setStyle("color","#369");	
			thumbs[4].setStyle("background-color", "#FFF");
			thumbs[4].setStyle("color","#369");
			thumbs[5].setStyle("background-color", "#FFF");
			thumbs[5].setStyle("color","#369");	
			thumbs[6].setStyle("background-color", "#FFF");
			thumbs[6].setStyle("color","#369");	
			}		
	
		});	
	}); 
	
				
});