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

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

};

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

IriSP.Widgets.Markers.prototype.defaults = {

    annotation_type: "markers",

    line_height: 8,

    background: "#e0e0e0",

    marker_color: "#ff80fc",

    placeholder_color: "#ffffff",

    hover_color: "#e15581",

    selected_color: "#74d600",

    ball_radius: 4,

    pause_on_write: true,

    play_on_submit: true,

    api_serializer: "ldt_annotate",

    api_endpoint_template_create: "",

    api_endpoint_template_edit: "",

    api_endpoint_template_delete: "",

    api_method_create: "POST",

    api_method_edit: "PUT",

    api_method_delete: "DELETE",

    project_id: "",

    creator_name: "",

    after_send_timeout: 0,

    markers_gap: 2000,

    allow_empty_markers: false,

    close_after_send: false,

    custom_send_button: false,

    custom_cancel_button: false,

    preview_mode: false,

};

IriSP.Widgets.Markers.prototype.template = 

    '<div class="Ldt-Markers-Display" style="height:{{line_height}}px;">'

    +     '<div class="Ldt-Markers-List" style="height:{{line_height}}px; position: relative;"></div>'

    +     '<div class="Ldt-Markers-Position"></div>'

    + '</div>'

    + '<div class="Ldt-Markers-Inputs">'

    +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">'

    +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{#preview_mode}}{{l10n.preview_mode_submit}}{{/preview_mode}}{{^preview_mode}}{{l10n.cannot_create}}{{/preview_mode}}">+</div>'

    +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>'

    +         '{{^preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">&#10006;</div>{{/preview_mode}}'

    +         '{{#preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-PreviewDelete" title="{{l10n.preview_mode_delete}}">&#10006;</div>{{/preview_mode}}'

    +         '<div class="Ldt-Markers-Info"></div>'

    +     '</div>'

    +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">'  

    +         '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.wait_while_processing}}</div>'

    +     '</div>'

    +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSuccess">'

    +         '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'    

    +         '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.annotation_saved}}</div>'

    +     '</div>'

    +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenDeleteSuccess">'

    +         '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'    

    +         '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.delete_saved}}</div>'

    +     '</div>'

    +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenFailure">'

    +         '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'

    +         '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.error_while_contacting}}</div>'

    +     '</div>'

    +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenConfirmDelete">'

    +         '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'

    +         '<div class="Ldt-Markers-Screen-InnerBox">'

    +           '{{l10n.delete_text}} '

    +           '<a class="Ldt-Markers-Screen-SubmitDelete">{{l10n.submit_delete}}</a> '

    +           '<a class="Ldt-Markers-Screen-CancelDelete">{{l10n.cancel}}</a>'

    +         '</div>'

    +     '</div>'

    + '</div>';

IriSP.Widgets.Markers.prototype.markerTemplate = 

    '<div class="Ldt-Markers-Marker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +

        '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' + 

    '</div>';

IriSP.Widgets.Markers.prototype.markerPlaceholderTemplate = 

    '<div class="Ldt-Markers-Marker Ldt-Markers-PlaceholderMarker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +

        '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' + 

    '</div>'; 

IriSP.Widgets.Markers.prototype.infoTemplate = 

    '{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' +

    '{{#edit}}<div class="Ldt-Markers-MarkerEdit">' + 

        '<textarea class="Ldt-Markers-MarkerTextArea" cols="60" rows="4">{{marker_info}}</textarea>' +

        '<div class="Ldt-Markers-Buttons">' +

            '{{^preview_mode}}<div class="Ldt-Markers-MarkerSend">{{send}}</div>{{/preview_mode}}' +

            '{{#preview_mode}}<div class="Ldt-Markers-MarkerPreviewSend" title="{{preview_mode_text}}">{{send}}</div>{{/preview_mode}}' +

            '<div class="Ldt-Markers-MarkerCancel">{{cancel}}</div>' +

        '</div>' +

    '</div>{{/edit}}'

IriSP.Widgets.Markers.prototype.messages = {

    en : {

        send : "Send",

        submit_delete: "Delete",

        cancel : "Cancel",

        preview_mode_submit: "You cannot submit a marker in preview mode.",

        preview_mode_delete: "You cannot delete a marker in preview mode",

        wait_while_processing: "Please wait while your annotation is being processed...",

        delete_text: "The selected marker will be deleted. Continue?",

        error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.",

        annotation_saved: "Thank you, your annotation has been saved.",

        delete_saved: "Thank you, your annotation has been deleted",

        close_widget: "Close",

        cannot_create: "Cannot create marker on this timecode"

    },

    fr : {

        send : "Envoyer",

        submit_delete: "Supprimer",

        cancel : "Annuler",

        preview_mode_submit: "Vous ne pouvez pas créer ou éditer de marqueur en mode aperçu",

        preview_mode_delete: "Vous ne pouvez pas supprimer de marqueur en mode aperçu",

        wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",

        delete_text: "Le marqueur sélectionné sera supprimé. Continuer?",

        error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",

        annotation_saved: "Merci, votre annotation a été enregistrée.",

        delete_saved: "Merci, votre annotation a été supprimée",

        close_widget: "Fermer",

        cannot_create: "Impossible de créer un marqueur sur ce timecode"

    }

}

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

    var _this = this;

    this.renderTemplate();

    this.markers = this.getWidgetAnnotations().filter(function(_ann) {

        return ((_ann.getDuration() == 0) || (_ann.begin == _ann.end));

    });

    this.drawMarkers();

    this.$.find(".Ldt-Markers-Create").click(this.functionWrapper("onCreateClick"));

    this.$.find(".Ldt-Markers-Delete").click(this.functionWrapper("onDeleteClick"));

    this.$.find(".Ldt-Markers-RoundButton").hide()

    this.updateCreateButtonState(this.media.getCurrentTime())

    this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(this.functionWrapper("sendDelete"));

    this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function(){

        _this.showScreen("Main");

        _this.cancelEdit();

    })

    this.showScreen("Main");

    this.$.css({

        margin: "1px 0",

        height: this.line_height,

        background: this.background

    });

    this.$.find(".Ldt-Markers-Close").click(this.functionWrapper("revertToMainScreen"));

    this.onMediaEvent("timeupdate", this.functionWrapper("updatePosition"));

    this.onMediaEvent("timeupdate", this.functionWrapper("updateCreateButtonState"));

    this.onMediaEvent("play", this.functionWrapper("clearSelectedMarker"));

    this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));

    this.newMarkerTimeCode = 0;

    this.selectedMarker = false;

}

