/**
 * JavaScript permettant de faire fonctionner le Lexique
 * 
 * @author Olivier Gorzalka <og@agencecosmic.com>
 * @author Sunny Ripert <sun@agencecosmic.com>
 * @version 1.0
 */

// loader : ce qui s'affiche lorsque le script charge
var loader = '<div id="loader"><img alt="Chargement en cours" src="images/lexique/loader.gif" /></div>';


function urldecode(str) {
    return decodeURIComponent(str.replace(/\+/g, '%20'));
}

var currentUri = urldecode(window.location.href);
var currentHash = (window.location.hash != "") ? urldecode(window.location.hash) : false;

/**
 * Construction de l'url cible à envoyer à Ajax pour charger le contenu d'une lettre
 */
function generateurUrlCible(){
  var lettre_demande = 'A';
  // cas où l'on a une adresse de la forme /docs/lexique/r, c'est à dire, lien direct sans js
  if (currentUri.match(/tout-savoir\/lexique\/[a-z]{1}\/?.*/i)) {
    
    var locSplit = currentUri.split('lexique/'); 
    var locLettre = locSplit[1].substr(0,1);
    lettre_demande = locLettre.toUpperCase();
    var urlCible = "tout-savoir/lexique/"+locLettre+"/";
  }
  // si on a une ancre definie dans l'adresse (on a cliqué sur un onglet)
  else if ( currentHash ) {
    // on ne garde que la 1ere lettre du hash (en réalité la seconde avec le dièse)
    lettre_demande = currentHash.toUpperCase();
    var urlCible = "tout-savoir/lexique/"+lettre_demande.toLowerCase()+"/";
  }
  // sinon on charge la lettre A
  else {
    initToggle();
    jQuery(".liste-lettres li#A a").addClass("active");
    clicOnglet('#conteneur-definition',"#inner-conteneur-definition", loader);
    return;
  }

  // on applique un style au lien actif
  jQuery(".liste-lettres li a").each(function() {
    // on regarde si l'attribut title contient la lettre renseignée par l'url
    if ("tout-savoir/lexique/"+jQuery(this).attr("title").toLowerCase()+"/" == urlCible)
      jQuery(this).addClass("active");
  });

  // si l'url contient l'expression '/lexique/'
  if (currentUri.match(/tout-savoir\/lexique\/?/)) {
    // on retire l'ensemble des classes active
    jQuery(".liste-lettres li a").removeClass("active");

    // charge le menu à onglet, et le contenu de la lettre
    chargePageLexique('#conteneur-definition', "#inner-conteneur-definition", loader, urlCible); 

    // on applique la classe active sur l'onglet de la lettre en cours
    jQuery(".liste-lettres li#"+lettre_demande+" a").addClass("active");
  }
}

/**
 * Applique un événement clic sur toutes les lettres du lexique
 * 
 * @param ele string Sélecteur CSS de la div qui va afficher le contenu
 * @param idcontenu string Sélecteur CSS de l'élément qui stocke le contenu du lexique
 * @param msg string Message pour le loader
*/
function clicOnglet(ele, idLexique, msg){
  jQuery(".liste-lettres li a").click(function(){
    // ajoute la classe active
    jQuery(".liste-lettres li a").removeClass("active");
    jQuery(this).addClass("active");

    // change l'url en mettant un # suivi de la lettre selectionnée
    window.location.hash = jQuery(this).text();
    
    // définit l'url qui doit être chargée
    var url = "tout-savoir/lexique/"+window.location.hash.replace("#", "").toLowerCase()+"/";
    // charge via Ajax la page selectionnée
    chargePageLexique(ele, idLexique, msg, url);
    return false;
  });
}

/**
 * Appel ajax de la page du lexique de la lettre choisie
 * 
 * @param ele string Sélecteur CSS de la div qui va afficher le contenu
 * @param idcontenu string Sélecteur CSS de l'élément qui stocke le contenu du lexique
 * @param msg string Message pour le loader
 * @param url string Adresse de la page chargée
*/
function chargePageLexique(ele, idcontenu, msg, url) {
  //on cache l'ancien contenu
  jQuery(ele).fadeIn("slow", function(){
    // on affiche le preloader
    jQuery(ele).html(msg).fadeIn("slow", function(){
      // on charge le nouveau contenu
      jQuery(ele).load(url+" "+idcontenu, null, function(){
        var tampon = jQuery(ele).html();
        // une fois le contenu chargé, on fait disparaitre le preloader
        jQuery(ele).html(msg).fadeOut("slow",function(){
          jQuery(ele).html(tampon);
          // on affiche le nouveau contenu
          jQuery(ele).fadeIn("slow");
          // On relance la fonction des toggles
          initToggle(); 
          clickToggle();
          if ( window.location.hash != '' ) {
            var reqTerm = window.location.hash.split('/')[1];
            if (typeof reqTerm != 'undefined') {
              $dt = $('dt:contains('+urldecode(reqTerm)+')');
              $dt.addClass('active').next('dd').show();
              $('html,body').animate({scrollTop:$dt.offset().top},0);
            }
          }
        });
      });
    });
  });
}


/* On ajoute des curseurs pointeur sur les items de définitions
et on cache l'ensemble des définitions */
function initToggle() {
  jQuery('#lexique dt').css({cursor: "pointer"});
  jQuery('#lexique dd').addClass("hidden");
}

/**
 * Crée des zones dépliantes pour les définition du lexique
 */

function clickToggle() {
  $("dt").click(function(e)
  {
    var $target = $(e.target);
    if( $target.is("dt.active") ) {
      $target.removeClass("active");
      $target.next("dd").fadeOut("slow").addClass("hidden");
      }
    
    else {
      $target.addClass("active");
      $target.next("dd").fadeIn("slow").removeClass("hidden");
    }
  });
}

// Lancement des fonctions au chargement de la page
jQuery(document).ready(function(){
  generateurUrlCible();
  clicOnglet('#conteneur-definition', "#inner-conteneur-definition", loader);
  initToggle();
  clickToggle();
});