//圆形菜单，在Path菜单的基础上修改，后续将再整理代码，并封装为jQuery插件

var Radius = 200; 		// 菜单半径
var Offset = 80; 		// 菜单弹跳长度
var OutSpeed = 80; 		// 菜单弹出的速度
var OutIncr = 50; 		// 小图出来的旋转
var OffsetSpeed = 200; 	// 小图出来的旋转速度
var InSpeed = 480; 		// 菜单收回的速度
var InIncr = -80; 		// 菜单收回的旋转

var MaxMenuCount = 10;	// 最大菜单数量
var ArcDir = "U";		// 圆形菜单，第一个菜单朝向，U:上，D:下，L:左，R:右

var PathStatus = 0; //

function PathRun(startTop, startLeft) {
	var $PathMenu = $('#PathMenu');
	
	var PathItems = $PathMenu.children('.PathItem').slice(0, MaxMenuCount);
	var Count = PathItems.size();
	var iteRad = 2*Math.PI / Count; //菜单项之间间隔的弧度
	
	var dirRad; //菜单正对的弧度，只有4种
	switch (ArcDir) {
	case "U": 
		dirRad = Math.PI * 0.5;
		break;	
	case "R": 
		dirRad = Math.PI * 2;
		break;
	case "D": 
		dirRad = Math.PI * 1.5;
		break;
	case "L": 
		dirRad = Math.PI * 1;
		break;
	}
	
	var firstMenuRad = dirRad; //第一个菜单的弧度
	
	if (PathStatus == 0) {
		
		//计算中心位置，并移动到中心位置
		var centerTop = ($(window).height() - $PathMenu.height())/2;
		var centerLeft = ($(window).width() - $PathMenu.width())/2;	
		//移动到中心位置
		$PathMenu.css({position: 'absolute', 'top' : centerTop, 'left' : centerLeft }); 
		
		PathItems.each(function(index) {
			var currentMenuRad = firstMenuRad - index * iteRad; //当前菜单的弧度
			var X = Math.cos(currentMenuRad) * Radius;
			var Y = Math.sin(currentMenuRad) * Radius;
			var X1 = Math.cos(currentMenuRad) * (Radius + Offset);
			var Y1 = Math.sin(currentMenuRad) * (Radius + Offset);
			
			$(this).show().animate({
				left : X1,
				bottom : Y1
			}, OutSpeed, function() {
				$(this).animate({
					left : X,
					bottom : Y
				}, OffsetSpeed);
			});
		});

		//显示遮罩层
		$(".masking-out").show();
		
		PathStatus = 1;
		
	} else if (PathStatus == 1) {	
		//收回子菜单，同时回到初始位置
		PathItems.each(function(index) {
			if (parseInt($(this).css('left')) == 0) {
				X1 = 0;
			} else {
				X1 = parseInt($(this).css('left')) + Offset;
			}

			if (parseInt($(this).css('bottom')) == 0) {
				Y1 = 0;
			} else {
				Y1 = parseInt($(this).css('bottom')) + Offset;
			}
			
			$(this).hide();
		});
		$(".masking-out").hide();
		PathStatus = 0;
		//移动到起始位置
		$PathMenu.css({position : 'absolute', 'top' : startTop, 'left' : startLeft });
	}
}

$(function() {
	
	//下面代码中还有点击穿透现象
	
	var $PathMenu = $('#PathMenu');
	var $PathMain = $PathMenu.find(".PathMain");
	//菜单会在正中间展开，第一步，记住菜单起始位置
	var startTop = $PathMenu.css('top');
	var startLeft = $PathMenu.css('left');
//	$PathMain.on("click", function(event){
//		PathRun(startTop, startLeft)
//	});
	
	var mouseDownX,mouseDownY,initX,initY,flag = false;  
	var isDrag=false;
	var isDragDist = 20;
	
	$PathMenu.on("mousedown", function(event) {
		 mouseDownX = event.pageX;  
		 mouseDownY = event.pageY;  
		 //初始位置的X，Y 坐标  
		 initX = this.offsetLeft;  
		 initY = this.offsetTop;  
		 
		 flag = true; 
	});
	
	$PathMenu.on("touchstart", function(event) {
		 mouseDownX = event.originalEvent.targetTouches[0].pageX;  
		 mouseDownY = event.originalEvent.targetTouches[0].pageY;  
		 //初始位置的X，Y 坐标  
		 initX = this.offsetLeft;  
		 initY = this.offsetTop;  
		 
		 flag = true; 
	});
		
	$PathMenu.on("touchmove", function(event) {
	    // 确保鼠标已按下  
	    if(flag) { 
	    	//阻止浏览器默认的缩放和滚动
	    	event.preventDefault();
	        var mouseMoveX = event.originalEvent.targetTouches[0].pageX;
	        var mouseMoveY = event.originalEvent.targetTouches[0].pageY; 
	        this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";  
	        this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px"; 
	        if(((parseInt(mouseMoveX) - parseInt(mouseDownX)) > isDragDist 
	        		|| (parseInt(mouseMoveY) - parseInt(mouseDownY)) > isDragDist 
	        		|| (parseInt(mouseMoveX) - parseInt(mouseDownX)) < -isDragDist 
	        		|| (parseInt(mouseMoveY) - parseInt(mouseDownY)) < -isDragDist)
	        		&& PathStatus==0) {
	        	isDrag=true;
		        startTop = this.style.top;
		        startLeft= this.style.left;
	        }
	    }  
	});
	
	$PathMenu.on("mousemove", function(event) {
	    // 确保鼠标已按下  
	    if(flag) {  
	        var mouseMoveX = event.pageX,mouseMoveY = event.pageY; 
	        this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";  
	        this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";  
	        if(((parseInt(mouseMoveX) - parseInt(mouseDownX)) > isDragDist 
	        		|| (parseInt(mouseMoveY) - parseInt(mouseDownY)) > isDragDist 
	        		|| (parseInt(mouseMoveX) - parseInt(mouseDownX)) < -isDragDist 
	        		|| (parseInt(mouseMoveY) - parseInt(mouseDownY)) < -isDragDist)
	        		&& PathStatus==0) {
	        	isDrag=true;
		        startTop = this.style.top;
		        startLeft= this.style.left;
	        }
	    }  
	});
	
	$PathMenu.on("mouseup touchend", function() {
		//标识已松开鼠标  
	    flag = false; 
	    isDrag=false;
	});
	
	$PathMenu.find(".PathMain").on("mouseup touchend", function(){
	    if(!isDrag){
	    	PathRun(startTop, startLeft)
	    }
	});

});