var fadeEffect;

window.addEvent('domready', function() {
	
	$('Accueil').addClass('active');
	$('Accueil').setStyle('padding-left',100);
	
	fadeEffect = new Fx.Tween($('corps'), {
		'property': 'opacity',
		'link': 'chain',
		'duration': 'normal',
	});
	
	$$('#menu li').each(function(el) {
		el.set('tween', { 
							'transition': Fx.Transitions.Bounce.easeOut,
							'duration': 'normal',
							'link': 'chain'});
	});
	
	$$('#menu li').addEvent('click', function() {
		id = this.get('id');
		fadeEffect.start(0).chain(function() { tab(id); });
		
		$$('.active').tween('padding-left', 0);
		
		this.tween('padding-left', 100);
	});
	
});

function tab(id) {

	$$('.active').each(function(el) {
		el.removeClass('active');
	});
	
	$(id).addClass('active');
	
	var req = new Request({
		url: './pages.php', // Page destination
		method: 'post', // Méthode utilisée
		data: { 'tab' : id }, // Data envoyée par "POST" à la page destinataire
		
		onSuccess: function(txt, xml) { // Traitement effectué une fois la requête reçue

			// Les traitements ne sont pas les mêmes selon la page reçue
			switch(id) {
				case "Galerie": // Dans le cas de la galerie
				   // On enlève tout le contenu actuellement affiché dans le corps
				   $('contenu').set('html','');
				   traitementGallerie(xml);
				   break;
				   
				case "Blog" : // Dans le cas du Blog
					eval(txt); // On exécute le code renvoyé
					break;

				default: // Dans tous les autres cas
					// On met dans le corps le contenu reçu
					$('contenu').set('html',txt);
					break;
			}
			
			fadeEffect.start(1);

		}

	}).send();

}

function traitementGallerie(reponse) {

	// On crée une balise div avec pour id "listeImage"
    var lesImages = new Element('div', {id:"listeImage"});
	
    if(Browser.Engine.trident) {
    	// On récupère toutes les images dans un tableau
        var listeImages = reponse.getElementsByTagName("data")[0];
        
        // On répète ce traitement pour chage image reçue
        for (i = 0; i < listeImages.childNodes.length; i++) {
                
            // On récupère l'image courante
            var current = listeImages.getElementsByTagName("image")[i];

            // On crée des variables pour chaque détail de l'image
            desc = current.getElementsByTagName("desc")[0].text; // On récupère le nom de l'image (champ d'indice 0 dans le tableau)
            url = current.getElementsByTagName("url")[0].text; // On récupère l'url de l'image (champ d'indice 1 dans le tableau)
            ext = current.getElementsByTagName("ext")[0].text; // On récupère l'extension de l'image (champ d'indice 2 dans le tableau)

            // On crée une image
            image = new Element('img', {
                src:"galerie/" + url + "_thumb" + "." + ext, // Chemin de l'image
                alt: desc, // Affichage alternatif
                name: desc, // Nom de l'image
                'class':"galerie", // Classe (toujours la même)
                id:url // id de l'image
            });

            // On rajoute un listener sur l'évènement "click", qui appelera la fonction
            // fournie en seconde paramètre
            image.addEvent('click', function() {
                    open(this.get('src'), this.get('name')); // On appel la fonction "open"
            });

            // On ajoute les images à la division précédement créée
            lesImages.grab(image);
    		
        }
        
    }
    else
    {
    	// On récupère toutes les images dans un tableau
        var listeImages = reponse.getElementsByTagName("image");
        //var length = listeImages.length;
        
        for (i = 0; i < listeImages.length; i++) {
            
            // On récupère l'image courante
            var current = listeImages.item(i);

            // On récupère les détails de l'image courante dans un tableau
            myElements = current.getElementsByTagName("*");

            // On crée des variables pour chaque détail de l'image
            desc = myElements.item(0).textContent; // On récupère le nom de l'image (champ d'indice 0 dans le tableau)
            url = myElements.item(1).textContent; // On récupère l'url de l'image (champ d'indice 1 dans le tableau)
            ext = myElements.item(2).textContent; // On récupère l'extension de l'image (champ d'indice 2 dans le tableau)
            
            // On crée une image
            image = new Element('img', {
                src:"galerie/" + url + "_thumb" + "." + ext, // Chemin de l'image
                alt: desc, // Affichage alternatif
                name: desc, // Nom de l'image
                'class':"galerie", // Classe (toujours la même)
                id:url // id de l'image
            });
            
            // On rajoute un listener sur l'évènement "click", qui appelera la fonction
            // fournie en seconde paramètre
            image.addEvent('click', function() {
                    open(this.get('src'), this.get('name')); // On appel la fonction "open"
            });

            // On ajoute les images à la division précédement créée
            lesImages.grab(image);
    		
        }
        
    } 

    // On vide le corps
    $('contenu').set('html','<p></p>');

    // On ajoute la division précédement créée
    $('contenu').grab(lesImages);

    // On lance l'effet qui consiste en une transition sur la hauteur du corps
    // on part de la hauteur actuelle jusque le nombre d'images divisé par 6 (6 images par
    // ligne) multiplié par 75 (une image fait 75px) + 15 (padding des images)
    // + 40 pour le padding du corps habituel
    // + la hauteur du footer + 10 pour un padding
    //$('slider').tween('height', [$('slider').getProperty('height'),
      //                              Math.ceil(i/6) * (75 + 15) + 40 + $('footer').getHeight() + 10]);

    myMask = new Mask(document.body, {
        id: 'myMask',
        onClick:function() {
            close();
        }
    });
	
}

