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>'

    + '<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));

    });

}

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 {

        // Click on "x" without a selected marker: back to initial state

        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){

        // Click on "cancel" while editing a marker: back to visualization state

        _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 {

        // Click on "cancel" while editing a marker: back to initial state

        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