//	cpaCtr app
//	===============================================
//	Takes in data obj, an element to append to, and utility functions
//
//	Data is an object
//	- type: cpa / cpc
//	- price: float
//
//	Example data:
//	{ 'type' : 'cpa', 'price' : 5 }
//
var cpaCtr = (function(){
	'use strict'
	
	var template = getTemplate(),
		optArr = [
			{ 'title': 'CPA', 'value' : 'cpa' },
			{ 'title': 'CPC', 'value' : 'cpc' }
		];;

	function newCpaCtr(d, t, fns){ return new CpaCtr(d, t, fns); }

	function CpaCtr(d, t, fns){
		var e = getElementFromString(template, fns.getAppName('cpaCtr')),
			row = new ToggleRow(e, updateToggle, {
				'status' : d.status,
				'headerClass' : 'medium',
				'removeAppFn' : removeAction
			}),
			eles = new Elements(e, {
				'status': { 'target' : row },
				'type' : { 'target' : new ToggleNavigation(row.querySelector('.type'), { 'data': optArr, 'className': 'toggle', 'initialValue': d.type}, updateType) },
				'price': { 'target' : row.querySelector('.price') }
			});

		eles.price.value = d.price || 0;
		eles.price.addEventListener("change", updatePrice);

		this.exit = exit;

		t.appendChild(e);

		function updateToggle(e) { d.status = e; }
		function updateType(e) { d.type = e.value; }
		function updatePrice(e) { d.price = parseFloat(e.target.value); }

		function removeAction(e){ fns.removeApp("cpaCtr"); }
		function exit(){
			if(!!e) removeChild(t, e);
			if(!!eles) eles.exit();
			e = eles = null;
		}
	}

	function getTemplate(){ 
		var view = '<div class="view"><row><div class="type"></div> <h5>Price:</h5><input class="price small" placeholder="5" type="number" style="width: 52px"></row></div>';
		return '<row class="cpaCtr"><h3 class="medium">{{ . }}</h3><div class="toggle"></div><div class="remove"></div>' + view + '</row>'; 
	}

	return newCpaCtr;
})();