/*

* This file is part of the TraKERS\Front IDILL package.

*

* (c) IRI <http://www.iri.centrepompidou.fr/>

*

* For the full copyright and license information, please view the LICENSE

* file that was distributed with this source code.

*/

/*

 * Projet : TraKERS

 * Module : Front IDILL

 * Fichier : mosaic.js

 * 

 * Auteur : alexandre.bastien@iri.centrepompidou.fr

 * 

 * Fonctionnalités : Définit la "classe" mosaïque et définit des fonctions d'intéractions.

 */

/*

 * Classe définissant la mosaïque.

 * Elle contient sa longueur, le nombre d'images total, une liste d'urls pour les vidéos, leurs snapshots principaux et leur position.

 * Contient également les dimensions en px de la mosaïque.

 */

function mosaic(len, imgToShow, zoomPercentage, prezoomPercentage, zoomedMargin)

{

    //S'il s'agit d'un rectangle.

    if(imgToShow % len == 0)

    {

        //Longueur horizontale.

        this.length = len;

        //Nombre d'images dans la mosaïque.

        this.imagesToShow = imgToShow;

        //Tableaux des urls des vidéos, des snapshots et de leur position dans la mosaïque.

        this.urls = [];

        this.imgs = [];

        this.ids = [];

        //Dimensions de la mosaïque en pixels.

        this.width;

        this.height;

        //Dimensions d'un snapshot en pixels.

        this.snapshotWidth;

        this.snapshotHeight;

        //Espacement entre les snapshots en pixels.

        this.marginWidth;

        //Temps d'intéractions/d'animations.

        this.preZoomTime;

        this.preUnzoomTime;

        this.zoomTime;

        this.unzoomTime;

        this.timeNeighbourGlowing;

        this.timeNeighbourUnglowing;

        this.timeMovingToNeighbour;

        //Booléens permettant ou non certaines intéractions selon le contexte.

        this.zoomed;

        this.fullscreen;

        this.canMoveToNeighbour;

        //Mode actuel.

        this.currentMode;

        //Snapshot sur lequel on a zoomé.

        this.previousZoomedSN;

        //Son ID.

        this.previousId;

        //Largeur de la marge pour le centrage vertical de la mosaïque.

        this.MPTop_margin;

        this.top_margin;

        //Pourcentage d'agrandissement lors d'un prézoom et d'un zoom.

        this.prezoomPercentage = prezoomPercentage;

        this.zoomPercentage = zoomPercentage;

        //Espacement des snapshots après un zoom.

        this.zoomedMargin = zoomedMargin;

        //Mosaïque locale.

        this.localMos;

        //Position des voisins lors d'un zoom.

        this.neighboursIds = [];

        //ID du snapshot du milieu lors d'un zoom.

        this.centerId;

    }

    else

    {

        //Affiche un message d'erreur.

    }

}

/*

 * Méthode d'affichage de la mosaïque.

 * Génère une matrice de imgs.

 */

mosaic.prototype.createMosaic = function()

{

    this.previousZoomedSN = '';

    this.previousPrezoomDiv = '';

    this.fullscreen = false;

    this.canMoveToNeighbour = false;

    var str = '';

    if(this.imgs.length >= this.imagesToShow)

    {

        for(var i = 0 ; i < this.imagesToShow ; i++)

        {

            //On charge les images de petite taille pour ne pas surcharger la mosaïque lors de l'affichage global.

            str += '<div id="snapshotDiv-' + i + '" class="snapshotDivs"><img id="snapshot-' + i + '" class="snapshots" src="snapshots-little/' + this.imgs[i] + '" /></div>';

        }

    }

    return str;

}

/*

 * Permet de raffraichir la mosaïque.

 */

mosaic.prototype.loadMosaic = function(imgsTab)

{

    //On affecte les chemins vers les images à la mosaïque.

    this.imgs = imgsTab;

    this.previousZoomedSN;

    //this.width = 

    //On met à jour la mosaïque.

    $('#mainPanel').html(this.createMosaic());

    //On récupère la taille des bordures.

    this.marginWidth = $('.snapshotDivs').css('margin-bottom');

    this.marginWidth = parseFloat(mos.marginWidth)*2;

    //On calcule la taille des divs contenant les snapshots.

    this.width = $('#mainPanel').innerWidth();

    //On ne calculera pas tout de suite la hauteur de la mosaique étant donnée qu'elle est calculée par la suite dynamiquement.

    this.snapshotWidth = this.width / this.length - this.marginWidth;

    this.snapshotHeight = this.snapshotWidth*9/16;

    $('.snapshotDivs').css('width', this.snapshotWidth).css('height', this.snapshotHeight).css('margin', this.marginWidth/2);

    this.height = $('#mainPanel').innerHeight();

    //On centre verticalement la mosaïque.

    this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;

    $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);

}

/*

 * Zoom sur la position d'une image, 1ère partie. Durant le laps de temps de time ms, l'utilisateur a le choix de zoomer sur une autre image.

 * Après ce laps de temps, l'image zoom complétement et il n'est plus possible de sélectionner une autre image par pointage.

 */

mosaic.prototype.preZoom = function(snapshot)

{

    if(this.fullscreen)

        return;

    //Mosaïque.

    var mosaic = this;

    //Dimensions de la mosaïque.

    var h = this.height, w = this.width;

    //Longueur en images, nombre d'images et taille de bordure de la mosaïque.

    var len = this.length, imgs = this.imagesToShow, margin = this.marginWidth;

    //Dimensions et position d'un snapshot dans la mosaïque.

    var snHeight = this.snapshotHeight, snWidth = this.snapshotWidth;

    var sTop = snapshot.position().top, sLeft = snapshot.position().left;

    var prezoomPercentage = this.prezoomPercentage;

    //ID de l'image actuelle.

    var currentId = $('img', snapshot).attr('id');

    //Si un zoom est déjà en cours, on ne zoom sur rien d'autre en attendant que ce snapshot ai dézoomé en cas de mouseleave.

    if(this.zoomed)

        if($('#preZoomContainer-' + currentId) != $(this) && this.previousZoomedSN != '' && this.previousId != '')

            this.preUnzoom();

        else

            return;

    //On indique qu'on a zoomé et on spécifie le snapshot sur lequel on a zoomé.

    this.zoomed = true;

    this.previousZoomedSN = snapshot;

    this.previousId = currentId;

    //On récupère les attributs de l'image.

    var fakeImg = $('img', snapshot);

    //On forme la balise de la fausse image et on passe son url pour les grands snapshots.

    fakeImg = '<img id="fake-' + currentId + '" class="snapshots" src="' + fakeImg.attr('src').replace('-little/', '/') + '" />';

    //On génère un faux snapshot identique au précédent et qu'on va coller dessus.

    var fakeSnapshot = '<div id="prezoomContainer-' + currentId + '" class="prezoomContainers"><div id="prezoomSnapshot-' + currentId + '" class="snapshotDivs">' + fakeImg + '</div></div>';

    //On l'ajoute à la mosaïque.

    $('#mainPanel').append(fakeSnapshot);

    //On modifie ses attributs.

    $('#fake-' + currentId).load(function()

    {

        $('#prezoomContainer-' + currentId).css('display', 'block');

        $('#prezoomContainer-' + currentId).css('top', sTop).css('left', sLeft).css('width', (snWidth + margin)).css('height', (snHeight + margin));

        $('#prezoomSnapshot-' + currentId).css('width', (snWidth)).css('height', (snHeight));

        //Dimensions et coordonnées initiales du div sur lequel on zoom.

        var initialDivWidth = $('#prezoomContainer-' + currentId).width(), initialDivHeight = $('#prezoomContainer-' + currentId).height();

        var initialDivTop = $('#prezoomContainer-' + currentId).position().top, initialDivLeft = $('#prezoomContainer-' + currentId).position().left;

        //Dimensions et coordonnées finales du div.

        var finalDivWidth = initialDivWidth * (prezoomPercentage+1), diffWidth = finalDivWidth - initialDivWidth, finalDivHeight = initialDivHeight + diffWidth;

        var finalDivTop = (initialDivTop - (finalDivHeight - snHeight)/2), finalDivLeft = (initialDivLeft - (finalDivWidth - snWidth)/2);

        //CAS PARTICULIER pour la position du snapshot zoomé : les bordures.

        if(finalDivTop < 0)

            finalDivTop = -margin;

        if(finalDivTop + finalDivHeight > h)

            finalDivTop = h - finalDivHeight;

        if(finalDivLeft < 0)

            finalDivLeft = 0;

        if(finalDivLeft + finalDivWidth + margin*2 > w)

            finalDivLeft = w - finalDivWidth - margin*2;

        ////Code de debug.

        ////CAUTION////

        /*var red = '<div id="red"></div>';

        if($('#red') != null || $('#red') != undefined)

            $('body').append(red);

        $('#red').css('background-color', '#FF0000').css('position', 'absolute').css('top', '0px').css('left', '0px').css('width', '100px').css('height', '100px');

        $('#red').css('top', finalDivTop).css('left', finalDivLeft).css('width', finalDivWidth).css('height', finalDivHeight);*/

        //alert("initial : " + initialDivWidth + " " + initialDivHeight + " ; final : " + finalDivWidth + " " + finalDivHeight);

        ////CAUTION////

        //On prézoom le div en le centrant sur le milieu du snapshot pointé.

        $('#prezoomSnapshot-' + currentId).animate(

        {

            width: finalDivWidth + margin,

            height: finalDivHeight - margin*2,

            top: finalDivTop + margin,

            left: finalDivLeft + margin

        }, this.preZoomTime);

        $('#prezoomContainer-' + currentId).animate(

        {

            width: finalDivWidth + margin*2,

            height: finalDivHeight - margin,

            top: finalDivTop + margin,

            left: finalDivLeft

        }, this.preZoomTime);

    });

    //Si on clique sur le snapshot prézoomé, on enclenche un zoom total sur ce snapshot.

    $('#prezoomContainer-' + currentId).click(function ()

    {

        if(this.previousZoomedSN != '')

            mosaic.zoom();

    });

}

