var keywords = (function(){
	'use strict'

	var template = getTemplate();

	return newKeywords;

	function newKeywords(d, t, uf){ return new Keywords(d, t, uf); }

	function Keywords(d, t, fns){
		var e = getElementFromString(template, fns.getAppName('keywords')),
			ele = new Elements(e, {
				'status' : { 'target' : new ToggleInput(e.querySelector('.tgl'), updateStatus, {
					'initialValue' : d.status === true })
				},
				"remove" : { 'target' : new ConfirmationButton(e.querySelector('.remove'), {
					'text' : 'Remove app',
					'noClass' : true,
					'confirmText' : 'Confirm?'
				}, removeAction) },
				'kws' : { 'target' : new TagContainer(e.querySelector('.inputs'), { 'limit' : 2000, 'data' : d.list }, updateKeywords) },
				'negkws' : { 'target' : new TagContainer(e.querySelector('.negInputs'), { 'limit' : 2000, 'data' : d.negatives }, updateNegKeywords) }
			});

		this.show = function(){ e.classList.remove('noDisplay'); };
		this.hide = function(){ e.classList.add('noDisplay'); };
		this.exit = function(){
			if(!!e) removeChild(t, e);
			if(!!ele) ele.exit();
			e = ele = null;
		};

		t.appendChild(e);
		function updateStatus(v){
			d.status = v;

			if(!v){
				d.list = d.negatives = [];
				e.querySelector('.keywords').classList.add('noDisplay');
			} else {
				e.querySelector('.keywords').classList.remove('noDisplay');
			}

			fns.refreshSidePanel();
		}

		function updateKeywords(e){ d.list = sanitize(e); fns.refreshSidePanel(); }
		function updateNegKeywords(e){ d.negatives = sanitize(e); fns.refreshSidePanel(); }
		function removeAction(e){ fns.removeApp('keywords'); }
	}

	function getTemplate(){
		var span = '<span>If your customer was searching for your product or service on google, what would they type in?</span>',
			note = '<div class="keywordsNote"><p>*Note: You can have a max of 2000 keywords</p></div>',
			inputs = '<div class="inputs inputsRow"><h5>Include:</h5></div>',
			negInputs = '<div class="negInputs inputsRow"><h5>Exclude:</h5></div>',
			kw = '<div class="keywords">' + span + inputs + negInputs + note + '</div>',
			h = '<h3 class="medium">{{ . }}:</h3>',
			tgl = '<div class="tgl"></div>',
			rem = '<div class="remove"></div>';

		return '<row class="keywordsRow">' + h + tgl + rem + kw + '</row>';
	}

	function sanitize(e){
		var a = [];
		loop(e, p);
		return a;

		function p(k, v){ a[k] = v.toLowerCase(); }
	}
})();