/*弹出式菜单*/
//没剑 2008-07-02
//http://regedit.cnblogs.com
/*参数说明*/
//showobj:要显示的菜单ID
//timeout：延时时间,鼠标停留/离开后延时多久开始显示/隐藏菜单
//speed：菜单显示速度，数字越大，显示越慢,默认为100
//调用示例:$("#button").DMenu("#content");
jQuery.fn.DMenu = function(showobj, timeout, speed, x, y, o) {
	timeout = timeout ? timeout : 300;
	speed = speed ? speed : 100;
	x = x ? x : 0;
	y = y ? y : 0;
	//按钮对象
	var button = $(this);
	//延时计数器
	var timer = null;
	//隐藏的浮动层
	var hideDiv = $("<div></div>");
	//容器对象
	var Container = $("<div id=\"Container\"></div>");
	Container.hide();
	hideDiv.append(Container);
	//菜单对象
	var jqShowObj = $(showobj);
	//隐藏菜单
	jqShowObj.hide();
	//菜单显示的状态
	var display = false;
	//按钮的offset
	var offset = button.offset();
	//菜单区高
	var height = jqShowObj.height();
	//菜单区宽
	var width = jqShowObj.width();
	//按钮的高
	var btnHeight = button.height();
	//按钮的宽
	var btnWidth = button.width();
	//定位层放到最前面
	$(document.body).prepend(hideDiv);
	//放到容器中
	//Container.append(jqShowObj);

	//****显示菜单方法开始****//
	var showMenu = function() {
		//如果菜单为显示则退出操作
		if (display) {
			return false;
		}
		//设置容器属性
		Container.css({
			margin: "0 auto",
			width: btnWidth + "px",
			height: btnHeight + "px"
		});
		//定位隐藏层
		hideDiv.css({
			position: "absolute",
			top: offset.top + y + "px",
			left: offset.left + (btnWidth / 2) - (width / 2) + x + "px",
			height: height + "px",
			width: width + "px"
		}).show();
		//给容器加个黑边框
		Container.css({
			border: "1px solid #666"
		});
		//显示定位层
		//高宽慢慢增大
		Container.animate({
			marginTop: btnHeight + 4,
			height: height + 4,
			width: width + 4,
			opacity: 100
		}, speed, function() {
			//动画结束时 start//
			//显示菜单
			jqShowObj.show();
			//添加菜单入容器
			Container.append(jqShowObj);
			//去除边框
			Container.css({
				border: 0
			});
			jqShowObj.css({ opacity: o });
			//			jqShowObj.style.filter = "alpha(opacity="+o*100+")";
			jqShowObj.css({ filter: 'alpha(opacity=' + o * 100 + ')' });
			//显示状态置为true
			display = true;
			//鼠标移入
			jqShowObj.mouseover(function() {
				clearTimeout(timer);
			});
			//鼠标移开
			jqShowObj.mouseout(function() {
				hideMenu();
			});
			//动画结束时 end//
		});
	};
	//****显示菜单方法结束****//

	//****隐藏菜单方法开始****//
	var hideMenu = function() {
		clearTimeout(timer);
		//延时隐藏菜单
		timer = setTimeout(function() {
			//显示边框
			Container.css({
				border: "1px solid #666"
			});
			//清空容器
			Container.empty();
			//收缩容器
			Container.animate({
				width: btnWidth, height: btnHeight, marginTop: '0', opacity: 0
			}, speed, function() {
				//动画结束时 start//
				//隐藏容器
				Container.hide();
				//定位层隐藏
				hideDiv.hide();
				//显示状态置为false
				display = false;
				//动画结束时 end//
			});
		}, timeout);
	};
	//****隐藏菜单方法结束****//

	//绑定按钮鼠标经过事件
	button.hover(function(e) {
		//延时显示菜单
		clearTimeout(timer);
		timer = setTimeout(function() {
			showMenu();
		}, timeout);
	}, function() {
		clearTimeout(timer);
		//鼠标离开按钮时，如果菜单还是显示状态则隐藏
		if (display) {
			timer = setTimeout(function() {
				hideMenu();
			}, timeout);
		}
	});
};
jQuery.fn.SMenu = function(showobj, timeout, x, y, o) {
	timeout = timeout ? timeout : 300;
	x = x ? x : 0;
	y = y ? y : 0;
	//按钮对象
	var button = $(this);
	//延时计数器
	var tr = null;
	//隐藏的浮动层
	var hideDiv = $("<div></div>");
	//容器对象
	var Container = $("<div id=\"Container\"></div>");
	Container.hide();
	hideDiv.append(Container);
	//菜单对象
	var jqShowObj = $(showobj);
	//隐藏菜单
	jqShowObj.hide();
	//菜单显示的状态
	var display = false;
	//按钮的offset
	var offset = button.offset();
	//菜单区高
	var height = jqShowObj.height();
	//菜单区宽
	var width = jqShowObj.width();
	//按钮的高
	var btnHeight = button.height();
	//按钮的宽
	var btnWidth = button.width();
	//定位层放到最前面
	$(document.body).prepend(hideDiv);
	//放到容器中
	//Container.append(jqShowObj);

	//****显示菜单方法开始****//
	var sMenu = function() {
		//如果菜单为显示则退出操作
		if (display) {
			return false;
		}
		//定位隐藏层
		jqShowObj.css({
			position: "absolute",
			top: offset.top + y + "px",
			left: offset.left + (btnWidth / 2) - (width / 2) + x + "px",
			height: height + "px",
			width: width + "px"
		}).show();
		//给容器加个黑边框
		Container.css({
			border: "1px solid #666"
		});
		//显示定位层
		//动画结束时 start//
		Container.show();
		//显示菜单
		jqShowObj.show();
		hideDiv.show();
		//添加菜单入容器
		Container.append(jqShowObj);
		//去除边框
		Container.css({
			border: 0
		});
		jqShowObj.css({ opacity: o });
		//			jqShowObj.style.filter = "alpha(opacity="+o*100+")";
		jqShowObj.css({ filter: 'alpha(opacity=' + o * 100 + ')' });
		//显示状态置为true
		display = true;
		//鼠标移入
		jqShowObj.mouseover(function() {
			clearTimeout(tr);
		});
		//鼠标移开
		jqShowObj.mouseout(function() {
			hMenu();
		});
		//动画结束时 end//
	};
	//****显示菜单方法结束****//

	//****隐藏菜单方法开始****//
	var hMenu = function() {
		clearTimeout(tr);
		//延时隐藏菜单
		tr = setTimeout(function() {
			//显示边框
			Container.css({
				border: "1px solid #666"
			});
			//清空容器
			Container.empty();
			//动画结束时 start//
			//隐藏容器
			Container.hide();
			//定位层隐藏
			hideDiv.hide();
			//显示状态置为false
			display = false;
			//动画结束时 end//
		}, timeout);
	};
	//****隐藏菜单方法结束****//

	//绑定按钮鼠标经过事件
	button.hover(function(e) {
		//延时显示菜单
		clearTimeout(tr);
		tr = setTimeout(function() {
			sMenu();
		}, timeout);
	}, function() {
		clearTimeout(tr);
		//鼠标离开按钮时，如果菜单还是显示状态则隐藏
		if (display) {
			tr = setTimeout(function() {
				hMenu();
			}, timeout);
		}
	});
};