Ext.define("Ext.ux.themed.FAB", {

	extend: "Ext.ux.themed.Button",

	alias: [
		"widget.ux-fab",
		"widget.themedfab"
	],

	floating: true,

	height: 50,
	width: 50,

	iconCls: "pf-plus",

	style: {
		"background-color": "red",
		"border-radius": "50%",
		"border": "1px solid #eef0f1",
		"margin": "0px"
	},

	config: {
		alignment: "br-br",
		offX: 0,
		offY: 0,
		color: "red",
		borderColor: "#eef0f1"
	},

	shadow: false,

	requires: [
		"Ext.ux.themed.Button"
	],

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

				var i_self = this;

				var i_parent = i_self.floatParent;
				var s_color = i_self.getColor();

				var a_offset =[
					i_self.getOffX(),
					i_self.getOffY()
				];

				if (i_parent && i_parent.getEl()) {
					i_self.alignTo(i_parent.getEl(), i_self.getAlignment(), a_offset);
					i_self.toFront(false);
				}
				else {
					i_parent.on({
						afterrender: {
							fn: function(i_parent) {
								i_self.alignTo(i_parent.getEl(), i_self.getAlignment(), a_offset);
								i_self.toFront(false);
							},
							buffer: 10
						}
					});
				}

				if (s_color) {
					i_self.setStyle("background-color", s_color);
				}
			},
			single: true
		},
		added: {
			fn: function(i_button) {

				var i_self = this;

				var i_parent = i_self.ownerCt;

				if (i_parent) {

					i_parent.on({
						resize: {
							fn: function(i_parent) {

								var a_offset =[
									i_self.getOffX(),
									i_self.getOffY()
								];

								i_self.alignTo(i_parent.getEl(), i_self.getAlignment(), a_offset);
								i_self.toFront(false);
							}
						},
						move: {
							fn: function(i_parent) {

								var a_offset =[
									i_self.getOffX(),
									i_self.getOffY()
								];

								i_self.alignTo(i_parent.getEl(), i_self.getAlignment(), a_offset);
								i_self.toFront(false);
							},
							buffer: 10
						}
					});
				}

				i_self.show();
			}
		}
	},

	updateColor: function(value) {

		var i_self = this;
		i_self.setStyle("background-color", value);
	},

	updateBorderColor: function(value) {

		var i_self = this;
		i_self.setStyle("border-color", value);
	},

	updateAlignment: function(value) {

		var i_self = this;

		var i_parent = i_self.floatParent;

		if (i_parent) {
			var a_offset =[
				i_self.getOffX(),
				i_self.getOffY()
			];

			i_self.alignTo(i_parent.getEl(), i_self.getAlignment(), a_offset);
			i_self.toFront(false);
		}
	},

	updateOffX: function(value) {

		var i_self = this;

		var i_parent = i_self.floatParent;

		if (i_parent) {

			var a_offset =[
				value,
				i_self.getOffY()
			];

			i_self.alignTo(i_parent.getEl(), i_self.getAlignment(), a_offset);
		}
	},

	updateOffY: function(value) {

		var i_self = this;

		var i_parent = i_self.floatParent;

		if (i_parent) {

			var a_offset = [
				i_self.getOffX(),
				value
			];

			i_self.alignTo(i_parent.getEl(), i_self.getAlignment(), a_offset);
		}
	}
});
