// 
// create shout images
window.onload = function() {
	preload_shout_images();
}

var preload_shout_images = function () {
	var ids = [
		"error.gif",
		"ico_question.gif",
		"info_msg.gif",
		"info_msg.gif",
		"ico_saving.gif",
		"popup_titlebar_bg.gif"
	];

	shout_images = new Image();
	for (var i=0; i< ids.length; i++) {
		shout_images.src = "/images/" + ids[i];
	}
}

// Shout The Alert
var Shout = function() {
	this.error = function(config, callback) {
		this.callback = callback;
		return this.show(config, "error") 
	};
	this.alert = function(config, callback) {
		this.callback = callback;
		return this.show(config, "alert")
	};
	this.confirm = function(config, callback) {
		this.callback = callback;
		return this.show(config, "confirm");
	};
	this.msg = function(config) {
		return this.show(config, "msg");
	};
	this.ing = function(config) {
		return this.show(config, "ing");
	};
}

Shout.prototype = {
	assert: function() {
		return !(!add_event || !remove_event || !CallBack);
	}, 

	ids: {
		pannel: "synki_alert",
		close_button: "shout_close_button",
		buttons_div: "shout_buttons",
		ok: "shout_confirm_ok",
		cancel: "shout_confirm_cancel"
	},

	pannel: null,

	generate_pannel: function() {
		if(!this.pannel) {
			var _b = document.getElementsByTagName("body")[0];
			var _d = document.createElement("div");
			_d.id = this.ids.pannel;
			_d.style.position = "absolute";
			_d.style.left = "-1000px";
			_d.style.top = "-1000px";
			_d.style.width = "500px";
			_d.style.lineHeight = "140%";
			_d.style.zIndex = "99999";

			_d.style.border = "3px solid #121212";
			_d.style.padding = "2px";
			_d.style.backgroundColor = "white";

			_d.innerHTML = this.create_title_bar();

			_b.appendChild(_d);
		}
		else {
			this.pannel.innerHTML = this.create_title_bar();
		}

		if (this._type != "ing") {
			add_event(document.getElementById(this.ids.close_button), "click", CallBack(this, this.hide));
		}

		return document.getElementById(this.ids.pannel);;
	},

	_type: null,

	show: function(config, _type) {
		var msg = config.msg;
		var head = config.head;
		var _width = config.width || 400;
		var _height = config.height;
		var confirm_ok = config.confirm_ok || "OK";
		var confirm_cancel = config.confirm_cancel || "Cancel";

		this._type = _type || "alert";;

//		Fog.overlay();
		this.pannel = this.generate_pannel();

		this.pannel.style.width = _width + "px";
		if (_height > 0) {
			this.pannel.style.height = _height + "px";
		}

		this.pannel.style.display = "block";
//		var _st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
//		var _ww = Math.max(document.documentElement.clientWidth, document.body.clientWidth);
//		var _wh = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
		var _ew = this.pannel.clientWidth;
		var _eh = this.pannel.clientHeight;
//		this.pannel.style.top = (((_wh / 2) + _st) - 220) + "px";
//		this.pannel.style.left = ((_ww / 2) - (_ew / 2)) + "px";
		this.pannel.style.position = "absolute";
		this.pannel.style.margin = "-" + parseInt(_eh / 2) + "px 0 0 -" + parseInt(_ew / 2) + "px";
		this.pannel.style.top = "50%";
		this.pannel.style.left = "50%";

		var html = '<div id="shout_content" style="padding-left:24px">';
		html += this.create_header(head, msg);
		html += this.create_msg(head, msg);
		html += '</div>';
		html += '<div id="' + this.ids.buttons_div + '" style="display:none;text-align:center;width:100%;padding-top:10px"></div>';
		html += '<div style="padding-top:16px"></div>';

		this.pannel.innerHTML += html;

		this.create_button(confirm_ok, confirm_cancel);

		return
	},

	hide:function() {
//		Fog._clear();
		if (this._type != "ing") {
			remove_event(document.getElementById(this.ids.close_button), "click", this.hide);
			remove_event(document.getElementById(this.ids.ok), "click", this.confirm_ok);
			if (this._type == "confirm") {
				remove_event(document.getElementById(this.ids.cancel), "click", this.confirm_cancel);
			}
		}

		this.pannel.style.display = "none";
		this.pannel.parentNode.removeChild(this.pannel);
		this.pannel = null;
	},

	create_title_bar: function() {
		var html = '<div style="background:url(/images/popup_titlebar_bg.gif) repeat-x;width:100%;height:27px;text-align:right;margin-bottom:18px">';
		if (this._type != "ing") {
			html += '<img id="' + this.ids.close_button + '" src="/images/msg_box_close.gif" alt="close" style="padding:5px 5px 0 0;cursor:pointer"/>';
		}
		html += '</div>';

		return html;
	},

	create_header: function(head, msg) {
		var html = '';
		var types = {
			error: "error.gif",
			confirm: "ico_question.gif",
			alert: "info_msg.gif",
			msg: "info_msg.gif",
			ing: "ico_saving.gif"
		};

		var font_weight = "bold";
		var font_size = "14px";
		if(!head && msg) {
			head = msg;
			font_weight = "normal";
			font_size = "12px";
		}
		var padding_top = "0";
		if (this._type == "ing") {
			padding_top = "4px"
		}

		html += '<h3 style="background:url(/images/' + types[this._type] + ') no-repeat;margin:0;padding:' + padding_top + ' 24px 3px 30px;font-size:' + font_size + ';font-weight:' + font_weight + '">' + head + '</h3>';
		html += '<div style="clear:both"></div>';

		return html;
	},

	create_msg: function(head, msg) {
		var html = '';
		if (head && msg){
			html = '<div style="padding-top:14px">' + msg + '</div>';
		}

		return html;
	},

	create_button: function(confirm_ok, confirm_cancel) {
		if (this._type == "confirm") {
			document.getElementById(this.ids.buttons_div).style.display = "block";

			var html =  '<button id="' + this.ids.ok + '" style="margin:0 7px;width:88px;height:20px;border:1px solid #CDCDCD;background:#f7f7f7;font-weight:bold">' + confirm_ok + '</button>';
			html += '<button id="' + this.ids.cancel + '" style="margin:0 7px;width:88px;height:20px;border:1px solid #CDCDCD;background:#f7f7f7">' + confirm_cancel + '</button>';

			document.getElementById(this.ids.buttons_div).innerHTML = html;

			add_event(document.getElementById(this.ids.ok), "click", CallBack(this, this.confirm_ok));
			add_event(document.getElementById(this.ids.cancel), "click", CallBack(this, this.confirm_cancel));
		}
		else if (this._type == "error" || this._type == "alert") {
			document.getElementById(this.ids.buttons_div).style.display = "block";

			document.getElementById(this.ids.buttons_div).innerHTML += '<button id="' + this.ids.ok + '" style="margin:0 7px;width:88px;height:20px;border:1px solid #CDCDCD;background:#f7f7f7">' + confirm_ok + '</button>';

			add_event(document.getElementById(this.ids.ok), "click", CallBack(this, this.confirm_ok));
		}
	},

	confirm_ok: function() {
		this.hide();
		if (typeof(this.callback) == "function") {
			this.callback();
		}
	},

	confirm_cancel: function() {
		this.hide();
	}
}