/*

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

 * Est appelé dans :

 * la page d'index, afin de créer la mosaique.

 */

function Mosaic(config, default_conf)

{

    this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "no-motion", "contact", "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 = [];

	//Strings des notifications.

	this.notificationStrings = {

	"select":"Select", 

	"confirm":"Confirm", 

	"timeline":"Timeline move", 

	"move":"Move", 

	"search":"Search", 

	"next":"Next", 

	"previous":"Previous", 

	"unzoom":"Unzoom", 

	"unknown":"Unknown gesture", 

	"fall":"Fall", 

	"jump":"Jump", 

	"spin":"Spin", 

	"screw":"Screw", 

	"bend":"Bend", 

	"arc":"Arc", 

	"knee_up":"Knee up", 

	"breakdance":"Breakdance", 

	"wave":"Wave", 

	"no_motion":"No motion", 

	"contact":"Contact"};

	this.helpText = {

	"search_title":"Search", 

	"search_2hands_text":"Curves to be drawn with both hands",  

	"search_mouse_text":"Curves to be mouse-drawn",  

	"search_body_text":"Gestures to be performed with your body", 

	"controls_title":"Controls", 

	"controls_1hand_text":"Gestures to be performed with your hand", 

	"controls_timeline":"Move in timeline", 

	"controls_mos_horizontal":"Unzoom", 

	"controls_mos_vertical":"Unzoom", 

	"controls_move_down":"Move", 

	"controls_move_left":"Move", 

	"controls_move_right":"Move", 

	"controls_move_up":"Move", 

	"controls_next":"Next", 

	"controls_previous":"Previous", 

	"controls_selection":"Selection"

	}

	this.creditsMetadata = {

	"title":"Presented films credits",

	"subtitle":"idill festival / idill.eu (2011 and 2009 ed.)",

	"realisation":"realisation",

	"company":"company",

	"production":"production",

	"choregraphy":"choregraphy",

	"music":"music"

	}

	//Tableau contenant les données des crédits.

	this.tabCredits = [];

	//Page actuelle des crédits (en cas de dépassement du texte des crédits).

	this.creditsPageNumber = 0;

	//Nombre de pages des crédits.

	this.creditsPageLength = 0;

	//Dimensions des colonnes pour le texte des crédits.

	this.column_gap = 30;

	this.column_width = 0;

    //Dernières positions des pointeurs.

    this.mainPointerLastX = null;

    this.mainPointerLastY = null;

    this.secondPointerLastX = null;

    this.secondPointerLastY = null;

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

    this.mainPointerIdleStartX = null;

    this.mainPointerIdleStartY = null;

    this.secondPointerIdleStartX = null;

    this.secondPointerIdleStartY = null;

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

    this.mousePosX = null;

    this.mousePosY = null;

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

    this.mousePosLastX = null;

    this.mousePosLastY = null;

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

    this.mouseUpDownDelta = 0;

    //Valeur du déplacement entre un touch start et un touch end.

    this.touchUpDownDelta = 0;

	//Coordonnées de la souris au dernier mouse down.

	this.mouseDownPosX = null;

	this.mouseDownPosY = null;

    //Dimensions de la mosaïque en pixels.

    this.width = null;

    this.height = null;

    //Dimensions d'un snapshot en pixels.

    this.snapshotWidth = null;

    this.snapshotHeight = null;

    //Espacement entre les snapshots en pixels.

    this.marginWidth = null;

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

    this.creditsDisplayed = 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 = '';

    //Indique si l'utilisateur est entré dans la zone de recherche.

    this.isUserInSearchZone = false;

	//Indique si on a fait un mouse down.

	this.isMouseDown = false;

	//Indique si on a fait un touch start.

	this.isTouchStart = false;

	//Indique si on a fait un touch move.

	this.isTouchMove = false;

	//Indique si on est en train de prézoomer.

	this.isPrezooming = false;

	//Indique si l'icone d'aide a été agrandie.

	this.isHelpIconZoomed = false;

	//Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours.

	this.isHelpIconZooming = false;

	//Indique si l'icone des crédits a été agrandie.

	this.isCreditsIconZoomed = false;

	//Indique si l'icone des crédits est dans une interaction de zoom/dezoom en cours.

	this.isCreditsIconZooming = false;

	//Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.

	this.mustTakeOutHands = false;

	//Indique qu'une vidéo est en lecture.

	this.isVideoReading = false;

	//Indique si on est sur une tablette.

	this.isTablet = ('ontouchstart' in document.documentElement);

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

    this.top_margin = null;

    //Gestures actuellement cherchées dans les vidéos.

    this.currentSearchGesture = [];

    //Position des voisins lors d'un zoom.

    this.neighboursIds = [];

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

    this.centerId = null;

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

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

    this.snTop = 0;

    this.snLeft = 0;

    this.snWidth = 0;

    this.snHeight = 0;

    this.searchCanvas = null;

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

    this.notifyTopVideo = null;

    this.notifyLeftVideo = null;

    this.loadParameters(this.config_path);

}

/*

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

 * Génère une matrice de imgs.

 * Est appelé dans le fichier :

 * mosaic > fonction loadMosaic, afin de créer les éléments visuels de la mosaique.

 */

Mosaic.prototype.createMosaic = function()

{

	var _this = this;

    //On ajoute le player au body pour le lancer la première fois qu'on zoom.

	$('body').append('<div class="player" id="video"></div><div class="LdtPlayer" id="LdtPlayer"></div>');

	//On recharge la fenêtre si sa taille a changé.

	$(window).resize(function()

	{

		// _.debounce(window.location.reload(), _this.config.timeReloadAfterResize);

	});

    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.imagesByLine, imgs = this.config.imagesToShow, imgsTotal = this.config.imagesTotal;

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

    if(imgs % len == 0)