/*

 * Dézoome sur la position de l'image. Il est à noter que ce dézoome diffère du dézoom global dans la mesure où celui-ci ne concerne que l'image sur laquelle on a zoomé.

 */

mosaic.prototype.preUnzoom = function()

{

    //Si on n'a pas zoomé, on quitte la fonction.

    if(!this.zoomed)

        return;

    //On spécifie la marge afin de centrer le prédézoom.

    var margin = this.marginWidth;

    //ID du snapshot précédemment pointé.

    var id = this.previousId;

    //On ne zoom plus.

    this.zoomed = false;

    //On rétrécit le snapshot de prézoom, puis on le supprime en donnant l'illusion qu'il s'agissait du véritable snapshot, alors qu'en fait c'était un clone.

    $('#prezoomSnapshot-' + id).animate(

    {

        width: this.snapshotWidth,

        height: this.snapshotHeight,

        top: this.previousZoomedSN.position().top,

        left: this.previousZoomedSN.position().left

    }, this.preUnzoomTime);

    $('#prezoomContainer-' + id).animate(

    {

        width: this.snapshotWidth + margin,

        height: this.snapshotHeight + margin,

        top: this.previousZoomedSN.position().top,

        left: this.previousZoomedSN.position().left

    }, this.preUnzoomTime, function(){ $(this).remove(); this.zoomed = false; });

}

/*

 * Zoom d'un snapshot en plein écran.

 */

