var images_path = '';
var container = $('container_bloc');
var testAllLoaded = new Array();
var galleryActive = "";
var ss = '';
var clone = '';
var oldGallery = '';

var old_bouton_menu = '';
var old_bouton_sous_menu = '';

window.addEvent('domready', function() {
	$('menu_secondaire').setStyle('display', 'block');
	loadGallery('', 'photo_accueil');
	resize();
});


function loadContact(element_btn, my_url){

	galleryActive = 'contact';
	//Supprime le portfolio actif et créé le container pour insérer le nouveau
	if(oldGallery != ''){
			oldGallery.destroy();
	}
	clone = $('gallery').clone().inject('gallery','after');
	clone.set('id', 'gallery'+galleryActive);
	container = new Element('div',{ 'id':'container_bloc'}).inject($('gallery'+galleryActive));
	
	oldGallery = clone;
	
	//Cache les sous-menu
	annuleBoutonMenu(element_btn);
	initSousMenu();
	
	htmlLoaded = false;
	var request = new Request.HTML({
		url: my_url,
		onSuccess: function(html) {
			// On intègre le texte loadé
			$('container_bloc').adopt(html);
			// Ajustemenet de la largeur pour tout avoir sur une ligne horizontale
			var largeur = 155 + 675 + 155 + 330 + 100;
			$('container_bloc').setStyle('width', largeur);
			Cufon.replace('.serie');
			// Possibilité de scroller de gauche à droite
			ss = new ScrollSide($('gallery'+galleryActive));
			
		}
	}).get();
	resize();
}


function loadStudio(element_btn, my_url){

	galleryActive = 'studio';
	//Supprime le portfolio actif et créé le container pour insérer le nouveau
	if(oldGallery != ''){
			oldGallery.destroy();
	}
	clone = $('gallery').clone().inject('gallery','after');
	clone.set('id', 'gallery'+galleryActive);
	container = new Element('div',{ 'id':'container_bloc'}).inject($('gallery'+galleryActive));
	
	oldGallery = clone;
	
	//Cache les sous-menu
	annuleBoutonMenu(element_btn);
	initSousMenu();
	
	htmlLoaded = false;
	var request = new Request.HTML({
		url: my_url,
		onSuccess: function(html) {
			// On intègre le texte loadé
			$('container_bloc').adopt(html);
			// Ajustemenet de la largeur pour tout avoir sur une ligne horizontale
			var largeur = 11350;//155 + 675 + 155 + 330 + 100
			$('container_bloc').setStyle('width', largeur);
			Cufon.replace('.serie');
			Cufon.replace('.serie_pdf');
			// Possibilité de scroller de gauche à droite
			ss = new ScrollSide($('gallery'+galleryActive));
			
		}
	}).get();
	resize();
	
	
}
/*
function over_pdf(element){
	element.getParent().setStyle('background-color','#ffcc00');
	alert($('photo_108').getStyle('background-image'));
	//$('photo_108').setStyle('background-image','none');
	element.tween('opacity', '0.5');
}
function out_pdf(element){
	element.tween('opacity', '1');
}
function click_pdf(url){
	window.open('uploads/PDF/'+url,'_blank');
}*/

function openURL(element_btn, url_pdf) {
	boutonStyle($(element_btn), '#999', '#000');
	Cufon.replace('#menu_secondaire li', {hover: true});
	//window.open(url_pdf,'_blank');ja
}


function annuleBoutonMenu(element_btn){
	// Change l'état du bouton du menu principal
	if(old_bouton_menu != ''){		
		boutonStyle(old_bouton_menu.getFirst(), '#999', '#000');
	}
	if(element_btn != "") {
		old_bouton_menu = $(element_btn).getParent();
		boutonStyle(element_btn, '#000', '#000');
	}
	Cufon.replace('#menu_principal li');	
	Cufon.replace('#menu_secondaire li');
	
}



