var ManageEvegment = function(core, target, data, returnCB, evegmentID){
	'use strict';
	var isEdit = !!evegmentID,
		events = new EventManager(),
		tmpl = new Template(),
		geo = new MeteoraMap.Geocoder(),
		loaded = false,
		element, elements, map,
		dataObj,
		radArr = defaultRadiusValues(),
		tzArr = [
			{ 'title' : 'Universal (UTC)', 'value': 'UTC' },
			{ 'title' : 'Pacific (PT)', 'value': 'PST8PDT' },
			{ 'title' : 'Mountain (MT)', 'value': 'MST' },
			{ 'title' : 'Central (CT)', 'value': 'CST6CDT' },
			{ 'title' : 'Eastern (ET)', 'value': 'EST' }
		];

	if(isEdit) {
		new ApiManager({evegments: null}, evegmentID, init);
	} else {
		init(null, {})
	}

	function init(err, obj) {
		dataObj = new DataObj(obj && obj.evegments ? obj.evegments : {});
		element = getElementFromString(tmpl.index, { name: dataObj.name, location: dataObj.location, sidePanel : getOverviewObj(dataObj) });
		elements = new Elements(element, {
			'sidePanel': { 'selector' : 'side-panel' },
			'section'  : { 'selector' : 'section' },
			'name': { 'selector' : '#name' },
			'loc' : { 'selector' : '#location' },
			'radius' : { 'target' : new Dropdown(element.querySelector('#radius'), new DropdownObj(radArr, dataObj.radius || 1), updateRadius)},
			'map' : { 'selector' : '#locMap' },
			'fromTime' : { 'selector' : '#evFromTime' },
			'toTime' : { 'selector' : '#evToTime' },
			'tz' : { 'target' : new Dropdown(element.querySelector('#tz'), new DropdownObj(supportedTimezones, dataObj.timezone), updateTimezone)},
			'fromDate': { 'target' : new CalendarInput(element.querySelector('#evFromDate'), null, updateFromDate) },
			'toDate'  : { 'target' : new CalendarInput(element.querySelector('#evToDate'), null, updateToDate) },
			'save': { 'selector' : '.saveButton' }
		});

		events.add(elements.name, 'change', updateName);
		events.add(elements.loc, 'change', updateLocation);
		events.add(elements.fromTime, 'change', updateFromTime);
		events.add(elements.toTime, 'change', updateToTime);
		events.add(elements.save, 'click', saveAction);

		target.appendChild(element);

		map = new Map(elements.map, function() {
			if(dataObj.lat && dataObj.lng) map.focusPoint(dataObj.location, {lat: dataObj.lat, lng: dataObj.lng}, dataObj.radius);
		}); // this needs to be after the element is on the page

		elements.fromDate.set(dataObj.from);
		elements.toDate.set(dataObj.to);

		if(isEdit) {
			elements.fromTime.value = dataObj.fromTime();
			elements.toTime.value = dataObj.toTime();
		}

		loaded = true;
		if(returnCB) returnCB();
	}

	function DataObj(v) {
		var self = this;
		this.segmentId = v.segmentId || null;
		this.advertiserId = v.advertiserId || null;
		this.name = v.name;
		this.location = v.location;
		this.timezone = v.timezone || 'UTC';
		this.lat = v.lat || 0;
		this.lng = v.lng || 0;
		this.radius = v.radius;

		this.from = v.from ? new Date(v.from * 1000) : new Date();
		this.to = v.to ? new Date(v.to * 1000) : new Date();

		this.fromTime = function() { return padNumber(self.from.getUTCHours()) + ':' + padNumber(self.from.getUTCMinutes()); }
		this.toTime = function() { return padNumber(self.to.getUTCHours()) + ':' + padNumber(self.to.getUTCMinutes()); }

		this.value = function() {
			var tmp = new DataObj(self);
			tmp.from = parseInt((self.from.getTime() / 1000).toFixed(0));
			tmp.to = parseInt((self.to.getTime() / 1000).toFixed(0));
			return tmp;
		};

		this.from.setUTCSeconds(0);
		this.to.setUTCSeconds(0);
	}

	function getOverviewObj(obj){
		var from = obj.from.toISOString(),
			to = obj.to.toISOString(),
			o = {
			'title' : 'Overview',
			'info' : [
				{ 'title' : 'Segment Name', 'value' : obj.name },
				{ 'title' : 'Location', 'value' : obj.location },
				{ 'title' : 'Radius', 'value' : getRadius(obj.radius) },
				{ 'title' : 'Timezone', 'value' : getTimezone(obj.timezone) },
				{ 'title' : 'From', 'value' : from.substr(0, from.indexOf(':00.000Z')).replace('T', ' ') },
				{ 'title' : 'To', 'value' : to.substr(0, to.indexOf(':00.000Z')).replace('T', ' ') }
			]
		};
		return o;
	}

	function getRadius(r) {
		var ret;
		loop(radArr, function(_, v) { if(v.value === r) { ret = v.title; return false; }});
		return ret;
	}

	function saveAction(e){
		if(e && e.preventDefault) e.preventDefault();
		var missing = [];

		if(!dataObj.name) missing.push('Segment Name');
		if(!dataObj.location || !dataObj.lat || !dataObj.lng) missing.push('Location');
		if(!elements.fromTime.value) missing.push('From Time');
		if(!elements.toTime.value) missing.push('To Time');
		if(dataObj.from.getTime() >= dataObj.to.getTime()) missing.push('Start date for the segment is after the end date. Please correct');

		if(missing.length) return core.notifications.setMissingFields(missing);

		if(isEdit) {
			apiRequest('PUT', 'evegments', evegmentID, dataObj.value(), redirect);
		} else {
			apiRequest('POST', 'evegments', core.userID, dataObj.value(), redirect);
		}
		function redirect(resp, st){
			if(st !== 200 && resp.error) return core.notifications.setError(resp.message);
			pop('Pop!', 'Dashboard - Segments', '/dashboard/segments');
		}
	}

	function updateName(e) { dataObj.name = e.target.value; refreshSidePanel(); }

	function updateLocation(e) {
		var loc = e.target.value;
		geo.search(loc, function(pos, err) {
			if(err) {
				console.error(err);
				return core.notifications.setError('sorry, couldn\'t find the requested location, please try to be more specific.');
			}
			dataObj.lat = pos.lat;
			dataObj.lng = pos.lng;
			dataObj.location = loc;
			map.focusPoint(loc, pos, dataObj.radius && dataObj.radius);
			refreshSidePanel();
		});
	}

	function updateRadius(e) {
		dataObj.radius = parseFloat(e);
		if(map) map.focusPoint(dataObj.location, {lat: dataObj.lat, lng: dataObj.lng}, dataObj.radius);
		refreshSidePanel();
	}

	function updateTimezone(e) {
		dataObj.timezone = e;
		refreshSidePanel();
	}

	function updateFromTime(e){
		if(!setHourMin(dataObj.from, e.target.value)) return core.notifications.setError('invalid time format');
		refreshSidePanel();
	}

	function updateToTime(e){
		if(!setHourMin(dataObj.to, e.target.value)) return core.notifications.setError('invalid time format');
		refreshSidePanel();
	}

	function updateFromDate(e){ if(!loaded) return; setDate(dataObj.from, e); refreshSidePanel(); }
	function updateToDate(e){ if(!loaded) return; setDate(dataObj.to, e); refreshSidePanel(); }

	function setHourMin(d, val) {
		var idx = val.indexOf(':');
		if(idx === -1) return false;
		var h = parseInt(val.substr(0, idx)),
			m = parseInt(val.substr(idx+1));
		if(isNaN(h) || isNaN(m) || h > 23 || h < 0 || m > 59 || m < 0) return false;
		d.setUTCHours(h);
		d.setUTCMinutes(m);
		return true;
	}

	function setDate(d, o) { d.setUTCFullYear(o.year); d.setUTCMonth(o.monthValue - 1); d.setUTCDate(o.date); }
	function refreshSidePanel(){ if(!loaded) return; swapSidePanel(elements.section, elements.sidePanel, getSidePanelRender()); }
	function swapSidePanel(p, o, n){ p.insertBefore(n, o); p.removeChild(o); elements.sidePanel = n; }
	function getSidePanelRender(){ return getElementFromString(tmpl.sidePanel, {sidePanel: getOverviewObj(dataObj || {})}); }

	this.exit = function(){
		if(events) events.reset(); if(element) removeChild(target, element); if(elements) elements.exit();
		core = target = data = returnCB = element = elements = geo = dataObj = tmpl = null;
	};

	function Template(){
		var actionName = isEdit ? 'Edit' : 'Create',
			updateName = isEdit ? 'Save' : 'Create';

		var name = '<row><h3>Segment name:</h3><input id="name" type="text" placeholder="Mumford And Sons Concert" value="{{ name }}"/></row>',
			location = '<row class="location"><h3>Location:</h3><input id="location" type="text" placeholder="Superdome, New Orleans" value="{{ location }}"/></row>',
			radius = '<row><h3>Radius:</h3><div id="radius"></div></row>',
			map = '<row id="locMap" style="width: 564px; height: 400px; position: relative; display: block"></row>',
			tz = '<row><h3>Timezone:</h3><div id="tz"></div></row>',
			from = '<row class="timeLine"><h3>From:</h3><div id="evFromDate"></div><input type="text" id="evFromTime" placeholder="13:40"></row>',
			to = '<row class="timeLine"><h3>To:</h3><div id="evToDate"></div><input type="text" id="evToTime" placeholder="16:20"></row>';

		var header = '<header><h2>' + actionName + ' Segment</h2></header>',
			overview = '<side-panel>{{# sidePanel }}<section><h2>{{title}}:</h2><info>{{# info }}<p><b>{{ title }}:</b><span>{{ value }}</span></p>{{/ info }}</info></section>{{/ sidePanel }}</side-panel>',
			section = '<section><container style="width: 566px">' + name + location + radius + tz + from + to + map + '</container>' + overview + '</section>',
			footer = '<footer><a href="#" class="mint button saveButton">' + updateName + ' Segment</a></footer>';

		this.sidePanel = overview;
		this.index = '<div class="createPage">' + header + section + footer + '</div>';
	}
};