mosaic.prototype.zoom = function()

{

    var mos = this;

    //Si la mosaïque est en pleine écran, pas la peine de zoomer.

    if(this.fullscreen)

        return;

    //On prend les attributs nécessaires au calculs.

    var margin = this.marginWidth, len = this.length, imgs = this.imagesToShow;

    var initMPWidth = this.previousZoomedSN.width() * len + margin*len, initMPHeight = this.previousZoomedSN.height() * (imgs / len) + margin*(imgs / len);

    var newMPWidth = initMPWidth * len + this.zoomedMargin * (len), newMPHeight = initMPHeight * (imgs / len) + this.zoomedMargin * ((imgs / len));

    var newPreMPWidth = initMPWidth * len * this.zoomPercentage + this.zoomedMargin * (len), newPreMPHeight = initMPHeight * (imgs / len) * this.zoomPercentage + this.zoomedMargin * ((imgs / len));

    //Dimensions et coordonnées initiales du div sur lequel on zoom.

    var initialDivWidth = this.previousZoomedSN.width(), initialDivHeight = this.previousZoomedSN.height();

    var initialDivTop = this.previousZoomedSN.position().top, initialDivLeft = this.previousZoomedSN.position().left;

    //Dimensions et coordonnées finales du div.

    var finalDivWidth = initialDivWidth * (this.zoomPercentage+1), finalDivHeight = initialDivHeight * (this.zoomPercentage+1);

    var newZoomTop = -this.previousZoomedSN.position().top*(newPreMPHeight/initMPHeight) - this.zoomedMargin/2 + (initMPHeight - initMPHeight * this.zoomPercentage)/2 + 'px', newZoomLeft = -this.previousZoomedSN.position().left*(newPreMPWidth/initMPWidth) - this.zoomedMargin/2 + (initMPWidth - initMPWidth * this.zoomPercentage)/2 + 'px';

    var newSnWidth = initMPWidth * this.zoomPercentage, newSnHeight = initMPHeight * this.zoomPercentage;

    this.preUnzoom(this);

    /*SINGULARITE*/

    this.fullscreen = true;

    //On passe l'image du snapshot pointé en HD.

    var zoomedImg = $('img', this.previousZoomedSN);

    var src = zoomedImg.attr('src');

    zoomedImg.attr('src', src.replace('-little/', '/'));

    //On récupère son ID.

    var tab, zoomedImgId;

    tab = mos.previousId.split('-');

    zoomedImgId = tab[1];

    //Les snapshots baissent alors en opacité, donnant l'impression qu'ils sont grisés.

    $('.snapshotDivs').animate(

    {

        width: newSnWidth,

        height: newSnHeight,

        margin: this.zoomedMargin/2 + 'px',

        opacity: '0.4'

    }, this.zoomTime);

    //Le snapshot du milieu revient à une opacité optimale, ce qui attire l'attention de l'utilisateur.

    $(this.previousZoomedSN).animate(

    {

        opacity: '1'

    }, this.zoomTime);

    //On zoome sur la mosaïque.

    $('#mainPanel').animate(

    {

        width: newPreMPWidth,

        height: newPreMPHeight,

        top: newZoomTop,

        left: newZoomLeft

    }, this.zoomTime, function()

    {

        //On charge les interactions avec les voisins.

        mos.centerId = zoomedImgId;

        mos.listenToNeighbours();

        mos.currentMode = 'VIDEO';

        /*mos.unload();

        mos.localMos.loadLocalMosaic(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, mos.imgs, tab[1]);*/

    });

}

/*

 * Retour à la taille normale de la mosaïque.

 */

mosaic.prototype.unzoom = function()

{

    //Si on n'est pas en plein écran, on quitte.

    if(!this.fullscreen)

        return;

    //On charge les attributs nécessaires aux calculs.

    var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight;

    var mpWidth = this.width, mpHeight = this.height;

    var mos = this;