IriSP.Widgets.Markers.prototype.updatePosition = function(_time) {    

    var _x = Math.floor( this.width * _time / this.media.duration);

    this.$.find('.Ldt-Markers-Position').css({

        left: _x + "px"

    });

}

IriSP.Widgets.Markers.prototype.updateCreateButtonState = function(_time){

    _this = this

    var can_create = this.preview_mode? false : this.markers.every(function(_marker){   

        return ((_time < (_marker.begin-_this.markers_gap))||(_time > (_marker.begin+_this.markers_gap)))

    });

    if (can_create){

        if ((this.$.find(".Ldt-Markers-Create").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden")||this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))){

            this.$.find(".Ldt-Markers-RoundButton").hide();

            this.$.find(".Ldt-Markers-Create").show();

        }

    }

    else {

        if ((this.$.find(".Ldt-Markers-CannotCreate").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden")||this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))){

            this.$.find(".Ldt-Markers-RoundButton").hide();

            this.$.find(".Ldt-Markers-CannotCreate").show();

        }

    }

}

IriSP.Widgets.Markers.prototype.onCreateClick = function(){

    this.pauseOnWrite();

    if (!this.selectedMarker){

        this.newMarkerCurrentTime = this.media.getCurrentTime();

        this.showPlaceholder(this.media.getCurrentTime());

        this.startEdit();

    }

}

IriSP.Widgets.Markers.prototype.onDeleteClick = function(){

    _this = this;

    this.pauseOnWrite();

    if(this.selectedMarker){

        this.showScreen("ConfirmDelete");

    }

    else {

        this.cancelEdit();

    }

}

IriSP.Widgets.Markers.prototype.startEdit = function(){

    if (this.selectedMarker){

        _divHtml = Mustache.to_html(this.infoTemplate, {

            edit: true,

            preview_mode: this.preview_mode,

            preview_mode_text: this.l10n.preview_mode_submit,

            marker_info: this.selectedMarker.description,

            send: this.custom_send_button? this.custom_send_button : this.l10n.send,

            cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel

        })

    }

    else {

        _divHtml = Mustache.to_html(this.infoTemplate, {

            edit: true,

            marker_info: "",

            preview_mode: this.preview_mode,

            preview_mode_text: this.l10n.preview_mode_submit,

            send: this.custom_send_button? this.custom_send_button : this.l10n.send,

            cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel

        })

    }

    this.$.find(".Ldt-Markers-Info").html(_divHtml);

    this.$.find(".Ldt-Markers-MarkerSend").click(this.functionWrapper("onSubmit"));

    this.$.find(".Ldt-Markers-MarkerCancel").click(this.functionWrapper("cancelEdit"));

    this.$.find(".Ldt-Markers-MarkerTextArea").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));

    this.$.find(".Ldt-Markers-RoundButton").hide();

    if (this.preview_mode){

        this.$.find(".Ldt-Markers-PreviewDelete").show(); 

    }

    else {

        this.$.find(".Ldt-Markers-Delete").show();

    }

    this.editing = true;

}

