var XML_HOMEPAGE = 'dbcontent/content.json.php?tri='+order;
var json_HomepageContent;
var HAUTEUR_TRI = 363;

/* STEP 1. Load content when the whole page is loaded, included all images */
window.addEvent('load', function() {
	LoadPageContent();
});

function TrierThumbs(id){
	XML_HOMEPAGE = 'dbcontent/content.json.php?tri='+id;
	LoadPageContent();
}

/* STEP 2. Load the Home Page Json Content File */
function LoadPageContent(){
	// alert('1');
	var request = new Json.Remote(XML_HOMEPAGE, {
		onComplete: function(jsonObj) {
			json_HomepageContent = jsonObj
			InitalizePageContent();
		}
	}).send();	
}

/* STEP 3. Launch the different element initialisations for the Home Page*/
function InitalizePageContent(){
	
	InitializeText();
	InitalizeTimeline();
	InitalizeTrier();

}

function InitializeText(){
	if ( json_HomepageContent && json_HomepageContent.contentPage){
		var TopFrame = $('TopFrame');
		TopFrame.empty();
		// alert('ok');
		var title = '<span class="tcolor">Atenor Group</span> '+json_HomepageContent.contentPage[0].title;
		var header = json_HomepageContent.contentPage[0].header;
		var body = json_HomepageContent.contentPage[0].body;
	
		
		var TopFrame_Title = new Element('div', { id: 'TopFrame_Title' }).injectInside(TopFrame);
		
		if(order && order!='date'){
			var home = new Element('div', { id: 'TopFrameHome' }).setHTML('<a href="index.php">Home</a>').injectInside(TopFrame);
			var TopFrame_Content = new Element('div', { id: 'TopFrame_Content', 'class':'backg' }).injectInside(TopFrame);
			
			var Target_Image = new Element('div', { id: 'Target_Image' }).injectInside(TopFrame_Content);
			var TopLeft = new Element('div', { id: 'TopLeftSecondary' }).injectInside(TopFrame_Content);
			var TopRight = new Element('div', { id: 'TopRightSecondary' }).injectInside(TopFrame_Content);
			
			TopLeft.setHTML('<div id="TitreTopLeft">'+StripSlashes(title)+'</div>'+StripSlashes(header));
			TopRight.setHTML(StripSlashes(body));
		}
		else{
			var titre_news = json_HomepageContent.news[0].title;
			var text_news = json_HomepageContent.news[0].text;
			var date_news = json_HomepageContent.news[0].date;
			
			var TopFrame_Content = new Element('div', { id: 'TopFrame_Content' }).injectInside(TopFrame);
			var Target_Image = new Element('div', { id: 'Target_Image' }).injectInside(TopFrame_Content);
			var TopLeft = new Element('div', { id: 'TopLeft' }).injectInside(TopFrame_Content);
			var TopRight = new Element('div', { id: 'TopRight' }).injectInside(TopFrame_Content);
			var TitreTopLeft = new Element('div', { id: 'TitreTopLeft' }).setHTML(StripSlashes(title)).injectInside(TopLeft);
			var HeaderTopLeft = new Element('p').setHTML(StripSlashes(header)).injectInside(TopLeft);
			var BodyTopRight = new Element('div', { id: 'TitreNews' }).injectInside(TopRight);
			var termNouveau = new String(getTerm('nouveaute'));
			var TitreTopRight = new Element('span', { 'class': 'TitreDate' }).setHTML(termNouveau).injectInside(BodyTopRight);
			var DateTopRight = new Element('span', { 'class': 'NewsDate' }).setHTML(' / '+date_news).injectInside(BodyTopRight);
			var H1TopRight = new Element('h1').setHTML(StripSlashes(titre_news)).injectInside(BodyTopRight);
			var termRead = new String(getTerm('readmore'));
			var p = new Element('p').setHTML(StripSlashes(text_news)+'<br /><a href="news.php">'+termRead+'</a>').injectInside(BodyTopRight);
			// TopLeft.setHTML('<div id="TitreTopLeft">'+StripSlashes(title)+'</div>'+StripSlashes(header));
			// TopRight.setHTML('<div id="TitreNews"><span class="TitreDate">Nouveautés</span><span class="NewsDate"> / '+date_news+'</span></div><h1>'+StripSlashes(titre_news)+'</h1><br />'+StripSlashes(text_news)+'<br /><a href="news.php">Lire la suite</a>');
		}
	}
}
var NbProjet = 0;

