var WireControl = Class.create({
		initialize: function (_canvas,_source, _target, _size) {
			this.canvas = $(_canvas);
			this.source = _source;
			this.target = _target;
			this.renderConfig = new Object();
			this.size = (_size?_size:10);
			
			this.renderConfig.borderwidth = 1;
			this.renderConfig.bordercap = 'square';
			this.renderConfig.bordercolor = 'rgb(76, 0, 0)';

			this.renderConfig.width = 4;
			this.renderConfig.cap = 'butt';
			this.renderConfig.color = 'rgb(143, 0, 0)';

			this.length = 100;
			this.name = "wireControl";
		},
		updateStyle: function (type,args,me) {
			this.renderConfig = $clone(args[0].getRenderStyle());
			this.redraw();
		},
		updateXY: function () {
			this.redraw();
		},
		redraw: function (source, target) {

			var p1 = Position.cumulativeOffset($(this.source));
			var p2 = Position.cumulativeOffset($(this.target));
			
			p1=[p1[0]+8,p1[1]+8];
			p2=[p2[0]+8,p2[1]+8];
						
			var length = this.length; //10c
			var lengthCalc = Math.sqrt(Math.pow(p1[0]-p2[0],2)+Math.pow(p1[1]-p2[1],2)); //10d
			
			if(lengthCalc < length){
				length = lengthCalc/2;
			}
			
			var sourceDirection = [1,0];
			var targetDirection = [-1,0];
			
			var d1=[sourceDirection[0] * length, sourceDirection[1] * length];
			var d2=[targetDirection[0] * length, targetDirection[1] * length];
			
			d1[0] = d1[0] > length?length:d1[0];
			d1[1] = d1[1] > length?length:d1[1];
			
			var bezierArray=[]; //110
			bezierArray[0]=p1;
			bezierArray[1]=[p1[0]+d1[0],p1[1]+d1[1]];
			bezierArray[2]=[p2[0]+d2[0],p2[1]+d2[1]];
			bezierArray[3]=p2;
			
			var min=[p1[0],p1[1]];
			var max=[p1[0],p1[1]];
			
			for(var i=1; i < bezierArray.length;i++){
				var p = bezierArray[i];
				if(p[0]<min[0]){
					min[0]=p[0];
				}
				if(p[1]<min[1]){
					min[1]=p[1];
				}
				if(p[0]>max[0]){
					max[0]=p[0];
				}
				if(p[1]>max[1]){
					max[1]=p[1];
				}
			}
			
			var MinMaxArray = [4,4]; //115
			min[0] = min[0] - MinMaxArray[0];
			min[1] = min[1] - MinMaxArray[1];
			max[0] = max[0] + MinMaxArray[0];
			max[1] = max[1] + MinMaxArray[1];
			var lw = Math.abs(max[0]-min[0]);
			var lh = Math.abs(max[1]-min[1]);
			
			this.setCanvas (min[0],min[1],lw,lh);
			
			var ctxt = this.canvas.getContext("2d");
			for(var i=0; i < bezierArray.length; i++){
				bezierArray[i][0] = bezierArray[i][0]-min[0];
				bezierArray[i][1] = bezierArray[i][1]-min[1];
			}
			
			var renderConfig = this.renderConfig; //119
			ctxt.lineCap = renderConfig.bordercap;
			ctxt.strokeStyle = renderConfig.bordercolor;
			ctxt.lineWidth = 10;//renderConfig.width + renderConfig.borderwidth*2;

			ctxt.beginPath();
			ctxt.moveTo(bezierArray[0][0],bezierArray[0][1]);
			ctxt.bezierCurveTo(bezierArray[1][0],bezierArray[1][1],bezierArray[2][0],bezierArray[2][1],bezierArray[3][0],bezierArray[3][1]);
			ctxt.stroke();
			
			ctxt.lineCap = renderConfig.cap;
			ctxt.strokeStyle = renderConfig.color;
			ctxt.lineWidth = 8;//renderConfig.width;
			
			ctxt.beginPath();
			ctxt.moveTo(bezierArray[0][0],bezierArray[0][1]);
			ctxt.bezierCurveTo(bezierArray[1][0],bezierArray[1][1],bezierArray[2][0],bezierArray[2][1],bezierArray[3][0],bezierArray[3][1]);
			ctxt.stroke();		
		},
		setCanvas: function (left,top, width, height) {
			this.canvas.style.left = left;
			this.canvas.style.top = top;
			this.canvas.width =  width; 
			this.canvas.height = height;
		},
	});