/*

* 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 : zoomInteractions.js

 * 

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

 * 

 * Fonctionnalités : Définit les fonctions de zoom/dezoom prezoom/preunzoom.

 */

/*

 * 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.

 * Est appelé dans le fichier :

 * pointers > fonction pointersMosaicInteractions.

 */

Mosaic.prototype.preZoom = function(snapshot)

{

    if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested)

    {

        return;

    }

    if(this.fullscreen)

    {

        return;

    }

	this.isPrezooming = true;

    this.preUnzoom();

    //On enlève les notifications initiales si elles existent.

    this.removeNotifications();

    //Mosaïque.

    var _this = 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.config.imagesByLine, imgs = this.config.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.config.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)

    {

        this.preUnzoom();

    }

    //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.

    // console.log('cid : ' + currentId, $('#fake-' + currentId).length);

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

    {

    // snapshot.fadeTo(400, '0.5').delay(200).fadeTo(400, '1');

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

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

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

        //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;

        }

        //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.config.timePrezoom);

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

        {

            width: finalDivWidth + margin*2,

            height: finalDivHeight - margin,

            top: finalDivTop + margin,

            left: finalDivLeft

        }, _this.config.timePrezoom, function()

        {

			//On a fini de prézoomer.

			_this.isPrezooming = false;

            //Si on est en mode Kinect.

            if(!_this.config.mouseInteractions)

            {

                //On met le spinner gif sur le pointeur, s'il n'existe pas déjà.

                if($('#spinner').length == 0)

                {

                    //On repère le pointeur ayant provoqué le prezoom.

                    var prezoomPointer;

                    if(!_this.isMainPointerDisplayed)

                    {

                        prezoomPointer = $('#secondPointer');

                    }

                    if(!_this.isSecondPointerDisplayed)

                    {

                        prezoomPointer = $('#mainPointer');

                    }

                    //On crée le spinner s'il y a un pointeur qui indique le temps restant avant le zoom.

					if(prezoomPointer != null && prezoomPointer.length > 0)

					{

						var spinner = "<img id='spinner'></div>";

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

						$('#spinner').css(

						{

							position: 'absolute',

							top: prezoomPointer.position().top,

							left: prezoomPointer.position().left,

							width: 85,

							height: 85,

							'z-index': 600

						});

						$('#spinner').attr('src', './img/cursors/selector_anim_2.gif');

					}

                }

            }

            //Si on est en mode d'interaction souris, on indique juste qu'on est en prezoom.

            else

            {

                _this.isOnAPrezoomSN = true;

            }

            //Si on est en mode mosaic, on indique juste qu'on effectue une selection.

            if(_this.currentMode == 'MOSAIC')

            {

                _this.removeNotifications();

                _this.mosaicSelection();

            }

            //Si on est en filtrage, mais qu'on n'a pas encore de gesture de filtrage, on indique qu'on est en filtrage et en selection.

            else if(_this.currentMode == 'FILTER' && !_this.filterSearchedType && _this.curvesGesturesFound)

            {

                _this.removeNotifications();

                _this.filterSearchAndSelection();

            }

            //Si on est en filtrage avec une gesture de recherche, on indique la gesture et la selection.

            else if(_this.currentMode == 'FILTER' && _this.filterSearchedType)

            {

                _this.removeNotifications();

                _this.filterGestureAndSelection(_this.filterSearchedType, 'valid');

            }

        });

    });

    //Si on est en mode Kinect, on zoom après un certain temps.

    if(!this.config.mouseInteractions)

    {

        this.zoomTimeout = setTimeout(function()

        {

            _this.zoom();

        }, this.config.timeoutZoom);

    }

}

/*

 * 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é.

 * Est appelé dans les fichiers :

 * pointers > fonction pointersMosaicInteractions.

 * zoomInteractions > fonctions preZoom et zoom.

 * mosaic > fonction onMouseMove.

 * client > fonction processMsg.

 */

Mosaic.prototype.preUnzoom = function()

{

    $('#spinner').remove();

    var _this = this;

    //On indique qu'on n'est plus en prezoom.

    this.isOnAPrezoomSN = false;

    clearTimeout(this.zoomTimeout);

    //Si on est en mode mosaic, on indique qu'on peut pointer ou bien rechercher.

    if(this.currentMode == 'MOSAIC')

    {

        this.removeNotifications();

        this.mosaicSelectionAndSearch();

    }

    //Si on est en filtrage sans gesture, on indique qu'on est juste en filtrage.

    else if(_this.currentMode == 'FILTER' && !this.filterSearchedType && !this.curvesGesturesFound)

    {

        this.removeNotifications();

        this.filterSearch();

    }

    //Si on est en filtrage avec gesture, on indique la gesture de filtrage.

    else if(_this.currentMode == 'FILTER' && this.filterSearchedType && !this.curvesGesturesFound)

    {

        this.removeNotifications();

        this.filterGesture(this.filterSearchedType, 'valid');

    }

    //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 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.

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

    {

        if($('#prezoomContainer-snapshot-' + i).length > 0)

        {

            $('#prezoomContainer-snapshot-' + i).animate(

            {

                width: this.snapshotWidth + margin,

                height: this.snapshotHeight + margin,

                top: $('#snapshotDiv-' + i).position().top,

                left: $('#snapshotDiv-' + i).position().left

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

            $('#prezoomSnapshot-snapshot-' + i).animate(

            {

                width: this.snapshotWidth,

                height: this.snapshotHeight,

                top: $('#snapshotDiv-' + i).position().top,

                left: $('#snapshotDiv-' + i).position().left

            }, this.config.preUnzoomTime);

        }

    }

}

/*

 * Zoom d'un snapshot en plein écran.

 * Est appelé dans les fichiers :

 * zoomInteractions > fonction preZoom.

 * mosaic > fonctions onMouseUp et init.

 */

Mosaic.prototype.zoom = function()

{

    var _this = this;

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

    {

        return;

    }

	//Si on est en mode d'interaction souris, on enlève la bordure d'aide.

	if(this.config.mouseInteractions)

	{

		this.removeHelpIcon();

	}

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

    var margin = this.marginWidth, len = this.config.imagesByLine, imgs = this.config.imagesToShow, zoomedMargin = this.config.zoomedMargin;

    var zoomPercentage = this.config.zoomPercentage;

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

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

    var newPreMPWidth = initMPWidth * len * zoomPercentage + zoomedMargin * (len), newPreMPHeight = initMPHeight * (imgs / len) * zoomPercentage + 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 * (zoomPercentage+1), finalDivHeight = initialDivHeight * (zoomPercentage+1);

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

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

    this.preUnzoom();

    /*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 = _this.previousId.split('-');

    zoomedImgId = tab[1];

    //On donne les dimensions des snapshots.

    $('.snapshotDivs').animate(

    {

        width: newSnWidth,

        height: newSnHeight,

        margin: zoomedMargin/2 + 'px',

    }, this.config.zoomTime);

    if(this.currentMode != 'NO-USER')

    {

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

        $('.snapshotDivs').animate(

        {

            opacity: '0.4'

        }, this.config.zoomTime);

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

        $(this.previousZoomedSN).animate(

        {

            opacity: '1'

        }, this.config.zoomTime);

    }

    //On zoome sur la mosaïque.

    $('#mainPanel').animate(

    {

        width: newPreMPWidth,

        height: newPreMPHeight,

        top: newZoomTop,