/*

* 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(config, default_conf)

{

	//Interactions souris/kinect.

	this.mouseInteractions = true;

	//Interactions avec/sans préphase.

	this.prephaseEnabled = true;

	this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "pendulum", "knee-up", "right-angle", "wave", "slow", "hello", "no-motion", "wheel", "contact", "run", "up-down", "grand-jete"];

	//Chemin du fichier de configuration.

	this.config_path = config;

	//Configuration par défaut en cas de valeur erronnée.

	this.default_config = default_conf;

	this.config = new Object();

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

	this.videos = [];

	this.urls = [];

	this.sources = [];

	this.imgs = [];

	this.opacities = [];

	this.timeToGoAt = [];

	this.ids = [];

	this.fillingIds = [];

	this.currentRandomVideoIdx = 0;

	//Dictionnaire pour les courbes de recherche.

	this.dictionary = [];

	//Dernières positions des pointeurs.

	this.mainPointerLastX;

	this.mainPointerLastY;

	this.secondPointerLastX;

	this.secondPointerLastY;

	//Dernières positions avant le lancement de la fonction d'idle.

	this.mainPointerIdleStartX;

	this.mainPointerIdleStartY;

	this.secondPointerIdleStartX;

	this.secondPointerIdleStartY;

	//Coordonnées de la souris dans le mode d'interaction souris.

	this.mousePosX;

	this.mousePosY;

	//Coordonnées précédentes de la souris dans le mode d'interaction souris.

	this.mousePosLastX;

	this.mousePosLastY;

	//Valeur du déplacement entre un mouse up et un mouse down.

	this.mouseUpDownDelta = 0;

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

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

	this.zoomed = false;

	this.fullscreen = false;

	this.canMoveToNeighbour = false;

	this.mainPointerExitBorder = false;

	this.secondPointerExitBorder = false;

	this.isMainPointerDisplayed = false;

	this.isSecondPointerDisplayed = false;

	this.helpDisplayed = false;

	//Indique si l'utilisateur a manuellement pausé la vidéo.

	this.userPaused = false;

	//Indique si on est en train de se déplacer vers un voisin.

	this.currentlyMoving = false;

	//Indique si on est en train de dézoomer vers la mosaïque.

	this.currentlyUnzooming = false;

	//Indique si on peut s'approcher de kinect.

	this.canStart = false;

	//Indique si on est actuellement sur un snapshot.

	this.isOnASnapshot = false;

	//Indique si l'idle des pointeurs est disponible (deux mains détectées).

	this.pointersIdleAvailable = false;

	//Indique si le timeout pour l'idle des pointeurs à besoin d'être lancé.

	this.pointersIdleNeedLaunch = false;

	//Indique si les deux mains sont là.

	this.areBothPointersHere = false;

	//Indique si le timeout pour la détection de deux pointeurs a été lancé.

	this.areBothPointersTimeoutLaunched = false;

	//Indique si la mosaïque a été filtrée.

	this.isMosaicFiltered = false;

	//Indique si on est actuellement dans une recherche par gesture.

	this.isCurrentlyInASearchByGesture = false;

	//Indique si un pointeur est déjà sur une notification de recherche par gesture.

	this.alreadyOnNotification = false;

	//Si on a fait un swipe.

	this.isSwipe = false;

	//On peut swiper.

	this.canSwipe = false;

	//On passe vers une autre video automatiquement à la fin d'une lecture.

	this.autoMove = false;

	//Si l'utilisateur a demandé à sélectionner la TL.

	this.isTLRequested = false;

	//Le pointeur gauche a sélectionné la TL.

	this.isTLSelectedBySecondPointer = false;

	//Le pointeur droit a sélectionné la TL.

	this.isTLSelectedByMainPointer = false;

	//On peut afficher l'aide.

	this.canNotifyHelp = false;

	//Indique si la mosaique est en train d'être filtrée.

	this.isMosaicFiltering = false;

	this.arrowLeftLoading = false;

	this.arrowRightLoading = false;

	this.arrowUpLoading = false;

	this.arrowDownLoading = false;

	//On est dans une recherche par courbes.

	this.isSearchByCurvesOn = false;

	this.canDrawNextCurve = false;

	//Dans le mode d'interaction souris, indique si on se situe actuellement sur un snapshot entièrement prézoomé.

	this.isOnAPrezoomSN = false;

	//Indique si une courbe de recherche donne au moins un résultat.

	this.curvesGesturesFound = false;

	//Indique si on souhaite supprimer la recherche en cours.

	this.gestureDelRequested = false;

	//Code de gesture actuellement calculé par les détecteurs de courbes.

	this.actualCode = '';

	//Timeout (attente) pour le zoom après un préZoom.

	this.zoomTimeout = null;

	//Timeout (attente) pour le passage vers un voisin.

	this.moveToNeighbourTimeout = null;

	this.mainPointerExitBorderTimeout = null;

	this.secondPointerExitBorderTimeout = null;

	//Idle time pour les pointeurs afin d'informer le front qu'on souhaite faire une recherche.

	this.pointersSearchIdleTimeout = null;

	//Vérifie toutes les N ms que les deux pointeurs sont détectés.

	this.areBothPointersHereTimeout = null;

	//Délai de suppression d'une notification de recherche par gesture.

	this.removeNotificationByGestureTimeout = null;

	//Délai de suppression d'une notification de recherche par gesture infructueuse.

	this.removeFailedNotificationByGestureTimeout = null;

	//Délai avant la suppression de notification swipe.

	this.notifySwipeTimeout = null;

	//Délai pour la sélection de la TL.

	this.selectTLTimeout = null;

	//Délai pour slider sur la TL.

	this.canSlideInTLTimeout = null;

	//Délai pour afficher l'aide.

	this.canNotifyHelpTimeout = null;

	this.arrowLeftTimeout = null;

	this.arrowRightTimeout = null;

	this.arrowUpTimeout = null;

	this.arrowDownTimeout = null;

	this.arrowSpinnerTimeout = null;

	this.nouserTimeout = null;

	this.nextDrawCurveTimeout = null;

	//Dernier message INCOMING (pour éviter d'effectuer n fois la même action.

	this.lastIncomingMessage = '';

	//Type de marqueur recherché dans la mosaïque (en mode filter).

	this.filterSearchedType = "";

	//Mode actuel.

	this.currentMode = "NO-USER";

	//Snapshot sur lequel on a zoomé.

	this.previousZoomedSN = null;

	//Snapshot sur lequel on a prezoomé.

	this.previousPrezoomDiv = null;

	//Son ID.

	this.previousId = null;

	//Dernier snapshot prézoomé non null.

	this.lastNonNullSN = null;

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

	this.MPTop_margin;

	this.top_margin;

	//Gesture actuellement cherchée.

	this.currentSearchGesture = '';

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

	//Voisins sélectionnés par les pointeurs.

	this.mainPointerNeighbourSelectedId = null;

	this.secondPointerNeighbourSelectedId = null;

	//Snapshots a afficher.

	this.snapshotsToShow = 1;

	//Lecteur.

	this.player = null;

	//Si le lecteur est prêt.

	this.playerIsReady = false;

	//Annotations (pour les marqueurs los d'un filtrage).

	this.annotations = [];

	//Client websocket pour recevoir les notifications du Middleware.

	this.client;

	//Coordonnées et dimensions d'un snapshot zoomé.

	this.snTop = 0;

	this.snLeft = 0;

	this.snWidth = 0;

	this.snHeight = 0;

	this.searchCanvas;

	//Position actuelle de la vidéo zoomée.

	this.notifyTopVideo;

	this.notifyLeftVideo;

	this.loadParameters(this.config_path);

}

/*

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

 * Génère une matrice de imgs.

 */

