Ext.define("Ext.ux.util.ace.DiffPanel", {
	extend: "Ext.panel.Panel",

	mixins: [
		"Ext.mixin.Mashup"
	],

	requiredScripts: [
		"/portfolio/app/ux/util/ace/src/ace.js",
		"/portfolio/app/ux/util/ace/src/ace-diff.js",
		"/portfolio/app/ux/util/ace/src/diff_match_patch.js",
		"/portfolio/app/ux/util/ace/src/ace-diff.css"
	],

	alias: "widget.ux.util.ace.diffpanel",

	config: {

		leftEditor: null,
		gutter: null,
		rightEditor: null,
		leftValue: "",
		rightValue: "",
		aceDiff: null,
		mode: "json",
		leftConfig: null,
		rightConfig: null
	},

	layout: {
		type: "hbox",
		align: "stretch"
	},

	defaults: {
		margin: "0 5 0 0"
	},

	initComponent: function() {

		var i_self = this;
		i_self.callParent(arguments);
		var a_items = i_self.createLayout();

		i_self.add(a_items);

		i_self.on({
			afterrender: {
				fn: function(i_panel) {

					var i_leftEditor = i_self.getLeftEditor();
					var i_rightEditor = i_self.getRightEditor();
					var i_gutter = i_self.getGutter();

					var s_mode = i_self.getMode();

					if (s_mode) {
						s_mode = "ace/mode/" + s_mode;
					}
					else {
						s_mode = "ace/mode/json";
					}

					var o_left = Ext.Object.mergeIf({}, i_self.getLeftConfig(), {
						id: i_leftEditor.body.id,
						content: i_self.getLeftValue(),
						editable: true,
						copyLinkEnabled: false
					});

					var o_right = Ext.Object.mergeIf({}, i_self.getRightConfig(), {
						id: i_rightEditor.body.id,
						content: i_self.getRightValue(),
						editable: true,
						copyLinkEnabled: false
					});

					var i_aceDiff = new AceDiff({
						mode: s_mode,
						left: o_left,
						right: o_right,
						classes: {
							gutterID: i_gutter.el.id
						}
					});

					var o_editors = i_aceDiff.getEditors();

					o_editors.left.setOptions({
						useWorker: false,
						showGutter: true
					});

					o_editors.right.setOptions({
						useWorker: false,
						showGutter: true
					});

					i_self.setAceDiff(i_aceDiff);

					var a_diffs = i_aceDiff.diffs;

					if (a_diffs.length > 0) {
						setTimeout(function() {
							var o_diff = a_diffs[0];
							o_editors.left.gotoLine(o_diff.leftStartLine);
							o_editors.right.gotoLine(o_diff.rightStartLine);
						}, 100);
					}
				}
			}
		});
	},

	createLayout: function() {

		var i_self = this;

		var a_items = [
			i_self.createLeft(),
			i_self.createGutter(),
			i_self.createRight()
		];

		return a_items;
	},

	createLeft: function() {

		var i_self = this;

		var i_panel = Ext.widget("panel", {
			layout: "fit",
			flex: 3
		});

		i_self.setLeftEditor(i_panel);

		return i_panel;
	},

	createGutter: function() {

		var i_self = this;

		var i_container = Ext.widget("container", {
			layout: "fit",
			width: 100
		});

		i_self.setGutter(i_container);

		return i_container;
	},

	createRight: function() {

		var i_self = this;

		var i_panel = Ext.widget("panel", {
			layout: "fit",
			flex: 3,
			margin: "0 0 0 0"
		});

		i_self.setRightEditor(i_panel);

		return i_panel;
	}
});
