Ext.define("IceCap.ux.form.panel.fusionChart", {

	extend: "Ext.panel.Panel",

	alias: [
		"widget.FUSIONCHART"
	],

	header: false,

	width: 500,

	height: 500,

	bodyPadding: 5,

	focusable: false,

	layout: "fit",

	config: {
		chartData: [],
		chartType: ""
	},

	border: false,

	constructor: function(o_config) {

		var i_self = this;


		Ext.apply(o_config, {
			chartData: o_config.data ? Ext.Array.from(o_config.data) : []
		});

		delete o_config.data;

		i_self.callParent([o_config]);

	},

	initComponent: function() {

		var i_self = this;
		i_self.callParent();

		var i_chart = i_self.createChart();

		i_self.add(i_chart);

	},

	createChart: function() {

		var i_self = this;

		var s_type = i_self.getChartType().toLowerCase();

		var i_chart;
		switch (s_type) {
			case "column3d":
				i_chart = i_self.createColumn3D(i_self.getChartData());
				break;
			case "column":
				i_chart = i_self.createColumn(i_self.getChartData());
				break;
			default:
				break;
		}

		return i_chart;
	},

	createColumn3D: function(a_input) {

		var a_data = [];

		var a_fields = [
			"category",
			"value"
		];

		Ext.Array.each(a_input, function(a_value) {

			var value = a_value[1] || 0;

			if(value) {
				value = value.replace(".", "").replace(",", ".");
				value = parseFloat(value);
			}

			var o_record = {
				category: a_value[0],
				value: value
			};

			a_data.push(o_record);
		});

		a_data = a_data.reverse();

		var i_store = Ext.create("Ext.data.Store", {
			proxy: {
				type: "memory",
				reader: {
					type: "json",
					rootProperty: "rows",
					totalProperty: "totalRows"
				}
			},
			fields: a_fields,
			data: a_data
		});

		var i_chart = Ext.widget("cartesian", {
			store: i_store,
			flex: 1,
			insetPadding: 40,
			axes: [
				{
					type: "numeric",
					position: "right",
					grid: true,
					fields: "value",
					label: {
						rotate: {
							degrees: -30
						}
					}
				},
				{
					type: "category3d",
					fields: "category",
					position: "bottom"
				}
			],
			series: {
				type: "bar3d",
				xField: "category",
				yField: "value",
				style: {
					maxBarWidth: 50,
					minGapWidth: 20
				},
				label: {
					field: "value",
					display: "insideEnd",
					renderer: function (value) {
						return value.toFixed(2);
					}
				}
			}
		});

		return i_chart;
	},

	createColumn: function (a_input) {

		var a_data = [];

		var a_fields = [
			"category",
			"value"
		];

		Ext.Array.each(a_input, function (a_value) {

			var value = a_value[1] || 0;

			if (value) {
				value = value.replace(".", "").replace(",", ".");
				value = parseFloat(value);
			}

			var o_record = {
				category: a_value[0],
				value: value
			};

			a_data.push(o_record);
		});

		a_data = a_data.reverse();

		var i_store = Ext.create("Ext.data.Store", {
			proxy: {
				type: "memory",
				reader: {
					type: "json",
					rootProperty: "rows",
					totalProperty: "totalRows"
				}
			},
			fields: a_fields,
			data: a_data
		});

		var i_chart = Ext.widget("cartesian", {
			store: i_store,
			flex: 1,
			insetPadding: 40,
			axes: [
				{
					type: "numeric",
					position: "right",
					grid: true,
					fields: "value",
					label: {
						rotate: {
							degrees: -30
						}
					}
				},
				{
					type: "category",
					fields: "category",
					position: "bottom"
				}
			],
			series: {
				type: "bar",
				xField: "category",
				yField: "value",
				style: {
					maxBarWidth: 50,
					minGapWidth: 20
				},
				label: {
					field: "value",
					display: "insideEnd",
					renderer: function (value) {
						return value.toFixed(2);
					}
				}
			}
		});

		return i_chart;
	}
});
