function SmartLine(oParams)
{
	this.points = oParams.points;
	this.normal = oParams.normal;
	this.k1 = oParams.k1;
	this.k2 = oParams.k2;
}

SmartLine.prototype.draw = function (ctx)
{
	this.sX = this.points.sX();
	this.sY = this.points.sY();
	this.eX = this.points.eX();
	this.eY = this.points.eY();
	
	/*if (this.canvas.getContext){
		var ctx = this.canvas.getContext('2d');*/
		ctx.strokeStyle = "rgba(220,220,220,1)";
		
		if (this.sX >  this.eX)
		{
			this.mX = this.eX + (this.sX -  this.eX) / 2;
		}
		else
		{
			this.mX = this.sX + (this.eX -  this.sX) / 2;
		}
		
		if (this.sY >  this.eY)
		{
			this.mY = this.eY + (this.sY -  this.eY) / 2;
		}
		else
		{
			this.mY = this.sY + (this.eY -  this.sY) / 2;
		}
		
		this.dx = this.sX - this.eX;
		this.dy = this.sY - this.eY;
		
		this.length = Math.sqrt(this.dx*this.dx + this.dy*this.dy);
		
		this.kX = ((this.sX - this.eX) / this.length)*100;
		this.kY = ((this.sY - this.eY) / this.length)*100;
		
		this.nkX = - this.normal*this.kY;
		this.nkY = this.normal*this.kX;
		
		this.mx2 = this.mX + this.nkX*(this.k1 - this.length)/this.k2;
		this.my2 = this.mY + this.nkY*(this.k1 - this.length)/this.k2;
		
		ctx.moveTo(this.sX, this.sY);
		ctx.arc(this.sX, this.sY,1,0,Math.PI*2,1);
		ctx.quadraticCurveTo(this.mx2,this.my2,this.eX, this.eY);	
		ctx.stroke();
	//}
}

function reDrawLines(){
	var canvas = document.getElementById('canva');
	var canvasContainer = document.getElementById('canvaContainer');
	if ((canvas.getContext) && (canvas.offsetWidth != canvasContainer.offsetWidth))
	{
		var ctx = canvas.getContext('2d');
		canvas.width = canvasContainer.offsetWidth;
					
		companyLine.draw(ctx);
		orderLine.draw(ctx);
		aboutLine.draw(ctx);
		priceLine.draw(ctx);
	}
}
$(document).ready(function() {
	companyLine = new SmartLine({
		normal: 1,
		k1:150,
		k2:50,
		points: {
			sX: function ()
			{
				return document.getElementById('canvaContainer').offsetWidth / 2 - 140
			},
			sY: function ()
			{
				return 340
			},
			eX: function ()
			{
				return document.getElementById('companyContainer').offsetLeft+document.getElementById('companyContainer').offsetWidth
			},
			eY: function ()
			{
				return document.getElementById('companyContainer').offsetTop+document.getElementById('companyContainer').offsetHeight / 2
			}
		}
	});
	
	orderLine = new SmartLine({
		normal: -1,
		k1:350,
		k2:90,
		points: {
			sX: function ()
			{
				return document.getElementById('canvaContainer').offsetWidth / 2 - 20
			},
			sY: function ()
			{
				return 120
			},
			eX: function ()
			{
				return document.getElementById('orderContainer').offsetLeft+document.getElementById('orderContainer').offsetWidth
			},
			eY: function ()
			{
				return document.getElementById('orderContainer').offsetTop+document.getElementById('orderContainer').offsetHeight / 2
			}
		}
	});
	
	aboutLine = new SmartLine({
		normal: 1,
		k1:250,
		k2:150,
		points: {
			sX: function ()
			{
				return document.getElementById('canvaContainer').offsetWidth / 2 + 240
			},
			sY: function ()
			{
				return 250
			},
			eX: function ()
			{
				return document.getElementById('heaverContainer').offsetLeft
			},
			eY: function ()
			{
				return document.getElementById('heaverContainer').offsetTop+document.getElementById('heaverContainer').offsetHeight / 2
			}
		}
	});
	
	priceLine = new SmartLine({
		normal:-1,
		k1:450,
		k2:100,
		points: {
			sX: function ()
			{
				return document.getElementById('canvaContainer').offsetWidth / 2 - 60
			},
			sY: function ()
			{
				return 240
			},
			eX: function ()
			{
				return document.getElementById('infoContainer').offsetLeft
			},
			eY: function ()
			{
				return document.getElementById('infoContainer').offsetTop+document.getElementById('infoContainer').offsetHeight / 2
			}
		}
	});
	
	window.setInterval('reDrawLines()',200);
});