function open(source, nom) {

    // Extraction du nom de l'image
    lien = source.substring(source.indexOf('/',0) + 1, source.lastIndexOf('.')); // Sous-chaîne partant de la première occurence de "/" + 1, jusqu'à la dernière occurence de "." (juste avant l'extension)
    lien = lien.substring(0, lien.lastIndexOf('_')); // On supprime le "_thumb" qui est dans le nom de chaque thumbnails

    // Extraction de l'extension de l'image
    extension = source.substr(source.lastIndexOf('.'), 4); // On prend 4 caractères après la dernière occurence de ".". On en prend 4 car c'est la taille max d'une extension pour une image

    // Application du mask
    myMask.show();
    
    // Création de la div qui contiendra la galerie
    conteneur = new Element('div', {
        id:'conteneur',
        style:'width:0; height:0; visibility:hidden;' // On met les tailles à 0 pour pouvoir faire un effet après
    });
    
    // Création de la div qui contiendra l'image
    imageConteneur = new Element('div', {
        id:'imageConteneur'
    });

    // Création de l'image
    myImage = new Element('img', {
        src: "galerie/" + lien + extension // On renseigne la source de l'image avec les infos trouvées plus haut
    });

    // Création de la div "Description"
    description = new Element('div', {
    	id:'description',
    	html: '<p>' + nom + '</p>'
    });
    
    // Création de la div "Fermer"
    closeIt = new Element('div', {
       id:'closeIt',
       html:'<p>Cliquez ici pour fermer</p>'
    });
    
    // On adopte le conteneur
    document.body.adopt(conteneur);
    $('conteneur').adopt(imageConteneur);
    $('imageConteneur').adopt(myImage);
    $('conteneur').adopt(description);
    $('conteneur').adopt(closeIt);

    closeIt.addEvent('click', close);

    // On ajoute un listener sur le chargement de l'image
    myImage.addEvent('load',function() {
        
        myWidth = myImage.getSize().x; // On récupère la largeur de l'image
        myHeight = myImage.getSize().y; // On récupère la hauteur de l'image
		
	var size = window.getSize(); // On récupère la taille de l'écran
      
        // On limite la hauteur de l'image (en gardant la résolution)
        if(myHeight > 350) {
            myHeight = (600 * (myHeight / myWidth));
        }
        
        // On limite la largeur de l'image
        if(myWidth > 350) {
            myWidth = 600;
        }

        // On centre l'image sur l'axe Y
        if((size.y) - (myHeight) < 0) { // Si l'écran est plus petit que l'image
            // On colle l'image en haut à gauche de l'écran
            $('conteneur').setStyle('top',0);
        } else {
            // Sinon, on positionne l'image au centre de l'écran
            // (le coin supérieur gauche de l'image sera à la moitié de l'écran, et on pense à prendre
            //  en compte le padding et les bordures de l'image)
            $('conteneur').setStyle('top',((size.y)/2) - (myHeight/2) - $('conteneur').getStyle('padding').toInt());
        }

        // Même raisonnement pour l'axe X
        if((size.x/2) - (myWidth/2) < 0) {
            $('conteneur').setStyle('left',0);
        } else {
            $('conteneur').setStyle('left',((size.x)/2) - (myWidth/2) - $('conteneur').getStyle('padding').toInt() - 5);
        }

        // On rend le conteneur visible
        $('conteneur').setStyle('visibility','visible');
		
        // On définit maintenant la taille de l'image pour qu'elle ne dépasse pas la taille max
        myImage.setProperty('width',myWidth);
        myImage.setProperty('height',myHeight);
        
        // Fx.Tween changeant progressivement la largeur du conteneur
        conteneurWidthTween = new Fx.Tween(conteneur, {
            property:'width'
        }); 
        
        // Fx.Tween changeant progressivement la hauteur du conteneur
        conteneurHeightTween = new Fx.Tween(conteneur, {
            property:'height'
        });

        // Fx.Tween faisant apparaître progressivement l'indication de fermeture
        closeItHeightTween = new Fx.Tween(closeIt, {
           property:'height'
        });
          
        // On lance les trois Fx.Tween
        conteneurWidthTween.start(myWidth);
        conteneurHeightTween.start(myHeight + 30); // (+30 pour permettre l'affichage du pied (desc + fermeture))
        
    });
    
}

// Fonction permettant de fermer la galerie
function close() {
    
	// Destruction des éléments du conteneur
	$('conteneur').getChildren().each(function(el){
		el.dispose();
	});
	
	// Destruction du conteneur
	$('conteneur').dispose();
	
    myMask.hide(); // On cache le mask
}