function loadGallery(element_btn, ma_gallery){

	galleryActive = ma_gallery;
	//Supprime le portfolio actif et créé le container pour insérer le nouveau
	if(oldGallery != ''){
			oldGallery.destroy();
	}
	clone = $('gallery').clone().inject('gallery','after');
	clone.set('id', 'gallery'+galleryActive);
	container = new Element('div',{ 'id':'container_bloc'}).inject($('gallery'+galleryActive));

	oldGallery = clone;
	
	//Load la gallerie
	//var urlJason = 'jason/'+ma_gallery+'.json';
	var urlJason = 'index.php?page='+ma_gallery;
	loadJason(urlJason);

	
	/*Load la bio
	if(galleryActive == 'photo_accueil'){
		var urlBio = 'index.php?page=info-et-contact';
	}else{
		var urlBio = 'anouk.html';
	}
	loadBio(urlBio);*/

	//Affiche les flèches next et previous
	$('previous').setStyle('display', 'block');
	$('next').setStyle('display', 'block');
	
	$('fleche_previous').setStyle('opacity', '0');
	$('fleche_next').setStyle('opacity', '0');
	
	annuleBoutonMenu(element_btn);
	initSousMenu();
}


function initSousMenu(){
	mes_sous_menu = $$('div.sous_menu');
	mes_sous_menu.each(function(mon_sous_menu) { 
		$(mon_sous_menu).setStyle('display', 'none');
     });
}

function boutonStyle(element, color1, color2){
	element.setStyle('color', color1);
		element.addEvents({
	    'mouseover': function(){
	    	element.setStyle('color', color2);
	    },
	    'mouseout': function(){
	      	element.setStyle('color', color1);
	    }
	});
}

function testLoader(qui){
	if(jasonLoaded == true && htmlLoaded == true){		
		placeGallery(galerieJSON, bioHTML);	
	}
}

function loadJason(urlJason){
	jasonLoaded = false;
	var request = new Request.JSON({
		url: urlJason,
		onComplete: function(jsonObj) {
			galerieJSON = jsonObj.previews;
			jasonLoaded = true;
			placeGallery(galerieJSON);
		}
	}).send();
}

function loadBio(urlBio){
	htmlLoaded = false;
	var request = new Request.HTML({
		url: urlBio,
		onSuccess: function(html) {
			bioHTML = html;
			htmlLoaded = true;
			testLoader('html');
		}
	}).get();
}

function placeGallery(images, bio){
	var i=0;
	var largeur = 0;
	var ma_serie = "";
	var id_serie = 0;
	var menu = "";

	images.each(function(image) { 
		if(image !=null){
			if(image.serie != ma_serie && galleryActive != 'photo_accueil'){
		 		var serie 	= new Element('div',{ 'id':'serie_'+id_serie, 'class':'serie', 'text':image.serie}).inject($('container_bloc')); 
		 		serie.setProperty('myPosition', serie.getPosition().x);
		 		serie.addEvent('click', function(){;
	       			moveGallerySerie(this);
				});
				largeur += 150+5;
				ma_serie = image.serie;
				// SOUS MENU
				menu += "<li id='btn_"+id_serie+"'><a href='#' title='"+ma_serie+"' onclick='actionBoutonSerie(this, "+id_serie+")'>"+ma_serie+"</a></li>";
				id_serie++;
			}

			largeur += image.width+6;	
			
	        var bloc 			= new Element('div',{ 'id':'bloc_'+i, 'class':'block','styles': {'width': image.width+'px'}});      
	        var photo 			= new Element('div',{ 'id':'photo_'+i, 'class':'photo'}).inject(bloc); 
	        if(image.serie == "PDF"){
	      		var legende_pdf 	= new Element('div',{ 'id':'legende_pdf'+i, 'class':'serie_pdf', 'text':image.description}).inject(bloc); 
	      		var legende 		= new Element('div',{ 'id':'legende_'+i, 'class':'legende', 'html':"", 'opacity':0,}).inject(bloc);   
			}else{
			  	var legende 		= new Element('div',{ 'id':'legende_'+i, 'class':'legende', 'html':image.description, 'opacity':0,}).inject(bloc); 
	        
			}
	      
	        bloc.inject($('container_bloc'))
	         
	       	resize(); 
	        bloc.setProperty('myPosition', bloc.getPosition().x);
	        i++;
        }

	}); 
		
	$('sous_menu').set('html', menu);
	placeMenu();
	Cufon.replace('#sous_menu');
   
	// Recupere les div des bio et PDF
	if(galleryActive !="photo_accueil"){
		createIlluminationBouton();
	}/*else{
		// On intègre le texte loadé
		$('container_bloc').adopt(bio);
		// Ajustemenet de la largeur pour tout avoir sur une ligne horizontale
		largeur += 155 + 675 + 155 + 330 + 100;	
		
		resize();
	}*/
	Cufon.replace('.serie');
	Cufon.replace('.serie_pdf');
	$('container_bloc').setStyle('width', largeur);
	// Possibilité de scroller de gauche à droite
	var ss = new ScrollSide($('gallery'+galleryActive));
	
	loadImagesConsecutively(images);
	resize();
}