/* STEP 5. Feed the Time Line Grid */
function InitalizeTimeline(){
	if ( json_HomepageContent && json_HomepageContent.projet && json_HomepageContent.projet.length > 0 ){
		
		
		NbProjet = json_HomepageContent.projet.length;
		var Galery_Projet = $('Galery_Projet');
		Galery_Projet.empty();
		Galery_Projet.setStyles({'left': '910px'});
		
		var i = 1;

		json_HomepageContent.projet.each( function(Projet) {
			
					var Div_projet = new Element('div', { id: 'Projet_'+i, 'class': 'Projet' ,'pos': i }).injectInside(Galery_Projet);
					
					var posfin = (i-1)*181;
					Div_projet.setStyles({'position': 'absolute', 'top': '0px', 'left': posfin +'px'});
					
					var Projet_image = new Element('div', { 'class': 'Projet_image' }).setHTML('<img src="' + Projet.thumbs + '"/>').injectInside(Div_projet);
					
					var Projet_note = new Element('div', { 'class': 'Projet_note' }).setHTML('<h2>'+Projet.city+'</h2><h3>'+Projet.name+'</h3>').injectInside(Div_projet);
					
					var id = i;

					Div_projet.addEvents({
						'click': function(e) {
							gotoprojet(Projet.id,id);
							//alert(Projet.name)
							//this.addClass('select');
						},
						'mouseenter': function() {
							//$$('.Projet').removeClass('select');
							showItem(id, Projet.name, Projet.info, Projet.image);
						},
						'mouseleave': function() {
							hideItem(id);
						}
					});
			
			i++;

		});
		
		var Target = $('Galery_Projet');
		var moveGallery = new Fx.Styles(Target, {duration: 750, wait: false, transition: Fx.Transitions.Back.easeInOut});
		moveGallery.start({'left':  0, 'top': 247});
			
	} else {
		alert(json_HomepageContent.projet);
	}

}

function showItem(id, name, info, image){
	var clip = $('Projet_'+id);
	clip.addClass('select');
	if ($('Projet_info')){
		$('Projet_info').remove();
	}
	$('BottomFrame').setStyles({'z-index': '1000'});
	$('Galery').setStyles({'z-index': '1000'});
	var info_target = new Element('div', { id: 'Projet_info' }).injectInside(clip);
	//var info_target = $('Projet_info');
	var image_target = $('Target_Image');
	var target_titre = $('TopFrame_Title');
	
	
	info_target.empty();
	image_target.empty();
	
	info_target.setStyles({'display': 'block'});
	info_target.setHTML(info);
	
	image_target.setStyles({'display': 'block'});
	var image_big = new Element('div', { id: 'Image_big' }).injectInside(image_target);
	image_big.effect('opacity', {duration: 500}).set(0);
	
	new Asset.images(image, {
				onProgress: function(i) {
				loadedImages = this;
				},
				onComplete: function() {
								loadedImages.injectInside(image_big);						
								image_big.effect('opacity', {duration: 200}).start(1);
							}
			});
	
	//image_target.setHTML('<img src="' + image + '"/>');
	
	var chaine = name;
	var reg = new RegExp("(<br>)", "g");
	var chaine_2 = chaine.replace(reg," ");
	var termProjet = new String(getTerm('Projet'));
	var Titre = '<h2>'+termProjet+' / </h2><h3>'+chaine_2+'</h3>';
	
	target_titre.setHTML(Titre);
}

function hideItem(id){
	
	var clip = $('Projet_'+id);
	var info_target = $('Projet_info');
	var image_target = $('Target_Image');
	var target_titre = $('TopFrame_Title');
	$('BottomFrame').setStyles({'z-index': '800'});
	$('Galery').setStyles({'z-index': '300'});
	
	info_target.setStyles({'display': 'none'});
	image_target.setStyles({'display': 'none'});
	info_target.empty();
	image_target.empty();
	target_titre.empty();
	clip.removeClass('select');
}
var Position_Galery = 0;