/**
 * 绘制新建和归档节点
 */
function drawNode(content, node,textstyle) {
	if (node == null || node == undefined) {
		return;
	}
	if(textstyle == null || textstyle == undefined){
		textstyle = 'normal 10pt Microsoft YaHei';
	}
	if (node.nodetype == 0 || node.nodetype == 3) {
		var imgSrc = node.bgImage();
		loadImage(imgSrc, function(){
			content.drawImage(this, node.x, node.y);
			content.fillStyle = node.fontColor();
			drawText(content, node.text, textstyle, parseInt(node.x) + (113 - 70)/2 - 10, parseInt(node.y) + 113/2 - 12, 70);
			drawText(content, node.nodeOperatorName, textstyle, parseInt(node.x) + (113 - 70)/2 - 10, parseInt(node.y) + 113/2 + 5, 70);
			content.stroke();
		});
	}
}

/**
 * 绘制设置节点
 * @param ctx
 * @param setNode
 * @return
 */
function drawSetNode(ctx,setNode){
	var imgsrc = setNode.imgsrc;
	loadImage(imgsrc, function(){
		ctx.drawImage(this, setNode.x, setNode.y);
		ctx.stroke();
	});
}


/**
 * 绘制自由节点
 * @param ctx
 * @param setNode
 * @return
 */
function drawFreeNode(ctx,freeNode,textstyle,nodecover){
	var nid = freeNode.id;
	var nx = freeNode.x;
	var ny = freeNode.y;
	var nw = freeNode.w;
	var nh = freeNode.h;
	var ntext = freeNode.text;
	var imgsrc = freeNode.imgsrc;
	if(textstyle == null || textstyle == undefined){
		textstyle = 'normal 10pt Microsoft YaHei';
	}
	
	var _strokeStyle = freeNode.strokeStyle;
	if(_strokeStyle == null || _strokeStyle == undefined){
		_strokeStyle = '#8c8c8c';
	}
	
	loadImage(imgsrc, function(){
		ctx.drawImage(this, freeNode.x, freeNode.y,70,70);
		ctx.stroke();
		
		loadImage(nodecover,function(){
			ctx.drawImage(this, freeNode.x, freeNode.y);
			ctx.stroke();
			
			var r = Math.max(nw,nh)/2 + 3;
			var cx = nx + nw/2;
			var cy = ny + nh/2;
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = _strokeStyle; 
			ctx.arc(cx,cy,r,0,2*Math.PI);
			ctx.closePath();
			ctx.stroke();
		});
		
		
		//节点下方显示人员姓名
		ctx.fillStyle = "#8c8c8c";
		drawText(ctx, ntext, textstyle, nx, ny + nh + 20, 70);
	});
}

/**
 * 绘制带有箭头的线
 * @param ctx
 * @param sn
 * @param en
 * @return
 */
function drawArrowLine(ctx,sn,en,_strokeStyle){
	if(_strokeStyle == null || _strokeStyle == undefined){
		_strokeStyle = "#8c8c8c";
	}
	var snx = sn.x;
	var sny = sn.y;
	var enx = en.x;
	var eny = en.y;
	
	arrsx = 0;
	arrsy = 0;
	
	//15,表示箭头的长度
	if(snx == enx){  //x坐标相同，说明线是纵向的
		arrsx = snx;
		if(eny - sny > 15){
			arrsy = eny - 15;
		}else{
			arrsy = sny;
		}
	}else{   //线是横向的
		arrsy = sny;
		if(enx - snx > 15){
			arrsx = enx - 15;
		}else{
			arrsx = snx;
		}
	}
	
	//绘制线
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.strokeStyle = _strokeStyle; 
	ctx.moveTo(snx, sny);
	ctx.lineTo(enx,eny);
	ctx.closePath();
	ctx.stroke();
	
	//绘制箭头
	var sp = {};
	sp.x = arrsx;
	sp.y = arrsy;

	var ep = {};
	ep.x = enx;
	ep.y = eny;
	
	ctx.beginPath();
	ctx.strokeStyle = _strokeStyle; 
	drawArrow(ctx,sp,ep);
	ctx.closePath();
	ctx.stroke();
}

/**
 * 绘制块区域
 * @param ctx
 * @param box
 * @return
 */
function drawBox(ctx,box,nodes,setnode,textstyle,nodecover){
	if(textstyle == null || textstyle == undefined){
		textstyle = 'normal 10pt Microsoft YaHei';
	}
	
	var imgsrc = box.imgsrc;
	var bx = box.x;
	var by = box.y;
	var bw = box.w;
	var bh = box.h;
	var bstrokeStyle = box.strokeStyle;
	if(bstrokeStyle == null || bstrokeStyle == undefined){
		bstrokeStyle = "#9aa9cb";
	}
	loadImage(imgsrc, function(){
		var pattern = ctx.createPattern(this, 'repeat');
		ctx.beginPath();
		ctx.lineWidth = 0.2;
		ctx.strokeStyle = bstrokeStyle;
		ctx.rect(bx,by,bw,bh);
		ctx.stroke();
		ctx.closePath();
		
		ctx.fillStyle = "#F8F6F7";  //块区域的填充颜色
		ctx.fill();
		
		/**
		 * 绘制设置节点
		 */
		if(setnode){
			drawSetNode(ctx,setnode); 
		}
		
		/**
		 * 绘制自由节点
		 */
		for(var j = 0; j < nodes.length; j++){
			var $freenode = nodes[j];
			drawFreeNode(ctx,$freenode,textstyle,nodecover);
		}
	});
} 




