var InfoBox = Class.create({
	barchartWidth: 300,
	
	initialize: function(surface)
	{
		this.surface = $(surface);
		
		if(!this.surface)
		{
			console.log("InfoBox: No valid DOM element provided");
			return;
		}
		
		this.loadingSurface = Builder.node('div', {className: "loading"});
		this.surface.insert(this.loadingSurface);
		this.loadingSurface.hide();
		
		this.mpPhotos = Builder.node('div', {id: 'MPPhotos'});
		this.surface.insert(this.mpPhotos);
		
		this.stats = Builder.node('div', {id: 'Statistics'});
		this.surface.insert(this.stats);
		
		this.uniqueID = "enakting-infobox";
		window[this.uniqueID] = this;
		
		document.observe("mspace:singleclick", this.singleClick.bindAsEventListener(this));
		
		console.log("InfoBox Created");
	},
	
	singleClick: function(event)
	{
		var sparql = window.mSpace.getSPARQLForExternal();
		
		console.log(sparql);
		
		var query = "SELECT DISTINCT ?mp ?img ?party ?from ?to ?name ?constituency WHERE {\n";
		query += sparql.sparql;
		query += '?const <http://www.w3.org/2002/07/owl#sameAs> '+sparql.vars.uri+' .\n';
		query += '?const <http://www.w3.org/2000/01/rdf-schema#label> ?constituency .\n';
		query += '?cov <http://purl.org/dc/terms/coverage> ?const .\n';
		query += '?cov <http://enakting.ecs.soton.ac.uk/ontologies/ukparliament/terms/party> ?party .\n';
		query += '?cov <http://enakting.ecs.soton.ac.uk/ontologies/ukparliament/terms/fromdate> ?from .\n';
		query += '?cov <http://enakting.ecs.soton.ac.uk/ontologies/ukparliament/terms/todate> ?to .\n';
		//query += '?cov ?p ?o .}';
		query += '?mp <http://enakting.ecs.soton.ac.uk/ontologies/ukparliament/terms/hasParliamentIdentity> ?cov .\n';
		query += '?mp <http://xmlns.com/foaf/0.1/name> ?name .\n';
		query += '?mp <http://xmlns.com/foaf/0.1/depiction> ?img .\n';
		query += "} ORDER BY DESC(?to) LIMIT 100\n";
		
		window.mSpace.performRequest(query, "window['"+this.uniqueID+"'].updateMap", 'infobox');
		this.loadingSurface.show();
	},
	
	updateMap: function(json)
	{
		this.loadingSurface.hide();
		this.mpPhotos.update();
		this.stats.update();
		
		var labCount = 0;
		var libdemCount = 0;
		var consCount = 0;
		
		console.log(json);
		json.results.bindings.each(function(result) {
			var mp = Builder.node('div', {className: 'mp', title: "Click to see MP's Expenses"});
			
			var party = result.party.value.toLowerCase();
			if(party.indexOf('lab') > -1)
			{
				mp.addClassName('labour');
				labCount++;
			}
			else if(party.indexOf('con') > -1)
			{
				mp.addClassName('conservative');
				consCount++;
			}
			else if(party.indexOf('ldem') > -1)
			{
				mp.addClassName('libdems');
				libdemCount++;
			}
					
			var img = Builder.node('img', {src: result.img.value, alt: 'mp'});
			mp.insert(img);
			
			var to = result.to.value.substr(0, 4);
			
			if(to == "9999")
				to = "present";
			
			var fromToString = result.from.value.substr(0, 4)+'-'+to;
			
			var constituency = result.constituency.value;
			constituency = constituency.replace(' and', ' &');
			
			var details = Builder.node('div', {className: 'details'},[
				Builder.node('h1', {}, result.name.value),
				Builder.node('h2', {}, constituency),
				Builder.node('h3', {}, fromToString)
			]);
			
			mp.insert(details);
			
			mp.observe('click', this.showMPExpenses.curry(result.mp.value).curry(result.name.value).bindAsEventListener(this));
			
			this.mpPhotos.insert(mp);
		}.bind(this));
		
		// Render some stats
		
		var max = consCount;
		if(labCount > max)
			max = labCount;
		if(libdemCount > max)
			max = libdemCount;
		
		var list = Builder.node('ul', {}, [
			Builder.node('li', {className: 'labour'}, [
				Builder.node('span', {className: 'party'}, "Conservatives"),
				Builder.node('span', {className: 'barchart', style: "width: "+this.barchartWidth*(consCount/max)+"px"})
			]),
			Builder.node('li', {className: 'conservative'}, [
				Builder.node('span', {className: 'party'}, "Labour"),
				Builder.node('span', {className: 'barchart', style: "width: "+this.barchartWidth*(labCount/max)+"px"})
			]),
			Builder.node('li', {className: 'libdems'}, [
				Builder.node('span', {className: 'party'}, "Liberal Democrats"),
				Builder.node('span', {className: 'barchart', style: "width: "+this.barchartWidth*(libdemCount/max)+"px"})
			])
		]);
		
		this.stats.insert(Builder.node('h1', {}, "Last 100 MP's"));
		this.stats.insert(list);
		
		this.expenses = Builder.node('div', {id: "Expenses"});
		this.stats.insert(this.expenses);
	},
	
	showMPExpenses: function(person, name, event)
	{
		this.mpName = name;
		var sparql = "select DISTINCT * where {\n";
		sparql += "?exp <http://enakting.ecs.soton.ac.uk/ontologies/ukparliament/terms/isRelatedExpenseOf> <"+person+">.\n";
		sparql += "?exp <http://purl.org/NET/scovo#datasetOf> ?z .\n";
		sparql += "?z <http://purl.org/NET/scovo#dimension> ?time .\n";
		sparql += "?time a <http://enakting.ecs.soton.ac.uk/statistics/data/TimePeriod> .\n";
		sparql += "?time <http://purl.org/NET/scovo#min> ?min .\n";
		sparql += "?time <http://purl.org/NET/scovo#max> ?max .\n";
		sparql += "?z <http://www.w3.org/1999/02/22-rdf-syntax-ns#value> ?value .\n";
		sparql += "?z <http://purl.org/NET/scovo#dimension> ?expstype .\n";
		sparql += "?expstype a <http://enakting.ecs.soton.ac.uk/statistics/data/expenseType> .\n";
		sparql += "?expstype <http://www.w3.org/2000/01/rdf-schema#label> ?expslabel.\n";
		sparql += "} ORDER BY ?max ?expslabel";
		
		console.log(sparql);
		window.mSpace.performRequest(sparql, "window['"+this.uniqueID+"'].updateExpenses", 'infoboxExp');
		this.loadingSurface.show();
	},
	
	updateExpenses: function(json)
	{
		this.loadingSurface.hide();
		
		var years = new Object();
		
		json.results.bindings.each(function(result) {
			var year = result.min.value.substr(0, 4);
			
			if(!years[year])
				years[year] = new Array();
				
			years[year].push({title: result.expslabel.value, value: result.value.value});
		});
		
		this.expenses.update(Builder.node('h1', {}, this.mpName+" Expenses"));		
		var tabber = new Tabber(this.expenses);
		
		var year;
		
		for(year in years)
		{
			var expenses = years[year];
			
			// Calculate the max value
			var maxValue = 0;
			expenses.each(function(exp) {
				if(parseFloat(exp.value) > maxValue)
					maxValue = parseFloat(exp.value);
			});
			
			var tab = Builder.node('div', {className: 'tab'});
			
			var table = Builder.node('table');
			tab.insert(table);
			
			var total = 0;
			
			expenses.each(function(exp) {
				var expense = Builder.node('tr', {}, [
					Builder.node('td', {className: 'expense'}, exp.title),
					Builder.node('td', {}, 
						Builder.node('span', {className: 'barchart', style: "width: "+this.barchartWidth*(exp.value/maxValue)+"px"}, "£"+parseInt(exp.value)))
				]);
				
				table.insert(expense);
				total +=parseInt(exp.value);
			}.bind(this));
			
			table.insert(Builder.node('tr', {className: 'total'}, [
				Builder.node('td', {className: 'expense'}, "Total claimed:"),
				Builder.node('td', {}, "£"+parseInt(total))
			]));
			
			// var tab = Builder.node('ul');
			// 
			// var total = 0;
			// expenses.each(function(exp) {
			// 	var expense = Builder.node('li', {}, [
			// 		Builder.node('span', {className: 'expense'}, exp.title),
			// 		Builder.node('span', {className: 'barchart', style: "width: "+this.barchartWidth*(exp.value/maxValue)+"px"}, "£"+parseInt(exp.value))
			// 	]);
			// 	
			// 	tab.insert(expense);
			// 	total +=parseInt(exp.value);
			// }.bind(this));
			// 
			// tab.insert(Builder.node('li', {className: 'total'}, [
			// 	Builder.node('span', {className: 'expense'}, "Total claimed:"),
			// 	Builder.node('span', {}, "£"+parseInt(total))
			// ]));
			
			tabber.addTab(tab, year);
		}
		
		tabber.showTabWithName(year);
	}
});