/*

 The Timeline Widget fits right under the video

 */

IriSP.Widgets.Timeline = function(player, config) {

    IriSP.Widgets.Widget.call(this, player, config);

	this.bindPopcorn("timeupdate","onTimeupdate");

	this.bindPopcorn("loadedmetadata","ready");

	this.bindPopcorn("markersready","onMarkersReady");

    //this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");

    //this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");

	this.timelineSelected = false;

	this.markerShowTime = 200;

	this.markerLastTime = 5000;

	this.markerBigShown = false;

	this.currentMarkerIdx = -1;

	this.previousMarkerIdx = -1;

	this.hideTimeout;

	this.currentMode = "VIDEO";

	this.paused = false

	this.top_epsilon = 0;

	this.imgDir = "player/img/";

	this.markersDir = "pictos/small/";

	this.player = player;

	this.isCurrentlyInASearchByGesture = false;

	//Id du marqueur enregistré.

	this.currentMarkerId;

	this.annotations = this.annotationsFilter(this.source.getAnnotations(), this.gestures, this.isGesture);

	// for(var a = 0 ; a < this.annotations.length ; a++)

		// console.log("A : " + this.annotations[a].annotationType.contents.title);

};

IriSP.Widgets.Timeline.prototype = new IriSP.Widgets.Widget();

IriSP.Widgets.Timeline.prototype.isGesture = function(element, index, array)

{

	return ($.inArray(element.annotationType.contents.title, array) > -1);

}

//Fonction associée à l'événement : les marqueurs sont prêts.

IriSP.Widgets.Timeline.prototype.onMarkersReady = function() {}

//Fonction de filtrage de tableaux

IriSP.Widgets.Timeline.prototype.annotationsFilter = function(annotations, gestures, fun /*, thisp*/)

{

	var len = annotations.length;

	if (typeof fun != "function")

		throw new TypeError();

	var res = new Array();

	var thisp = arguments[1];

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

	{

		if (i in annotations)

		{

			var val = annotations[i]; // in case fun mutates this

			if (fun.call(thisp, val, i, gestures))

			{

				res.push(val);

			}

		}

	}

	return res;

};

IriSP.Widgets.Timeline.prototype.defaults = {

    minimized_height : 114,//44,

    maximized_height : 114,

	middle_height: 10,//4,

	timelineBorderLength : 6,

    minimize_timeout : 1500 // time before minimizing timeline after mouseout

};

IriSP.Widgets.Timeline.prototype.draw = function() {

    this.$timeline = IriSP.jQuery('<div>')

        .addClass("Ldt-Timeline")

        .css(this.calculateTimelineCss(this.minimized_height));

	this.$timelineMiddle = IriSP.jQuery('<div>')

		.addClass("Ldt-TimelineMiddle")

        .css(this.calculateTimelineMiddleCss(this.minimized_height, this.middle_height));

	/*this.$timelineContainer = IriSP.jQuery('<div>')

        .addClass("Ldt-TimelineContainer");

	this.$timelineContainer.append(this.$timeline);

	this.$timelineContainer.append(this.$timelineMiddle);*/

    this.$.append(this.$timeline);

    this.$.append(this.$timelineMiddle);

    var _this = this;

    this.$timeline.slider({

        range: "min",

        value: 0,

        min: 0,

        max: this.source.getDuration().milliseconds,

        slide: function(event, ui) {

			if(_this.player.popcorn)

			{

				_this.player.popcorn.currentTime(Math.floor(ui.value/1000));

				_this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime");

			}

			// console.log("manual " + _this.previousMarkerIdx);

			//On supprime le marqueur précédemment affiché si c'est le cas.

			if(_this.previousMarkerIdx > -1)

			{

				// /!\ var annotations = _this.source.getAnnotations();

				// console.log("EXT hide idx " + _this.previousMarkerIdx);

				// /!\ var previousMarker = IriSP.jQuery("#" + annotations[_this.previousMarkerIdx].id.replace(":", "_"));

				var previousMarker = IriSP.jQuery("#" + _this.annotations[_this.previousMarkerIdx].id.replace(":", "_"));

				_this.hideMarkerBig(previousMarker);

				// console.log("EXT hide " + _this.previousMarkerIdx);

			}

        }

    });

    this.$handle = this.$timeline.find('.ui-slider-handle');

    this.$handle.css(this.calculateHandleCss(this.minimized_height));

    this.$

        .mouseover(this.functionWrapper("onMouseover"))

        .mouseout(this.functionWrapper("onMouseout"));

		IriSP.jQuery('body').keypress(function(evt) {_this.keyPress(evt)});

    this.maximized = false;

    this.timeoutId = false;

};

/*

 * Starts playing the video when it's ready.

*/

IriSP.Widgets.Timeline.prototype.ready = function() {

	this.player.popcorn.play();

	this.player.popcorn.mute();

	this.processMarkers();

}

/*

 * Scale a value from [A, B] to [C, D].

*/

IriSP.Widgets.Timeline.prototype.scaleIntervals = function(A, B, C, D, val) {

	if(C == D)

	{

		return C;

	}	

	if(B != A)

	{

		return D / (B - A) * (val - A);

	}

	else

	{

		//If A and B have the same sign.

		if(A * B > 0)

		{

			//If they are positive.

			if(A > 0)

			{

				return (D - C)/2;

			}

			else

			{

				return (C - D)/2;

			}

		}

		else

		{

			return (C + D)/2;

		}

	}

}

/*

 * Process the markers.

*/

IriSP.Widgets.Timeline.prototype.processMarkers = function() {

	console.trace();

	console.log('PROCESSING MARKERS');

	var _this = this;

	var markers = "";

	var timelineMiddleTop = this.$timelineMiddle.position().top;

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

	{

		markers += "<div class='Ldt-Marker' id='" + this.annotations[i].id.replace(":", "_") + "'></div>";

		// console.log(annotations[i].begin.milliseconds);

	}

	this.$.append(markers);

	var markerHeight = IriSP.jQuery(".Ldt-Marker").height();

	IriSP.jQuery(".Ldt-Marker").css("z-align", "150");

	console.log('IN PROCESSING');

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

	{

		IriSP.jQuery("#" + this.annotations[i].id.replace(":", "_")).css(

		{

			top: timelineMiddleTop + "px",

			left: Math.floor(+this.scaleIntervals(0, this.source.getDuration().getSeconds(), 0, this.$timeline.width(), this.annotations[i].begin/1000) + this.$timeline.position().left) + "px",

			"margin-top": (-_this.$timeline.height()/2 - markerHeight/2) - this.top_epsilon + "px"

		});

	}

	console.log('MARKERS PROCESSED');

	//On lance l'événement pour dire à popcorn que les marqueurs sont utilisables.

	// this.player.popcorn.trigger(IriSP.Widgets.Timeline.onMarkersReady);

	this.player.popcorn.trigger("markersready");

	//console.log('markers processed');

}

/*

 * Fonction de recherche par gesures.

*/

IriSP.Widgets.Timeline.prototype.searchByGesture = function(typeName)

{

	this.notifySearch1Gesture(typeName, "valid");

	if(typeName != '' || typeName != undefined)

	{

		if(_.include(this.gestures, typeName))

		{

			this.currentMode = "SEARCH";

			this.hideMarkersSearch(typeName);

			this.isCurrentlyInASearchByGesture = true;

		}

		else

		{

			// alert("Unknown gesture type. Operation aborted.");

		}

	}

}

/*

 * Fonction de suppression de recherche par gesures.

*/

IriSP.Widgets.Timeline.prototype.removeSearchByGesture = function()

{

	this.removeSearch1Gesture();

	this.hideMarkersSearch();

	this.isCurrentlyInASearchByGesture = false;

}

/*

 * Place the cursor on the timeline depending on the keytyped.

*/

IriSP.Widgets.Timeline.prototype.keyPress = function(e) {

	var key = this.whichKey(e.which);

	var time = 0;

	// console.log($(this));

	if(key > -1 && key < 11)

	{

		time = this.source.getDuration().getSeconds()/10*key;

		this.$timeline.slider("value",time);

		this.player.popcorn.currentTime(time);

		//On supprime le marqueur précédemment affiché si c'est le cas.

		if(this.previousMarkerIdx > -1)

		{

			// console.log("EXT hide idx " + this.previousMarkerIdx);

			var previousMarker = IriSP.jQuery("#" + this.annotations[this.previousMarkerIdx].id.replace(":", "_"));

			this.hideMarkerBig(previousMarker);

			// console.log("EXT hide " + this.previousMarkerIdx);

		}

	}

	if(key == 11)

	{

		if(!this.timelineSelected)

		{

			this.currentMode = "TIMELINE";

			this.selectTimeline();

		}

		else

		{

			this.currentMode = "VIDEO";

			this.deselectTimeline();

		}

	}

	if(key == 12)

	{

		this.hideMarkersSearch();

	}

	if(key == 13)

	{

		var gesturesStr = '';

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

		{

			gesturesStr += this.gestures[i] + ", ";

		}

		gesturesStr = gesturesStr.substr(0, gesturesStr.length - 2);

		/*if(IriSP.jQuery('#notify_search_1gesture').length > 0)

		{

			this.removeSearch1Gesture();

		}*/

		var typeName = prompt("Please enter a type name among (" + gesturesStr + ").", "");

		if(typeName != '' || typeName != undefined)

		{

			if(_.include(this.gestures, typeName))

			{

				this.currentMode = "SEARCH";

				this.hideMarkersSearch(typeName);

			}

			else

			{

				// alert("Unknown gesture type. Operation aborted.");

			}

		}

	}

	if(key == 21)

	{

		// console.log(this);

		if(!this.paused)

		{

			this.paused = true;

			this.player.popcorn.pause();

		}

		else

		{

			this.paused = false;

			this.player.popcorn.play();