var XML_HOMEPAGE = 'dbcontent/content.json.php?tri='+order+'&preview='+preview;
var XML_PROJET = 'dbcontent/projet.json.php?id='+Id_Projet+'&preview='+preview;
var json_HomepageContent;
var json_ProjetContent;
var imagesPage;
var TimeSlide = 3000;
var NbProjet = 0;
var HAUTEUR_TRI = 500;

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

function LoadPageContent(){
	LoadthumbsContent();
	LoadProjetContent();
	$('Galery_Projet').setStyles({'left': '0px'});
}


function TrierThumbs(id){
	Position_Galery = 0;
	if (id==-1){
		id = 'date';
	} else if (id==-2){
		id = 'date_asc';
	}
	XML_HOMEPAGE = 'dbcontent/content.json.php?tri='+id;
	LoadthumbsContent();
	var Target = $('Galery_Projet');
	Target.setStyles({'left': '910px'});
	var moveGallery = new Fx.Styles(Target, {duration: 750, wait: false, transition: Fx.Transitions.Back.easeInOut});
	moveGallery.start({'left':  0, 'top': 247});
}

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

/* STEP 3. Launch the different element initialisations */
function InitalizePageContent(){
	InitalizeTimeline();
	InitalizeTrier();
}

/* 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();
		
		var i = 1;
		var Nb_projet = json_HomepageContent.projet.length;
		
		json_HomepageContent.projet.each( function(Projet) {
					
					var posgalery = i+Position_Galery;
					
					if (posgalery<1){
						posgalery = Nb_projet+posgalery;
					}
//					alert('Id_Thumbs= '+Id_Thumbs+' i= '+i);
					if (Projet.id == Id_Projet){
						var class_projet = 'Projet select';
					} else {
						var class_projet = 'Projet';
					}
					var Div_projet = new Element('div', { id: 'Projet_'+Projet.id, 'class': class_projet ,'pos': posgalery }).injectInside(Galery_Projet);
					
					var posfin = (posgalery-1)*181;
					Div_projet.setStyles({'position': 'absolute', 'top': '0px', 'left': posfin +'px'});
					
					//var Projet_image = new Element('div', { 'class': 'Projet_image' }).injectInside(Div_projet);
					
					var Projet_note = new Element('div', { 'class': 'Projet_note' }).setHTML('<h2>'+Projet.city+'</h2><h3>'+Projet.name+'</h3>').injectInside(Div_projet);
					Projet_note.setStyles({'position': 'absolute','top': '135px', 'margin-top': '0px'});
					
					var id = Projet.id;
					
					Div_projet.addEvents({
						'click': function(e) {
							gotoprojet(id);
							//this.addClass('select');
						},
						'mouseenter': function() {
							showItem(id, Projet.name, Projet.info, Projet.thumbs);
						},
						'mouseleave': function() {
							hideItem(id);
						}
					});
					
					if (posgalery==Nb_projet){
						i=-Position_Galery;
					}
			
			i++;

		});
		
	}

}

/* STEP 2. Load the Home Page Json Content File */
function LoadProjetContent(){
	var request = new Json.Remote(XML_PROJET, {
		onComplete: function(jsonObj) {
			json_ProjetContent = jsonObj
			InitalizeProjetContent();
		}
	}).send();
}

/* STEP 3. Launch the different element initialisations */
function InitalizeProjetContent(){
	InitalizeProjet('overview');
	InitalizeTitle();
}
function InitalizeTitle(){
	
	var target_titre = $('TopFrame_Title');
	var Titre ='<h2>'+getTerm('Projet')+' / </h2><h3> '+json_ProjetContent.name+'</h3>';
	target_titre.setHTML(Titre);
}
function InitalizeProjet(page){
	if ( json_ProjetContent ){
		
		$$('.TopFrameMenuSelect').removeClass('TopFrameMenuSelect');
		try {$(page).addClass('TopFrameMenuSelect');} catch (e){};
		
		
		var Projet_Content = $('Projet_Content');
		
		Projet_Content.empty();
		
		var image_target = new Element('div', { id: 'Target_Image' }).injectInside(Projet_Content);
		var info_target = new Element('div', { id: 'Projet_Content_Info' }).injectInside(Projet_Content);
		var info_Content = new Element('div', { id: 'Projet_Info_Text' }).injectInside(info_target);
		

		info_target.setStyles({'display': 'block'});
		info_Content.setHTML($('FullContent_Info_' + page).innerHTML);

		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);
		imagesPage = json_ProjetContent.image[page];
		
		var image = imagesPage[0];
		
		new Asset.images(image, {
					onProgress: function(i) {
					loadedImages = this;
					},
					onComplete: function() {
									loadedImages.injectInside(image_big);						
									image_big.effect('opacity', {duration: 200}).start(1);
									if(imagesPage.length>1){
										(function(){ loadslideshow(1); }).delay(TimeSlide);
									}
								}
				});
		var hauteur = $('Projet_Info_Text').getCoordinates().height;
		if (hauteur>342){
			var scroll = new Element('div', { id: 'scrollbar1', 'class': 'scrollbar-vert' }).injectInside(Projet_Content);
			var handle = new Element('div', { id: 'handle1', 'class': 'handle-vert' }).injectInside(scroll);
			scroll.setStyles({'right':'127px'});
			makeScrollbar( $('Projet_Content_Info'), $('scrollbar1'), $('handle1') );
		}
	}
}
function loadslideshow(i){
	var image_big = $('Image_big');
	if(imagesPage.length>1){
		var image = imagesPage[i]
		new Asset.images(image, {
					onProgress: function() {
					loadedImages = this;
					},
					onComplete: function() {
						image_big.effect('opacity', {
							duration: 200,
							onComplete: function(){
								image_big.empty();
								loadedImages.injectInside(image_big);						
								image_big.effect('opacity', {
									duration: 200,
									onComplete: function(){
										if(i==imagesPage.length-1){
											i=0;
										} else {
											i++;
										}
										(function(){ loadslideshow(i); }).delay(TimeSlide);
									}}).start(1);
							}}).start(0);
						}
				});
	}
}
function InitalizeGallery(){
	if ( json_ProjetContent ){
		
		$$('.TopFrameMenuSelect').removeClass('TopFrameMenuSelect');
		$('gallery').addClass('TopFrameMenuSelect');
		
		var Projet_Content = $('Projet_Content');
		
		Projet_Content.empty();
		
		var image_target = new Element('div', { id: 'Target_Image' }).injectInside(Projet_Content);
		var info_target = new Element('div', { id: 'Projet_Content_Thumbs' }).injectInside(Projet_Content);
		var content = new Element('div', { id: 'content' }).injectInside(info_target);
		
		info_target.setStyles({'display': 'block'});
		image_target.setStyles({'width':'561px'});
		
		LoadImageGallery(json_ProjetContent.gallery[0].path);
		
		var t = -1;
		json_ProjetContent.gallery.each( function(Projet) {
			
			var projet_target = new Element('div', { id: 'Target_Thumbs' }).injectInside(content);
			var name = new Element('div', { 'class': 'name' }).setHTML(Projet.name).injectInside(projet_target);
			var downloads = new Element('div', { 'class': 'downloads' }).setHTML('<span class="titre">Téléchargement:</span><br><a href="javascript:openBrWindow(\'img.php?img='+Projet.low+'\',\'\')">Low</a><br><a href="javascript:openBrWindow(\'img.php?img='+Projet.medium+'\',\'\')">Medium</a><br><a href="javascript:openBrWindow(\'img.php?img='+Projet.high+'\',\'\')">High</a>').injectInside(projet_target);
			var thumbs = new Element('div', { 'class': 'thumbs' }).setHTML('<img src="'+Projet.thumbs+'"/>').injectInside(projet_target);
			
			projet_target.addEvents({
				'click': function(e) {
					
				},
				'mouseenter': function() {
					LoadImageGallery(Projet.path);
					//var clip = projet_target.getElements.('div[class=downloads]');
					//$$('.downloads').setStyles({'display': 'none'});
					projet_target.getElements('div[class=downloads]').setStyles({'display': 'block'});
					//showDownload(this, Projet.id);
				},
				'mouseleave': function() {
					projet_target.getElements('div[class=downloads]').setStyles({'display': 'none'});
				}
			});
			t++;
		});
		
		
		//MM_preloadImages('images/gallery_1.jpg','images/gallery_2.jpg','images/gallery_3.jpg','images/gallery_4.jpg');

		
		var hauteur = $('content').getCoordinates().height;
		if (hauteur>355){
			var scroll = new Element('div', { id: 'scrollbar1', 'class': 'scrollbar-vert' }).injectInside(Projet_Content);
			var handle = new Element('div', { id: 'handle1', 'class': 'handle-vert' }).injectInside(scroll);
			makeScrollbar( $('Projet_Content_Thumbs'), $('scrollbar1'), $('handle1') );
		}		
	}
}
function InitalizePeople(){
	if ( json_ProjetContent ){
		$$('.TopFrameMenuSelect').removeClass('TopFrameMenuSelect');
		$('people').addClass('TopFrameMenuSelect');
		
		var Projet_Content = $('Projet_Content');
		
		Projet_Content.empty();
		
		var image_target = new Element('div', { id: 'Target_Image' }).injectInside(Projet_Content);
		var info_target = new Element('div', { id: 'Projet_Content_Thumbs' }).injectInside(Projet_Content);
		var contentTarget = new Element('div', { id: 'contentTarget' }).injectInside(info_target);
		var content = new Element('div', { id: 'content' }).injectInside(contentTarget);
		var info = new Element('div', { id: 'info' }).setHTML($('FullContent_Info_people').innerHTML).injectInside(Projet_Content);
		
		info_target.setStyles({'display': 'block'});
		image_target.setStyles({'width':'561px'});
		
		//LoadImageGallery(json_ProjetContent.people[0].path);
		
		var t = -1;
		json_ProjetContent.people.each( function(Projet) {
			
			var projet_target = new Element('div', { id: 'Target_Thumbs' }).injectInside(content);
			var name = new Element('div', { 'class': 'name' }).setHTML(Projet.lastname+' '+Projet.name+'<br>'+Projet.fonction).injectInside(projet_target);
			var downloads = new Element('div', { 'class': 'downloads' }).injectInside(projet_target);
			var thumbs = new Element('div', { 'class': 'thumbs' }).setHTML('<img src="'+Projet.thumbs+'"/>').injectInside(projet_target);
			var infobg = new Element('div', { id: 'peopleInfoBg' }).injectInside($('Projet_Content_Thumbs'));
			infobg.setStyles({'display': 'none'});
			
			thumbs.addEvents({
				'click': function(e) {
					
				},
				'mouseenter': function() {
					$$('.downloads').setStyles({'display': 'none'});
					LoadImageGallery(Projet.path);
					showPeople(Projet.lastname,Projet.name,Projet.fonction,Projet.info,Projet.contact);
					projet_target.getElements('div[class=downloads]').setStyles({'display': 'block'});
					$('peopleInfoBg').setStyles({'display': 'block'});
				},
				'mouseleave': function() {
					//projet_target.getElements('div[class=downloads]').setStyles({'display': 'none'});
				}
			});
			t++;
		});
		$('Projet_Content_Thumbs').addEvents({
			'mouseleave': function() {
				$$('.downloads').setStyles({'display': 'none'});
				$('peopleInfo').setStyles({'display': 'none'});
				$('peopleInfoBg').setStyles({'display': 'none'});
				$('Target_Image').empty();
				$('Target_Image').setStyles({'display': 'none'});
			}
		});
		var hauteur = $('content').getCoordinates().height;
		if (hauteur>352){
			var scroll = new Element('div', { id: 'scrollbar1', 'class': 'scrollbar-vert' }).injectInside(Projet_Content);
			var handle = new Element('div', { id: 'handle1', 'class': 'handle-vert' }).injectInside(scroll);
			makeScrollbar( $('contentTarget'), $('scrollbar1'), $('handle1') );
		}
	}
}

