define(['jquery', 'underscore', 'requtils', 'renderer/baseeditor'], function ($, _, requtils, BaseEditor) {
    'use strict';

    var Utils = requtils.getUtils();

    /* EdgeEditor Begin */

    //var EdgeEditor = Renderer.EdgeEditor = Utils.inherit(Renderer._BaseEditor);
    var EdgeEditor = Utils.inherit(BaseEditor);

    _(EdgeEditor.prototype).extend({
        _init: function() {
          BaseEditor.prototype._init.apply(this);
          this.template = this.options.templates['templates/edgeeditor.html'];
          this.readOnlyTemplate = this.options.templates['templates/edgeeditor_readonly.html'];
        },
        draw: function() {
            var _model = this.source_representation.model,
            _from_model = _model.get("from"),
            _to_model = _model.get("to"),
            _created_by = _model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan),
            _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);
            this.editor_$
              .html(_template({
                edge: {
                    has_creator: !!_model.get("created_by"),
                    title: _model.get("title"),
                    uri: _model.get("uri"),
                    short_uri:  Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
                    description: _model.get("description"),
                    color: _model.get("color") || _created_by.get("color"),
                    from_title: _from_model.get("title"),
                    to_title: _to_model.get("title"),
                    from_color: _from_model.get("color") || (_from_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
                    to_color: _to_model.get("color") || (_to_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
                    created_by_color: _created_by.get("color"),
                    created_by_title: _created_by.get("title")
                },
                renkan: this.renkan,
                shortenText: Utils.shortenText,
                options: this.options
            }));
            this.redraw();
            var _this = this,
            closeEditor = function() {
                _this.renderer.removeRepresentation(_this);
                paper.view.draw();
            };
            this.editor_$.find(".Rk-CloseX").click(closeEditor);
            this.editor_$.find(".Rk-Edit-Goto").click(function() {
                if (!_model.get("uri")) {
                    return false;
                }
            });

            if (this.renderer.isEditable()) {

                var onFieldChange = _.throttle(function() {
                    _.defer(function() {
                        if (_this.renderer.isEditable()) {
                            var _data = {
                                title: _this.editor_$.find(".Rk-Edit-Title").val()
                            };
                            if (_this.options.show_edge_editor_uri) {
                                _data.uri = _this.editor_$.find(".Rk-Edit-URI").val();
                            }
                            _this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#");
                            _model.set(_data);
                            paper.view.draw();
                        } else {
                            closeEditor();
                        }
                    });
                },500);

                this.editor_$.on("keyup", function(_e) {
                    if (_e.keyCode === 27) {
                        closeEditor();
                    }
                });

                this.editor_$.find("input").on("keyup change paste", onFieldChange);

                this.editor_$.find(".Rk-Edit-Vocabulary").change(function() {
                    var e = $(this),
                    v = e.val();
                    if (v) {
                        _this.editor_$.find(".Rk-Edit-Title").val(e.find(":selected").text());
                        _this.editor_$.find(".Rk-Edit-URI").val(v);
                        onFieldChange();
                    }
                });
                this.editor_$.find(".Rk-Edit-Direction").click(function() {
                    if (_this.renderer.isEditable()) {
                        _model.set({
                            from: _model.get("to"),
                            to: _model.get("from")
                        });
                        _this.draw();
                    } else {
                        closeEditor();
                    }
                });

                var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker");

                this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
                        function(_e) {
                            _e.preventDefault();
                            _picker.show();
                        },
                        function(_e) {
                            _e.preventDefault();
                            _picker.hide();
                        }
                );

                _picker.find("li").hover(
                        function(_e) {
                            _e.preventDefault();
                            _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color"));
                        },
                        function(_e) {
                            _e.preventDefault();
                            _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
                        }
                ).click(function(_e) {
                    _e.preventDefault();
                    if (_this.renderer.isEditable()) {
                        _model.set("color", $(this).attr("data-color"));
                        _picker.hide();
                        paper.view.draw();
                    } else {
                        closeEditor();
                    }
                });
            }
        },
        redraw: function() {
        	if (this.options.popup_editor){
        		var _coords = this.source_representation.paper_coords;
        		Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);
        	}
            this.editor_$.show();
            paper.view.draw();
        }
    }).value();

    /* EdgeEditor End */

    return EdgeEditor;

});