Ext.define("IceCap.component.Marker", {

	xtype: "icecap-marker",

	alias: [
		"widget-icecap-marker"
	],

	extend: "Ext.Component",

	hidden: true,

	width: "90%",

	height: "90%",

	config: {
		inUse:  false,
		xValue: 0,
		yValue: 0
	},

	listeners: {
		afterrender: {
			fn: function(i_marker) {

				i_marker.update();
			}
		},
		show: {
			fn: function(i_marker) {

				i_marker.update();
			}
		}
	},

	renderTpl: [
		"<div id=\"{id}-outer\" data-ref=\"outerEl\" ",
			"style=\"",
			"width:100%;",
			"height:100%;",
			"background-color:transparent;",
		"\">",
			"<div id=\"{id}-body\" data-ref=\"bodyEl\" ",
				"style=\"",
				"width:100%;",
				"height:100%;",
				"background-color:transparent;",
			"\">",
				"<div id=\"{id}-frameBody\" data-ref=\"frameBody\">",
						"<div id=\"{id}-markerVertical\" class=\"icecap-marker-vertical-{ui}\" data-ref=\"markerVertical\" ",
							"style=\"",
							"width: 0px;",
							"height: 100%;",
							"top: 0px;",
							"left: 0px;",
							"clear: Both;",
						"\"></div>",
						"<div id=\"{id}-markerHorizontal\" class=\"icecap-marker-horizontal-{ui}\" data-ref=\"markerHorizontal\" ",
							"style=\"",
							"height: 0px;",
							"width: 100%;",
							"top: 0px;",
							"left: 0px;",
						"\"></div>",
				"</div>",
			"</div>",
		"</div>"
	],

	childEls: [
		{
			name: "outerEl",
			itemId: "outer"
		},
		{
			name: "frameBody",
			itemId: "frameBody"
		},
		{
			name: "markerVerticalEl",
			itemId: "markerVertical"
		},
		{
			name: "markerHorizontalEl",
			itemId: "markerHorizontal"
		},

	],

	constructor: function(o_config) {

		var i_self = this;

		i_self.callParent(arguments);
	},

	updateInUse: function(value) {

		var i_self = this;

		i_self[value ? "show" : "hide"]();

		i_self.fireEvent(value ? "show" : "hide", i_self);
	},

	updateXValue: function(value) {

		var i_self = this;

		if (i_self.rendered) {

			var i_markerVertical = i_self.markerVerticalEl;
			i_markerVertical.setLeft(value);
		}
	},

	updateYValue: function(value) {

		var i_self = this;

		if (i_self.rendered) {

			var i_markerHorizontal = i_self.markerHorizontalEl;
			i_markerHorizontal.setTop(value);
		}
	},

	update: function() {

		var i_self = this;

		var n_x = i_self.getXValue();
		var n_y = i_self.getYValue();

		i_self.updateXValue(n_x);
		i_self.updateYValue(n_y);
	},

	move: function(a_position) {

		var i_self = this;

		i_self.setXValue(a_position[0]);
		i_self.setYValue(a_position[1]);
	},

	toggle: function() {

		var i_self = this;

		var b_InUse = i_self.getInUse();

		i_self.setInUse(!b_InUse);
	}
});
