var i=2
function initDrawReact (id,fn) {
	console.log("入口")
	console.log("id="+id)
    var drawArear = document.getElementById(id); // 获取画布元素
    // 创建矩形框
    var drawReact = document.createElement('div');
    drawReact.id =id+'_box'
    drawReact.style.boxSizing = 'border-box'
    drawReact.style.border = '1px solid red'
    drawReact.style.position = 'absolute'
    drawReact.style.display = 'none'
    drawArear.appendChild(drawReact)
    // 绑定鼠标事件--onmousedown
    drawArear.onmousedown = function ($event) {
		document.ondblclick=function($event){//双击事件
				if(i%2==0){
					i=1;
					 window.videos.fullScreen();
				}else{
					i=2;
					 window.videos.exitScreen();
				}
		}
		
		var is3D=localStorage.getItem("threeD");
		if(is3D=='false'|| is3D=='' || is3D==null){
			return false;
		}
		
		if($event.button=='2'){
			return false;
		}
        drawArear = document.getElementById(id); // 获取画布元素
        // 初始化
        var drawReact = document.getElementById(id+'_box'); // 获取矩形框元素
        var areaInfo = drawArear.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置
        var height=1000/areaInfo.height;//分为100分
        var width=1000/areaInfo.width;
        var reactWidth, reactHeight, reactTop, reactLeft; // 定义矩形框的宽、高、top、left
        // xy坐标是以画布的左上角为原点，方向矢量以向下和向右为正方向。
        var beginPoint = {}; // 标记起点
        var endPoint = {}; // 标记终点
			drawReact.style.zIndex="20000";
            drawReact.style.display = 'block'; // 进入画布按下鼠标显示默认矩形框
        // 鼠标按下的位置作为矩形框的起点，横纵坐标记为 x0, y0
        beginPoint = { x: $event.clientX - areaInfo.x, y: $event.clientY - areaInfo.y }
        // 起点的横坐标
        var x0 = $event.clientX - areaInfo.x;
        // 起点的纵坐标
        var y0 = $event.clientY - areaInfo.y;
        // 绑定鼠标事件--onmousemove
        document.onmousemove = function ($event) {
            // 终点的横坐标
            var x1 = $event.clientX - areaInfo.x;
            // 终点的纵坐标
            var y1 = $event.clientY - areaInfo.y;
            // 对终点相对于起点的位置进行分类讨论
            if (x1 >= x0 && y1 < y0) {
                // x 越界处理
                reactWidth = $event.clientX >= areaInfo.right ? areaInfo.width - x0 : x1 - x0;
                reactLeft = x0;
                // y 越界处理
                reactHeight = $event.clientY <= areaInfo.top ? y0 : y0 - y1;
                reactTop = $event.clientY <= areaInfo.top ? 0 : y1;
                // 终点
                endPoint = { x: x0 + reactWidth, y: y0 - reactHeight };
            } else if (x1 < x0 && y1 < y0) {
                // x 越界处理
                reactWidth = $event.clientX <= areaInfo.left ? x0 : x0 - x1;
                reactLeft = $event.clientX <= areaInfo.left ? 0 : x1;
                // y 越界处理
                reactHeight = $event.clientY <= areaInfo.top ? y0 : y0 - y1;
                reactTop = $event.clientY <= areaInfo.top ? 0 : y1;
                // 终点
                endPoint = { x: x0 - reactWidth, y: y0 - reactHeight };
            } else if (x1 < x0 && y1 >= y0) {
                // x 越界处理
                reactWidth = $event.clientX <= areaInfo.left ? x0 : x0 - x1;
                reactLeft = $event.clientX <= areaInfo.left ? 0 : x1;
                // y 越界处理
                reactHeight = $event.clientY >= areaInfo.bottom ? areaInfo.height - y0 : y1 - y0;
                reactTop = y0;
                // 终点
                endPoint = { x: x0 - reactWidth, y: y0 + reactHeight };
            } else if (x1 >= x0 && y1 >= y0) {
                // x 越界处理
                reactWidth = $event.clientX >= areaInfo.right ? areaInfo.width - x0 : x1 - x0;
                reactLeft = x0
                // y 越界处理
                reactHeight = $event.clientY >= areaInfo.bottom ? areaInfo.height - y0 : y1 - y0;
                reactTop = y0;
                // 终点
                endPoint = { x: x0 + reactWidth, y: y0 + reactHeight };
            }
            drawReact.style.width = reactWidth + 'px'; // 宽
            drawReact.style.height = reactHeight + 'px'; // 高
            drawReact.style.top = reactTop + 'px';
            drawReact.style.left = reactLeft + 'px';
        }
        // 绑定鼠标事件--onmousedown
        document.onmouseup = function ($event) {
            document.onmousemove = null
            document.onmouseup = null
            // 回调
            var options = { reactWidth, reactHeight, reactTop, reactLeft, beginPoint, endPoint ,id}

            options.beginPoint.x=options.beginPoint.x*width;
            options.beginPoint.y=options.beginPoint.y*height;
            options.endPoint.x=options.endPoint.x*width;
            options.endPoint.y=options.endPoint.y*height;
            // console.log( options.beginPoint.x);
            // console.log( options.beginPoint.y);
            // console.log( options.endPoint.x);
            // console.log( options.endPoint.y);
            fn(options)
        }
    }
}