﻿//============Overlay与Progress===============
// 命名空间设置.设置了$.UI.Overlay与$.UI.Progress的命名空间
$.UI = {
	Overlay: {},
	Progress: {}
}
// 扩展了进度条插件，用于显示进度条
$.extend($.UI.Progress, {
	instances: [],
	Create: function() {
		$.UI.Overlay.Create();
		if (this.instances.length == 0) {
			var instance = $("<div/>").addClass("ui-progressbar").appendTo(document.body);
			this.instances.push(instance);
		}
	},
	Close: function() {
		$.UI.Overlay.Close();
		if (this.instances.length > 0) {
			this.instances.pop().remove();
		}
	}
});
// 扩展了遮避插件。它将随着屏幕的大小而改变。
$.extend($.UI.Overlay, {
	OverlayPanel: {}, // 遮避层元素对象
	Width: function() { // 获取工作区的宽度
		return $(window).width();
	},
	Height: function() { // 获取工作区的高度
		return $(window).height();
	},
	Create: function() { // 创建遮避层
		this.OverlayPanel = $('<div/>').appendTo(document.body)
		    .addClass('ui-widget-overlay').css({
		    	borderWidth: 0, margin: 0, padding: 0,
		    	position: 'absolute', top: 0, left: 0,
		    	width: this.Width(),
		    	height: this.Height()
		    });
		$(window).bind('resize', this.Resize);
		return this.OverlayPanel;
	},
	Close: function() { // 关闭遮避层
		$(window).unbind('resize', this.Resize);
		this.OverlayPanel.remove();
	},
	Resize: function() { // 重设遮避层大小
		$.UI.Overlay.OverlayPanel.css({
			width: 0,
			height: 0
		}).css({
			width: $.UI.Overlay.Width(),
			height: $.UI.Overlay.Height()
		});
	}
});

