$(document).ready(function(){

// definition manuelle des menus. L'accolade signifie: description d'objet anonyme
// var salut = {}; est un objet anonyme vide.

// var salut = {test: 'hop'}; est un objet anonyme avec une propriete test qui vaut 'hop'
// Elle est accessible en faisant ensuite: alert(salut.test);

// on peut imbriquer des objets dans des objets. Donc var salut = {test: {autre: 'check'}};
// revient a faire: alert(salut.test.autre); qui affichera 'check'
var menus = {

	'#image': {
		img: '', text: ''
	},
    
	'#image2': {
		img: 'mission', text: 'SwissCube-Mission objectives'
	},
	'#image3': {
		img: 'solar', text: 'Solar panels-Energy'
	},
	'#image4': {
		img: 'anten', text: 'Antennas-Communications'
	},
	'#image5': {
		img: 'frame', text: 'Frame-Structure and Thermal control'
	},
    '#image6': {
		img: 'telescope', text: 'Telescope-Payload'
	},
	'#image7': {
		img: 'sun', text: 'Sun sensors-Satellite Orientation '
	},
	'#image8': {
		img: 'airglow', text: 'Airglow-Scientific measurements'
	},
	'#image9': {
		img: 'receiving', text: 'Receiving station-Ground segment'
	},
	'#image10': {
		img: '', text: 'Latest News'
	},
	'#image11': {
		img: '', text: 'About us'
	},
	'#image12': {
		img: '', text: 'What is SwissCube'
	},

   '#image13': {
		img: '', text: 'Project objectives'
   },
	'#image14': {
		img: '', text: 'Launch'
   },

    '#image15': {
		img: '', text: 'Documents'
   },
	'#image16': {
		img: '', text: 'Links'
        
     },
	'#image17': {
		img: '', text: 'FAQ'
	},
	'#image18': {
		img: '', text: 'Sponsors'
	},
	'#image19': {
		img: '', text: 'Le projet SwissCube'
	},
	'#image20': {
		img: '', text: 'Archives'
	},
	'#image21': {
		img: '', text: 'Academic partners'
	},
	'#image22': {
		img: '', text: 'Academic partners'
	},
	'#image4-2': {
		img: 'anten', text: 'Antennas - Communications'
	},
	'#image5-2': {
		img: 'frame', text: 'Frame - Structure and Thermal Control'
	},
	'#image6-2': {
		img: 'telescope', text: 'Telescope - Payload'
	},
	'#image7-2': {
		img: 'sun', text: 'Sun Sensors - Satellite Orientation'
	},
	'#image8-2': {
		img: 'airglow', text: 'Airglow - Scientific measurements'
	},
	'#image9-2': {
		img: 'receiving', text: 'Receiving station - Ground segment'
	}
	
};


function getMenuById(id) {
	id = id.replace('-2', '');
	return menus['#' + id];
}

function getObjById(id) {
	id = id.replace('-2', '');
	return $('#' + id);
}

function desactivateAll() {
	for (var i in menus) {
		$(i).attr({src:"images/off_" + menus[i].img + ".jpg"});
	}
}

// menu actuellement actif
var activeMenu = null;

function setActiveMenu(menu) {
	activeMenu = menu;
}
function issetActiveMenu() {
	return activeMenu ? true: false;
}
function getActiveMenu() {
	return activeMenu;
}

// on parcours tous les menus
for (var i in menus) {

	// methode pour le onclic
	$(i).click(function(ev){

		// recuperation de l'objet jQuery
		var obj = getObjById(this.id);
		// recuperation des infos du menu (tableau definis en ligne 3)
		var menu = getMenuById(this.id);

		// on desactive tous les elements de menu
		desactivateAll();

		// on set l'image active et la bottom line
		obj.attr({src:"images/active_" + menu.img + ".jpg"});
		$("#bottom-line").html("<span>" + menu.text + "</span>");
        $(this).css({'color' : '#336699'});

		// on specifie que c'est ce menu qui est actif
		setActiveMenu(menu);
	});

	// methode pour le mouseover et mouseout
	$(i).hover(

		// pour le mouseover
		function(ev){
			// recuperation de l'objet jQuery
			var obj = getObjById(this.id);
			// recuperation des infos du menu (tableau definis en ligne 3)
			var menu = getMenuById(this.id);

			// on set l'image a "on", seulement si elle n'est pas deja active
			if (obj.attr('src') != 'images/active_' + menu.img + '.jpg') {
				obj.attr({src: "images/on_" + menu.img + ".jpg"});
				$("#bottom-line").html("<span>" + menu.text + "</span>");
                $(this).css({'color' : '#336699'});
			}
		},

		// pour le mouseout
		function(ev){
			// recuperation de l'objet jQuery
			var obj = getObjById(this.id);
			// recuperation des infos du menu (tableau definis en ligne 3)
			var menu = getMenuById(this.id);

			// on set l'image a "off", seulement si elle n'est pas deja active
			if (obj.attr("src") != 'images/active_' + menu.img + '.jpg'){
				obj.attr({src:"images/off_" + menu.img + ".jpg"});
                $(this).css({'color' : '#003366'});
				
				// on set le texte du menu actif courant s'il existe
				// s'il n'y en a pas, on ne met rien
				if (issetActiveMenu()) {
					$("#bottom-line").html(getActiveMenu().text);
				} else {
					$("#bottom-line").html("");
				}
			}
		}
	);
}


});