var i=2
let videostart=true;
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;
		// 			$("#windowbox").fullScreen()
		// 		}else{
		// 			i=2;
		// 			$("#windowbox").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)
        }
    }
}


document.addEventListener('DOMContentLoaded', function() {
	const windowbox = document.getElementById('windowbox');
	const fullscreenElement = document.getElementById('fullscreenElement');
	const contextMenu = document.getElementById('custom-context-menu');
	
	// 全屏状态变化检测
	document.addEventListener('fullscreenchange', handleFullscreenChange);
	document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
	document.addEventListener('msfullscreenchange', handleFullscreenChange);
	
	function handleFullscreenChange() {
		const isFullscreen = document.fullscreenElement || 
							document.webkitFullscreenElement || 
							document.msFullscreenElement;
		console.log('全屏状态变化:', isFullscreen ? '进入全屏' : '退出全屏');
	}
	
	// 自定义右键菜单实现
	let menuTarget = null;
	
	// 禁用默认右键菜单
	document.addEventListener('contextmenu', function(e) {
		// 在视频上右键时才显示自定义菜单
		console.log("target",e.target);
		if(videostart){
			$("#start_video").css("display","");
			$("#end_video").css("display","none");
		}else{
			$("#start_video").css("display","none");
			$("#end_video").css("display","");
		}
		
		if (e.target === windowbox || e.target === fullscreenElement ||   e.target === videoPlayer)   {
			e.preventDefault();
			e.stopPropagation();
			menuTarget = e.target;
			showContextMenu(e);
			initContextMenu();
		}
	});
	
	// 显示自定义菜单（全屏兼容版）
	function showContextMenu(e) {
		const x = e.clientX;
		const y = e.clientY;
		
		// 全屏模式下特殊处理坐标
		let adjustedX = x;
		let adjustedY = y;
		
		// 检查是否在全屏模式下
		const isFullscreen = document.fullscreenElement || 
						   document.webkitFullscreenElement || 
						   document.msFullscreenElement;
		
		if (isFullscreen) {
			// 全屏模式下使用layerX/layerY获取相对坐标
			adjustedX = e.layerX || e.offsetX || x;
			adjustedY = e.layerY || e.offsetY || y;
			
			// 确保菜单不会超出全屏元素边界
			const rect = isFullscreen.getBoundingClientRect();
			const menuWidth = contextMenu.offsetWidth;
			const menuHeight = contextMenu.offsetHeight;
			
			if (adjustedX + menuWidth > rect.width) {
				adjustedX = rect.width - menuWidth - 10;
			}
			
			if (adjustedY + menuHeight > rect.height) {
				adjustedY = rect.height - menuHeight - 10;
			}
			
			// 全屏模式下需要将菜单附加到全屏元素内部
			isFullscreen.appendChild(contextMenu);
		} else {
			// 非全屏模式下附加到body
			document.body.appendChild(contextMenu);
		}
		
		contextMenu.style.left = adjustedX + 'px';
		contextMenu.style.top = adjustedY + 'px';
		contextMenu.style.display = 'block';
	}
	
	/* // 菜单项点击处理
	contextMenu.addEventListener('click', function(e) {
		console.log(111111111111);
		const menuItem = e.target.closest('.context-menu-item');
		console.log(22222222222);
		console.log("menuItem",menuItem);
		if (!menuItem) return;
		
		const action = menuItem.getAttribute('data-action');
		console.log(333333);
		console.log("action",action);
		switch (action) {
			case 'copy':
				console.log('执行copy操作');
				break;
			case 'paste':
				console.log('执行paste操作');
				break;
			case 'exit-fullscreen':
				exitFullscreen();
				break;
		}
		
		contextMenu.style.display = 'none';
	});*/
	
	// 替换原来的菜单事件处理代码
	function initContextMenu() {
	    // 1. 确保菜单元素可以接收事件
	    contextMenu.style.pointerEvents = 'auto';
	    
	    // 2. 使用mousedown而不是click（更早捕获事件）
	    contextMenu.addEventListener('mousedown', function(e) {
	        e.stopImmediatePropagation();
	    }, true); // 捕获阶段
	    
	    // 3. 为每个菜单项单独绑定事件
	    const items = contextMenu.querySelectorAll('.context-menu-item');
	    items.forEach(item => {
	        // 阻止所有可能干扰的事件
	        ['mousedown', 'mouseup', 'click', 'touchstart'].forEach(event => {
	            item.addEventListener(event, function(e) {
	                e.preventDefault();
	                e.stopPropagation();
	                e.stopImmediatePropagation();
	                
	                // 只在mouseup或touchend时触发动作
	                if (event === 'mouseup' || event === 'touchend') {
	                    const action = this.getAttribute('data-action');
	                    handleMenuAction(action);
	                    contextMenu.style.display = 'none';
	                }
	                
	                return false;
	            }, true); // 捕获阶段
	        });
	        
	        // 特别处理全屏状态
	        item.addEventListener('click', function(e) {
	            if (document.fullscreenElement) {
	                e.preventDefault();
	                e.stopPropagation();
	                const action = this.getAttribute('data-action');
	                handleMenuAction(action);
	                contextMenu.style.display = 'none';
	                return false;
	            }
	        });
	    });
	    
	    // 4. 全局点击隐藏菜单（使用捕获阶段）
	    document.addEventListener('click', function(e) {
	        if (!contextMenu.contains(e.target)) {
	            contextMenu.style.display = 'none';
	        }
	    }, true);
	    
	    // 5. 全屏状态变化时重新附加菜单
	    document.addEventListener('fullscreenchange', function() {
	        if (!document.fullscreenElement) {
	            document.body.appendChild(contextMenu);
	        }
	    });
	}
	
	// 处理菜单动作
	function handleMenuAction(action) {
	    switch (action) {
	        case 'save_image':
				screenshot();
	        	break;
	        case 'start_video':
				videostart=false;
	        	 $("#videoLocal").click()
	        	break;
	        case 'end_video':
				videostart=true;
	        	 $("#videoLocal").click()
				 
	        	break;
	        default:
	            console.log('未知动作:', action);
	    }
	}
});