// Create the namespace object if not already created
if (TimemapNS == null || typeof(TimemapNS) != "object") { var TimemapNS = new Object();}

TimemapNS.PeriodPanel = function(div, model) {
	this.element = div;
	this.initialized = false;
}
TimemapNS.PeriodPanel.prototype.update = function(model) {
	if (!this.initialized) {		
		this.periodPanel = new TimemapNS.PeriodNamePanel(this.element, model);
		var features = model.getFeatures();
		this.featuresPanel = this.element.appendChild(document.createElement('div'));
		this.createdFeaturesPanel = new TimemapNS.FeaturesPanel(this.featuresPanel, features, 'Features created:', model);
		this.modifiedFeaturesPanel = new TimemapNS.FeaturesPanel(this.featuresPanel, features, 'Features modified:', model);
		this.destroyedFeaturesPanel = new TimemapNS.FeaturesPanel(this.featuresPanel, features, 'Features destroyed:', model);
		this.initialized = true;
	}
	var periodChanged = this.periodPanel.update(model);
	if (periodChanged) {
		if (model.hasCurrentPeriod()) {
			if (this.featuresPanel.style.visibility='hidden')
				this.featuresPanel.style.visibility='visible';
			this.createdFeaturesPanel.update(model.getCurrentCreatedFeatures(), model);
			this.modifiedFeaturesPanel.update(model.getCurrentModifiedFeatures(), model);
			this.destroyedFeaturesPanel.update(model.getCurrentDestroyedFeatures(), model);
		} else {
			if (this.featuresPanel.style.visibility='visible')
				this.featuresPanel.style.visibility='hidden';
		}
	} else if (model.hasCurrentPeriod()) {
		this.createdFeaturesPanel.updateHilite(model);
		this.modifiedFeaturesPanel.updateHilite(model);
		this.destroyedFeaturesPanel.updateHilite(model);
	}
}


TimemapNS.PeriodNamePanel = function(canvas, model) {
	this.previousPeriodId = null;
	var label = canvas.appendChild(document.createElement('div'));
	label.setAttribute('id', 'periodLabel');
	label.appendChild(document.createElement('h4')).innerHTML = 'Current period:'
	this.periodLabel = label.appendChild(document.createElement('p'));
	this.menu = canvas.appendChild(document.createElement('select'));
	this.menu.setAttribute('id', 'periodMenu');
	var periods = model.getPeriods();
	this.menu.appendChild(new TimemapNS.PeriodField('-1', 'Jump to period...').element);
	for (var i=0; i<periods.length; i++) {
		var period = periods[i];
		if (period.id && period.id > 0)
			this.menu.appendChild(new TimemapNS.PeriodField(period.id, period.name).element);
	}
	this.menu.model = model;
	//this.menu.addEventListener('change', this.handleSelect, false);
	TimemapNS.addEventListener(this.menu, 'change', this.handleSelect);
}
TimemapNS.PeriodNamePanel.prototype.handleSelect = function(evt) {
	var menu = evt.target ? evt.target : event.srcElement; /* Special handling for IE */
	if (menu.value != -1) {
		menu.model.setPeriod(menu.value);
		menu.options[0].selected = true;
	}
}
TimemapNS.PeriodNamePanel.prototype.update = function(model) {
	var newId = (model.hasCurrentPeriod() ? model.getCurrentPeriod().id : -1); // TODO doesn't change to 'inactive'
	var periodChanged =	(newId != this.previousPeriodId);
	if (periodChanged) {
		//this.menu.selectPeriod(newId);
		this.periodLabel.innerHTML = model.getCurrentPeriod().name;
		this.previousPeriodId = newId;
		return true;
	}
	return false;
}
TimemapNS.PeriodField = function(id, text) {
	this.element = document.createElement('option');
	this.element.setAttribute('id', 'period'+id);
	this.element.setAttribute('value', id);
	this.element.appendChild(document.createTextNode(text));
}


