/* This widget displays a note-taking view, that can be saved to localStorage */

IriSP.Widgets.NoteTaking = function(player, config) {
    IriSP.Widgets.Widget.call(this, player, config);
}

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

IriSP.Widgets.NoteTaking.prototype.defaults = {
    // Id that will be used as localStorage key
    editable_storage: ""
}

IriSP.Widgets.NoteTaking.prototype.template = '<textarea class="Ldt-NoteTaking-Text"></textarea>';

IriSP.Widgets.NoteTaking.prototype.draw = function() {
    var widget = this;
    var content;
    var $ = IriSP.jQuery;

    widget.renderTemplate();
    content = widget.$.find('.Ldt-NoteTaking-Text');

    function load_content() {
        $(content).val(window.localStorage[widget.editable_storage]);
    }
    function save_content() {
        window.localStorage[widget.editable_storage] = $(content).val();
    }

    // Load current transcript
    if (window.localStorage[widget.editable_storage]) {
        load_content();
    }

    // Thanks to http://stackoverflow.com/questions/4456545/how-to-insert-text-at-the-current-caret-position-in-a-textarea
    $.fn.insertAtCaret = function(text) {
        return this.each(function() {
            if (this.selectionStart !== undefined) {
                // mozilla/netscape support
                var startPos = this.selectionStart,
                    endPos = this.selectionEnd,
                    scrollTop = this.scrollTop;
                this.value = this.value.substring(0, startPos) + text + this.value.substring(endPos, this.value.length);
                this.focus();
                this.selectionStart = startPos + text.length;
                this.selectionEnd = startPos + text.length;
                this.scrollTop = scrollTop;
            } else {
                // IE input[type=text] and other browsers
                this.value += text;
                this.focus();
                this.value = this.value;    // forces cursor to end
            }
        });
    };

    function getAroundCaret(el, length) {
        // Return a selection of 2 * length characters around the caret
        var startPos = el.selectionStart;
        return el.value.substring(startPos - length, startPos + length);
    };


    $(content).keydown(function (_event) {
        if (_event.keyCode == 13 && (_event.ctrlKey || _event.metaKey)) {
            // Insert current timestamp
            _event.preventDefault();
            // Get current value
            var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8));
            if (match) {
                // Found a timecode. Go to position.
                widget.media.setCurrentTime(IriSP.timestamp2ms(match[1]));
            } else {
                $(content).insertAtCaret("[" + (new IriSP.Model.Time(widget.media.getCurrentTime())).toString() + "]");
                save_content();
            }
        }
    }).on("input", function (_event) {
        console.log("Change");
        // Store updated value
        save_content();
    }).on("dblclick", function (_event) {
            var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8));
            if (match) {
                // Found a timecode. Go to position.
                _event.preventDefault();
                widget.media.setCurrentTime(IriSP.timestamp2ms(match[1]));
            };
    });
};