function placeMenu(){

	var sous_menu = $('sous_menu');
	if(sous_menu != null){
		sous_menu.setStyle('opacity', '0');
		sous_menu.setStyle('display', 'block');
		sous_menu.tween('opacity', '1');  

		// On initialise tous les boutons et le premier bouton du sous-menu devient noir
		mes_boutons_sous_menu = $$('#sous_menu li');
		mes_boutons_sous_menu.each(function(bouton) { 
			boutonStyle(bouton.getFirst(), '#999', '#000');
		});

		if(sous_menu.getFirst() != null){
			old_bouton_sous_menu = sous_menu.getFirst();
			boutonStyle(old_bouton_sous_menu.getFirst(), '#000', '#000');
		}
		Cufon.replace('#sous_menu li', {hover: true});
	}
}

function actionBoutonSerie(element_btn, id_serie) {
	if(old_bouton_sous_menu != ''){
		boutonStyle(old_bouton_sous_menu.getFirst(), '#999', '#000');
	}
	if(element_btn != "") {
		boutonStyle(element_btn, '#000', '#000');
		Cufon.replace('.menu li');
	}
 	moveGallerySerie($('serie_'+id_serie));
}

function moveGallerySerie(element){
	position = parseInt(element.getProperty('myPosition'))-30;
	var myElement = $('gallery'+galleryActive);	
	var myFx = new Fx.Scroll(myElement).start(position, 0);
}

function moveGalleryWithPosition(element, position){
	var largeurScreen = document.documentElement.clientWidth;
	var largeurElement = element.getSize().x;
	var positionFinale = position-largeurScreen/2+largeurElement/2;
	var myElement = $('gallery'+galleryActive);
	var myFx = new Fx.Scroll(myElement, {
	     onComplete: function(){
           if($('gallery'+galleryActive).getPosition().x == 0) {
           		$('previous').getFirst().tween('opacity', '0');
           }
        }
	}).start(positionFinale, 0);
}


id_asset = 0
function loadImagesConsecutively(srcs){

	id_asset += 1;
    var imgs = [];
    function loadImage(i){
    	if("undefined" !== typeof(srcs[i])){
    	
	    	SRC_images = srcs[i].src;
	    	if(SRC_images.slice(0,5) == 'vimeo'){
	    		showVideo(SRC_images.slice(6), i, srcs[i].width);
	    		loadImage(i + 1);
	    	}else{
	    		image_url = ''+SRC_images;
	 			var my_id_asset = id_asset
	
	        	op = new Asset.image(image_url, {
	        		onload: function(){
	        	    	if(my_id_asset == id_asset){
	        	            showImage(image_url, i, srcs[i].serie, srcs[i].pdf);
	        	            loadImage(i + 1);
	        	        }
	        		},
	        		onerror: function(){
	       				//if("function" === $type(error)){
	        	            	//   
	    				//}
	       			}
	       		});
	    	}
    	}
    }
    
    loadImage(0);
}