TimemapNS.FeaturesPanel = function(canvas, features, heading, model) {
	this.lookup = new Array();
	this.displayed = new Array();
	canvas.appendChild(document.createElement('h4')).appendChild(document.createTextNode(heading));
	var container = canvas.appendChild(document.createElement('div'));
	for (var i=0; i<features.length; i++) {
		var feature = features[i];
		this.lookup[feature.id] = new TimemapNS.FeatureField(feature.id, feature.name, feature.url, model, false);
		container.appendChild(this.lookup[feature.id].element);
		this.lookup[feature.id].hide();
	}
	this.lookup[0] = new TimemapNS.FeatureField(0, 'None', null, model, false);
	container.appendChild(this.lookup[0].element);
	this.lookup[0].hide();
}
TimemapNS.FeaturesPanel.prototype.update = function(features, model) {
	for (var i=0; i<this.displayed.length; i++) {
		this.displayed[i].unhilite();
		this.displayed[i].hide();
	}
	this.displayed = new Array();
	var toShow;
	if (features == null || features.length == 0) {
		toShow = this.lookup[0];
		toShow.show();
		this.displayed.push(toShow);
		return;
	} else {
		for (var i=0; i<features.length; i++) {
			toShow = this.lookup[features[i].id];
			toShow.show();
			this.displayed.push(toShow);
		}
		this.updateHilite(model);
	}
	
}
TimemapNS.FeaturesPanel.prototype.updateHilite = function(model) {
	for (var i=0; i<this.displayed.length; i++) {
		if (model.featureIsHilited(this.displayed[i].id) || model.featureIsSelected(this.displayed[i].id)) {
			this.displayed[i].hilite();
		} else {
			this.displayed[i].unhilite();
		}
	}
}

TimemapNS.FeatureField = function(id, text, url, model, visible) {
	this.init(id, text, url, model, visible);
}	
TimemapNS.FeatureField.prototype.init = function(id, text, url, model, visible) {
	this.id = id;
	this.text = text;
	this.element = document.createElement('p');
	this.element.setAttribute('id', 'feature'+id);
	if (url != null) {
		this.a = this.element.appendChild(document.createElement('a'));
		this.a.setAttribute('href', '#');
		this.a.setAttribute('class', 'unhilited');
		this.a.model = model;
		this.a.featureId = id;
		//this.a.addEventListener('mouseover', this.handleMouseOver, false);
		TimemapNS.addEventListener(this.a, 'mouseover', this.handleMouseOver);
		//this.a.addEventListener('mouseout', this.handleMouseOut, false);
		TimemapNS.addEventListener(this.a, 'mouseout', this.handleMouseOut);
		//this.a.addEventListener('click', this.handleClick, false);
		TimemapNS.addEventListener(this.a, 'click', this.handleClick);
		this.a.appendChild(document.createTextNode(text));
	} else {
		this.element.appendChild(document.createTextNode(text));
	}
	if (visible) this.show(); else this.hide();
}
TimemapNS.FeatureField.prototype.show = function() {
	this.element.style.display = 'block';
}
TimemapNS.FeatureField.prototype.hide = function() {
	this.element.style.display = 'none';
}
TimemapNS.FeatureField.prototype.hilite = function() {
	if (this.a) this.a.className = 'hilited';
}
TimemapNS.FeatureField.prototype.unhilite = function() {
	if (this.a) this.a.className = 'unhilited';
	//alert('unhiliting '+this.text); // TODO this is being called too many times
}
TimemapNS.FeatureField.prototype.toString = function() {
	return this.id + ' - ' + this.text;
}
TimemapNS.FeatureField.prototype.handleMouseOver = function(evt) {
	var elem = evt.target ? evt.target : event.srcElement; /* Special handling for IE */
	elem.model.hiliteFeature(elem.featureId);
}
TimemapNS.FeatureField.prototype.handleMouseOut = function(evt) {	
	var elem = evt.target ? evt.target : event.srcElement; /* Special handling for IE */
	elem.model.unhiliteFeature();
}
TimemapNS.FeatureField.prototype.handleClick = function(evt) {
	var elem = evt.target ? evt.target : event.srcElement; /* Special handling for IE */
	elem.model.selectFeature(elem.featureId);
}