//////////////////////////////////////////////////////
//                                                  //
//                    ButtaLayer                    //
//                                                  //
//  //////////////////////////////////////////////  //
//  //              Action Header               //  //
//  //////////////////////////////////////////////  //
//                                                  //
//  //////////////////////////////////////////////  //
//  //                                          //  //
//  //                BOARD (content)           //  //
//  //                                          //  //
//  //                                          //  //
//  //////////////////////////////////////////////  //
//                                                  //
//  //////////////////////////////////////////////  //
//  //              Action Footer               //  //
//  //////////////////////////////////////////////  //
//                                                  //
//////////////////////////////////////////////////////
var CloseLayer = function() {
	var old = document.getElementById("bl_plate");
	if(old) old.parentNode.removeChild(old)
};

var ReplaceLayerContentByVal = function(value) {
	BL.render_content_by_value(value);
};

var ReplaceLayerContent = function(partial_url) {
	BL.render_content(partial_url);
};

var RenderLayerOnCenterOfView = function(partial_url, options) {
	var opts = options || {};
	opts['fit_on_center'] = true;
	RenderLayer(null, partial_url, opts)
};

var RenderLayerUnderParticularDom = function(dom_id, partial_url, options) {
	var opts = options || {};
	opts['fit_to_specific_dom'] = document.getElementById(dom_id);
	RenderLayer(null, partial_url, opts)
};

var RenderLayerUnderCurrentDom = function(_e, partial_url, options) {
	var opts = options || {};
	opts['fit_to_dom'] = true;
	RenderLayer(_e, partial_url, opts)
};
var RenderLayerRightCurrentDom = function(_e, partial_url, options) {
	var opts = options || {};
	opts['fit_to_dom'] = true;
	opts['layout'] = "right";
	RenderLayer(_e, partial_url, opts)
};

var RenderLayer = function(_e, partial_url, options) {

	BL = new ButtaLayer(new Eventor(_e), options);

	// define root_container
	BL.define_container();

	// append layer
	BL.render_layer();

	// append actions
	BL.render_actions();
	
	// append content
	BL.render_content(partial_url);
	
	// IE6 has weird action...
	// styling
	// BL.position();
	// animating
	// BL.animating();
}

var ButtaLayer = function(eventor, options) {
	this.eventor = eventor;
	this.options = options || {};
	this.__doms = {};

	// remove old
	CloseLayer();

	this.touch_elements();
};

ButtaLayer.prototype.define_container = function() {
	var _candidate = document.getElementsByTagName("body")[0]
	// var _candidate = document.getElementById("body");
	this.container = _candidate;
};

ButtaLayer.prototype.render_layer = function() {
	this.plate.appendChild(this.header);
	this.plate.appendChild(this.body);
	this.plate.appendChild(this.footer);
	this.container.insertBefore(this.plate, this.container.firstChild);
	// this.container.appendChild(this.plate);
};

ButtaLayer.prototype.render_actions = function() {
	// this.footer.appendChild(this.__buildActions());
};

ButtaLayer.prototype.render_content = function(partial_url) {
	var content = this.__buildContent(partial_url);
	this.body.innerHTML = content.body;

	this.position();
	this.animating();
	eval(content.script);
};

ButtaLayer.prototype.render_content_by_value = function(value) {
	this.body.innerHTML = value;
};

ButtaLayer.prototype.position = function() {

	var fix_x = this.options['fix_x'] || 0;
	var fix_y = this.options['fix_y'] || 0;;

	if(this.options['fit_to_dom'] || this.options['fit_to_specific_dom']) {
		var _node = (this.options['fit_to_dom']) ? this.eventor._node() : this.options['fit_to_specific_dom']
		var _xy = $(_node).cumulativeOffset();

		var layout_fix_xy = [0, 0];
		switch(this.options['layout']) {
			case "right":
				layout_fix_xy = [_node.offsetWidth, 0];
				break;
			default:
		}

		this.plate.style.left = (_xy[0] + fix_x + layout_fix_xy[0]) + "px";
		this.plate.style.top = (_xy[1] + fix_y + layout_fix_xy[1]+ _node.clientHeight) + "px";
	}
	else if(this.options['fit_on_center']) {
		var wW = (Browser.safari && !document.evaluate) ? document.innerWidth : (Browser.opera) ? document.body.clientWidth : document.documentElement.clientWidth;
		var wH = (Browser.safari && !document.evaluate) ? document.innerHeight : (Browser.opera) ? document.body.clientHeight : document.documentElement.clientHeight;
		var sT = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
		if(wW < 1) wW = document.body.clientWidth;
		if(wH < 1) wH = document.body.clientHeigth;


		var _x = (wW / 2) - (this.plate.offsetWidth / 2);
		var _y = (wH / 2) + sT - (this.plate.offsetHeight / 2);

		this.plate.style.top = (_y + fix_y) + "px";
		this.plate.style.left = (_x + fix_x) + "px";
	}
	else this.plateMoveToXY(this.eventor._mouse(), [fix_x, fix_y]);
};

