/**
 * MLNUI Window
 * MLNUI 窗体控件
 * Powered By CandySunPlus (c) 2011 MLN STUDIO
 */
$.MLNUI.WindowManager = {
	windowLevel: 0,
	windowGroup: [],
	addWindow: function(_windowEl, _level) {
		this.windowLevel = (_level > this.windowLevel) ? _level : this.windowLevel;
		$(this.windowGroup).each(function() {
			if (this.windowEl == _windowEl) {
				return;
			}
		});
		this.windowGroup.push({
			"windowEl": _windowEl,
			"level": _level
		});
	},
	removeWindow: function(_windowEl) {
		$(this.windowGroup).each(function() {
			if (this.windowEl == _windowEl) {
				$.MLNUI.WindowManager.windowLevel = $.MLNUI.WindowManager.windowLevel - 1;
				return;
			}
		});
	}
};
$.MLNUI.Window = $.Class({
	option: {
		"title": "Title",
		"content": "Content...",
		"shadow": 3,
		"cornerRadius": 7,
		"bodyBgColor": [229, 229, 229],
		"headerStartColor": [250, 250, 250],
		"headerStopColor": [240, 240, 240],
		"headerLineColor": [235, 235, 235],
		"headerHeight": 32,
		"bodyStartColor": [250, 250, 250],
		"bodyStopColor": [235, 235, 235],
		"buttonDomHeight": 30,
		"buttonGroup": []
	},
	init: function(_options) {
		this.options = $.extend({}, this.option, _options);
		var _this = this;
		var level = $.MLNUI.WindowManager.windowLevel + 1;
		if (this.options.isModel) {
			this.showModel("#575757", level, 0.8, function() {
				_this.drawWindow(_this.options.width, _this.options.height, level + 2);
			});
		} else {
			_this.drawWindow(_this.options.width, _this.options.height, level);
		}
	},
	close: function() {
		$.MLNUI.WindowManager.removeWindow(this.domEl);
		$(this.domEl).remove();
		this.hideModel();
	},
	bodyRoundedRect: function(ctx, x, y, width, height, radius, bodyStartColor, bodyStopColor) {
		var options = this.options;
		ctx.fillStyle = 'rgba(' + bodyStartColor.join(',') + ', 1)';
		var lingrad = ctx.createLinearGradient(0, 0, 0, height - options.headerHeight);
		lingrad.addColorStop(options.headerHeight / (height - options.headerHeight), 'rgb(' + bodyStartColor.join(',') + ')');
		lingrad.addColorStop(1, 'rgb(' + bodyStopColor.join(',') + ')');
		ctx.fillStyle = lingrad;
		ctx.beginPath();
		ctx.moveTo(x, y + radius);
		ctx.lineTo(x, y + height - radius);
		ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
		ctx.lineTo(x + width - radius, y + height);
		ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
		ctx.lineTo(x + width, y + radius);
		ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
		ctx.lineTo(x + radius, y);
		ctx.quadraticCurveTo(x, y, x, y + radius);
		ctx.fill();
	},
	topRoundedRect: function(ctx, x, y, width, height, radius, headerStartColor, headerStopColor, headerLineColor) {
		var lingrad = ctx.createLinearGradient(0, 0, 0, height);
		lingrad.addColorStop(0, 'rgb(' + headerStartColor.join(',') + ')');
		lingrad.addColorStop(1, 'rgb(' + headerStopColor.join(',') + ')');
		ctx.fillStyle = lingrad;
		ctx.beginPath();
		ctx.moveTo(x, y);
		ctx.lineTo(x, y + height);
		ctx.lineTo(x + width, y + height);
		ctx.lineTo(x + width, y + radius);
		ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
		ctx.lineTo(x + radius, y);
		ctx.quadraticCurveTo(x, y, x, y + radius);
		ctx.fill();
		ctx.fillStyle = 'rgba(' + headerLineColor.join(',') + ', 1)';
		ctx.beginPath();
		ctx.fillRect(x, height - 1, width, 1);
	},
	drawBox: function(ctx, width, height, shadowBlur, shadowOffset, shadows) {
		var options = this.options;
		var shadowBlur2x = shadowBlur * 2;
		var cornerRadius = this.options.cornerRadius;
		if (shadows != false) {
			for (var x = 0; x <= shadowBlur; x++) {
				$.MLNUI.roundedRect(
				ctx, shadowOffset.x + x, shadowOffset.y + x, width - (x * 2) - shadowOffset.x, height - (x * 2) - shadowOffset.y, cornerRadius + (shadowBlur - x), [0, 0, 0], x == shadowBlur ? 0.09 : .05 + (x * .01));
			}
		}
		// Window body.
		this.bodyRoundedRect(
		ctx, // context
		shadowBlur - shadowOffset.x, // x
		shadowBlur - shadowOffset.y, // y
		width - shadowBlur2x, // width
		height - shadowBlur2x, // height
		cornerRadius, // corner radius
		options.bodyStartColor, //
		options.bodyStopColor //
		);
		// Window header.
		this.topRoundedRect(
		ctx, // context
		shadowBlur - shadowOffset.x, // x
		shadowBlur - shadowOffset.y, // y
		width - shadowBlur2x, // width
		options.headerHeight, // height
		cornerRadius, // corner radius
		options.headerStartColor, // Header gradient's top color
		options.headerStopColor, // Header gradient's bottom color
		options.headerLineColor //
		);
	},
	drawWindow: function(w, h, level) {
		if (this.drawingWindow == true) return;
		this.drawingWindow = true;
		var _this = this;
		var options = this.options;
		var _domEl = document.createElement("div");
		var _bodyEl = document.createElement("div");
		var _titleBarEl = document.createElement("h3");
		var _contentEl = document.createElement("div");
		var _buttonEl = document.createElement("div");
		var _canvasEl = document.createElement("canvas");
		$("body").append(_domEl);
		$(_domEl).append([_bodyEl, _canvasEl]);
		$(_bodyEl).append([_titleBarEl, _contentEl, _buttonEl]);
		this.domEl = _domEl;
		$(_domEl).css({
			"position": "absolute",
			"z-index": level,
			"left": "50%",
			"top": "50%",
			"margin-top": -(h / 2) + "px",
			"margin-left": -(w / 2) + "px"
		}).addClass("ui_window");
		$(_canvasEl).attr({
			"width": w,
			"height": h
		}).css({
			"z-index": 2
		});
		$(_bodyEl).css({
			"position": "absolute",
			"height": (h - (options.shadow * 2)) + "px",
			"width": (w - (options.shadow * 2)) + "px",
			"padding": options.shadow + "px",
			"z-index": 3
		});
		$(_titleBarEl).css({
			"line-height": options.headerHeight + "px",
			"display": "block"
		}).text(options.title).addClass("ui_window_header");
		$(_contentEl).css({
			"padding": "5px 10px",
			"height": h - options.headerHeight - options.buttonDomHeight - (options.shadow * 2) - 10 + "px",
			"overflow-y": "auto",
			"overflow-x": "hidden"
		}).text(options.content).addClass("ui_window_content");
		$(_buttonEl).css({
			"height": options.buttonDomHeight + "px",
			"padding": "0 " + options.cornerRadius + "px"
		}).addClass("ui_window_button");
		if ($(options.buttonGroup).length > 0) {
			$(options.buttonGroup).each(function() {
				$.extend(this, {
					"dom": _buttonEl
				});
				new $.MLNUI.Button(this);
			});
		}
		if (typeof window.G_vmlCanvasManager != 'undefined') {
			_canvasEl = window.G_vmlCanvasManager.initElement(_canvasEl);
		}
		var ctx = _canvasEl.getContext("2d");
		_this.drawBox(ctx, w, h, options.shadow, {
			'x': 0,
			'y': 0
		}, true);
		$.MLNUI.WindowManager.addWindow(_domEl, level);
	},
	initModel: function(_color, _level) {
		var _mask = document.createElement("div");
		var _mask_iframe = document.createElement("iframe");
		var _maskW = $(window).width();
		var _maskH = $(document).height();
		$(_mask).css({
			"position": "absolute",
			"z-index": _level + 1,
			"scrolling": "no",
			"top": 0,
			"left": 0,
			"background": _color
		}).hide().width(_maskW).height(_maskH);
		$(_mask_iframe).attr({
			"frameborder": 0,
			"src": "about:blank"
		}).css({
			"position": "absolute",
			"z-index": _level,
			"scrolling": "no",
			"top": 0,
			"left": 0
		}).hide().width(_maskW).height(_maskH);
		$("body").append(_mask_iframe).append(_mask);
		$(window).bind("resize", function() {
			var _maskW = $(window).width();
			var _maskH = $(document).height();
			$(_mask).width(_maskW).height(_maskH);
			$(_mask_iframe).width(_maskW).height(_maskH);
		});
		return {
			"mask": _mask,
			"mask_iframe": _mask_iframe
		};
	},
	showModel: function(_color, _level, _alpha, _func) {
		var _this = this;
		mask_obj = this.initModel(_color, _level);
		this.mask_obj = mask_obj;
		$(mask_obj.mask_iframe).fadeTo(10, _alpha);
		$(mask_obj.mask).fadeTo(100, _alpha, function() {
			_func.call();
		});
	},
	hideModel: function() {
		$(this.mask_obj.mask).remove();
		$(this.mask_obj.mask_iframe).remove();
	}
});