$.easing.smoothmove = function (x,t,b,c,d) {return -c *(t/=d)*(t-2) + b;}; 

var graph, renderer, layout, graphics;
var edgeColor = [];
var nodeColor = [];
var edges = [];
var edgesRev = [];
var nodes = [];
var nodesRev = [];
var predicates =[];
var selectedPredicates = [];
var selectedNodes = {};
var selectedPersons = {};
var selectedCats = [];

$(function(){
	initPageData();
	initStart();
});

function initPageData() {
	$('#predicates .group').html(
		Mustache.render($('#pr-predicate').html(), {predicates: predicateData})
	);

	var odd=true;
	$.each(edgeData, function(index, edge){
		odd = !odd;
		$('#triples').append(
			Mustache.render($('#pr-triple').html(), {
				odd: odd,
				id: edge[2].id,
				subject: edge[0],
				subject_label: nodeDataRev[edge[0]].label,
				predicate: edge[2].type,
				predicate_label: predicateDataRev[edge[2].type],
				object: edge[1],
				object_label: nodeDataRev[edge[1]].label,
			})
		);
	});

	$('#predicates .value').each(function (index, elem){
		edgeColor[$(this).data('type')] = rgb2hex($(this).find('.legend-color').css('background-color'));
	});
	$('#categories .group.selected .value').each(function (index, elem){
		nodeColor[$(this).data('cat')] = rgb2hex($(this).find('.legend-color').css('background-color'));
	});
}

function rgb2hex(rgb) {
		console.log(rgb);
		rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
		return rgb[1]<<24 | rgb[2]<<16 | rgb[3]<<8 | 0xFF;
}

function initStart() {
	$('#start').click (function (event){
		$('#intro').animate({
			opacity: 0
		}, 400, function(event){
			$('#intro').css('display', 'none');
			start();
		})
	});
}

function start() {
	initGraph();
	initUI();
}

function initGraph() {
	// return;
	var graphGenerator = Viva.Graph.generator();

	graph = Viva.Graph.graph();
	var i = 0;
	for (i = 0 ; i<nodeData.length; i++) {
		selectedNodes[nodeData[i][0]] = true;
		var node = graph.addNode(nodeData[i][0], nodeData[i][1]);
		nodes.push (node);
		nodesRev[node.id] = node;
	}
	for (i = 0 ; i<edgeData.length; i++) {
		var edge = graph.addLink(edgeData[i][0], edgeData[i][1], edgeData[i][2]);
		edges.push (edge);
		edgesRev[edge.data.id] = edge;
	}

	layout = Viva.Graph.Layout.forceDirected(graph, {
		springLength : 30,
		springCoeff : 0.00008,
		dragCoeff : 0.01,
		gravity : -0.1,
	});

	graphics = Viva.Graph.View.webglGraphics();

	graphics
		.node(function(node){
			return Viva.Graph.View.webglSquare(node.data.rad, node.data.color);
		})
		.link(function(link) {
			return Viva.Graph.View.webglLine(link.data.color);
		});

	renderer = Viva.Graph.View.renderer(graph,
		{
			layout	 : layout,
			graphics	 : graphics,
			renderLinks : true,
			prerender	: true,
			container : document.getElementById('graph-container')
		});

	renderer.run();
}

var events;
function initUI (){
	agregateValues();

	//select a relation
	$('#predicates .button').click(function(event){
		event.preventDefault();
		var value = $(this).parent();
		if(value.hasClass('selected'))
			value.removeClass('selected');
		else 
			value.addClass('selected');

		agregateValues();
		return false;
	});

	/*
	//select a category
	$('#categories').mousemove(function(event){
		$this = $(this);
		$wrapper = $this.find('.inner-wrapper');
		$wrapper.animate(
				{'margin-top': -($wrapper.height() - $this.height() + 20)*(event.pageX - $('#panel').offset().left) / $(this).height()},
				{queue:false,duration:200,easing:'smoothmove'});
		// $wrapper.css('margin-top', -($wrapper.height() - $this.height() + 20)*(event.pageX - $('#panel').offset().left) / $(this).height());
	});
	*/
	$('#categories .button').click(function(event){
		event.preventDefault();

		var value = $(this).parent();
		if(value.hasClass('selected'))
			value.removeClass('selected');
		else {
			value.closest('.group').find('.selected').removeClass('selected');
			value.addClass('selected');
		}

		agregateValues();
		return false;
	});

	//select color set
	$('#categories .group .plak').click(function(event){
		var group = $(this).closest('.group');
		if (group.hasClass('selected'))
			group.removeClass('selected');
		else {
			$('#categories .group.selected').removeClass('selected');
			group.addClass('selected');
		}
		agregateValues();
	});

	//expand panel
	$('#width-toggle').click(function(event){
		$(this).toggleClass('expanded');
		$('body').toggleClass('wide', $(this).hasClass('expanded'));
	});

	//add person from triples
	$('#triples .triple .person span').click(function(event){

		selectPerson($(this).parent().data('id'));
	});

	//pin selected persons
	$('#graph-container').mouseup(function(event){
		for (var i=0; i<nodes.length; i++)
			layout.pinNode(nodes[i], selectedPersons.hasOwnProperty(nodes[i].id));
	});

	//graph interaction
	events = Viva.Graph.webglInputEvents(graphics, graph);
	events.mouseEnter(function (node){
		popupMessage (node.data.label);
		// popupMessage(node.id+' : '+node.data.label);
	})
	.dblClick(function (node){
		selectPerson(node.id);
	});
}