ButtaLayer.prototype.animating = function() {
	this.plate.style.visibility = "visible";
};


//
// workers
ButtaLayer.prototype.__buildElement = function(id, options) {
	if(!this.__doms[id]) {
		var _element = document.createElement("div");
		_element.id = this.ids[id] || id;
		if(this.classes[id]) _element.className = this.classes[id];
		_styles = this.styles[id] || options["styles"];
		for(var _key in _styles) {
			try {
				_element.style[_key] = _styles[_key];
			} catch(e) {
				//
			}
		}
		this.__doms[id] = _element;
	}

	return this.__doms[id];
};

ButtaLayer.prototype.__buildContent = function(partial_url) {
	var _res = new zAjax().send({
		url: FULL_URL +  partial_url,
		sync: true,
		method: "GET",
		success: Bind(this, function(xhr) {
			// var response = eval("(" + xhr.responseText + ")");
			// if(response.version) this.manifestVersion = response.version
		}),
		failure: function(xhr) {
			// fail;
		}
	})

	var __script = "";
	var __content = _res.responseText.replace(/[\r\n]+/ig, '');
	var _m = null;
	var _p = /<script[^>]*>(.*)(?:<\/script>)/gi;
	while(_m = _p.exec(__content)) __script += ";" + _m.last();

	return { body: __content, script: __script };
};

ButtaLayer.prototype.__buildActions = function() {
	var __action = this.__buildElement("bl_close_wrapper");
	var __close_button = document.createElement("a");
	__close_button.className = "small_btn";
  __close_button.href = "javascript:;";
	__close_button.innerHTML = "닫기";
	__close_button.style.margin = "0 auto";
	__action.appendChild(__close_button);

	OnEvent.add(__close_button, "click", Bind(this, function() {
		this.close();
	}));

	return __action;
};

ButtaLayer.prototype.close = function() {
	this.plate.parentNode.removeChild(this.plate);
};

ButtaLayer.prototype.touch_elements = function() {
	for(var id in this.ids) this[id] = this.__buildElement(id);
};

ButtaLayer.prototype.plateMoveToXY = function(_xy, _fix_xy) {
	var wW = (Browser.safari && !document.evaluate) ? document.innerWidth : (Browser.opera) ? document.body.clientWidth : document.documentElement.clientWidth;
	var wH = (Browser.safari && !document.evaluate) ? document.innerHeight : (Browser.opera) ? document.body.clientHeight : document.documentElement.clientHeight;
	if(wW < 1) wW = document.body.clientWidth;
	if(wH < 1) wH = document.body.clientHeigth;

	var st = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  var _x = _xy._x;
  var _y = _xy._y + st;

	// BEWARE!
	// MAGIC HERE!
	if(_x > ((wW / 2))) _x = _x - this.plate.offsetWidth;
	// if(_y > (wH / 2)) _y = _y - this.plate.offsetHeight;

  this.plate.style.top = (_y + _fix_xy[1]) + "px";
  this.plate.style.left = (_x + _fix_xy[0]) + "px";
};

//
// dirty configures
ButtaLayer.prototype.ids = {
	plate: "bl_plate", //_" + new Date().getTime(),
	header: "bl_header",
	body: "bl_body",
	footer: "bl_footer"
};

ButtaLayer.prototype.classes = {
	plate: "bl_plate fragile do_destroy",
	header: "bl_header",
	body: "bl_body",
	footer: "bl_footer"
};

ButtaLayer.prototype.styles = {
	plate: {
		position: "absolute",
		zIndex: "998",
		visibility: "hidden"
	},
	header: {
	},
	body: {
	},
	footer: {
	},
	bl_close_wrapper: {
		color: "white",
		margin: "8px 0",
		textAlign: "center"
	}
};