var InlineEditorView = Backbone.View.extend({
    initialize: function(options) {
        this.render(options);
    },
    renderInput: function(options) {
        var view = this;
        this.$input = $('<input type="text" class="form-control input-sm">').val(options.target.text());
        this.$input.keyup(function(e) {
            switch (e.keyCode) {
                case 13:
                    view.$saveButton.click();
                    break;
                case 27:
                    view.$cancelButton.click();
                    break;
            }
        });
        this.$group.append(this.$saveButton, this.$cancelButton);
        this.$el.append(this.$input, this.$group);
        options.target.after(this.$el);
        this.$input.focus();
        return this;
    },
    renderTextarea: function(options) {
        var view = this;
        this.$input = $('<textarea class="form-control input-sm" rows="3">').text(options.target.text());
        this.$input.keyup(function(e) {
            switch (e.keyCode) {
                case 13:
                    if (e.ctrlKey) {
                        view.$saveButton.click();
                    }
                    break;
                case 27:
                    view.$cancelButton.click();
                    break;
            }
        });
        this.$group.append(this.$saveButton, this.$cancelButton);
        this.$el.append(this.$input, this.$group);
        options.target.after(this.$el);
        this.$input.focus();
        return this;
    },
    render: function(options) {
        var view = this;
        this.$saveButton = $('<button class="btn btn-sm btn-success">').html('<i class="glyphicon glyphicon-ok"></i>');
        this.$cancelButton = $('<button class="btn btn-sm btn-default">').html('<i class="glyphicon glyphicon-remove"></i>');
        this.$el = $('<div class="inline-editor input-group">');
        this.$group = $('<span class="input-group-btn">');
        this.$cancelButton.click(function() {
            view.$el.remove();
            options.target.show();
        });
        this.$saveButton.click(function() {
            view.trigger('save', view.$input.val());
        });
        switch (options.type) {
            case 'input':
                return this.renderInput(options);
            case 'textarea':
                return this.renderTextarea(options);
        }
    }
});
var CollectionViewWithInlineEditor = CollectionView.extend({
    bindInlineEditable: function(model, selector) {
        model.$item.delegate(selector, 'click', function(e) {
            e.preventDefault();
            var $this = $(this);
            var attribute = $this.attr('data-model-attribute');
            var inlineEditor = new InlineEditorView({
                target: $this,
                type: $this.attr('data-input-type') || 'input'
            });
            $this.hide();
            inlineEditor.on('save', function(value) {
                var data = {};
                data[attribute] = value;
                model.adhoc(data).then(function() {
                    inlineEditor.remove();
                    $this.show();
                });
            });
        });
    }
});