Event.observe(window, 'load', function() {
	if ($(miniature.insertInto) && hotel && hotel.length != 0){
		miniature.init(hotel);
		infosHotel.init(0);
	}
	
	$$('#' + miniature.insertInto + ' img').invoke('observe', 'click', infosHotel.clickEvent);
});

page = {
	getLang: function(){
		thisUrl = document.location.pathname.split('/');
		return thisUrl[1];
	}
}

miniature = {
	dir: '/imagerie/phototheque/small/',
	insertInto: 'phototheque',
	init: function (hotel) {
		nbHotels = hotel.length;
		tpl = '<ul id="phototheque" class="phototheque">';
		for (i = 0; i < nbHotels; i++) {
			tpl += this.makeList(hotel[i]['rid'], hotel[i]['nom']);
		}
		tpl += '</ul>';
		$(this.insertInto).replace(tpl);
		$(this.insertInto).innerHTML;
	},
	makeList: function (codeRid, nomHotel) {
		return '<li><img src="' + this.dir + 'facade-' + codeRid + '.jpg" alt="' + nomHotel + '" id="img' + i + '" /></li>';
	}
}

infosHotel = {
	imgDir: '/imagerie/phototheque/big/',
	insertInto: 'image_infos',
	clickEvent: function (e) {
		elmt = Event.element(e);
		position = elmt.id.substr(3);
		infosHotel.init(position);
	},
	init: function (position) {
		tpl = '<div class="image_infos" id="image_infos">';
		tpl += '<div class="apercu_photo">';
		tpl += this.makeImg(hotel[position]['rid'], hotel[position]['nom']);
		tpl += '</div>';
		tpl += this.makeNom(hotel[position]['nom']);
		switch(page.getLang()){
			case 'de':
				tpl += this.makePays(hotel[position]['pays_DE']);
				break;
			case 'fr':
				tpl += this.makePays(hotel[position]['pays_FR']);
				break;
			case 'gb':
				tpl += this.makePays(hotel[position]['pays_GB']);
				break;
			case 'it':
				tpl += this.makePays(hotel[position]['pays_IT']);
				break;
			case 'pt':
				tpl += this.makePays(hotel[position]['pays_PT']);
				break;
			case 'nl':
				tpl += this.makePays(hotel[position]['pays_NL']);
				break;
			default:
				tpl += this.makePays(hotel[position]['pays_GB']);
				break;
		}
		tpl += this.makeExtension(hotel[position]['type']);
		tpl += this.makeTaille(hotel[position]['poids']);
		tpl += this.makeDimension(hotel[position]['dimensions']);
		tpl += this.makeLien(hotel[position]['rid']);
		tpl += this.makeLienPlus();
		tpl += '</div>';
		$(this.insertInto).replace(tpl);
		$(this.insertInto).innerHTML;
	},
	makeImg: function(codeRid, nom){
		return '<img src="' + miniature.dir + 'facade-' + codeRid + '.jpg" alt="' + nom + '" />';
	},
	makeNom: function(nom){
		label = $('label_nom').innerHTML;
		return '<p class="nom_hotel"><label>' + label + '</label><span>' + nom + '</span></p>';
	},
	makePays: function(pays){
		label = $('label_pays').innerHTML;
		return '<p class="pays"><label>' + label + '</label>' + pays + '</p>';
	},
	makeExtension: function(extension){
		label = $('label_extension').innerHTML;
		return '<p class="extension"><label>' + label + '</label>' + extension + '</p>';
	},
	makeTaille: function(taille){
		label = $('label_taille').innerHTML;
		return '<p class="taille"><label>' + label + '</label>' + taille + '</p>';
	},
	makeDimension: function(dimension){
		label = $('label_dimensions').innerHTML;
		return '<p class="dimensions"><label>' + label + '</label>' + dimension + '</p>';
	},
	makeLien: function(codeRid){
		label = $('label_telecharger').innerHTML;
		return '<p class="telecharger"><a class="la_suite2" href="' + this.imgDir + 'facade-' + codeRid + '.jpg" target="_blank">' + label + '</a></p>';
	},
	makeLienPlus: function (){
		label = $('label_plus').innerHTML;
		switch (page.getLang()){
			case 'fr':
				return '<p class="see_more"><a class="la_suite2" href="http://www.accor.com/fr/presse/fiches-marques/mercure.html" target="_blank">' + label + '</a></p>';
				break;
			default:
				return '<p class="see_more"><a class="la_suite2" href="http://www.accor.com/en/press/brand-portfolio/mercure.html" target="_blank">' + label + '</a></p>';
				break;
		}
	}
}