Ext.define("Ext.ux.hsvwheel.Picker", {

	statics: {
		wheelCssClass: "hsvcolorwheel",
		createWheel: function (i_cmp) {

			// Create the colowheel
			var Class = Ext.ux.hsvwheel.Picker;
			var s_wheelCssClass = "." + Class.wheelCssClass;
			var i_el = i_cmp.getEl();
			var i_dom = i_el.query(s_wheelCssClass)[0];

			var i_wheel = HsvWheelColorPicker(i_dom, function (s_hex) {
				i_cmp.fireEvent("update", i_cmp, s_hex);
			});

			return i_wheel;
		}
	},

	extend: "Ext.Component",

	alias: [
		"widget.hsvwheel",
		"widget.hsvwheelpicker"
	],

	mixins: {
		mashup: "Ext.mixin.Mashup"
	},

	requiredScripts: [
		"/portfolio/app/ux/hsvwheel/_css/wheel.css",
		"/portfolio/app/ux/hsvwheel/_js/wheel.js"
	],

	minWidth: 150,
	minHeight: 200,

	_wheel: null,

	initComponent: function () {

		var i_cmp = this;
		var o_config = i_cmp.initialConfig;

		var s_wheelCssClass = i_cmp.getRewriter().wheelCssClass;

		Ext.apply(i_cmp, {
			cls: "x-ux-hsvwheel-picker",
			layout: "fit",
			style: "background-color: #E6E6E6",
			html: "<div class=\"" + s_wheelCssClass + "-wrapper\"><div class=\"" + s_wheelCssClass + " normal\"></div></div>"
		});

		i_cmp.callParent(arguments);

		i_cmp.on({
			afterrender: {
				fn: i_cmp.onAfterRender
			}
		});

		return i_cmp;
	},

	onAfterRender: function () {

		var i_cmp = this;
		var i_el = i_cmp.getEl();

		i_cmp._wheel = i_cmp.getRewriter().createWheel(i_cmp);

		i_cmp.fireEvent("wheelready", i_cmp, i_cmp._wheel);

		return i_cmp;
	},

	select: function (s_hex) {

		var i_cmp = this;

		s_hex = s_hex.replace("#", "");
		s_hex = "#" + s_hex;


		var i_wheel = i_cmp.getWheel();

		// Wheel not yet instanciated!!
		if (!i_wheel) {

			i_cmp.on("wheelready", function () {
				i_cmp.select(s_hex);
			});
			return false;
		}

		i_wheel.setHex(s_hex);

		return i_cmp;
	},

	getWheel: function () {

		return this._wheel;
	},
	getRewriter: function () {

		return Ext.ux.hsvwheel.Picker;
	}
});
