/**
 * @class ax5.ui.mask
 * @classdesc
 * @version v0.0.1
 * @author tom@axisj.com
 * @logs
 * 2014-04-01 tom : 시작
 * @example
 * ```
 * var my_mask = new ax5.ui.mask();
 * ```
 */

(function(root, ax_super) {

	var U = ax5.util, axd = ax5.dom;

	var ax_class = function () {
		var self = this;

		// 클래스 생성자
		this.main = (function(){
			if (ax_super) ax_super.call(this); // 부모호출
			this.config = {
				target: axd.get(document.body)[0]
			};
			this.mask_content = '<h1>AX5 Mask</h1>';
			this.status = "off";

		}).apply(this, arguments);

		/**
		 * Preferences of Mask UI
		 * @method ax5.ui.mask.set_config
		 * @param {Object} config - 클래스 속성값
		 * @returns {ax5.ui.mask}
		 * @example
		 * ```
		 * set_config({
		 *      target : {Element|AX5 nodelist}, // 마스크 처리할 대상
		 *      content : {String}, // 마스크안에 들어가는 내용물
		 *      onchange: function(){} // 마스크 상태변경 시 호출되는 함수 this.type으로 예외처리 가능
		 * }
		 * ```
		 */
		//== class body start
		this.init = function(){
			// after set_config();
			if(this.config.content) this.set_body(this.config.content);
		};

		this.set_body = function(content){
			this.mask_content = content;
		};

		this.get_body = function(){
			return this.mask_content;
		};

		/**
		 * open mask
		 * @method ax5.ui.mask.open
		 * @param {Object} config
		 * @returns {ax5.ui.mask}
		 * @example
		 * ```js
		 * my_mask.open({
		 *     target: document.body,
		 *     content: "<h1>Loading..</h1>",
		 *     onchange: function () {
		 *
		 *     }
		 * });
		 *
		 * my_mask.open({
		 *     target: ax5.dom.get("#mask-target"),
		 *     content: "<h1>Loading..</h1>",
		 *     onchange: function () {
		 *
		 *     }
		 * });
		 * ```
		 */
		this.open = function(config){
			// todo : z-index 옵션으로 지정가능 하도록 변경
			if(this.status === "on") this.close();
			if(config && config.content) this.set_body(config.content);
			self.mask_config = {};
			U.extend(self.mask_config, this.config, true);
			U.extend(self.mask_config, config, true);

			var cfg = self.mask_config,
				target = axd.get(cfg.target)[0],
				po = [], css, mask_id = 'ax-mask-'+ ax5.get_guid(), _mask, css = {},
				that = {};

			po.push('<div class="ax-mask" id="'+ mask_id +'">');
				po.push('<div class="ax-mask-bg"></div>');
				po.push('<div class="ax-mask-content">');
					po.push('<div class="ax-mask-body">');
						po.push(self.get_body());
					po.push('</div>');
				po.push('</div>');
			po.push('</div>');

			if(target == document.body){
				axd.append(target, po.join(''));
			}else{
				axd.append(document.body, po.join(''));
				var box_model = axd.box_model(target);
				css = {
					position:"absolute",
					left: box_model.offset.left,
					top: box_model.offset.top,
				    width: box_model.width,
					height: box_model.height
				};
				axd.class_name(target, "add", "ax-masking");
			}
			this._mask = _mask = axd.get("#"+mask_id);
			this.target = target;
			this.status = "on";
			axd.css(_mask, css);

			if(cfg.onchange) {
				that = {
					type: "open"
				};
				cfg.onchange.call(that, that);
			}
			return this;
		};

		/**
		 * close mask
		 * @method ax5.ui.mask.close
		 * @returns {ax5.ui.mask}
		 * @example
		 * ```
		 * my_mask.close();
		 * ```
		 */
		this.close = function(){
			var cfg = this.mask_config;
			axd.remove(this._mask);
			axd.class_name(this.target, "remove", "ax-masking");
			if(cfg.onchange) {
				that = {
					type: "close"
				};
				cfg.onchange.call(that, that);
			}
			return this;
		};
		//== class body end
	};


	//== ui class 공통 처리 구문
	if (U.is_function(ax_super)) ax_class.prototype = new ax_super(); // 상속
	root.mask = ax_class; // ax5.ui에 연결
	if (typeof define === "function" && define.amd) {
		define("_ax5_ui_mask", [], function () { return ax_class; }); // for requireJS
	}
	//== ui class 공통 처리 구문

})(ax5.ui, ax5.ui.root);