function Point(id, x, y, connections) {
	this.id = id;
	this.x = x;
	this.y = y,
	this.connections = connections;
	this.destx;
	this.desty;
	
	return {
		id:id,
		x:x,
		y:y,
		connections:connections,
		drawOnCanvas:function drawOnCanvas(context2D, color) {
			context2D.strokeStyle = color;
			context2D.beginPath();
			context2D.moveTo(this.x-2, this.y);
			context2D.lineTo(this.x+2, this.y);
			context2D.moveTo(this.x, this.y-2);
			context2D.lineTo(this.x, this.y+2);
			context2D.stroke();
			context2D.closePath();
		}
	}
	
}

function Template($data) {
	this.data = $data;
	this.points = []; // array
	this.numPoints = $data.length;
	
	for (var i = 0; i<this.numPoints; i++) {
		if ($data[i]) {
			var point = new Point(i, $data[i].x, $data[i].y, $data[i].connections);
			this.points.push(point);
		} else {
			alert(i);
		}
	}
	
	return {
		numPoints:this.numPoints,
		points:this.points,
		data:this.data
	}
}

var templates = [
	new Template([
		{x:2, y:82, connections:[1, 2]},
		{x:172, y:26, connections:[0, 2, 7, 9, 8]},
		{x:101, y:206, connections:[0, 1, 6, 3, 4]},
		{x:2, y:392, connections:[2, 4]},
		{x:94, y:326, connections:[2, 5]},
		{x:92, y:364, connections:[2, 6]},
		{x:248, y:339, connections:[5, 7, 11]},
		{x:247, y:181, connections:[1, 2, 6, 9]},
		{x:561, y:25, connections:[1, 9, 16]},
		{x:617, y: 173, connections:[1, 7, 16, 8, 12]},
		{x:921, y:150, connections:[16, 12, 14]},
		{x:616, y:367, connections:[11, 6, 12]},
		{x:857, y:365, connections:[11, 10, 13]},
		{x:810, y:328, connections:[12, 14]},
		{x:759, y:267, connections:[10, 13, 15]},
		{x:739, y:242, connections:[14, 16]},
		{x:664, y:151, connections:[8, 9]}
	]),
	
	new Template([
		{x:36, y:261, connections:[2, 1, 4]},
		{x:285, y:20, connections:[0, 4]},
		{x:61, y:362, connections:[0, 3, 4]},
		{x:144, y:396, connections:[2, 4]},
		{x:317, y:254, connections:[0, 1, 2, 3, 5, 7, 10, 12]},
		{x:402, y:96, connections:[4, 7]},
		{x:625, y:30, connections:[7, 8]},
		{x:695, y:217, connections:[4, 5, 6, 10]},
		{x:845, y:108, connections:[9, 10, 11, 6]},
		{x:887, y:401, connections:[8, 11]},
		{x:753, y:365, connections:[4, 7, 8, 11, 12]},
		{x:827, y:385, connections:[8, 9, 10]},
		{x:404, y:419, connections:[4, 10]},
		{x:449, y:240, connections:[15, 5]},
		{x:525, y:148, connections:[6]},
		{x:452, y:287, connections:[12]},
		{x:420	, y:152, connections:[4]}
	]),
	
	new Template([
		{x:59, y:74, connections:[1, 2]},
		{x:204, y:177, connections:[0, 2, 4, 5]},
		{x:59, y:363, connections:[0, 1, 4, 3]},
		{x:349, y:431, connections:[4, 2]},
		{x:316, y:254, connections:[1, 2, 3, 5, 7, 10]},
		{x:287, y:71, connections:[1, 4]},
		{x:487, y:38, connections:[4, 7, 8]},
		{x:580, y:139, connections:[4, 6, 8]},
		{x:673, y:100, connections:[6, 7, 9]},
		{x:777, y:56, connections:[8, 10, 11, 12, 13, 14]},
		{x:684, y:364, connections:[4, 9, 11]},
		{x:730, y:379, connections:[9, 10, 12]},
		{x:776, y:393, connections:[9, 11, 13]},
		{x:822, y:405, connections:[12, 14, 15]},
		{x:801, y:242, connections:[9, 13, 15]},
		{x:918, y:198, connections:[13, 14]},
		{x:940, y:400, connections:[13, 14]}
	])
		
];

