【ife】任务三十七：UI组件之浮出层

window.onload = function() {
	document.getElementsByTagName("button")[0].onclick = function() {
		document.getElementById("box").style.left = "50%";
		document.getElementById("box").style.top = "50%";
		document.getElementById("box").style.width = "400px";
		document.getElementById("box").style.height = "300px";
		document.getElementById("box").style.display = "block";
		document.getElementById("cover").style.display = "block";
		document.getElementsByTagName("body")[0].style.background = "grey";
		document.getElementsByTagName("button")[0].disabled = true;
	}
	document.getElementById("close").onclick = function() {
		document.getElementById("box").style.display = "none";
		document.getElementById("cover").style.display = "none";
		document.getElementsByTagName("body")[0].style.background = "white";
		document.getElementsByTagName("button")[0].disabled = false;
	}
	document.getElementById("cover").onclick = function() { 
		document.getElementById("box").style.display = "none";
		document.getElementById("cover").style.display = "none";
		document.getElementsByTagName("body")[0].style.background = "white";
		document.getElementsByTagName("button")[0].disabled = false;
	}
	var box = document.getElementById("box");
	var head = document.getElementById("head");
	head.onmousedown =  function(event) { 
		var disX = event.clientX - box.offsetLeft;
		var disY = event.clientY - box.offsetTop;
		document.onmousemove = function(event) {
			offX = event.clientX - disX;
			offY = event.clientY - disY;	
			box.style.left = offX + 200 + 'px';
			box.style.top = offY + 150 + 'px';
		}
		document.onmouseup = function() {
			document.onmousemove = null;
		}
	}
	var top = document.getElementById("top");
	var right = document.getElementById("right");
	var bottom = document.getElementById("bottom");
	var left = document.getElementById("left");
	var drag = document.getElementById("drag");	
	var min = 30; 
	top.onmousedown =  function(event) { 
		stopBubble(event);
		var e = event || window.event;
		var boxY = box.offsetTop - e.clientY;
		var rightY = bottom.offsetTop + e.clientY;
		document.onmousemove = function(event) {
			var e = event || window.event;
			var offY = rightY - e.clientY;	
			var height = offY + drag.offsetHeight;
			if (height < min)
				height = min;
			box.style.height = height + "px";
			if (height > min)
				box.style.top = boxY + e.clientY + 150 + "px";
		}
		document.onmouseup = function() { 
			document.onmousemove = null;
		}
	}
	right.onmousedown =  function(event) { 
		stopBubble(event);
		var e = event || window.event;
		var disX = e.clientX - right.offsetLeft;
		document.onmousemove = function(event) {
			var e = event || window.event;
			var offX = e.clientX - disX;	
			var width = offX + drag.offsetWidth;
			if (width < min)
				width = min;
			box.style.width = width + "px";
		}
		document.onmouseup = function() {
			document.onmousemove = null;
		}
	}
	bottom.onmousedown =  function(event) { 
		stopBubble(event);
		var e = event || window.event;
		var disY = e.clientY - bottom.offsetTop;
		document.onmousemove = function(event) {
			var e = event || window.event;
			var offY = e.clientY - disY;	
			var height = offY + drag.offsetHeight;
			if (height < min)
				height = min;
			box.style.height = height + "px";
		}
		document.onmouseup = function() {
			document.onmousemove = null;
		}
	}
	left.onmousedown =  function(event) { 
		stopBubble(event);
		var e = event || window.event;
		var boxX = box.offsetLeft - e.clientX;
		var rightX = right.offsetLeft + e.clientX;
		document.onmousemove = function(event) {
			var e = event || window.event;
			var offX = rightX - e.clientX;	
			var width = offX + drag.offsetWidth;
			if (width < min)
				width = min;
			box.style.width = width + "px";
			if (width > min)
				box.style.left = boxX + e.clientX + 200 + "px"; 
		}
		document.onmouseup = function() { 
			document.onmousemove = null;
		}
	}
	function stopBubble(e){ 
	    if(e && e.stopPropagation)  
	        e.stopPropagation();  
	    else  
	        window.event.cancelBubble = true; 
	}  
}