Ext.define("Ext.ux.call2action.UrlPanel", {

	extend: "Ext.form.Panel",

	alias: [
		"widget.ip2Call2ActionUrlPanel"
	],

	border: false,

	bodyPadding: 10,

	defaults: {
		xtype: "textfield",
		labelAlign: "left",
		labelWidth: 120
	},

	layout: {
		type: "anchor"
	},

	config: {
		choises: null
	},

	initComponent: function() {

		var i_self = this;
		var o_data = i_self.config.data;

		i_self.data = o_data;

		i_self.callParent();

		if (!o_data.link) {
			o_data.link = {};
		}

		i_self.add(i_self.createItems());
	},

	createItems: function() {

		var i_self = this;
		var o_data = i_self.getData();
		var a_items = [];

		var i_heading = Ext.widget("textfield", {
			fieldLabel: ip2.i18n({
				da: "Overskrift",
				en: "Headline"
			}),
			name: "title",
			allowBlank: true,
			anchor: "100%",
			value: o_data.link.title || "",
			listeners: {
				change: {
					fn: function(field) {
						if (i_self.isEmpty()) {
							i_self.fireEvent("isempty");
						}
					},
					buffer: 100
				}
			}
		});

		var i_urlField = Ext.widget("textfield", {
			fieldLabel: ip2.i18n({
				da: "URL",
				en: "URL"
			}),
			name: "url",
			allowBlank: true,
			anchor: "100%",
			value: o_data.link.url || "",
			listeners: {
				change: {
					fn: function(field) {
						if (i_self.isEmpty()) {
							i_self.fireEvent("isempty");
						}
					},
					buffer: 100
				}
			}
		});

		var i_choiseGroup = Ext.widget("radiogroup", {
			fieldLabel: ip2.i18n({
				da: "Link type",
				en: "Link type"
			}),
			columns: 3,
			vertical: true,
			width: 400,
			items: [
				{
					boxLabel: "URL",
					name: "linktype",
					inputValue: "url",
					checked: o_data.link.linktype == "url" ? true : false,
					readOnly: false,
					onBoxClick: function() {

						if (!i_self.disabled && !i_self.readOnly) {
							var b_check = true;
							if (this.checked) {
								b_check = false;
							}
							this.setValue(b_check);
						}
					}
				},
				{
					boxLabel: "Video",
					name: "linktype",
					inputValue: "video",
					checked: o_data.link.linktype == "video" ? true : false,
					readOnly: false,
					onBoxClick: function() {

						if (!i_self.disabled && !i_self.readOnly) {
							var b_check = true;
							if (this.checked) {
								b_check = false;
							}
							this.setValue(b_check);
						}
					}
				},
				{
					boxLabel: ip2.i18n({
						da: "Billede",
						en: "Image"
					}),
					name: "linktype",
					inputValue: "image",
					checked: o_data.link.linktype == "image" ? true : false,
					readOnly: false,
					onBoxClick: function() {

						if (!i_self.disabled && !i_self.readOnly) {
							var b_check = true;
							if (this.checked) {
								b_check = false;
							}
							this.setValue(b_check);
						}
					}
				}
			]
		});

		a_items.push(i_heading);
		a_items.push(i_urlField);
		a_items.push(i_choiseGroup);

		i_self.setChoises(i_choiseGroup);

		return a_items;
	},

	/* ----------------------------------------------------------------------------------------------------
		Is valid
	   ---------------------------------------------------------------------------------------------------- */
	isValid: function() {

		var i_self = this;

		var b_valid = true;
		var i_form = i_self.getForm();

		var i_title = i_form.findField("title");
		var i_url = i_form.findField("url");

		var s_title = i_title.getValue();
		var s_url = i_url.getValue();

		if (Ext.isEmpty(s_title) && !Ext.isEmpty(s_url)) {
			i_title.markInvalid(i_title.blankText);
			b_valid = false;
		}
		else if (!Ext.isEmpty(s_title) && Ext.isEmpty(s_url)) {
			i_url.markInvalid(i_url.blankText);
			b_valid = false;
		}

		return b_valid;
	},

	/* ----------------------------------------------------------------------------------------------------
		Is empty
	   ---------------------------------------------------------------------------------------------------- */
	isEmpty: function() {

		var i_self = this;

		var b_empty = true;
		var i_form = i_self.getForm();

		var i_title = i_form.findField("title");
		var i_url = i_form.findField("url");

		var s_title = i_title.getValue();
		var s_url = i_url.getValue();

		if (!Ext.isEmpty(s_url) || !Ext.isEmpty(s_title)) {
			b_empty = false;
		}

		i_self.isValid();

		return b_empty;
	},

	/* ----------------------------------------------------------------------------------------------------
		Validate and save form
	   ---------------------------------------------------------------------------------------------------- */
	getValue: function() {

		var i_self = this;

		var o_value = {
			type: "url"
		};

		var i_form = i_self.getForm();

		if (i_self.isValid()) {

			var o_values = i_form.getFieldValues();
			Ext.apply(o_value, o_values);
		}

		return o_value;
	},

	enable: function() {

		var i_self = this;
		i_self.callParent();

		var i_choiseGroup = i_self.getChoises();

		var a_items = i_choiseGroup.getBoxes();

		Ext.Array.each(a_items, function(i_field) {
			if (i_field.getMaskTarget() || i_field.getEl()) {
				i_field.unmask();
			}
		});
	}

});