var lines_cv;
var lines_cvWidth = 938;
var lines_cvHeight = 443;
var lines_ct;

var currTpl = 0;
var numTemplates = templates.length;
var scene = [];

var drawDuration = (slideDuration+delay)/1000;
var drawFramerate = 1000/60;
var drawInterval;
var isTweening = false;

function nextTemplate() {
	//console.log("nextTemplate");
	if (supports_canvas()) {
		if (lines_ct) {
			lines_ct.clearRect(0, 0, lines_cv.width, lines_cv.height);
			//clearInterval(drawFadingInterval);
			drawConnections();
			var nextTpl;
			if (currTpl < numTemplates-1) {
				nextTpl = currTpl+1;
			} else {
				nextTpl = 0;
			}
			var currTemplate = templates[currTpl];
			var nextTemplate = templates[nextTpl];
			
			var loop = scene.numPoints;
			for (var i = 0; i < loop; i++) {
				var pt = scene.points[i];
				
				var _pt = nextTemplate.points[i];
				pt.connections = _pt.connections;
				pt.destx = _pt.x;
				pt.desty = _pt.y;
				
				// on anime chaque Point vers sa destination
				var tx = new Tween(pt, "x", Tween.regularEaseOut, pt.x, pt.destx , drawDuration);
				tx.start();
				var ty = new Tween(pt, "y", Tween.regularEaseOut, pt.y, pt.desty, drawDuration);
				ty.onMotionFinished = function(e) {
					//console.log("onMotionFinished");
					isTweening = false;
					clearInterval(drawInterval);
					//clearInterval(drawFadingInterval);
					currTpl = nextTpl;
					scene = new Template(templates[currTpl].data);
					//lines_ct.clearRect(0, 0, lines_cv.width, lines_cv.height);
					//drawConnections();
				}
				ty.start();
				
				isTweening = true;
			}
			
			drawInterval = setInterval("drawConnections()", drawFramerate);
			
			// fading
			//drawFadingInterval = setInterval("fading()", drawFramerate);
		}
	}
}

/*function fading() { // thanks to hakim.se
	lines_ct.fillStyle = 'rgba(255, 255, 255, .1)';
	lines_ct.fillRect(0, 0, lines_cvWidth, lines_cvHeight);
	drawConnections();
}*/

function drawConnections() {
	//console.log("drawConnections");
	lines_ct.clearRect(0, 0, lines_cv.width, lines_cv.height);
	lines_ct.strokeStyle = "#efefef"; //(isTweening ? "#efefef" : "#efefef");
	lines_ct.lineWidth = 1;
	lines_ct.beginPath();
	var connections = [];
	//trace(scene.points.length);
	for (var i = 0; i < scene.points.length; i++) {
		var pt = scene.points[i];
		//trace(pt);
		if (pt.connections != undefined) {
			for (var j = 0; j < pt.connections.length; j++) {
				var _pt = scene.points[pt.connections[j]];
				//trace(_pt);
				var connectionId = Math.min(pt.id, _pt.id)+"-"+Math.max(pt.id, _pt.id);
				//trace(template.connections.indexOf(connectionId));
				if (connections.indexOf(connectionId) < 0) {
					//trace(connectionId);
					lines_ct.moveTo(pt.x, pt.y);
					lines_ct.lineTo(_pt.x, _pt.y);
					lines_ct.moveTo(pt.x, pt.y);
					lines_ct.stroke();
					connections.push(connectionId);
				}
			}
		}
	}
	//trace(connections);
	lines_ct.closePath();
}