var imgList = [
		'/images/habitation-maison.jpg',
		'/images/habitation-reseaux-geobiologiques.jpg',
		'/images/habitation-memoire-des-murs.jpg',
		'/images/habitation-memoire-du-sol.jpg',
		'/images/habitation-eau-souterraine.jpg',
		'/images/habitation-faille-geologique.jpg',
		'/images/habitation-champs-electromagnetiques.jpg',
		'/images/habitation-bioenergie.jpg',
		'/images/bioenergie-corps.jpg',
		'/images/bioenergie-habitation.jpg'
	],
	currentImage = imgList[0],
	currentId = 'geobiologie';

function mapOver(id)
{
	if (id == 'geobiologie') {
		Ext.get('bioenergie').dom.src = '/images/bioenergie-habitation.jpg';
	} else {
		Ext.get('habitation').dom.src = '/images/habitation-' + id + '.jpg';
	}
}

function mapOut(id)
{
	if (id == 'geobiologie') {
		Ext.get('bioenergie').dom.src = currentImage;
	} else {
		Ext.get('habitation').dom.src = currentImage;
	}
}

function mapClick(id)
{
	if (currentId != id) {
		Ext.get('content_' + currentId).setVisibilityMode(Ext.Element.DISPLAY).hide();
		Ext.get('content_' + id).show();
		
		if (id == 'bioenergie') {
			Ext.get('habitation').hide();
			currentImage = '/images/bioenergie-corps.jpg';
			Ext.get('bioenergie').show().dom.src = currentImage;
		} else if (id == 'geobiologie') {
			Ext.get('bioenergie').hide();
			currentImage = '/images/habitation-maison.jpg';
			Ext.get('habitation').show().dom.src = currentImage;
		} else {
			currentImage = '/images/habitation-' + id + '.jpg';
		}
		
		currentId = id;
	}
}

Ext.onReady(function() {
	var loadedImages = 0,
		pb = Ext.create('Ext.ProgressBar', {
			renderTo: Ext.get('visual'),
			width: 250,
			cls: 'custom'
		});
		
	Ext.each(imgList, function(item)
	{
		var img = new Image();
		img.onload = function(event)
		{
			var progress = Math.round(100 * ++loadedImages / imgList.length);
			pb.updateProgress(progress / 100, progress + '%');
			if (progress == 100) {
				pb.hide();
				Ext.get('bioenergie').setVisibilityMode(Ext.Element.DISPLAY);
				Ext.get('habitation').setVisibilityMode(Ext.Element.DISPLAY).show().dom.src = currentImage;
				Ext.fly('visual').applyStyles({
					backgroundImage: 'url(' + currentImage + ')'
				});
			}		
		}
		img.src = item;
	});
});