<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>Planarity almost game</title>
	<script type="text/javascript">
//<![CDATA[
	onload = function(){
		mouse = new Mouser();
		
		var circles = document.getElementsByTagName('circle');
		
		// make random sorted array
		for(var i = 0, order = []; i < circles.length; i++){
			order.push(i);
		}
		function haosOrder(a, b){
			return Math.round(2 * Math.random() - 1);
		}
		order.sort(haosOrder);
		
		
		for(var i = 0; i < circles.length; i++){
			var circle = circles[i];
			
			var handle = new Handle(circle);
			
			// order
			if(1){
				handle.move(50 + 50 * Math.sin(order[i] * 2 * Math.PI / circles.length), 50 + 50 * Math.cos(order[i] * 2 * Math.PI / circles.length));
			}
		}
		
		
		
		var svg = document.getElementsByTagName('svg')[0];
		var svgns = 'http://www.w3.org/2000/svg';
		
		var c = 0;
		
		svg.onclick = function(e){
			
			
			
			if(e.target.nodeName != 'circle'){
				var circle = document.createElementNS(svgns, 'circle');
				
				circle.setAttribute('r', 3);
				circle.setAttribute('cx', e.clientX - svg.parentNode.offsetLeft);
				circle.setAttribute('cy', e.clientY - svg.parentNode.offsetTop);
				
				circle.setAttribute('id', 'c' + c++);
				
				document.getElementById('handles').appendChild(circle);
				
				new Handle(circle);
			}
		}
	}


Function.prototype.inherits = function(parent){
	this.prototype = new parent();
	this.prototype.constructor = this;
};

function Mouser(){
	this.init();
	this.handles = [];
}
Mouser.prototype.init = function(){
	var _Mouser = this;
	this.svg = document.getElementById('svg');
	this.svg.addEventListener("mousemove", function(e){_Mouser.mousemove(e)}, false);
	
}
Mouser.prototype.mousemove = function(e){
	if(this.handles.length){
		for(var i = 0; i < this.handles.length; i++){
			var handle = this.handles[i];
			
			var x = e.pageX - this.svg.offsetLeft;
			var y = e.pageY - this.svg.offsetTop;
			
			handle.move(x, y);
		}
	}
	e.preventDefault()
	return false;
}
Mouser.prototype.register = function(handle){
	this.handles.push(handle);
}
Mouser.prototype.unregister = function(handle){
	var index = this.handleIndex(handle);
	if(index != -1){
		this.handles.splice(index, 1);
	}
}
Mouser.prototype.handleIndex = function(handle) {
	for(var i = 0; i < this.handles.length; i++){
		if(this.handles[i] === handle){
			return i;
		}
	}
};

Mouser.prototype.unregisterAll = function(){
	this.handles = [];
}

function ChooseObject(node){
	var type = 0;
	
	if(!node){
		console.log('Obiekt nie istnieje');
	}
	/*if(type = node.getAttribute('type')){
		
	}else*/if(1){
		switch(node.nodeName.toLowerCase()){
			case 'line':
				return new Line(node);
			break;
			case 'polygon':
				return new Polygon(node);
			break;
			case 'text':
				return new Text(node);
			break;
			case 'path':
				return new Path(node);
			break;
			default:
				console.log('chooseobject zwrócił, że obiekt nie istnieje');
			break;
		}
	}
}

function RootObject(){}
RootObject.prototype.getHandleIndex = function(handle){
	if(!this.handles){
		alert('Obiekt nie ma uchwytów');
	}
	for(var i = 0; i < this.handles.length; i++){
		if(this.handles[i] == handle.id){
			return i;
		}
	}
	return -1;
}

function Line(node){
	this.node = node;
	
	this.handles = node.getAttribute('handles').split(' ');
}
Line.inherits(RootObject);
Line.prototype.update = function(handle){
	var index = this.getHandleIndex(handle);
	switch(index){
		case 0:
			this.node.setAttribute('x1', handle.x);
			this.node.setAttribute('y1', handle.y);
		break;
		case 1:
			this.node.setAttribute('x2', handle.x);
			this.node.setAttribute('y2', handle.y);
		break;
	}
}

/*
	łuk, łuk ma dwa parametry w atrybucie d
		1. Mx,y
		2. Qx1,y1 x,y
*/
function Path(node){
	this.node = node;
	
	this.handles = node.getAttribute('handles').split(' ');
}
Path.inherits(RootObject);
Path.prototype.update = function(handle){
	var index = this.getHandleIndex(handle);
	
	var pathSeg = this.node.pathSegList.getItem(index > 1 ? 1 : index);
	
	switch(index){
		case 0:
		case 2:
			pathSeg.x = handle.x;
			pathSeg.y = handle.y;
		break;
		case 1:
			pathSeg.x1 = handle.x;
			pathSeg.y1 = handle.y;
		break;
	}
}


function Polygon(node){
	this.node = node;
	
	this.handles = node.getAttribute('handles').split(' ');
}
Polygon.inherits(RootObject);
Polygon.prototype.update = function(handle){
	var index = this.getHandleIndex(handle);
	
	var points = this.node.getAttribute('points').split(' ');
	points[index] = handle.x + ',' + handle.y;
	
	this.node.setAttribute('points', points.join(' '));
}

