Ext.define("Ext.ux.serppreview.Container", {
	extend: "Ext.container.Container",

	alias: "widget.serppreviewcontainer",
	
	host: '',

	config: {
		titleField: null,
		urlField: null,
		descriptionField: null,
		keywordsField: null,
		htmlContainer: null,

		titleInput: null,
		urlInput: null,
		descInput: null,
		keyInput: null
	},

	initComponent: function() {

		var i_self = this;
		i_self.callParent();

		i_self.on({
			afterrender: {
				fn: function(item) {

					var i_form = i_self.up("entityform");

					if (i_form) {

						var i_titleField = i_form.form.findField(i_self.titleField);
						var i_urlField = i_form.form.findField(i_self.urlField);
						var i_descriptionField = i_form.form.findField(i_self.descriptionField);
						var i_keywordsField = i_form.form.findField(i_self.keywordsField);

						if(i_titleField) {
							i_self.mon(i_titleField, "change", function(item) {
								i_self.updateHTML();
							});
							i_self.setTitleInput(i_titleField);
						}
						if(i_urlField) {
							i_self.mon(i_urlField, "change", function(item) {
								i_self.updateHTML();
							});
							i_self.setUrlInput(i_urlField);
						}
						if(i_descriptionField) {
							i_self.mon(i_descriptionField, "change", function(item) {
								i_self.updateHTML();
							});
							i_self.setDescInput(i_descriptionField);
						}
						if(i_keywordsField) {
							i_self.mon(i_keywordsField, "change", function(item) {
								i_self.updateHTML();
							});
							i_self.setKeyInput(i_keywordsField);
						}

						i_self.updateHTML();
					}
					
				},
				buffer: 10
			}
		});

		ip2.getSiteConfig(function (serversetting) {
			i_self.host = serversetting.http_host;
		});
		
		return i_self;
	},

	updateHTML: function() {
		var i_self = this;
		var div = i_self.getHTML();
		i_self.update(div.innerHTML);
		delete div;
	},

	changeLanguage: function() {
		var i_self = this;
		i_self.updateHTML();
	},

	getHeightLightedHTML: function(value, search, bold, findwords, type) {

		var s_search = search.replace(/,/g, " ");
		var a_search = s_search.split(" ");
		a_search = Ext.Array.filter(a_search, Boolean);
		var s_html = Ext.isObject(value) ? ip2.i18n(value) : value;
		var regex;
		if (findwords) {
			regex = new RegExp('\\b(' + a_search.join('|') + ')\\b', "gi");
		}
		else {
			regex = new RegExp('(' + a_search.join("|") + ')', "gi");
		}

		if (bold) {
			if (type == "url") {
				s_html = s_html.replace(regex, '<span style="background-color:#FFFBD3;color:#006621;"><b>$1</b></span>');
			}
			if (type == "meta") {
				s_html = s_html.replace(regex, '<span style="background-color:#FFFBD3;color:#6a6a6a;"><b>$1</b></span>');
			}
		}
		else {
			if (type == "url") {
				s_html = s_html.replace(regex, '<span style="background-color:#FFFBD3;color:#006621;">$1</span>');
			}
			if (type == "meta") {
				s_html = s_html.replace(regex, '<span style="background-color:#FFFBD3;color:#6a6a6a;">$1</span>');
			}
			else {
				s_html = s_html.replace(regex, '<span style="background-color:#FFFBD3;">$1</span>');
			}
		}

		return s_html;
	},

	getHTML: function() {
		var i_self = this;
		var n_description = i_self.getDescInput() ? i_self.getDescInput().getValue().length : 0;
		var n_url = i_self.getUrlInput() ? i_self.getUrlInput().getValue().length : 0;
		var n_titletag = i_self.getTitleInput() ? i_self.getTitleInput().getValue().length : 0;
		var s_description = "";
		var s_url = "";
		var s_titletag = "";
		var s_da = "";
		var s_en = "";

		if (n_titletag == 0) {
			s_da = "Dette er et eksempel på hvordan din Title Tag vil se ud i Google søgeresultater";
			s_en = "This is an example of how your Title Tag will look in Google search results";

			s_titletag = ip2.i18n({
				da: s_da,
				en: s_en
			});
		}
		else {
			s_titletag = i_self.getTitleInput() ? i_self.getTitleInput().getValue() : "";
		}

		if (n_description == 0) {
			s_da = "Metabeskrivelsen skal helst holdes inden for 156 karakterer " +
				"hvorfor Google ellers klipper din tekst. Aflever dit budskab af " +
				"inden for 156 og opnå bedre CTR";

			s_en = "Meta description should preferably be kept within 156 characters " +
				"or Google might cut your text. Deliver your message of within 156 and " +
				"achieve better CTR";

			s_description = ip2.i18n({
				da: s_da,
				en: s_en
			});
		}
		else {
			if (n_description > 156) {
				s_description = (i_self.getDescInput() ? i_self.getDescInput().getValue() : "").slice(0, 156);
			}
			else {
				s_description = i_self.getDescInput() ? i_self.getDescInput().getValue() : "";
			}
		}
		if (n_url == 0) {
			s_da = "www.domain.dk/page/url";
			s_en = "www.domain.dk/page/url";

			s_url = ip2.i18n({
				da: s_da,
				en: s_en
			});
		}
		else {
			s_url = i_self.host + "/page/" + i_self.getUrlInput() ? i_self.getUrlInput().getValue() : "";
			if (s_url.length > 156) {
				s_url = s_url.slice(0, 156);
			}
		}
		var s_search = i_self.getKeyInput() ? i_self.getKeyInput().getValue() : "";
		if (Ext.isEmpty(s_search)) {
			var o_values = {
				titleTag: i_self.getHeightLightedHTML(s_titletag, s_search, false, true, "title"),
				url: i_self.getHeightLightedHTML(s_url, s_search, true, true, "url"),
				description: i_self.getHeightLightedHTML(s_description, s_search, true, true, "meta")
			};
		}
		else {
			var o_values = {
				titleTag: s_titletag,
				url: s_url,
				description: s_description
			};
		}

		if (n_description > 156) {
			o_values.description += '...';
		}
		var regex = new RegExp("\n", "g");
		o_values.description = o_values.description.replace(regex, "</br>");
		var i_template;
		if (!i_self.template) {
			var tpl = new Ext.XTemplate(
				'<tpl for=".">',
					'<h3 style="',
						'color: #1a0dab;',
						'text-overflow: ellipsis;',
						'font-family: arial, sans-serif;',
						'max-width: 512px;',
						'overflow: hidden;',
						'white-space: nowrap;',
						'font-size: 18px;',
						'font-weight: normal;',
						'line-height: 1.2;',
						'margin: 0;',
					'">{titleTag}</h3>',
					'<div style="',
						'color: #006621;',
						'font-style: normal;',
						'font-size: 14px;',
						'text-overflow: ellipsis;',
						'font-family: arial, sans-serif;',
						'max-width: 512px;',
						'line-height: 16px',
						'overflow: hidden;',
						'white-space: nowrap;',
					'">{url}</div>',
					'<div style="',
						'max-width: 512px;',
						'line-height: 1.4;',
						'font-family: arial, sans-serif;',
						'word-wrap: break-word;',
						'font-size: 13px;',
						'font-weight: normal;',
						'color: #545454;',
					'">{description}</div>',
				'</tpl>'
			);
			i_self.template = tpl.compile();
			i_template = i_self.template;
		}
		else {
			i_template = i_self.template;
		}

		var div = document.createElement("div");
		i_template.overwrite(div, o_values);
		return div;
	}
});
