window.onload = function(){
	$$('#cityscape img').each(function(img){
		var src = img.getProperty('src');  
		var extension = src.substring(src.lastIndexOf('.'),src.length);
		var parent = img.getParent();
		
		img.addEvent('mouseenter', function() { 
			imageFlip(false);
			img.setStyle('visibility','visible');
			img.setProperty('src',src.replace(extension,'_on' + extension)); 
			parent.addClass('circleOn');
			
			var colorBlock = 'block'+parent.getProperty('id');
			$(colorBlock).removeClass('classOff');
			
		});  
		img.addEvent('mouseleave', function() { 
			img.setProperty('src',src);
			parent.removeClass('circleOn');
			imageFlip(true);
		});  							 
	});
};

function imageFlip(flipTo){
	
	var visStyle = (flipTo) ? 'visible' : 'hidden';
	
	$$('#cityscape IMG').each(function(img){
		img.setStyle('visibility',visStyle);
		
		var colorBlock = 'block'+img.getParent().getProperty('id');
		if(flipTo){
			$(colorBlock).removeClass('classOff');
		}else{
			$(colorBlock).addClass('classOff');
		}
		
	});
}