/**
 * 绘制流程图的class
 */
FreeWorkflowSimplePicture = (function(){
	return function(selector,options){
		/**
		 * 默认配置
		 */
		var defaultOpts = {
				signtype : 2,            						       /**审批类型，1：会签， 2：依次逐个处理**/
				nodes: new Array(),         						   /**自由节点**/
				lines: new Array(),         						   /**节点之间的线**/
				box: {imgsrc:"/workflow/design/bin-debug/assets/images/nodebox_wev8.png"},     /**会签时，包围所有自由节点的块区域*/
				iscreate : false,                                      /**是否是创建节点*/
				coordinaterate: 1.3,                                    /**坐标轴和画布大小的比值，此值大于1，就相当于放大了坐标*/
				nodeid: "-1",
				nodename: "",
				languageid: 7
		};
		
		var _data = jQuery.extend(defaultOpts,options);
		var _container = null;
		var _canvas = null;
		if(typeof selector == "object"){
			_container = selector;
		}else{
			_container = jQuery(selector);
		}
		
		var _iscreate = _data.iscreate;
		if(_iscreate){
			_data.setnode = {};
		}
		
		var _languageid = _data.languageid;
		
		var winWidth = jQuery(window).width();   //窗口宽度
		var _maxWidth = winWidth;
		if(winWidth > 40){
			_maxWidth = winWidth - 40;
		}
		
		var _initHeight = 400;   //画布初始化的高度
		var _initWidth = 580;    //画布初始化的宽度
		
		var _coordinaterate = _data.coordinaterate;     //画布长、宽和坐标长、宽的比率，即，在有限的画布大小内，放大坐标的值
		
		var _initCanvasHeight = _initHeight * _coordinaterate;   //画布坐标的初始高度
		var _initCanvasWidth = _initWidth * _coordinaterate;    //画布坐标的初始宽度
		
		if(_maxWidth < _initWidth){   //保证画布有个最小的宽度
			_maxWidth = _initWidth;
		}
		
		var _maxHeight = _initHeight;  //画布的高度
		
		var _canvasWidth = _maxWidth * _coordinaterate;        //画布坐标的宽度
		var _canvasHeight = _maxHeight * _coordinaterate;      //画布坐标的高度
		
		var _startNode = _data.start;  //新建节点
		var _endNode = _data.end;      //归档节点
		var _freeNodes = _data.nodes;  //自由节点
		var _setnode = _data.setnode;           //设置节点
		
		var _initx = 40;
		var _inity = 10;
		var _initfontsize = 10;   //初始化的字体大小，单位：pt
		
		var _fontSize = 15;
		if(_initfontsize * _coordinaterate > 15){
			_fontSize = 15;
		}else{
			_fontSize = _initfontsize * _coordinaterate;
		}

		var _textstyle = "normal " + _fontSize + "pt Microsoft YaHei";    //文字的字体大小
		var _nodecover1 = "/workflow/design/bin-debug/assets/images/nodecover1_wev8.png";      //会签时
		var _nodecover2 = "/workflow/design/bin-debug/assets/images/nodecover2_wev8.png";      //依次逐个处理
		
		var height1 = 93;  //开始节点，结束节点的高度
		var width1 = 93;   //开始节点，结束接节点的宽度
		var _height = 70;  //自由节点的高度
		var _width = 70;   //自由节点的宽度
		
		if(_startNode){   //开始节点初始化
			_startNode.x = _initx;
			_startNode.y = _inity;
			_startNode.w = width1;
			_startNode.h = height1;
			if(_startNode.nodeOptType == null || _startNode.nodeOptType == undefined){
				_startNode.nodeOptType = 2;
			}
		}
		
		if(_endNode){   //结束节点初始化
			if(_endNode.nodeOptType == null || _endNode.nodeOptType == undefined){
				_endNode.nodeOptType = 2;
			}
			_endNode.w = width1;
			_endNode.h = height1;
		}
		
		if(_setnode){  //设置节点初始化
			_setnode.imgsrc = "/workflow/design/bin-debug/assets/images/freeedit_wev8.png";
			_setnode.w = _width;
			_setnode.h = _height;
		}
		
		var _linex = 60;    //横向的线的长度
		var _liney = 30;    //纵向的线的长度
		
		var _offsetx = 16;   //两个节点间的x轴间距，暂不考虑之间连线的长度
		var _offsety = 16;   //两个节点间的y轴间距，暂不考虑之间连线的长度
		
		var _offset = 30;    //会签处理时，2个节点之间的间距
		
		var _textheight = 20;   //节点下方的文本的高度
		
		/**
		 * 获取节点的中心点
		 */
		var getNodeCenter = function(nodeparam){
			var nx = nodeparam.x;
			var ny = nodeparam.y;
			var nw = nodeparam.w;
			var nh = nodeparam.h;
			
			var cx = nx + nw/2;
			var cy = ny + nh/2;
			
			return {x:cx,y:cy};
		}
		
		/**
		 * 会签时，节点位置的计算方法
		 */
		var _sameProcessPosition = function(){
			_data.lines = [];
			var $lines = _data.lines;   //各节点之间的画线
			$freeNodes = _data.nodes;   //自由节点
			
			var iscurrentnode = _data.iscurrentnode;   //自由节点是否是当前节点
			
			//起始节点的坐标
			var startnodex = _initx;
			var startnodey = _inity;
			_startNode.x = startnodex;
			_startNode.y = startnodey;
			
			//归档节点的坐标
			var endnodex = _canvasWidth - 10 - width1;
			var endnodey = startnodey;
			_endNode.x = endnodex;
			_endNode.y = endnodey;
			
			//中间块状区域的坐标
			$box = _data.box;
			var startx = startnodex + width1 + _linex + _offsetx;
			var starty = _inity;
			$box.x = startx;
			$box.y = starty;
			
			var endx = endnodex - _linex - _offsetx;
			
			var boxlength = endx - startx;   //盒子的长度
			var nodelength = _width + _offset;   //每个节点占用的宽度= 节点本身的宽度 + 两个节点间隔的距离
			
			var nodecount = Math.floor((boxlength - _offset)/nodelength);  //每一行排放节点的数量
			var fnodecount = $freeNodes.length;   //自由节点的数量
			if(_setnode){  //如果存在设置节点，自由节点数量+1
				fnodecount = fnodecount + 1;
			}
			
			if(fnodecount < nodecount){   //自由节点数量不足一行，调整块区域的宽度
				boxlength = fnodecount * nodelength + _offset;
				endnodex = startx + boxlength + _linex + _offsetx;
				_endNode.x = endnodex;
				endx = endnodex - _linex - _offsetx;
			}
		
			//计算第一个节点的x坐标
			var firstnodex = startx + (boxlength - nodecount * _width - (nodecount - 1) * _offset)/2;   //这样做，尽量使块区域内，两边的空白一致，居中的效果
			var firstnodey = _inity + _offset;
			//不足一行时，第一个节点坐标的计算方法
			if(fnodecount < nodecount){
				firstnodex = startx + (boxlength - fnodecount * _width - (fnodecount - 1) * _offset)/2;   //这样做，尽量使块区域内，两边的空白一致，居中的效果
			}
			
			/**
			 * 计算自由节点的坐标
			 */
			var nodex = 0;
			var nodey = 0;
			var lastnodex = 0;
			var lastnodey = 0;
			
			var isallpass = true;   //所有的自由节点已走过，即自由节点所有人都已处理完流程
			for(var s = 0; s < $freeNodes.length; s++){
				var strokeStyle = "#F8F6F7";
				$fnode = $freeNodes[s];
				var nodeOptType = $fnode.nodeOptType;   //节点状态  0: 已通过  1: 当前 2:其它
				var iscurrent = $fnode.iscurrent;       //是否是当前节点
				
				if(nodeOptType == 0){
					strokeStyle = "#16A0CE";
				}
				
				if(s == 0){
					//计算第一个节点的x坐标
					nodex = firstnodex;
					nodey = firstnodey;
				}else{
					nodex = lastnodex + _width + _offset;
					nodey = lastnodey;
					if(s%nodecount == 0){  //另起一行
						nodex = firstnodex;
						nodey = lastnodey + _height + _offset + _textheight;
					}
				}
				
				$fnode.x = nodex;
				$fnode.y = nodey;
				$fnode.w = _width;
				$fnode.h = _height;
				$fnode.strokeStyle = strokeStyle;
				lastnodex = nodex;
				lastnodey = nodey;
			}
			
			/**
			 * 计算设置节点的坐标
			 */
			
			if(_setnode){
				nodex = lastnodex + _width + _offset;
				nodey = lastnodey;
				var fcount = $freeNodes.length;
				if(fcount > 0){  
					if(fcount%nodecount == 0){ //另起一行
						nodex = firstnodex;
						nodey = lastnodey + _height + _offset + _textheight;
					}
				}else{     //没有自由节点
					nodex = firstnodex;
					nodey = firstnodey;
				}
				
				_setnode.x = nodex;
				_setnode.y = nodey;
				_setnode.w = _width;
				_setnode.h = _height;
				lastnodex = nodex;
				lastnodey = nodey;
			}
			
			
			var boxbottomy = lastnodey + _height + _textheight + _offsety;  //盒子底部的y坐标
			var boxheight = boxbottomy - starty;         //盒子的高度
			$box.w = boxlength;
			$box.h = boxheight;
						
			//调整画布的高度
			if(boxbottomy > _initCanvasHeight){
				_canvasHeight = boxbottomy; 
			}else{
				_canvasHeight = _initCanvasHeight;
			}
			
			/**
			 * 计算连接线的坐标
			 */
			var startcenter = getNodeCenter(_startNode);       //新建节点的中心点
			var endcenter = getNodeCenter(_endNode);           //归档节点的中心点
			
			var lastispass = false;   //节点是否已通过
			var nodeOptType = _startNode.nodeOptType;
			if(nodeOptType == 0){   //已通过的节点
				lastispass = true;
			}
			var iscurrent = false;   //是否是当前节点
			
			var sx = startcenter.x + width1/2 + _offsetx/2;
			var sy = startcenter.y;
			var ex = startx - _offsetx/2;
			var ey = sy;
			$line = {};
			$line.sx = sx;
			$line.sy = sy;
			$line.ex = ex;
			$line.ey = ey;
			if(lastispass){
				$line.strokeStyle = "#E90B0A";
			}else{
				$line.strokeStyle = "#8c8c8c";
			}
			$lines.push($line);
			
			sx = endx + _offsetx/2;
			sy = endcenter.y;
			ex = endcenter.x - width1/2 - _offsetx/2;
			ey = sy;
			$line = {};
			$line.sx = sx;
			$line.sy = sy;
			$line.ex = ex;
			$line.ey = ey;
			
			if(iscurrentnode){    //自由节点是待办节点，块区域的边线颜色
				var boxstrokeStyle = "#EB8D05";
				$box.strokeStyle = boxstrokeStyle;
			}
			
			if(iscurrentnode || nodeOptType != 0){   //自由流程节点仍然是待办节点或者新建节点仍然是待办(说明做了退回操作)，它往归档节点的线的颜色
				$line.strokeStyle = "#8c8c8c";
			}else{
				$line.strokeStyle = "#E90B0A";
			}
			$lines.push($line);
		}
		
		/**
		 * 依次逐个处理时，节点位置的计算方法
		 */
		var _orderProcessPosition = function(){
			if(_startNode){   //开始节点初始化
				_startNode.x = _initx;
				_startNode.y = _inity;
				_startNode.w = width1;
				_startNode.h = height1;
			}
			
			if(_endNode){   //结束节点初始化
				_endNode.w = width1;
				_endNode.h = height1;
			}
			
			_data.lines = [];
			
			var lastispass = _startNode.ispass;   //节点是否已通过
			var startnodeOptType = _startNode.nodeOptType;
			if(startnodeOptType == 0){   //已通过的节点
				lastispass = true;
			}
			var iscurrent = false;   //是否是当前节点
			var lastcenterx = _initx + width1/2;
			var lastcentery = _inity + height1/2;
			var lastw = width1;
			var lasth = height1;
			var $lines = _data.lines;   //各节点之间的画线
			
			$freeNodes = _data.nodes;
			var direction = 1;  //方向，1表示从左往右，-1表示从右往左
			/**
			 * 计算自由节点，每个节点的坐标
			 */
			if($freeNodes && $freeNodes.length > 0){
				for(var i = 0; i < $freeNodes.length; i++){
					var freeNode = $freeNodes[i];
					var nodeOptType = freeNode.nodeOptType;   //节点状态  0: 已通过  1: 当前 2:其它
					var iscurrent = freeNode.iscurrent;       //是否是当前节点
					var ispass = freeNode.ispass;         //节点是否已通过
					var strokeStyle = "#FFF";
					if((iscurrent == "true" || iscurrent) && nodeOptType == 1){  //当前节点
						strokeStyle = "#EB8D05";
					}
					if(nodeOptType == 0){
						strokeStyle = "#16A0CE";
					}else if(nodeOptType == 2){
						strokeStyle = "#FFF";
					}
					freeNode.w = _width;
					freeNode.h = _height;
					var centerx = lastcenterx + lastw/2 * direction + _offsetx * direction + _linex * direction + _width/2 * direction;
					var centery = lastcentery;
					
					if(direction == 1){
						if(centerx + _width/2 > _canvasWidth){  //添加节点后，超过画布的宽度，纵向排列
							centerx = lastcenterx;
							centery = lastcentery + lasth/2 + _offsety + _liney + _height/2 + _textheight;
						}
					}else{
						if(centerx - _width/2 < 0){  //添加节点后，超过画布的左边,纵向排列
							centerx = lastcenterx;
							centery = lastcentery + lasth/2 + _offsety + _liney + _height/2 + _textheight;
						}
					}
					
					var currentx = centerx - _width/2;
					var currenty = centery - _height/2;
					
					//起点坐标
					var startx = 0;
					var starty = 0;
					//终点坐标
					var endx = 0;
					var endy = 0;
					
					var $line = {};
					if(lastcenterx == centerx){   //说明2个节点是竖向对齐
						startx = lastcenterx;
						starty = lastcentery + lasth/2 + _offsety/2 + _textheight;
						endx = startx;
						endy = centery - _height/2 - _offsety/2;
					}else{   //横向对齐
						startx = lastcenterx + lastw/2 * direction + _offsetx/2 * direction;
						starty = lastcentery;
						endx = centerx - _width/2 * direction - _offsetx/2 * direction;
						endy = starty;
					}
					$line.sx = startx;
					$line.sy = starty;
					$line.ex = endx;
					$line.ey = endy;
					if(lastispass == "true" || lastispass){
						$line.strokeStyle = "#E90B0A";
					}else{
						$line.strokeStyle = "#8c8c8c";
					}
					$lines.push($line);

					if(lastcenterx == centerx){  //说明当前节点是纵向，他之后的节点布局方向调转
						direction = direction * (-1);
					}
					
					lastcenterx = centerx;
					lastcentery = centery;
					lastw = _width;
					lasth = _height;
					lastispass = ispass;
					
					freeNode.x = currentx;
					freeNode.y = currenty;
					freeNode.strokeStyle = strokeStyle;
				}
			}
			
			//计算设置节点的坐标
			if(_setnode){
				_setnode.w = _width;
				_setnode.h = _height;
				var centerx = lastcenterx + lastw/2 * direction + _offsetx * direction + _linex * direction + _width/2 * direction;
				var centery = lastcentery;
				
				if(direction == 1){
					if(centerx + _width/2 > _canvasWidth){  //添加节点后，超过画布的宽度，纵向排列
						centerx = lastcenterx;
						centery = lastcentery + lasth/2 + _offsety + _liney + _height/2 + _textheight;
					}
				}else{
					if(centerx - _width/2 < 0){  //添加节点后，超过画布的左边,纵向排列
						centerx = lastcenterx;
						centery = lastcentery + lasth/2 + _offsety + _liney + _height/2 + _textheight;
					}
				}
				
				var currentx = centerx - _width/2;
				var currenty = centery - _height/2;
				
				//起点坐标
				var startx = 0;
				var starty = 0;
				//终点坐标
				var endx = 0;
				var endy = 0;
				
				var $line = {};
				if(lastcenterx == centerx){   //说明2个节点是竖向对齐
					startx = lastcenterx;
					starty = lastcentery + lasth/2 + _offsety/2 + _textheight;
					endx = startx;
					endy = centery - _height/2 - _offsety/2;
				}else{   //横向对齐
					startx = lastcenterx + lastw/2 * direction + _offsetx/2 * direction;
					starty = lastcentery;
					endx = centerx - _width/2 * direction - _offsetx/2 * direction;
					endy = starty;
				}
				$line.sx = startx;
				$line.sy = starty;
				$line.ex = endx;
				$line.ey = endy;
				$lines.push($line);

				if(lastcenterx == centerx){  //说明当前节点是纵向，他之后的节点布局方向调转
					direction = direction * (-1);
				}
				
				lastcenterx = centerx;
				lastcentery = centery;
				lastw = _width;
				lasth = _height;
				_setnode.x = currentx;
				_setnode.y = currenty;
			}
			
			//计算归档节点的坐标
			if(_endNode){
				_endNode.w = width1;
				_endNode.h = height1;
				var centerx = lastcenterx + lastw/2 * direction + _offsetx * direction + _linex * direction + width1/2 * direction;
				var centery = lastcentery;
				
				if(direction == 1){
					if(centerx + width1/2 > _canvasWidth){  //添加节点后，超过画布的宽度，纵向排列
						centerx = lastcenterx;
						if(_iscreate){
							centery = lastcentery + lasth/2 + _offsety + _liney + height1/2;   //新建节点，归档前的一个节点为设置节点，下方没有文字，因此不需要_textheight
						}else{
							centery = lastcentery + lasth/2 + _offsety + _liney + height1/2 + _textheight;
						}
					}
				}else{
					if(centerx - width1/2 < 0){  //添加节点后，超过画布的左边,纵向排列
						centerx = lastcenterx;
						if(_iscreate){ 	//新建节点，归档前的一个节点为设置节点，下方没有文字，因此不需要_textheight
							centery = lastcentery + lasth/2 + _offsety + _liney + height1/2;  
						}else{
							centery = lastcentery + lasth/2 + _offsety + _liney + height1/2 + _textheight;
						}
					}
				}
				
				var currentx = centerx - width1/2;
				var currenty = centery - height1/2;
				
				//起点坐标
				var startx = 0;
				var starty = 0;
				//终点坐标
				var endx = 0;
				var endy = 0;
				
				var $line = {};
				if(lastcenterx == centerx){   //说明2个节点是竖向对齐
					startx = lastcenterx;
					if(_iscreate){	//新建节点，归档前的一个节点为设置节点，下方没有文字，因此不需要_textheight
						starty = lastcentery + lasth/2 + _offsety/2;
					}else{
						starty = lastcentery + lasth/2 + _offsety/2 + _textheight;
					}
					endx = startx;
					endy = centery - height1/2 - _offsety/2;
				}else{   //横向对齐
					startx = lastcenterx + lastw/2 * direction + _offsetx/2 * direction;
					starty = lastcentery;
					endx = centerx - width1/2 * direction - _offsetx/2 * direction;
					endy = starty;
				}
				$line.sx = startx;
				$line.sy = starty;
				$line.ex = endx;
				$line.ey = endy;
				if(lastispass == "true" || lastispass){
					$line.strokeStyle = "#E90B0A";
				}else{
					$line.strokeStyle = "#8c8c8c";
				}
				$lines.push($line);

				if(lastcenterx == centerx){  //说明当前节点是纵向，他之后的节点布局方向调转
					direction = direction * (-1);
				}
				
				lastcenterx = centerx;
				lastcentery = centery;
				lastw = _width;
				lasth = _height;
				_endNode.x = currentx;
				_endNode.y = currenty;
			}
			
			if(lastcentery + height1/2 + _textheight > _initCanvasHeight){   //超过画布的初始高度，调整画布的高度,15表示节点下方的文字的高度
				_canvasHeight = lastcentery + height1/2 + _textheight;
			}else{
				_canvasHeight = _initCanvasHeight;
			}
		}
		
		/**
		 * 计算现有的每个节点的位置，以及每条连接线的起止坐标
		 */
		var reckonPosition = function(){
			$atype = _data.signtype;
			if($atype == 2){   //依次逐个处理
				_orderProcessPosition();
			}else if($atype == 1){   //会签
				_sameProcessPosition();
			}
		};
		
		/**
		 * 初始化画布
		 */
		var initCanvas = function(){
			winWidth = jQuery(window).width();   //窗口宽度，即画布的宽度
			_maxWidth = winWidth;
			if(winWidth > 40){
				_maxWidth = winWidth - 40;
			}
			
			if(_maxWidth < _initWidth){   //保证画布有个最小的宽度
				_maxWidth = _initWidth;
			}
			
			_canvasWidth = _maxWidth * _coordinaterate;        //画布坐标的宽度
			_maxHeight = _canvasHeight/_coordinaterate;        //画布的高度
			
			var canvas = jQuery("#mainArea");
			if(canvas.length == 0){
				canvas = jQuery("<canvas></canvas>").attr("id","mainArea").attr("width",_canvasWidth).attr("height",_canvasHeight).css({width:_maxWidth,height:_maxHeight});
				if(_iscreate){
					canvas.addClass("main1");
				}else{   //上方预留更多空白空间
					canvas.addClass("main2");
				}
				_container.append(canvas);
			}else{
				canvas.attr("width",_canvasWidth).attr("height",_canvasHeight).css({width:_maxWidth,height:_maxHeight});
				_canvas = canvas[0];
				var $ctx = _canvas.getContext('2d');
				$ctx.clearRect(0, 0, _canvas.width, _canvas.height);
			}
			_canvas = canvas[0];
		};
		
		/**
		 * 获取点击时选中的节点类型
		 * 1：新建或者归档节点
		 * 2：设置节点
		 * 3：自由节点
		 * 0: 其他
		 */
		var getClickInfo = function(p){
			var snode = _data.start;
			var enode = _data.end;
			var setnode = _data.setnode;
			var freenodes = _data.nodes;
			var iscreate = _data.iscreate;
			
			var clicknode = null;
			
			/**
			 * 新建节点判断 
			 */
			var nx = snode.x;
			var ny = snode.y;
			var nw = snode.w;
			var nh = snode.h;
			
			var $type = 0;
			if(p.x >= nx && p.x <= nx + nw && p.y >= ny && p.y <= ny + nh){
				clicknode = snode;
				$type = 1;
			}
			
			/**
			 * 归档节点判断
			 */
			nx = enode.x;
			ny = enode.y;
			nw = enode.w;
			nh = enode.h;
			if(p.x >= nx && p.x <= nx + nw && p.y >= ny && p.y <= ny + nh){
				clicknode = enode;
				$type = 1;
			}
			
			/**
			 * 设置节点判断
			 */
			if(iscreate){
				nx = setnode.x;
				ny = setnode.y;
				nw = setnode.w;
				nh = setnode.h;
				if(p.x >= nx && p.x <= nx + nw && p.y >= ny && p.y <= ny + nh){
					clicknode = setnode;
					$type = 2;
				}
			}
			
			/**
			 * 自由节点判断
			 */
			for(var t = 0; t < freenodes.length; t++){
				var freenode = freenodes[t];
				nx = freenode.x;
				ny = freenode.y;
				nw = freenode.w;
				nh = freenode.h;
				
				if(p.x >= nx && p.x <= nx + nw && p.y >= ny && p.y <= ny + nh){
					clicknode = freenode;
					$type = 3;
				}
			}
			return {nodetype:$type,node: clicknode};
		}
		
		/**
		 * 点击事件时，鼠标的位置
		 */
		var getPointerPosition = function(e){
			var obj = e.currentTarget||document.activeElement;
			var position = {
				left:e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)),
	            top:e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop))
			};
		    return position;
		}
		
		/**
		 * 点击设置节点，弹出人员多选窗口
		 */
		var selectUser = function(){
			var $freenodes = _data.nodes;
			var $selectedids = "";
			for(var k = 0; k < $freenodes.length; k++){
				var $frnode = $freenodes[k];
				var $userid = $frnode.id;
				$selectedids += "," + $userid;
			}
			
			if($selectedids.length > 0){
				$selectedids = $selectedids.substr(1);
			}
			
			var dialog = new window.top.Dialog();
			dialog.Width = 648;
			dialog.Height = 600;
			dialog.currentWindow = window;
			dialog.Title = SystemEnv.getHtmlNoteName(3418,_languageid);
			dialog.maxiumnable = false;
			dialog.URL = "/systeminfo/BrowserMain.jsp?url=/hrm/resource/MutiResourceBrowser.jsp?selectedids=" + $selectedids;
			dialog.show();
			dialog.callbackfun = function (paramobj, cbdata, otherdata) {
				if (wuiUtil.getJsonValueByIndex(cbdata, 0) != "" && wuiUtil.getJsonValueByIndex(cbdata, 0) != "0" ) {
					var resourceids = wuiUtil.getJsonValueByIndex(cbdata, 0);
					var resourcename = wuiUtil.getJsonValueByIndex(cbdata, 1);
					
					var $nodes = _data.nodes;
					$nodes = [];  //清空数组
					
					if (resourceids.indexOf(",") == 0) {
						resourceids = resourceids.substr(1);
						resourcename = resourcename.substr(1);
					}
					jQuery.post("/workflow/request/GetFreeNodeUserAjax.jsp",{userids :resourceids },function(resdata){
						resdata = eval('(' + resdata + ')');
						for(var tt = 0; tt < resdata.length; tt++){
							var rdata = resdata[tt];
							var $node = {};
							$node.id = rdata.id;
							$node.text = rdata.text;
							$node.imgsrc = rdata.imgsrc;
							
							var linkname = "<a href=\"javaScript:openhrm(" + rdata.id + ");\" onclick=\"pointerXY(event);\">" + rdata.text + "</a>";
							$node.nodeOperatorName = linkname;
							$node.nodeOptType = 2;
							$nodes.push($node);
						}
						_data.nodes = $nodes;
						redraw();  //重新绘制流程图
					});
				}else{
					var $nodes = _data.nodes;
					$nodes = [];  //清空数组
					_data.nodes = $nodes;
					redraw();  //重新绘制流程图
				}
			}
		}
		
		/**
		 * 设置节点点击事件
		 */
		var clickevt = function(evt){
			var evt = evt ? evt : event;
			var position = getPointerPosition(evt);
			var canvaspos = jQuery(_canvas).offset();
			//将点击的坐标转换为画布中的坐标
			var point = {};
			var px = position.left - canvaspos.left;
			var py = position.top - canvaspos.top;
			point.x = px * _coordinaterate;
			point.y = py * _coordinaterate;
			
			var clickInfo = getClickInfo(point);       //点击的节点类型判断，1：新建或者归档节点，2：设置节点，3：自由节点，0：其他
			var ntype = clickInfo.nodetype;
			var clicknode = clickInfo.node;
			if(ntype == 1 || ntype == 3){   //新建或者归档节点，自由节点
				var dialogTop = position.top; 
				var dialogLeft = position.left; 
				
				var dialogWidth = jQuery('#dialog-box').width();
				if(dialogLeft + dialogWidth + 5 > winWidth){   //窗口右侧被遮挡
					dialogLeft = winWidth - dialogWidth - 5;
				}

				if(dialogLeft < 5){   //这样左侧会被遮挡，调整left值
					dialogLeft = 5;
				}
				
				var message = getShowMessage(clicknode);
				jQuery('#dialog-box').css({top:dialogTop, left:dialogLeft}).show(); 
				jQuery('#dialog-message').html(message); 
				if(evt.stopPropagation){
					evt.stopPropagation();
				}else{
					window.event.cancelBubble = true; 
				}
			}else if(ntype == 2){   //如果是设置节点
				selectUser();
			}/**else if(ntype == 3){  //点击的自由节点
				var nid = clicknode.id;
				var objheight = _height/_coordinaterate;
				pointerXY4picture(evt,objheight);
				openhrm(nid);
			}*/
		}
		
		/**
		 * 注册事件
		 */
		var registerevt = function(){
			jQuery(_canvas).unbind("click").bind("click",function(){
				clickevt(event);
			});
		}
		
		/**
		 * 绘制流程图
		 */
		var draw = function(){
			var snode = _data.start;
			var enode = _data.end;
			var setnode = _data.setnode;
			var lines = _data.lines;
			var nodes = _data.nodes;
			var box = _data.box;
			var context = _canvas.getContext("2d");

			$atype = _data.signtype;
			if($atype == 1){   //会签时，绘制包容所有自由节点的块区域
				drawBox(context,box,nodes,setnode,_textstyle,_nodecover2);
			}else{
				/**
				 * 绘制设置节点
				 */
				if(setnode){
					drawSetNode(context,setnode); 
				}
				
				/**
				 * 绘制自由节点
				 */
				for(var j = 0; j < nodes.length; j++){
					var $freenode = nodes[j];
					drawFreeNode(context,$freenode,_textstyle,_nodecover1);
				}
			}
			
			/**
			 * 绘制开始节点
			 */
			var nodeBase = new NodeBase();
			for(key in snode){
				nodeBase[key] = snode[key];
			}
			drawNode(context,nodeBase,_textstyle);
			
			
			
			/**
			 * 绘制结束节点
			 */
			nodeBase = new NodeBase();
			for(key in enode){
				nodeBase[key] = enode[key];
			}
			drawNode(context,nodeBase,_textstyle);   
			
			/**
			 * 绘制节点的连接线
			 */
			for(var i = 0; i < lines.length; i++){
				var linkLine = lines[i];
				var sx = linkLine.sx;
				var sy = linkLine.sy;
				var ex = linkLine.ex;
				var ey = linkLine.ey;
				var _strokeStyle = linkLine.strokeStyle;
				
				var sn = {};
				sn.x = sx;
				sn.y = sy;
				
				var en = {};
				en.x = ex;
				en.y = ey;
				
				drawArrowLine(context,sn,en,_strokeStyle);
			}
			
			registerevt();
		}
		
		var redraw = function(){
			reckonPosition();
			initCanvas();
			draw();
		}
		
		reckonPosition();
		initCanvas();   //初始化画布
		
		return {
			/**
			 * 设置自由流程的节点，主要是重新设置操作者时使用
			 */
			setFreeNodes: function(_nodes){
				_data.nodes = _nodes;
			},
			getData: function(){
				return _data;
			},
			/**
			 * 设置审批的类型，1：会签，2：依次逐个处理
			 */
			setSigntype : function(_atype){
				_data.signtype = _atype;
			},
			getSigntype : function(){
				var _atype = _data.signtype;
				return _atype;
			},
			/**
			 * 绘制自由节点的流程图
			 */
			draw: function(){
				draw();
			},
			/***
			 * 重新绘制流程图
			 */
			redraw: function(){
				redraw();
			},
			/**
			 * 将数据保存到父窗口
			 */
			saveWorkflowPicture : function(parentWin,parentDiv){
				var pictureDiv = jQuery("#workflowPictureInfo")[0];
				
				var $nodes = _data.nodes;   //自由流程节点
				var $atype = _data.signtype;   //审批类型
				var $freenodeid = _data.nodeid;
				var $freenodename = _data.nodename;
				var operators = "";
				var operatornames = "";
				
				for(var i = 0; i < $nodes.length; i++){
					var tempnode = $nodes[i];
					var nid = tempnode.id;
					var ntext = tempnode.text;
					
					operators += nid + ",";
					operatornames += ntext + ",";
				}
				
				if(operators != ""){
					operators = operators.substring(0, operators.length - 1);
				}
				if(operatornames != ""){
					operatornames = operatornames.substring(0, operatornames.length - 1);
				}
				
				parentDiv.empty();   //先清空父窗口隐藏域中的内容
				var freeWorkflowOptions = jQuery.extend({},_data);   //复制一份对象的数据
				parentWin.$freeWorkflowOptions = freeWorkflowOptions;   //存入父窗口
				if(!$nodes || $nodes.length == 0){   //没有设置自由流程
					parentDiv.html("<input type='hidden' name='freeNode' value='0'/>");
				}else{
					//将数据存入父窗口的隐藏域中
					jQuery("#operators_1",pictureDiv).val(operators);
					jQuery("#operatornames_1",pictureDiv).val(operatornames);
					jQuery("#Signtype_1",pictureDiv).val($atype);
					jQuery("#nodeid_1",pictureDiv).val($freenodeid);
					jQuery("#nodename_1",pictureDiv).val($freenodename);
					
					parentDiv.html(jQuery(pictureDiv).html());
					parentDiv.append("<input type='hidden' name='freeWorkflowChanged' value='true' />");
				}
			}
		}
	}
})(jQuery);