/**
 公用画线图用
 此JS函数基于EXCANVAS。JS JQUERY。JS
 @author wangyong
 @email wrong1111@126.com
 @version 1.0
*/
/**
 整个区域内，每一行只有一列北景色是联线点。
 画布定位， 竖直方向联线
 color 联线点的背景色
 top 相对于顶部需要控制移动量
*/
function paintDivOnly(color,top){
	  var arry = $(color).get();
	  var size = $(arry).size();
	  var pre = null;//前一个对象
	  if(size >1) pre = arry[0];
	  var curId = color.replace(/\./g,'');
	  for(var i=1;i<size;i++){
	    	var cur = arry[i];
	    	var x0 =  parseInt(pre.offsetLeft);//宽
		   	var y0 = parseInt(pre.offsetTop);//高
		   	var x1 = parseInt(cur.offsetLeft);//宽
		   	var y1 = parseInt(cur.offsetTop);//高
		  	if(top == null) top =0;
		  	paintDivs(pre,cur,top,0,curId,i);
	    	pre = cur;
	  }
}
/**
 整个区域内，每一行只有一列北景色是联线点。
 画布定位， 竖直方向联线
 color 联线点的背景色
 top 相对于顶部需要控制移动量
*/
function paintDivNotDownOnly(color,top){
	  var arry = $(color).get();
	  var size = $(arry).size();
	  var pre = null;//前一个对象
	  if(size >1) pre = arry[0];
	  var curId = color.replace(/\./g,'');
	  for(var i=1;i<size;i++){
	    	var cur = arry[i];
	    	var x0 =  parseInt(pre.offsetLeft);//宽
		   	var y0 = parseInt(pre.offsetTop);//高
		   	var x1 = parseInt(cur.offsetLeft);//宽
		   	var y1 = parseInt(cur.offsetTop);//高
		  	if(top == null) top =0;
		  	if(x0 != x1){  
		  		paintDivs(pre,cur,top,10,curId,i);
		  	}
	    	pre = cur;
	  }
}

/**
 整个区域内，每一行只有一列北景色是联线点。
 连线， 进行竖直方向联线
 color 联线点的背景色
*/
function drawDivOnly(color){
  var arry = $(color).get();
  var size = $(arry).size();
  var pre = null;//前一个对象
  if(size >1) pre = arry[0];
  var curId = color.replace(/\./g,'');
  for(var i=1;i<size;i++){
     var cur = arry[i];
     var x0 =  parseInt(pre.offsetLeft);//宽
	 var y0 = parseInt(pre.offsetTop);//高
	 var x1 = parseInt(cur.offsetLeft);//宽
	 var y1 = parseInt(cur.offsetTop);//高
	 drawDivs(pre,cur,curId+""+i);
     pre = cur;
  }
}
/**
 整个区域内，每一行只有一列北景色是联线点。
 连线， 进行竖直方向联线
 color 联线点的背景色
*/
function drawDivNotDownOnly(color){
  var arry = $(color).get();
  var size = $(arry).size();
  var pre = null;//前一个对象
  if(size >1) pre = arry[0];
  var curId = color.replace(/\./g,'');
  for(var i=1;i<size;i++){
     var cur = arry[i];
     var x0 =  parseInt(pre.offsetLeft);//宽
	 var y0 = parseInt(pre.offsetTop);//高
	 var x1 = parseInt(cur.offsetLeft);//宽
	 var y1 = parseInt(cur.offsetTop);//高
	 if(x0 != x1) 
	 	drawDivs(pre,cur,curId,i);
     pre = cur;
  }
}

/***
   生成以curId为唯一键的div画布.
  @param pre 前一坐标点对象<br>
         next 当前坐标点对象
         top 控制距离顶部距离 px
         left 控制距左边距离
         curId 画布id值，唯一
  
**/
function paintDivs(pre,next,top,left,curId,i){
      var x0 =  parseInt(pre.offsetLeft);//宽
	  var y0 = parseInt(pre.offsetTop);//高
	  var x1 = parseInt(next.offsetLeft);//宽
	  var y1 = parseInt(next.offsetTop);//高
	  //画布左上角坐标。。如果点在起点在左，那么第一个坐标的X点《第二点的X点。反之，在右，第二个坐标的X点》第一个坐标X点。
	  //如果是同一列，那么二者X坐标点应该是相同的。。
	  var w0 =0;//宽
	  var h0 = 0;//高
	  var width = 0;
	  var height = 0;
	  var f = -1;
	  if(left==null) left=0;
	  left = left+10;
	  if((x0 - x1)>0) f = -1;//第二个坐标点位于左，第一个坐标位于右。
	  else if((x0-x1)==0) f = 0;//第二个坐标点与第一个坐标点，在同一列。
	  else if((x0-x1)<0) f =1;//第二个坐标点位于右。第一个坐标位于左。
	  if(f == 1){
	     w0 = x0 + parseInt(pre.clientWidth)/2 ;//宽度 2
		 h0 = y0+parseInt(pre.clientHeight)/2;//2
		 width = (x1 - x0) ;
		 height = (y1-y0);
	  }else if(f == 0){
	      h0 = y0 +parseInt(pre.clientHeight)/2;//2
		  w0 = x0;//2
		  width = parseInt(pre.clientWidth);
		  height = (y1 - y0) ;
	  }else if(f == -1){
	     w0 = x1+parseInt(next.clientWidth)/2;//2
		 h0 = y0 +parseInt(next.clientHeight)/2;//2
		 width =  x0 - x1 ;
		 height = (y1-y0);
	  }
	  w0 = w0 +left;
	  h0 = h0 +top;
	  document.write("<canvas id="+curId+""+i+" width="+width+" height="+height+" class=n"+curId+" style='position:absolute; visibility: visible;top:"+h0+"px;left:"+w0+"px;'></canvas>");
	  drawDivs(pre,next,curId,i);
}

/***
把画布中的点，连线，显示出来
@para pre 前一坐标点对象
		next 当前坐标点对象
		curId 需要连线画布id
*/
function drawDivs(pre,next,curId,i){
	  var x0 =  parseInt(pre.offsetLeft);//宽
	  var y0 = parseInt(pre.offsetTop);//高
	  var x1 = parseInt(next.offsetLeft);//宽
	  var y1 = parseInt(next.offsetTop);//高
	  //画布左上角坐标。。如果点在起点在左，那么第一个坐标的X点《第二点的X点。反之，在右，第二个坐标的X点》第一个坐标X点。
	  //如果是同一列，那么二者X坐标点应该是相同的。。
	  var w0 =0;//宽
	  var h0 = 0;//高
	  var width = 0;
	  var height = 0;
	  var left = -1;
	  if((x0 - x1)>0) left = -1;//第二个坐标点位于左，第一个坐标位于右。
	  else if((x0-x1)==0) left = 0;//第二个坐标点与第一个坐标点，在同一列。
	  else if((x0-x1)<0) left =1;//第二个坐标点位于右。第一个坐标位于左。
	  if(left == 1){
	     w0 = 0 ;//高度 
		 h0 = 0;
		 width = (x1 - x0);
		 height = y1-y0;
	  }else if(left == 0){
	     w0 = parseInt(pre.clientWidth)/2;
	     h0 = 0 ;
		 width = parseInt(pre.clientWidth)/2;
		 height = (y1 - y0) ;
	  }else if(left == -1){
	     w0 = x0-x1;
		 h0 = 0 ;
		 width =  0;
		 height = (y1-y0);
	  }
	drawLine(w0,h0,width,height,curId+""+i);
}

/**
 把画布中的位置画线，显示出来
  x0  起点坐标 X
  Y0  起点坐标 Y
  X1  终点坐标 X
  Y1  终点坐标 Y
  ID  画布ID
  COLOR 线颜色 默认为 green
  lineWidth 线大小。默认为1
 **/
 function drawLine(x0,y0,x1,y1,id,color,lineWidth){
		var ctxt =null;
		var c = document.getElementById(id);
		if(c.getContext){
			ctxt = c.getContext('2d');
		}else{
			c=G_vmlCanvasManager.initElement(c);
			//G_vmlCanvasManager.init();
			ctxt = c.getContext('2d');
		}
		ctxt.strokeStyle =color==null?"green":color;
		ctxt.lineWidth = lineWidth==null?1:lineWidth;
		ctxt.beginPath();
	    ctxt.moveTo(x0 , y0);
	    ctxt.lineTo(x1, y1);
	    ctxt.closePath();
	    ctxt.stroke();
 }
   //带折线
 function nolines(obj,n,color){
    var isH = $("canvas[class=n"+color+"]");
    if(obj.checked){
      // if( $("canvas[name="+n+"]").css("visibility","visible")!=null) return;
      if(typeof(isH)!='undefined' && typeof(isH)!=null&&isH.length>0){
        $("canvas[class=n"+color+"]").css("visibility","visible");
        return;
      }
    	paintDivOnly("."+color,40,n);
      //隐藏 
       //$("canvas").css("visibility","hidden");
    }else {
      //显示
       //$("canvas").css("visibility","visible");
       $("canvas[class=n"+color+"]").css("visibility","hidden");
      
    }
 }
  //不带折线
 function noline(obj){
    if(obj.checked){
      //隐藏 
       $("canvas").css("visibility","hidden");
    }else {
      //显示
       $("canvas").css("visibility","visible");
    }
 }
       //隐藏遗漏数据
 function showEls(obj){
   if(obj.checked){
    //隐藏
     $(".ssqel").css("color","#FFF8F8");
     $(".ssqel_l").css("color","#FFF8F8");
     $(".bg_22_l").css("color","#FFF8F8");
   }else{
     $(".ssqel").css("color","");
     $(".ssqel_l").css("color","");
     $(".bg_22_l").css("color","");
   }
 
 }