$(document).ready(function(){
    
    $('a.load').click(AjaxLink.click);
});

var AjaxLink = {
    click: function(){
        
        var blockOptions = {
            message: '<div class="blockUI-chargement">Chargement...</div>',
            centerY: false,
            css: {top: '100px'}
        }
        /**
         * Si la partie gauche existe, on ne bloque qu'elle
         */
        if ($('#gauche').length != 0) {
            $('#gauche').block(blockOptions);
        /**
         * Sinon on bloque tout le contenu
         */
        } else {
            $('#contener').block(blockOptions);
        }
        var href = this.href;
        $.getJSON(href, {format:'json'}, updatePage);
        /**
         * pour que le navigateur n'ouvre pas le lien
         */
        return false;
    }
};

function updatePage(json, textStatus){
    
    /**
     * L'objet json contient toujours le nouveau contenu de #content
     * Dans la suite on utilise newContent.html() pour retrouver ce contenu,
     * on doit donc rajouter un élément l'englobe :
     * $('<div><span>test</span></div>').html() => '<span>test</span>'
     */
    var newContent = $('<div id="#contener">' + json.content + '</div>');
    
    /**
     * Pour les cas ou il n'y a que la partie gauche qui change, on ne remplace
     * que ça. (on donne l'illusion qu'il n'a que cette partie qui a été téléchargée...)
     */
    var newDroite = newContent.find('#droite');
    var oldDroite = $('#droite');
    var newGauche = newContent.find('#gauche');
    var oldGauche = $('#gauche');
    if (
        newDroite.length == 1 && oldDroite.length == 1 && /** si les deux contiennent un div#droite */
        newGauche.length == 1 && oldGauche.length == 1 && /** pareil pour le div#gauche */
        newDroite.html() == oldDroite.html() /** et si les div#droite sont identiques */
    ) {
        newContent = newContent.find('#gauche');
        var divToUpdate = $('#gauche');
    /**
     * Pour les autres cas on remplace tout.
     */
    } else{
        var divToUpdate = $('#contener');
    }
    
    /**
     * On met le contenu à jour :
     *   - on met le contenu courant dans un div
     *   - on fait disparaidre ce div en fondu
     *   - on cache le nouveau contenu
     *   - on met le contenu du divToUpdate à jour
     *   - on fait apparaître le nouveau contenu en fondu
     * 
     * le but est de remplacer le contenu en fondu, sans toucher au divToUpdate
     * pour ne pas casser le design quand il s'agit du div#contener
     */
    
      divToUpdate.wrapInner("<div></div>");
      divToUpdate.children().fadeOut('fast', function () {
          newContent.children().hide();
          divToUpdate.html(newContent.html());
          divToUpdate.children().fadeIn('normal');
          /** On lui dit ce qu'il doit ce passer quand on clique sur un lien de classe "load" */
          divToUpdate.find("a.load").click(AjaxLink.click);
      });
    
    
    /**
     * On met le titre à jour
     */
    if(json.title != undefined){
        document.title = json.title;
    }
}