function Text(node){
	this.node = node;
	
	this.x = +node.getAttribute('x');
	this.y = +node.getAttribute('y');
	
	this.handles = node.getAttribute('handles').split(' ');
}
Text.inherits(RootObject);
Text.prototype.update = function(handle){
	var index = this.getHandleIndex(handle);
	
	switch(index){
		case 0:
			this.node.setAttribute('x', handle.x);
			this.node.setAttribute('y', handle.y);
			
			this.x = handle.x;
			this.y = handle.y;
		break;
		/*case 1:
			this.node.setAttribute('transform', 'rotate('+Math.atan((this.y - handle.y) / (this.x - handle.x)) * 180 / Math.PI+','+this.x+','+this.y+')');
		break;*/
	}
}



function Handle(node){
	var _handle = this;
	this.x = +node.getAttribute('cx');
	this.y = +node.getAttribute('cy');
	
	this.id = node.getAttribute('id');
	
	this.node = node;
	
	this.selected = false;
	
	this.owners = [];
	this.addOwners();
	
	node.addEventListener("mousedown", function(e){_handle.mousedown(e)}, false);
	node.addEventListener("mouseup", function(e){_handle.mouseup(e)}, false);
	node.addEventListener("click", function(e){_handle.click(e)}, false);
}
/* FIXME: nieoptymalne rozwiązanie, nie zawsze trzeba wczytywać od razu */
Handle.prototype.addOwners = function(){
	if(this.node.getAttribute('owners')){
		var owners_ids = this.node.getAttribute('owners').split(' ');
		for(var i = 0, owners = []; i < owners_ids.length; i++){
			this.addOwner(owners_ids[i], 1);
		}
		return owners;
	}
}

Handle.prototype.addOwner = function(ownerId, dontAddToOwnerAttr){
	this.owners.push(new ChooseObject(document.getElementById(ownerId)));
	if(!dontAddToOwnerAttr){
		this.node.setAttribute('owners', (this.node.getAttribute('owners') || '') + ' ' + ownerId);
	}
}

Handle.prototype.move = function(x, y){
	this.node.setAttribute('cx', x);
	this.node.setAttribute('cy', y);
	
	this.x = x;
	this.y = y;
	
	for(var i = 0; i < this.owners.length; i++){
		//var object = new Object(this.owners[i]);
		this.owners[i].update(this);
	}
}
Handle.prototype.mousedown = function(e){
	if(!this.selected){
		this.selected = true;
		
		mouse.unregisterAll();
        	mouse.register(this);
	}
};
Handle.prototype.mouseup = function(e){
	if(this.selected){
		this.selected = false;
		
		mouse.unregisterAll();
        	mouse.unregister(this);
	}
};

var start;
var count = 0;
Handle.prototype.click = function(e){
	var svg = document.getElementsByTagName('svg')[0];
	var svgns = 'http://www.w3.org/2000/svg';
	
	if(e.ctrlKey){
	if(start){
		var line = document.createElementNS(svgns, 'line');
		line.setAttribute('x1', start.x);
		line.setAttribute('y1', start.y);
		
		line.setAttribute('x2', this.x);
		line.setAttribute('y2', this.y);
		
		line.setAttribute('handles', start.id + ' ' + this.id);
		
		var id = 'il' + count++
		line.setAttribute('id', id);
		
		svg.insertBefore(line, document.getElementById('handles'));
		
		start.addOwner(id);
		this.addOwner(id);
		
		start = false;
	}else{
		start = this;
	}
	
	}
}
//]]>
</script>
	
	<style type="text/css">
	#test{
		margin: 20px;
		border: 20px solid black;
		padding: 20px;
	}
	
	#inner{
		background: lightblue;
	}
	</style>
</head>
<body>
	<h1>Planarity</h1>
	<p>Wzorowane na grze <a href="http://planarity.net">planarity</a>. Niedokończone i na dokończenie nie oczekujące.</p>
	<p>Chwycić za cypelek i przesunąć. O. Jeśli żadne dwie linie się nie przecinają - wygrałeś.</p>
	<div id="test">
	
	<div id="svg">
	<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200" style="border: 2px solid ;">
		<style type="text/css">
		circle{fill: #fff; stroke: #000; stroke-width: 2}
		line{stroke: #000; stroke-width: 2}
		
		line{stroke: #ff0000;}
		path{stroke: #ff0000; fill: none; stroke-width: 2}
		</style>
		
		<line x1="406" y1="24" x2="533" y2="115" handles="c4 c3" id="il0"/><line x1="415" y1="177" x2="533" y2="115" handles="c2 c3" id="il1"/><line x1="406" y1="24" x2="258" y2="82" handles="c4 c0" id="il2"/><line x1="258" y1="82" x2="282" y2="162" handles="c0 c1" id="il3"/><line x1="282" y1="162" x2="415" y2="177" handles="c1 c2" id="il4"/><line x1="415" y1="177" x2="396" y2="107" handles="c2 c5" id="il5"/><line x1="396" y1="107" x2="406" y2="24" handles="c5 c4" id="il6"/><line x1="396" y1="107" x2="533" y2="115" handles="c5 c3" id="il7"/><line x1="396" y1="107" x2="282" y2="162" handles="c5 c1" id="il8"/><line x1="258" y1="82" x2="396" y2="107" handles="c0 c5" id="il9"/><g id="handles">

			
		<circle r="3" cx="258" cy="82" id="c0" owners="il2 il3 il9"/><circle r="3" cx="282" cy="162" id="c1" owners="il3 il4 il8"/><circle r="3" cx="415" cy="177" id="c2" owners="il1 il4 il5"/><circle r="3" cx="533" cy="115" id="c3" owners="il0 il1 il7"/><circle r="3" cx="406" cy="24" id="c4" owners="il0 il2 il6"/><circle r="3" cx="396" cy="107" id="c5" owners="il5 il6 il7 il8 il9"/></g>



	</svg>
	</div>
	
	</div>
</body>
</html>
