var ManageApps = function(core, target, data, returnCB, appId){
	var focusDefined = isDefined(appId),
		events = new EventManager,
		template = Template(focusDefined),
		element = null,
		elements = null,
		data = null,
		reqObj = {
			'categories' : { 'source' : 'resources/appCategories', "noID" : true },
			'profile' : { 'source' : 'profiles/' + core.userID, "noID" : true }
		};
	
	this.exit = exit;
	
	if(focusDefined) reqObj.apps = { 'source' : 'apps/byId' };	
	new ApiManager(reqObj, appId, init);

	function Data(o){
		var d = !!o.apps ? o.apps : {};

		o.categories.splice(0, 0, { "title" : "Select a category", "value" : "", "placeholder" : true });

		this.id = get('id', '');
		this.key = get('key', '');

		this.icon = get('icon', '');
		this.name = get('name', '');
		this.author = get('author', o.profile.company);
		this.category = get('category', '');
		this.categories = o.categories;
		this.description = get('description', '');
		this.tags = get('tags', []);
		this.cost = get('cost', 0);
		
		this.hasIcon = !!this.icon;
		this.isAdmin = core.isAdmin;

		function get(k, r){ if(!!d[k]) return d[k]; else if(r === undefined) return null; else return r; }
	}

	function Template(editState){
		var actionName = editState === true ? 'Edit' : 'Create',
			updateName = editState === true ? 'Save' : 'Create'
		
		var header = '<header><h2>' + actionName + ' App</h2></header>',			
			footer = '<footer><a href="#" class="mint button saveButton">' + updateName + ' app</a></footer>';
		
		var name = '<row><h3>Name: </h3><input class="name" type="text" placeholder="Name of the App" value="{{ name }}" /></row>',
			key = '{{# isAdmin }}<row><h3>Key: </h3><input class="key" type="text" placeholder="Key for the app" value="{{ key }}" /></row>{{/ isAdmin }}',
			icon = '<row><h3>Icon: </h3><div class="logoCntr"><img class="iconImg {{^ hasIcon }}noDisplay{{/ hasIcon }}" src="{{ icon }}" /><a href="#" class="mint button iconBtn tidySmall">Upload 200x200</a></div></row>',
			category = '<row><h3>Category: </h3><div class="category"></div></row>',
			description = '<row><h3>Description: </h3><textarea class="description">{{ description }}</textarea></row>',
			tags = '<row><h3>Tags: </h3><div class="tags"></div></row>',
			cost = '<row><h3>Cost: </h3><input class="cost" type="number" placeholder="App cost" value="{{ cost }}" /></row>',
			main  = '<section><container class="full"><div>' + name + key + icon + category + description + tags + cost + '</div></container></section>';
				
		return '<div class="createPage">' + header + main + footer + '</div>';
	}

	function init(error, d){
		if(!!error){
			core.notifications.setError("I'm sorry, but there was an error loading this page!")
			return
		}

		data = new Data(d);
		element = getElementFromString(render(template, data));
		elements = new Elements(element, {
			'name' : { 'selector' : '.name' },
			'key' : { 'selector' : '.key' },
			'icon' : { 'selector' : '.iconImg' },
			'iconBtn' : { 'selector' : '.iconBtn' },
			'iconUpload' : { 'target' : new ImageUpload(element, updateIcon) },
			'category' : getCategory(),
			'tags' :  { 'target' : new TagContainer(element.querySelector('.tags'), { 'limit' : 10, 'data' : data.tags }, updateTags) },
			'description' : { 'selector' : '.description' },
			'cost' : { 'selector' : '.cost' },
			'save' : { 'selector' : '.saveButton', 'ignoreReset' : true },
			'missing' : { 'selector' : null, 'ignoreReset' : true },
		});
		
		events.add(elements.name, 'change', updateName);
		if(!!elements.key) events.add(elements.key, 'change', updateKey);
		events.add(elements.iconBtn, 'click', elements.iconUpload.open);
		events.add(elements.description, 'change', updateDescription);
		events.add(elements.cost, 'change', updateCost);
		events.add(elements.save, 'click', saveAction);

		returnCB();
		target.appendChild(element);
	}

	function getCategory(){
		return {
			"target" : new Dropdown(element.querySelector('.category'), {
				"data" : data.categories,
				"options" : {
					"dropdownClass" : "mint", "menuItemClass" : "mint", "carrotClass" : "mint"
				},
				"initialValue" : data.category
			}, updateCategory)
		};
	}

	function isValidPassword(s){ var l = s.length; return typeof s == 'string' && (l >= 8 || l == 0); }

	function saveAction(e){
		if(e && e.preventDefault) e.preventDefault();
		var invalid = getInvalid(data);
		if(invalid !== null){	
			core.notifications.setMissingFields(invalid);
			return
		}

		apiRequest(focusDefined ? 'PUT' : 'POST', 'apps/byId', focusDefined ? appId : core.userID, data, redirect);

		function redirect(e){ 
			if(!!e.error) {
				return core.notifications.setError(e.error);
			}
			pop('Pop!', 'Dashboard - Apps', '/dashboard/apps');
		}

		function getInvalid(o){
			var a = [];
			
			if(!o.name) a.push("Missing name");
			if(!o.icon) a.push("Missing icon");
			if(!o.category) a.push("Missing category");
			if(!o.description) a.push("Missing description");
			return a.length > 0 ? a : null;
		}
	}
	
	function updateName(e){ data.name = e.target.value; }
	function updateKey(e){ data.key = e.target.value; }
	function updateIcon(e){
		if(e.width === 200 && e.height === 200){
			elements.icon.src = data.icon = e.data;
			elements.icon.classList.remove('noDisplay');
		} else {
			core.notifications.setError("I'm sorry, but your image must be 200x200, your image is " + e.width + "x" + e.height + ".");
		}
	}
	function updateCategory(e){ data.category = e; }
	function updateDescription(e){ data.description = e.target.value; }
	function updateCost(e){ data.cost = parseFloat(e.target.value); }
	function updateTags(e){ data.tags = e; }
	
	function exit(){
		if(element) removeChild(target, element);
		if(events) events.reset();
		if(elements) elements.exit();
		housekeeping();
	}
	function housekeeping(){ core = target = returnCB = appId = events = template = data = element = elements = null; }
};