function agregateValues() {
	selectedPredicates = [];
	selectedCats = [];
	
	$('.parameter .group').each(function(index, elem){
		$(this).toggleClass('select-all', $(this).find('.value.selected').length==0);
	});	

	$('#predicates .group.select-all .value, #predicates .value.selected').each(function(index, elem){
		selectedPredicates.push($(this).data('type'));
	});

	$('#categories .value.selected').each(function(index, elem){
		selectedCats.push($(this).data('cat'));
	});

	nodeColor = [];
	$('#categories .group.selected .value').each(function (index, elem){
		console.log($(this).find('.legend-color').css('background-color'));
		nodeColor[$(this).data('cat')] = rgb2hex($(this).find('.legend-color').css('background-color'));
	});


	edges.forEach(function(link){
		var flag_selectedPerson = (Object.keys(selectedPersons).length==0) || 
									selectedPersons.hasOwnProperty(link.fromId) || selectedPersons.hasOwnProperty(link.toId);
		var flag_selectedPredicate = selectedPredicates.indexOf(link.data.type) != -1;
		
		var flag_selectedCategoryFrom = true;
		var flag_selectedCategoryTo = true;
		if (selectedCats.length>0)
			for (var i=0; i<selectedCats.length; i++) {
				if (nodesRev[link.fromId].data.cats.indexOf(selectedCats[i]) == -1)
					flag_selectedCategoryFrom = false;
				if (nodesRev[link.toId].data.cats.indexOf(selectedCats[i]) == -1)
					flag_selectedCategoryTo = false;
			}

		if (flag_selectedPredicate && flag_selectedPerson && (flag_selectedCategoryFrom || flag_selectedCategoryTo)){
			selectedNodes[link.fromId] = true;
			selectedNodes[link.toId] = true;
			link.data.color = edgeColor[link.data.type];
			link.data.visible = true;
		}else {
			link.data.color = 0x00000060;
			link.data.visible = false;
		}
	});

	nodes.forEach(function(node){
		node.data.rad = 7+node.data.r/50;

		var flag_selectedCategory = true;
		if (selectedCats.length>0)
			for (var i=0; i<selectedCats.length; i++)
				if (node.data.cats.indexOf(selectedCats[i]) == -1)
					flag_selectedCategory = false;

		var catColor = 0x808080FF;
		if (flag_selectedCategory)
			for (var i=0; i<node.data.cats.length; i++)
				if(nodeColor[node.data.cats[i]])
					catColor = nodeColor[node.data.cats[i]];

		if (selectedPersons.hasOwnProperty(node.id)) {
			node.data.color = 0x000000FF;
		}else if (selectedNodes.hasOwnProperty(node.id))
			node.data.color = flag_selectedCategory ? catColor : 0x808080FF;
		else
			node.data.color = 0x00000040;
	});

	updateEdges();
}

function updateEdges() {
	selectedNodes = {};
	var i=0;
	for (i=0; i<edges.length; i++) {
		graph.removeLink(edges[i]);
		edges[i] = graph.addLink(edges[i].fromId, edges[i].toId, edges[i].data);
	}
	for(i=0; i<nodes.length; i++)
		nodes[i] = graph.addNode(nodes[i].id, nodes[i].data);
	
	$('#triples .triple').each (function(index, elem){
		var $this = $(this);
		$this.toggleClass('show', edgesRev[$this.data('id')].data.visible);
	});

	$('#triples .triple .person').removeClass('pinned');
	Object.keys(selectedPersons).forEach(function (id){
		$('#triples .triple .person[data-id='+id+']').addClass('pinned');
	});

	$('#triples .triple.odd').removeClass('odd');
	$('#triples .triple.show:odd').addClass('odd');
}

var popupTimer = false;
function popupMessage (msg) {
	$('#popup-message').toggleClass('show', true).html(msg);

	if (popupTimer) clearTimeout(popupTimer);
	popupTimer = window.setTimeout(popupTimeout, 1000);
}
function popupTimeout() {

	$('#popup-message').removeClass('show');
}

function selectPerson(id) {
	if (selectedPersons.hasOwnProperty(id))
		delete selectedPersons[id];
	else
		selectedPersons[id] = true;
	
	agregateValues();
}