NEST.define("com.nxstinc.nest.component", { // Class Declaration
Button : function() { 
	var clazz = function(id) {
		// Component Property Declaration
		this.id = id; // Component unique identifier
		this.text = undefined;
		this.image = undefined;
		this.size = {};
		this.style = {};
		this.padding = {};
		this.margin = {};
		this.floating = undefined;
		this.valign = undefined;
		this.styleClass = "button";
	};
	// Component Inheritence 	
	clazz.prototype = NEST.inherits("com.nxstinc.nest.component.VisualComponent");

	clazz.prototype.paint = function(context) {
		// Component Implementation section
		var me = this;

		var type = 0;
		if (this.image) type++;
		if (this.image && this.text && this.text !== "")  type++;
			
		var $ss;
		$ss = $("<input type='image' id='" + this.id + "' src='" + this.image + "'>");
		if (this.text !== undefined)
			$ss.attr("title", this.text);
									
		if (this.styleClass)
			$ss.addClass(this.styleClass);

		if (this.floating)
			$ss.css("float", this.floating);
		if (this.valign)
			$ss.css("vertical-align", this.valign);

		if (this.image === undefined && this.text === undefined) {
			$ss.css({
				"min-width" : "30px",
				"min-height" : "28px",
			});
		}
		$ss.css(this.size);
		$ss.css(this.style);
		$ss.css(this.padding);
		$ss.css(this.margin);
		$ss.css("-webkit-appearance".replace(/-webkit-/gi, "-webkit-"),  "none");

		// Add Component to parent component
		var parent = context.selector;
		var element = $ss;
		$(parent).append(element);
		me.on(element, "click", function(ev) {
			me.trigger("onTap");
			return false;
		}, true);
		this.__element = element;
	};
		
	clazz.prototype.hide = function() {
		if (this.__element)
			this.__element.hide();
	};
		
	clazz.prototype.show = function() {
		if (this.__element)
			this.__element.show();
	};

	// #ifdef designing
	/**
	 * Descriptor used in Form Editor
	 * This information will appear on Palette and Properties
	 *, Notice: This information is only required during development so it will be deleted  automatically once the application is built.
	 * 
	 */
	clazz.prototype.editor = function() {
		var d = {
			palette : {
				category : "Basic",
				alias : undefined,
				priority : -1,
				description : "Button",
			},
			property : {
				text : {
					type : "string",
					category : "Setup",
					priority : 1,
				},
				image : {
					type : "string",
					editor : "ImageFileSelectionEditor",
					category : "Setup",
					priority : 2,
					alias : undefined,
					description : "",
				},
				styleClass : {
					type : "string",
					editor : "StyleClassSelectionEditor",
					category : "Decoration",
					priority : 2,
					alias : "Style Class",					
				},
				size : {
					type : "size",
					editor : "SizeEditor",
					category : "Decoration",
					priority : 4,
					description : "",
				},
				style : {
					type : "style",
					editor : "StyleEditor",
					category : "Decoration",
					priority : 5,
					description : "",
				},
				padding : {
					type : "padding",
					editor : "PaddingEditor",
					category : "Decoration",
					priority : 6,
					description : "",
				},
				margin : {
					type : "margin",
					editor : "MarginEditor",
					category : "Decoration",
					priority : 7,
					description : "",
				},
				floating : {
					type : ["left", "right"],
					category : "Decoration",
					priority : 8,
					description : "",
				},
				valign : {
					type : ["baseline", "sub", "super", "middle", "top", "bottom", "text-top", "text-bottom"],
					category : "Decoration",
					priority : 9,
					description : "",
				},
			},
			method : {
				show : {
					priority : 1,
					description : "",
				},
				hide : {
					priority : 2,
					description : "",
				},
			},				
			event : {
				onTap : {
					priority : 1,
					description : "",
				},
			},
		};
		return d;
	};
	// #endif designing

	return clazz;
}
});