IriSP.Widgets.Markers.prototype.cancelEdit = function(){

    if (this.selectedMarker){

        _divHtml = Mustache.to_html(this.infoTemplate, {

            edit: false,

            marker_info: this.selectedMarker.description,

        })

        this.$.find(".Ldt-Markers-Info").html(_divHtml);

        if (!this.preview_mode){

            this.$.find(".Ldt-Markers-MarkerDescription").click(this.functionWrapper("startEdit"));

        }

    }

    else {

        this.hidePlaceholder();

        this.$.find(".Ldt-Markers-Info").html("");

        this.$.find(".Ldt-Markers-RoundButton").hide()

        this.$.find(".Ldt-Markers-Create").show()

        this.updateCreateButtonState(this.media.getCurrentTime())

    }

    this.editing = false;

}

IriSP.Widgets.Markers.prototype.onDescriptionChange = function(){

    // Returns false if the textarea is empty, true if there is text in it

    if(!this.allow_empty_markers){

        var _field = this.$.find(".Ldt-Markers-MarkerTextArea"),

            _contents = _field.val();

        _field.css("border-color", !!_contents ? "#e87d9f" : "#ff0000");

        if (!!_contents) {

            _field.removeClass("empty");

        } else {

            _field.addClass("empty");

        }

        this.pauseOnWrite();

        return !!_contents;

    }

    else {

        // If the widget is configured to allow to post empty markers, it returns true

        return true

    }

};

IriSP.Widgets.Markers.prototype.pauseOnWrite = function(){

    if (this.pause_on_write && !this.media.getPaused()) {

        this.media.pause();

    }

};

IriSP.Widgets.Markers.prototype.showScreen = function(_screenName) {

    this.$.find('.Ldt-Markers-Screen' + _screenName).show()

        .siblings().hide();

}

IriSP.Widgets.Markers.prototype.revertToMainScreen = function(){

    if (this.$.find(".Ldt-Markers-ScreenMain").is(":hidden")){

        this.showScreen("Main");

        this.cancelEdit();

        if (this.selectedMarker){

            this.$.find(".Ldt-Markers-RoundButton").hide();

            if (this.preview_mode){

                this.$.find(".Ldt-Markers-PreviewDelete").show(); 

            }

            else {

                this.$.find(".Ldt-Markers-Delete").show();

            }

        }

        else {

            this.$.find(".Ldt-Markers-RoundButton").hide();

            this.$.find(".Ldt-Markers-Create").show();

            this.updateCreateButtonState();

        }

    }

}

IriSP.Widgets.Markers.prototype.hidePlaceholder = function(){

    this.$.find(".Ldt-Markers-PlaceholderMarker").remove();

}

IriSP.Widgets.Markers.prototype.showPlaceholder = function(_time){   

    var _scale = this.width / this.source.getDuration(),

        _left = _time * _scale -1,

        _data = {

            left: _left,

            height: this.line_height-1,

            ball_top: (this.ball_radius*2 > this.line_height) ? 0 : ((this.line_height - this.ball_radius*2)/2)-1,

            ball_radius: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius,

            ball_diameter: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius*2,

            ball_left: -this.ball_radius,

            marker_color: this.placeholder_color

        },

        _html = Mustache.to_html(this.markerPlaceholderTemplate, _data),

        _el = IriSP.jQuery(_html);

    list_$ = this.$.find(".Ldt-Markers-List");