IriSP.PlayerWidget = function(player, config) {

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

    var _this = this,

        _html = IriSP.templToHTML(IriSP.player_template, this);

    this.$.append(_html);

    // Define blocks

    this.$playButton = this.$.find(".Ldt-CtrlPlay");

    this.$searchBlock = this.$.find(".LdtSearch");

    this.$searchInput = this.$.find(".LdtSearchInput");

    this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar");

    // handle events

    this.bindPopcorn("play","playButtonUpdater");

    this.bindPopcorn("pause","playButtonUpdater");

    this.bindPopcorn("volumechange","volumeUpdater");

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

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

    this.bindPopcorn("IriSP.search.matchFound","searchMatch");

    this.bindPopcorn("IriSP.search.noMatchFound","searchNoMatch");

    this.bindPopcorn("IriSP.search.triggeredSearch","triggeredSearch");

    // handle clicks

    this.$playButton.click(this.functionWrapper("playHandler"));

    this.$.find(".Ldt-CtrlAnnotate").click(function() {

        _this.player.popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked");

    });

    this.$.find(".Ldt-CtrlSearch").click(this.functionWrapper("searchButtonHandler"));

    this.$searchInput.keyup(this.functionWrapper("searchHandler") );

	var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control");

    this.$.find('.Ldt-CtrlSound')

        .click(this.functionWrapper("muteHandler"))

    // Allow Volume Cursor Dragging

    this.$volumeBar.slider({

        slide: function(event, ui) {

            _this.$volumeBar.attr("title",IriSP.i18n.getMessage('volume')+': ' + ui.value + '%');

            _this.player.popcorn.volume(ui.value / 100);

        },

        stop: this.functionWrapper("volumeUpdater")

    });

    // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget)

    this.$.hover(

        function() {

            _this.player.popcorn.trigger("IriSP.PlayerWidget.MouseOver");

        }, 

        function() {

            _this.player.popcorn.trigger("IriSP.PlayerWidget.MouseOut");

        });

    setTimeout(this.functionWrapper("volumeUpdater"), 1000);

    /* some players - including jwplayer - save the state of the mute button between sessions */

    var _curTime = this.player.popcorn.roundTime();

    if (typeof this._previousSecond !== "undefined" && _curTime === this._previousSecond) {

        return;

    }

    // we get it at each call because it may change.

    var _totalTime = this.source.getDuration(),

        _elapsedTime = new IriSP.Model.Time();

    _elapsedTime.setSeconds(_curTime);

    this.$.find(".Ldt-ElapsedTime").html(_elapsedTime.toString());

    this.$.find(".Ldt-TotalTime").html(_totalTime.toString());

    this._previousSecond = _curTime;

    var status = this.player.popcorn.media.paused;

    if (status) {

        this.$playButton

            .attr("title", IriSP.i18n.getMessage('play'))

            .removeClass("Ldt-CtrlPlay-PauseState")

            .addClass("Ldt-CtrlPlay-PlayState");

    } else {

        this.$playButton

            .attr("title", IriSP.i18n.getMessage('pause'))

            .removeClass("Ldt-CtrlPlay-PlayState")

            .addClass("Ldt-CtrlPlay-PauseState");

    }

    var status = this.player.popcorn.media.paused;

    if (status) {        

        this.player.popcorn.play();   

    } else {

        this.player.popcorn.pause();

    }  

    this.player.popcorn.mute(!this.player.popcorn.muted());

    var _muted = this.player.popcorn.muted(),

        _vol = this.player.popcorn.volume();

    var _soundCtl = this.$.find(".Ldt-CtrlSound");

    this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol);

    this.$searchBlock.show("blind", { direction: "horizontal"}, 100);

    this.$searchInput.css('background-color','#fff');

    this.$searchInput.focus();

    // we need this variable because some widgets can find a match in

    // their data while at the same time others don't. As we want the

    this.player.popcorn.trigger("IriSP.search.open");

    this._searchLastValue = this.$searchInput.val();

    this.$searchInput.val('');

    this.$searchBlock.hide("blind", { direction: "horizontal"}, 75);

    this.player.popcorn.trigger("IriSP.search.closed");

    if ( this.$searchBlock.is(":hidden") ) {

        this.showSearchBlock();

        this.$searchInput.val(this._searchLastValue);      

        this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.

        this.hideSearchBlock();

    }

    this._searchLastValue = this.$searchInput.val();

    this._positiveMatch = false;

    // do nothing if the search field is empty, instead of highlighting everything.

    if (this._searchLastValue == "") {

        this.player.popcorn.trigger("IriSP.search.cleared");

        this.$searchInput.css('background-color','');

    } else {

        this.player.popcorn.trigger("IriSP.search", this._searchLastValue);

    }

    this._positiveMatch = true;

    this.$searchInput.css('background-color','#e1ffe1');

    if (this._positiveMatch !== true) {

        this.$searchInput.css('background-color', "#d62e3a");

    }

    this.showSearchBlock();

    this.$searchInput.attr('value', searchString);      

    this.player.popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural.