(function () {

//画布
var canvas ;
var context ;
//蒙版
var canvas_bak;
var context_bak;



var canvasWidth = 880;
var canvasHeight = 718;
var recordPencilResult={};
var recordPencilObj={};
var recordPencilTotal=[];
var recordPencilId;

var CanvasConInfo;







    if (document.documentElement.clientWidth>1366){
        canvasWidth = 880;
        canvasHeight = 718;


    }else if(document.documentElement.clientWidth<=1366&&document.documentElement.clientWidth>1280){
        canvasWidth = 626;
        canvasHeight = 700;


    }else if (document.documentElement.clientWidth<=1280){
        canvasWidth = 581;
        canvasHeight = 700;






    }

    function xyToPer(x,y){
    	var recordPencilObject=new Object();
        recordPencilObject.w=parseInt(x/canvasWidth*10000)/100;
        recordPencilObject.h=parseInt(y/canvasHeight*10000)/100;
        console.log("xyToPer +++++++++++++++++++++++++++++++++++++++++++++++++");
        console.log(recordPencilObject);
        return recordPencilObject;
	}

var canvasTop;
var canvasLeft;

//画笔大小
var size = 1;
var color  = '#b8242a';

//画图形
    function draw_graph(graphType,obj){

	//把蒙版放于画板上面
	$("#canvas_bak").css("z-index",1);
	//先画在蒙版上 再复制到画布上


	chooseImg(obj);
	var canDraw = false;

	var startX;
	var startY;

	//鼠标按下获取 开始xy开始画图
	var mousedown = function(e){
		scroolTop = $(window).scrollTop();
		scroolLeft = $(window).scrollLeft();
		canvasTop = $(canvas).offset().top - scroolTop;
		canvasLeft = $(canvas).offset().left - scroolLeft;

        context.strokeStyle= $('#chooseColor')[0].title;
        context_bak.strokeStyle=  $('#chooseColor')[0].title;
		context_bak.lineWidth = size;

		startX = e.clientX - canvasLeft;
		startY = e.clientY - canvasTop;
		context_bak.moveTo(startX ,startY );
		canDraw = true;





		if(graphType == 'pencil'){

			context_bak.beginPath();
			// console.log("=======================================++++++++++++++++++++++++++++++++++");


		}else if(graphType == 'circle'){
			context.beginPath();
			context.moveTo(startX ,startY );
			context.lineTo(startX +1 ,startY+1);
			context.stroke();

		}else if(graphType == 'rubber'){
			// context.clearRect(startX - size * 10 ,  startY - size * 10 , size * 20 , size * 20);
		}
		// 阻止点击时的cursor的变化，draw
		e=e||window.event;
		e.preventDefault();
	};

	//鼠标离开 把蒙版canvas的图片生成到canvas中
	var mouseup = function(e){
		e=e||window.event;
		canDraw = false;

		console.log("鼠标松开===================================================");
        recordPencilResult.type=0;
        recordPencilResult.curPage=1;
        recordPencilResult.parentId=0;
        recordPencilResult.pointGroup=recordPencilTotal;
        recordPencilResult.color=$('#chooseColor')[0].title;
        recordPencilResult.thickness=size;
        console.log("发送canvas绘图=================================");
		console.log(recordPencilResult);
        client.sendInsertAnnotaion(recordPencilResult);

		if (canDraw = false){
            recordPencilTotal.splice(0,recordPencilTotal.length);
		}else{
            recordPencilTotal=[];
		}
		console.log("当前画笔--------------------------");
		console.log(recordPencilTotal);

	};

	//选择功能按钮 修改样式
	function chooseImg(obj){
		var imgAry  = $(".draw_controller li");
		for(var i=0;i<imgAry.length;i++){
			$(imgAry[i]).removeClass('active');
			$(imgAry[i]).addClass('normal');
		}
		$(obj).removeClass("normal");
		$(obj).addClass("active");
	}

	// 鼠标移动
	var  mousemove = function(e){
		scroolTop = $(window).scrollTop();
		scroolLeft = $(window).scrollLeft();
		canvasTop = $(canvas).offset().top - scroolTop;
		canvasLeft = $(canvas).offset().left - scroolLeft;
		e=e||window.event;
		var x = e.clientX   - canvasLeft;
		var y = e.clientY  - canvasTop;
		//方块  4条直线搞定
		if(graphType == 'square'){
			if(canDraw){
				context_bak.beginPath();
				clearContext();
				context_bak.moveTo(startX , startY);
				context_bak.lineTo(x  ,startY );
				context_bak.lineTo(x  ,y );
				context_bak.lineTo(startX  ,y );
				context_bak.lineTo(startX  ,startY );
				context_bak.stroke();

			}
		//直线
		}else if(graphType =='line'){
			if(canDraw){
				context_bak.beginPath();
				clearContext();
				context_bak.moveTo(startX , startY);
				context_bak.lineTo(x  ,y );
				context_bak.stroke();

				console.log("--------------------------------------------------------------");
                console.log(startX,startY);
                console.log(x,y);

                var lineData={};
                var arr= new Array();
                var start={};
                start.x=startX;
                start.y=startY;
                var end={};
                end.x=x;
                end.y=y;

                lineData.type=0;
                lineData.color=$('#chooseColor')[0].title;
				arr.unshift(start,end);
                lineData.pointGroup=arr;
                console.log("2222222222222222222222222222222222222222");
                console.log(lineData);

			}
		//画笔
		}else if(graphType == 'pencil'){
			if(canDraw){
				context_bak.lineTo(Math.round(e.clientX-canvasLeft),Math.round(e.clientY-canvasTop));
				context_bak.stroke();

                //  console.log("铅笔工具开始----------------------->");
                var mouseX=e.offsetX;
                var mouseY=e.offsetY;

                console.log("---------------------------------------------------");
                console.log(Math.round(e.clientX-canvasLeft),Math.round(e.clientY-canvasLeft))
                console.log(mouseX,mouseY);
                recordPencilObj=xyToPer(mouseX,mouseY);
                recordPencilTotal.push(recordPencilObj);


			}
		//圆 未画得时候 出现一个小圆
		}else if(graphType == 'circle'){
			clearContext();
			if(canDraw){
				// 鼠标点击移动时产生的圆
				context_bak.beginPath();
				var radii = Math.sqrt((startX - x) *  (startX - x)  + (startY - y) * (startY - y));
				context_bak.arc(startX,startY,radii,0,Math.PI * 2,false);
				context_bak.stroke();
			}else{
				context_bak.beginPath();
				context_bak.arc(x,y,20,0,Math.PI * 2,false);
				context_bak.stroke();
			}
		//涂鸦 未画得时候 出现一个小圆
		}else if(graphType == 'handwriting'){
			if(canDraw){
				// 鼠标点击移动产生的圆圈
				context_bak.beginPath();
                context_bak.strokeStyle= $('#chooseColor')[0].title;
                context_bak.fillStyle= $('#chooseColor')[0].title;

				//计算当前点和上一个点的距离
				var tmpX = x - startX;
				var tmpY = y - startY;
				var dist = Math.sqrt(Math.pow(tmpX, 2) + Math.pow(tmpY, 2));
				dist = Math.round(dist);

				//定义递增点
				var ix = tmpX / dist;
				var iy = tmpY / dist;

				//定义绘制点
				var currX = startX;
				var currY = startY;
				for(var i = 0; i < dist; i++) {
					context_bak.arc(currX, currY, size * 10, 0, Math.PI * 2, false);

					currX += ix;
					currY += iy;
				}

				context_bak.fill();
				context_bak.stroke();
				context_bak.restore();

				//保存上一次的点
				startX = x;
				startY = y;
			}else{
				clearContext();
				context_bak.beginPath();
				context_bak.strokeStyle = color;
				context_bak.fillStyle  = color;
				context_bak.arc(x,y,size*10,0,Math.PI * 2,false);
				context_bak.fill();
				context_bak.stroke();
			}
		//橡皮擦 不管有没有在画都出现小方块 按下鼠标 开始清空区域
		}else if(graphType == 'rubber'){
			// context_bak.lineWidth = 1;
			// clearContext();
			// context_bak.beginPath();
			// context_bak.strokeStyle =  '#000000';
			// context_bak.moveTo(x - size * 10 ,  y - size * 10 );
			// context_bak.lineTo(x + size * 10  , y - size * 10 );
			// context_bak.lineTo(x + size * 10  , y + size * 10 );
			// context_bak.lineTo(x - size * 10  , y + size * 10 );
			// context_bak.lineTo(x - size * 10  , y - size * 10 );
			// context_bak.stroke();
			// if(canDraw){
			// 	context.clearRect(x - size * 10 ,  y - size * 10 , size * 20 , size * 20);
            //
			// }





		}
	};


	//鼠标离开区域以外 除了涂鸦 都清空
	var mouseout = function(){
		if(graphType != 'pencil'){
			console.log("清屏-------------------------------------------------")
			clearContext();
		}
	}

	$(canvas_bak).unbind();
	$(canvas_bak).bind('mousedown',mousedown);
	$(canvas_bak).bind('mousemove',mousemove);
	$(canvas_bak).bind('mouseup',mouseup);
	$(canvas_bak).bind('mouseout',mouseout);
}


    //绘图
    function drawCanvas(canvasInfo) {
    	if(canvasInfo==null){
    		return;
		}


		//1.判断是否清除canvas
		if (canvasInfo.isFresh){
            clearContextCan('1');
		}


		//2.绘制标注数据
        var canvasMsgArr=canvasInfo.annotaionItems;
        console.log(canvasMsgArr.length);
        if (canvasMsgArr&&canvasMsgArr.length>0){
            for (var i=0;i<canvasMsgArr.length;i++){
                var canvasMsgItem=canvasMsgArr[i];
                if(canvasMsgItem){
                    switch (canvasMsgItem.type){
                        //pencil
                        case 0:
                        	draw_pencil(canvasMsgItem);
                        	break;
                        case 1:
                            //draw_pencil(canvasMsgItem);
                            break;
                        case 2:
                            //draw_pencil(canvasMsgItem);
                            break;
                        case 3:
                            //draw_pencil(canvasMsgItem);
                            break;
                        case 4:
                            //draw_pencil(canvasMsgItem);
                            break;
						default:
							break;
                    }
                }
            }
        }








    }


    //只绘制铅笔

	function draw_pencil(_canvasMsgItem) {
    	if(_canvasMsgItem){

            context_bak.beginPath();
            context_bak.lineWidth = size;
            context_bak.color=String(_canvasMsgItem.color);


            context.strokeStyle= String(_canvasMsgItem.color);
            context_bak.strokeStyle=  String(_canvasMsgItem.color);
            var point=_canvasMsgItem.pointGroup[0];
            context_bak.moveTo((point.w)*canvasWidth/100,(point.h)*canvasHeight/100);

    		for (var j=1;j<_canvasMsgItem.pointGroup.length;j++){
                point=_canvasMsgItem.pointGroup[j];
                context_bak.lineTo((point.w)*canvasWidth/100,(point.h)*canvasHeight/100);
			}

            context_bak.stroke();
		}

    }

    function clearContext(type){
        client.sendDeleteAllAnnotation();

	// if(!type){
	// 	context_bak.clearRect(0,0,canvasWidth,canvasHeight);
     //    console.log("执行清空层------------------------------1");
     //    clearCanvasCon(CanvasConInfo);
     //    // clearCanvasCon(CanvasConInfoTran);
    //
    //
	// }else{
     //    context.clearRect(0,0,canvasWidth,canvasHeight);
     //    context_bak.clearRect(0,0,canvasWidth,canvasHeight);
     //    console.log("执行清空层------------------------------2");
     //    clearCanvasCon(CanvasConInfo);
    //
	// }
}

//清空层
    function clearContextCan(type){
        if(!type){
            context_bak.clearRect(0,0,canvasWidth,canvasHeight);


        }else{
            context.clearRect(0,0,canvasWidth,canvasHeight);
            context_bak.clearRect(0,0,canvasWidth,canvasHeight);

        }
    }

    function clearDocCanvas() {
        console.log("清空Doc---canvas");

        var docCanvas=document.getElementById("docCanvas");
        var ctxC=docCanvas.getContext("2d");

        ctxC.clearRect(0,0,docCanvas.style.width,docCanvas.style.height);

        console.log("已清空=====>");

    }
    //初始化
    function initCanvas() {
        canvas = document.getElementById("canvas");
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        context = canvas.getContext('2d');

        canvasTop = $(canvas).offset().top;
        canvasLeft = $(canvas).offset().left;

        canvas_bak = document.getElementById("canvas_bak");
        canvas_bak.width = canvasWidth;
        canvas_bak.height = canvasHeight;
        context_bak = canvas_bak.getContext('2d');
        console.log("initCanvas-----------------------------",canvas_bak.height);
    }
    function clearCanvasCon(msg) {
    	console.log("要清空了============================================");
    	console.log(msg);
        var paramInfo={};
    	for(var i=0;i<msg.length;i++){
            paramInfo.itemIdx=msg[i];
            console.log("遍历同步的数组");
            console.log(paramInfo);
            client.sendDeleteAnnotaion(paramInfo)
		}

    }


window.draw={
    initCanvas:initCanvas,
    draw_graph:draw_graph,
    clearContext:clearContext,
    recordPencilResult:recordPencilResult,
    drawCanvas:drawCanvas,
    clearCanvasCon:clearCanvasCon,
    clearContextCan:clearContextCan,

    clearDocCanvas:clearDocCanvas
};
})();