function showImage(image, id, serie, pdf) {

    var photo = $('photo_'+id);
    var legende = $('legende_'+id);
    
	if(photo != null){
       	var img = new Element('img', { src:image, style:'height:500px;pointer:cursor'}).inject(photo);
		var elem_legende = img.getParent().getParent().getFirst().getNext();
		img.set('title', elem_legende.get('text'));
       	//img.setProperty('myPosition', img.getPosition().x);
       	if(serie == "PDF"){
       		img.getParent().getParent().addEvent('mouseover', function(){
       			img.getParent().setStyle('background-color','#000000');
       			img.getParent().setStyle('background-image','none');
				img.tween('opacity', '0.5');
				elem_legende.set('html', 'Download //<br />Télécharger');
				Cufon.replace(elem_legende);
				this.setStyle('z-index', 10000);
			});	
			img.getParent().getParent().addEvent('mouseout', function(){
				img.tween('opacity', '1');
				
				elem_legende.set('html', img.get('title'));
				Cufon.replace(elem_legende);
				this.setStyle('z-index', 10000);
			});	 
			img.getParent().getParent().addEvent('click', function(){
				window.open('uploads/PDF/'+pdf,'_blank');
			});	  
        }else{
            img.addEvent('click', function(){
       			position = parseInt(this.getParent().getParent().getProperty('myPosition'));
       			moveGalleryWithPosition(this, position);
			});	 
        }
		
		img.setStyle('opacity', '0');
		img.tween('opacity', '1');
		
		legende.tween('opacity', '1');  
	}
}

function showVideo(video_id, id, largeur) {
    var photo = $('photo_'+id);
    var legende = $('legende_'+id);
    
	if(video_id != null){

		var moogaloop = new Swiff('http://vimeo.com/moogaloop.swf', {
			id: 'moogaloop',
			container: photo,	
		 	width: largeur,
			height: 500,
			vars: {
				color:'ffffff',
				clip_id: video_id,
				show_portrait: 0,
				show_byline: 0,
				show_title: 0,
				fullscreen: 1
			},
			params: {
				allowscriptaccess: 'always',
				allowfullscreen: 'true'
			}
		});
		if(legende != null){
			legende.tween('opacity', '1');  
		}
	}
}

function resize(){
	var hauteur = document.documentElement.clientHeight;
	var largeur = document.documentElement.clientWidth

	hauteur=(hauteur-120-500-15)/2+120;
	if(hauteur<120){
		hauteur=120;
	}
	$('container_bloc').setStyle('margin-top', hauteur+"px");
	$('top').setStyle('width', largeur+"px");
	
	$('next').setStyle('top', hauteur+"px");
	$('previous').setStyle('top', hauteur+"px");
	$('next').setStyle('left', largeur-100+"px");
}

function fleche(ma_fleche, event){
	var fleche = ma_fleche.getFirst();
	posGallery = $('gallery'+galleryActive).getPosition().x;	
	if(event=="over"){
		if(ma_fleche.id=="previous" && posGallery==0)  {
			//	
		}else {
			fleche.tween('opacity', '0.5');  			
		}

	}else if(event=="out"){
		fleche.tween('opacity', '0');  
	}else if(event=="clik"){
		
		mesPhotos=$$('div.block');
		
		if(ma_fleche.id == 'previous'){
			mesPhotos.each(function(ma_photo) { 
				posMin = parseInt(ma_photo.getProperty('myPosition'));
				posMax = posMin+ma_photo.getSize().x;
				if(-posGallery >= posMin && -posGallery <= posMax){
					moveGalleryWithPosition(ma_photo, posMin);
					return;
				}
	   		 });
		}else {
			largeur = document.documentElement.clientWidth;
			mesPhotos.each(function(ma_photo) { 	
				posMin = parseInt(ma_photo.getProperty('myPosition'));
				posMax = posMin+ma_photo.getSize().x;
				if(-posGallery+largeur >= posMin && -posGallery+largeur <= posMax){
					moveGalleryWithPosition(ma_photo, posMin);
					return;
				}
	   		});
		}
	}
}