function showPeople(lastname,name,fonction,info,contact){
	if ($('peopleInfo')){
		$('peopleInfo').remove();
	}
	var info = new Element('div', { id: 'peopleInfo' }).setHTML('<h1>'+lastname+' '+name+'</h1><h2>'+fonction+'</h2>').injectInside($('Projet_Content_Thumbs'));
//	var info = new Element('div', { id: 'peopleInfo' }).setHTML('<h1>'+lastname+' '+name+'</h1><h2>'+fonction+'</h2><p>'+info+'</p><span class="titre">Contact:</span><br><a href="mailto:'+contact+'">'+contact+'</a>').injectInside($('Projet_Content_Thumbs'));

}

function showItem(id, name, info, image){
	//$$('.select').removeClass('select');
	var clip = $('Projet_'+id);
	clip.addClass('select');
	
	if ($('Projet_info')){
		$('Projet_info').remove();
	}
	if ($('Projet_image')){
		$('Projet_image').remove();
	}
	$('BottomFrame').setStyles({'z-index': '1000'});
	var info_target = new Element('div', { id: 'Projet_info' }).injectInside(clip);
	var Projet_image = new Element('div', { id: 'Projet_image', 'class': 'Projet_image' }).setHTML('<img src="' + image + '"/>').injectInside(clip);
	if (window.ie7){
		Projet_image.setStyles({'position': 'absolute','top':'-11px','margin-bottom': '49px'});
	} else {
		Projet_image.setStyles({'margin-top': '-11px','margin-bottom': '38px'});
	}
	info_target.setStyles({'display': 'block','margin-top': '8px','margin-left': '0px','height': '189px'});
	info_target.setHTML(info);
	
}

function hideItem(id){
	
	$('Projet_info').remove();
	$('Projet_image').remove();
	var clip = $('Projet_'+id);
	clip.removeClass('select');
	$('BottomFrame').setStyles({'z-index': '800'});
	$('Projet_'+Id_Projet).addClass('select');
}

function LoadImageGallery(image){
	
	var image_target = $('Target_Image');
	image_target.empty();
	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);
								loadedImages.setStyles({
									'margin-top': (image_big.getCoordinates().height-loadedImages.getCoordinates().height)/2+'px',
									'margin-left': (image_big.getCoordinates().width-loadedImages.getCoordinates().width)/2+'px'
								})
								image_big.effect('opacity', {duration: 200}).start(1);
							}
			});
}