mosaic.prototype.createMosaic = function()

{

	// console.log('CREATE');

	// this.currentMode = "NO-USER";

	var initPanel = '<div id="initPanel"></div>';

	var mp = $('#mainPanel');

	mp.append(initPanel);

	$('#initPanel').css(

	{

		background: 'transparent',

		width: mp.width(),

		height: mp.height(),

		top: mp.position().top,

		left: mp.position().left,

		'margin-top': this.MPTop_margin

	});

	var len = this.config['length'], imgs = this.config['imagesToShow'], imgsTotal = this.config['imagesTotal'];

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

    if(imgs % len == 0)

    {

		this.lastIncomingMessage = 'INCOMING-0';

		var str = '';

		if(this.imgs.length >= imgs)

		{

			for(var i = 0 ; i < imgs ; 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" style="opacity: 0;"><img id="snapshot-' + i + '" class="snapshots" src="snapshots-little/' + this.imgs[i] + '" /></div>';

			}

		}

		return str + '<div id="ghostPanel"></div>';

	}

	else

	{

		alert("Le nombre d'images a afficher doit être divisible par la longueur de la mosaïque !");

	}

}

/*

 * Permet de raffraichir la mosaïque.

 */

mosaic.prototype.loadMosaic = function()

{

	// console.log('LOAD');

	var createMosaic = this.createMosaic();

	if(createMosaic == '')

	{

		return;

	}

	var _this = this;

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

    this.previousZoomedSN;

    //this.width = 

	// console.log(createMosaic);

    //On met à jour la mosaïque.

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

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

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

    this.marginWidth = parseFloat(this.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.config['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);

	//On fait coincider le background du body avec celui de la mosaïque.

	$('body').css('background-position', '0px ' + this.MPTop_margin + 'px');

	/*$('.snapshotDivs').mouseover(function ()

	{

		//On effectue un prézoom dès qu'on va sur une image.

		_this.preZoom($(this));

	});*/

	this.addPointers();

	//Si dans le metadata player _ n'est pas déclaré, on le déclare.

	if(typeof _ !== "undefined" && typeof IriSP._ === "undefined")

	{

		IriSP._ = _;

	}

	if(typeof $ !== "undefined" && typeof IriSP.jQuery === "undefined")

	{

		IriSP.jQuery = $;

	}

	//On charge les marqueurs.

	var sourceManager = new IriSP.Model.Directory(),

	globalAnnotations = new IriSP.Model.List(sourceManager),

	nbFichiers = _this.urls.length,

	fichiersCharges = 0;

	for (var i = 0; i < nbFichiers; i++)

	{

		// console.log('url : ' + _this.urls[i]);

		_this.sources[i] = sourceManager.remoteSource({url: _this.urls[i], serializer: IriSP.serializers.ldt});

		_this.sources[i].onLoad(function()

		{

			var source = this;

			// console.log(source);

			globalAnnotations.addElements(source.getAnnotations());

			// console.log(source.url + ' ' + source.getAnnotations().length);

			fichiersCharges++;