function boutonEvent(id_element, event) {
	element = $('btn_'+id_element).getFirst();
	if(event == 'in') {
		boutonStyle(element, '#000', '#000');
	}else {
		boutonStyle(element, '#999', '#000');
	}
	Cufon.replace('.menu li');
}

function createIlluminationBouton() {
	
	// Recupère les positions de chaque série
	var positionsSeries = new Array();	
	mesSeries=$$('div.serie');
	mesSeries.each(function(ma_serie) { 
		if(ma_serie.id != 'serie_pdf'){
			op = $(ma_serie.id).getPosition().x;
			positionsSeries.push(op-document.documentElement.clientWidth/2);
		}
    });
     positionsSeries.push(100000);


    
	// Créeation des conditions pour allumer les boutons du sous-menu en fonction de la position de la gallerie
	var bouton1 = new ScrollSpy({ 
		min: positionsSeries[0], 
		max: positionsSeries[1]-5, 
		onEnter: function(position,state,enters) { 
			boutonEvent(0, 'in');				
		}, 
		onLeave: function(position,state,leaves) { 
			boutonEvent(0, 'out');				
		}, 
		container: $('gallery'+galleryActive), 
		mode: 'horizontal'
	}); 
	
	var bouton2 = new ScrollSpy({ 
		min: positionsSeries[1], 
		max: positionsSeries[2]-5,
		onEnter: function(position,state,enters) { 
			boutonEvent(1, 'in');	
		}, 
		onLeave: function(position,state,leaves) { 
			boutonEvent(1, 'out');	
		}, 
		container: $('gallery'+galleryActive), 
		mode: 'horizontal' 
	}); 
	
	var bouton3 = new ScrollSpy({ 
		min: positionsSeries[2], 
		max: positionsSeries[3]-5,
		onEnter: function(position,state,enters) { 
			boutonEvent(2, 'in');	
		}, 
		onLeave: function(position,state,leaves) { 
			boutonEvent(2, 'out');				
		}, 
		container: $('gallery'+galleryActive), 
		mode: 'horizontal' 
	}); 
	
	var bouton4 = new ScrollSpy({ 
		min: positionsSeries[3], 
		max: positionsSeries[4]-5,
		onEnter: function(position,state,enters) { 
			boutonEvent(3, 'in');	
		}, 
		onLeave: function(position,state,leaves) { 
			boutonEvent(3, 'out');				
		}, 
		container: $('gallery'+galleryActive), 
		mode: 'horizontal' 
	}); 
	
	var bouton5 = new ScrollSpy({ 
		min: positionsSeries[4], 
		max: positionsSeries[5]-5,
		onEnter: function(position,state,enters) { 
			boutonEvent(4, 'in');			
		}, 
		onLeave: function(position,state,leaves) { 
			boutonEvent(4, 'out');	
		}, 
		container: $('gallery'+galleryActive), 
		mode: 'horizontal' 
	}); 

	var bouton6 = new ScrollSpy({ 
		min: positionsSeries[5], 
		max: positionsSeries[6],
		onEnter: function(position,state,enters) { 
			boutonEvent(5, 'in');	
		}, 
		onLeave: function(position,state,leaves) { 
			boutonEvent(5, 'out');	
		}, 
		container: $('gallery'+galleryActive), 
		mode: 'horizontal' 
	}); 
}


function fadeIn(div){
	div.tween('opacity', '1');
}
function fadeOut(div){
	div.tween('opacity', '0.6');
}