var Point = function(x1,y1){
   this.x = x1;
   this.y = y1;
   this.oldX = x1;
   this.oldY = y1;
	
	 this.setPosition = function(x1,y1){
		this.x = x1;
		this.oldX = x1;
		this.y = y1;
		this.oldY = y1;
	}
	
	this.refresh = function(){
			var tempX = this.x;
			var tempY = this.y;
			this.x = 2 * this.x - this.oldX;
			this.y = 2 * this.y - this.oldY;
			this.oldX = tempX;
			this.oldY = tempY;
	}
	
	
}

var Stick = function(a1,b1){
	this.a = a1;
	this.b = b1;
	this.dx = this.a.x - this.b.x;
	this.dy = this.a.y - this.b.y;
	this.hypotenus = Math.sqrt(this.dx*this.dx + this.dy*this.dy);
	
	this.contract = function(){
		this.dx = this.b.x - this.a.x;
		this.dy = this.b.y - this.a.y;
		var h = Math.sqrt(this.dx * this.dx + this.dy * this.dy);
		var diff = this.hypotenus - h;
		var offx = (diff * this.dx / h) * 0.5; 
		var offy = (diff * this.dy / h) * 0.5; 
		this.a.x -= offx;
		this.a.y -= offy;
		this.b.x += offx;
		this.b.y += offy;
	}
	
}

var g ;
var points = [];
var sticks = [];

var COLS = 15;
var ROWS = 12;

var LEN = 25;

var PI2 = 2 * Math.PI;


var findPosition = function( el ) {
	
	var curleft = curtop = 0;
	do {
	   curleft += el.offsetLeft;
	   curtop += el.offsetTop;
	}while( el = el.offsetParent );

  return [ curleft, curtop ];
};


var mouseX, mouseY, catched, catchPoint;

// window.onload = function(){
// 	loadSimulation();
// }

var loadSimulation = function(){

	var canvas = document.createElement("canvas");
	canvas.width = 600;
	canvas.height = 600;

	var clothDiv = document.getElementById( 'cloth' );

	var position = findPosition( clothDiv );
	
	clothDiv.appendChild(canvas);


	
		var marginX = position[0] + 100,
		marginY = position[1] + 100 ;


	canvas.onmousedown = function( ev ){
		
		var x = ev.pageX - marginX,
			y = ev.pageY - marginY, 
			i = 0;
			console.log(x + '  ' + y);
		for( i = 0; i < points.length; i += 1 ){
	
			if( Math.abs( points[ i ].x - x ) < 10 && Math.abs( points[ i ].y - y ) < 10 ){
				catched = true;
				catchPoint = i;
				break;
			}

		}	

	};


	canvas.onmousemove = function( ev ){
		
		mouseX = ev.pageX - marginX;
		mouseY = ev.pageY - marginY;

		
	};

	canvas.onmouseup = function( ev ){

		catched = false;
		catchPoint = -1;
	};

	window.onmouseup = function( ){
		catched = false;
		catchPoint = -1;
	}
	
	
	g = canvas.getContext("2d");
	
	g.lineWidth = 1;

	
	g.translate( 100, 100 );
	

	var i =0, j = 0;

	for(i = 0; i < ROWS; i++){
		for(j = 0; j < COLS; j++){
			points.push(new Point(j * LEN, i * LEN));
			
			if(j > 0){
				sticks.push(new Stick(points[i * COLS + j-1],points[i*COLS + j]));
			}
			if(i > 0){
				sticks.push(new Stick(points[i * COLS + j],points[(i-1)*COLS + j]));
			}
		}
	}
	
	setTimeout( render, 1 );
	

}


function render(){
	g.clearRect( - window.innerWidth / 2, -100, window.innerWidth * 2, window.innerHeight + 100 );
	g.strokeStyle = "#000";
	
	var pLen = points.length;


	// top points
	points[ 0 ].setPosition(0,0);
	points[ COLS - 1 ].setPosition(COLS * LEN, 0);

	// bottom points
	points[ ( ROWS - 1 ) * COLS ].setPosition( 0,  ROWS * LEN );
	points[  ROWS * COLS - 1 ].setPosition(COLS * LEN, ROWS * LEN);


	if( catched ){
			points[ catchPoint ].x = mouseX;
			points[ catchPoint ].y = mouseY;

	}

	


	var k = 0;
	for(k = 0; k < pLen; k++){
		if ( k === 0 || k === COLS - 1 || k === ( ( ROWS - 1 ) * COLS ) || k === ( ROWS * COLS - 1 ) )
			continue;
		points[k].refresh();
	}


	
	var len = sticks.length;
	var j = 0;
	
	for(j = 0; j< len ;j++){
		sticks[j].contract();
	}

	var i = 0;
	for(i = 0; i < len ; i++){

		g.beginPath();
		g.moveTo( sticks[i].a.x, sticks[i].a.y );
		g.arc( sticks[i].a.x, sticks[i].a.y, 2, 0, PI2 );
		g.fill();
		g.lineTo( sticks[i].b.x, sticks[i].b.y );
		g.stroke();
		g.closePath();

	}

	setTimeout(render,1);


}