var LoadingImage = document.createElement("img");
LoadingImage.src = "/images/loading.gif";

function showLoadingImage(element_id) {
	var ele = $(element_id);
	// ele.parentNode.replaceChild(LoadingImage, ele);
	ele.innerHTML = "";
	ele.appendChild(LoadingImage);
};

function alertSound() {
	var flash_source = '<embed src="/alert.swf" quality="high" pluginspage="http//www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="0px" height="0"></embed>';
	document.getElementById('flash').innerHTML= flash_source
};

var cp = function(_text, _dom_id) {
	try {
		if(_dom_id) var dom = document.getElementById(_dom_id);
		if(window.clipboardData && clipboardData.setData) clipboardData.setData("text", _text)
		else if(dom && dom.createTextRange) dom.createTextRange().execCommand('Copy');
		else {
			var _id = "flash_copier";
			var _exist = document.getElementById(_id);
			if(_exist) _exist.parentNode.removeChild(_exist);
			var _fc = document.body.appendChild(document.createElement("div"))
			_fc.id = _id;
			_fc.innerHTML = '<embed src="/_clipboard.swf" FlashVars="clipboard=' + encodeURIComponent(_text) + '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
		}
	} catch(e) { alert(e.message); }
};

CNSubmitting = false
NSubmitting = false
var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;


var BroongLayer = {
	id_name: "broong_layer",
	class_name: "broong_layer",

	child_id_name: "broong_child_layer",
	child_class_name: "broong_child_layer",

	close_class_name: "broong_layer_close",

	notes_container_id: "notes",

	fog_name: "fog_layer",

	build_variables: function(event, params) {
		this.event = event || window.event || null;
		this.url = params.url || null;
		this.prevent_left_fix_on_ie = (params.prevent_left_fix_on_ie == 'true') ? true : false;
		if(params.replace_word) this.url = this.url + "?replace_word=" + params.replace_word
		this.image_src = params.image_src || null;
		this.original_image_src = params.original_image_src || null;
		this.content_size = params.content_size || null;
		this.dom = params.dom || null;
		this.has_parent = (params.has_parent && $(this.id_name)) ? params.has_parent : false;
		this.position_by_dom = params.position_by_dom || null;
		this.position_by_event = params.position_by_event || null;
		this.position_by_me = params.position_by_me || null;
		this.position_by_center = params.position_by_center || null;
		this.re_position = params.re_position || null;
		this.styles = params.styles || null;
		this.is_new_note = params.is_new_note || false;
		this.draggable = (params.draggable == null) ? true : params.draggable;
		this.fog = params.fog || false;
		this.extra_class_name = params.extra_class_name || false;

		this.callback = params.callback || false;

		this.cbo = params.cbo || false;

		this.magic_x_of_default_template = 40;
		this.magic_y_of_default_template = 60;

		this.position = {
			x: 0,
			y: 0,
			position: null
		}
	},

	alert: function(event, params) {
		params.content_size = {
			width: 304,
			height: 163
		}
		params.draggable = false;
		params.position_by_center = true;

		this.build_variables(event, params);
		if(this.toggle_after_delete_all_layers()) {
			this.render();
		}
	},

	confirm: function(event, params) {
		params.content_size = {
			width: 382,
			height: 183
		}

		var url = params.url.__decode();
		var urls = /([^?]+?)[?]url=(.*)/.exec(url);

		var encoded_url = "url=" + urls[2].__encode();
		params.url = urls[1] + "?" + encoded_url;

		params.draggable = false;
		params.position_by_center = true;

		this.build_variables(event, params);
		if(this.toggle_after_delete_all_layers()) {
			this.render();
		}
	},

	confirm_for_action: function(event, params) {
		params.content_size = {
			width: 382,
			height: 183
		}

		var cbo = params.cbo.__decode();
		var cbos = /([^?]+?)[?]cbo=(.*)/.exec(cbo);

		var encoded_cbo = "cbo=" + cbos[2].__encode();
		params.url = cbos[1] + "?" + encoded_cbo;

		params.draggable = false;
		params.position_by_center = true;

		this.build_variables(event, params);
		if(this.toggle_after_delete_all_layers()) {
			this.render();
		}
	},

	open: function(event, params) {
		this.build_variables(event, params);

		if(this.event == "force" || (this.event && this.toggle_after_delete_all_layers())) {
			this.render();
		}
	},

	close: function() {
		if ($(this.id_name)) this.close_route($(this.id_name));
		if (this.has_child()) this.child_close();
	},

	child_close: function() {
		this.has_parent = false;
		if ($(this.child_id_name)) this.close_route($(this.child_id_name));
	},

	close_route: function(dom) {
		this.unbinds();

		if(dom.callback) {
			dom.callback();
		}
		else {
			dom.remove();
		}
	},

	render: function() {
		var plate = this.generate();
		if ($(this.dom)) {
			this.get_content_by_dom(plate);
		}
		else if (this.image_src) {
			this.get_content_by_image(plate);
		}
		else if (this.url) {
			this.get_content_by_url(plate);
		}
	},

	generate: function() {
		var div = new Element("div");

		div.className = this.class_name;
		if (this.extra_class_name) div.className += " " + this.extra_class_name;
		if (this.has_parent) div.className += " " + this.child_class_name;
		if ($(this.dom)) div.className += " dom";

		if (this.callback) div.callback = this.callback;

		div.id = (this.has_parent) ? this.child_id_name : this.id_name;
		div.style.zIndex = (this.has_parent) ? "999" : "998";
		div.title = this.get_title();

		this.styling(div); // customize

		if (this.is_new_note) {
			div.style.position = "static";
			var new_note = new Element("li", { 'class': 'note' }).insert(div);
			$(this.notes_container_id).insert({ top: new_note })
			this.draggable = false;
		}
		else {
			this.calc_position(div);
			$("body").insert(div);
		}

		return div;
	},

	styling: function(plate) {
		if (this.styles) Element.setStyle(plate, this.styles);

		return plate;
	},

	calc_position: function(plate) {
		// position by click-event
		if (this.position_by_event) {
			this.position.position = "absolute";
			this.position.y = Event.pointerY(this.event) + "px";
			this.position.x = Event.pointerX(this.event) + "px";

			var exclusion_rePosition_on_IE = true;
		}
		// position by center of screen(including scroll)
		else if (this.position_by_center) {
			var screenX = document.viewport.getWidth();
			var screenY = document.viewport.getHeight();

			var scrollOffset = document.viewport.getScrollOffsets();
			var top = scrollOffset.top;
			var left = scrollOffset.left;

			var width = (this.content_size.width) ? this.content_size.width : plate.getWidth();
			var height = (this.content_size.height) ? this.content_size.height : plate.getHeight();


//			Log("screenY: " + screenY);
//			Log("screenX: " + screenX);
//			Log("top: " + top);
//			Log("left: " + left);
//			Log("height: " + height);
//			Log("width: " + width);
//			Log("_: " + parseInt(screenX / 2));
//			Log("_: " + parseInt(width / 2));

			this.position.x = parseInt(((screenX / 2) - (width / 2)) + left) + "px";
			this.position.y = parseInt(((screenY / 2) - (height / 2)) + top) + "px";

			var exclusion_rePosition_on_IE = true;
		}
		// position by DOM
		else if (this.position_by_dom || this.position_by_me) {
			var eventer = (this.position_by_dom) ? $(this.position_by_dom) : Event.element(this.event);

			this.position.position = "absolute";
			this.position.y = eventer.cumulativeOffset()[1] + "px";
			this.position.x = eventer.cumulativeOffset()[0] + "px";
		}
		// position by top-right side of me
		else {
			var eventer = Event.element(this.event);

			this.position.y = eventer.cumulativeOffset()[1] + "px";
			this.position.x = eventer.cumulativeOffset()[0] + eventer.getWidth() + "px";
		}

		// Todo: [top, right, botton, left] 도 받아서 처리
		if (this.re_position == "center" && eventer) {
			var eventer = (this.position_by_dom) ? $(this.position_by_dom) : Event.element(this.event);

			this.position.y = eventer.cumulativeOffset()[1] + parseInt(eventer.getHeight() / 2) + "px";
			this.position.x = eventer.cumulativeOffset()[0] + parseInt(eventer.getWidth() / 2) + "px";
		}
		// Todo: x:[integer, top, bottom] y:[integer, left, right] 도 받아서 처리
		if (this.re_position && this.re_position.y) this.position.y = parseInt(this.position.y) + parseInt(this.re_position.y) + "px";
		if (this.re_position && this.re_position.x) {
			this.position.x = parseInt(this.position.x) + parseInt(this.re_position.x) + "px";
			var exclusion_rePosition_on_IE = true;
		}

		if (Prototype.Browser.IE && !exclusion_rePosition_on_IE && !this.prevent_left_fix_on_ie) {
			// IE6 => #rail:width + .minwidth:border-width
			// IE7 => #rail:width
			var ie_width = (IE6) ? 1150 : 190;

			this.position.x = parseInt(this.position.x) + ie_width + "px";
		}

		return plate;
	},

	positioning: function(plate) {
		if (this.is_new_note) return;

		plate.style.top = this.position.y;
		plate.style.left = this.position.x;
		if (this.position.position) plate.style.position = this.position.position;
	},




	toggle_after_delete_all_layers: function() {
		var title = this.get_title();
		var opened = (this.is_parent()) ? $$("#body ." + this.class_name) : $$("#body ." + this.child_class_name)
		var layer_titles = Array();

		opened.each(function(layer) {
			layer_titles.push(layer.title);
			this.close_route($(layer));
		}.bind(this));
		return !layer_titles.include(title);
	},




	get_content_by_url: function(plate) {
		new Ajax.Updater(plate, this.url, {
			method: 'get',
			evalScripts: true,
			onComplete: this.complete_functions.bind(this, plate)
		});
	},

	get_content_by_dom: function(plate) {
		var imitation = $(this.dom).cloneNode(true);
		$(plate).insert(imitation);
		$(imitation).show();

		this.complete_functions(plate);
	},

	get_content_by_image: function(plate) {

		var image = new Element("img", { src: this.image_src });
		var content = new Element("div");
		content.insert(image);

		var height = -5;

		if(this.original_image_src && (parseInt(this.content_size.width) >= '800' || parseInt(this.content_size.height) >= '800')) {
			//var src = this.image_src.replace(/standard$/, "original");
			// var src = this.image_src.replace(/_standard/, "");
			var src = this.original_image_src
			var original_link = new Element("a", { href: src, target: '_broong_image' }).update("View Original Size Image");

			original_link.setStyle({
				display: 'block',
				paddingTop: '13px',
				color: '#FF793E',
				fontWeight: 'bold'
			});

			height = 30;
			content.insert(original_link);
		}

		var title = "";
		var content = this.default_template(title, content, { width: this.content_size.width, height: this.content_size.height + height });
		plate.insert(content);



		this.fog = true;
		this.content_size.width = this.content_size.width + this.magic_x_of_default_template
		this.content_size.height = this.content_size.height + this.magic_y_of_default_template
		this.calc_position(plate);
		this.complete_functions(plate);
	},


	complete_functions: function(plate) {
		this.positioning(plate);
		this.bind_close_button();
		this.append_fog();

		if (this.draggable) new Draggable(plate.id, { scroll: window });
	},




	bind_close_button: function() {
		$$("." + this.close_class_name).each(function(button) {
			var close = (this.has_parent) ? this.child_close : this.close;
			Event.observe(button, "click", close.bindAsEventListener(this));
		}.bind(this))
	},

	unbind_close_button: function() {
		$$("." + this.close_class_name).each(function(button) {
			var close = (this.has_parent) ? this.child_close : this.close;
			Event.stopObserving(button, "click", close.bindAsEventListener(this));
		}.bind(this))
	},

	bind_close_by_fog_layer: function() {
		if (!this.fog) return false;

		var fog = $(this.fog_name);
		var close = (this.has_parent) ? this.child_close : this.close;
		Event.observe(fog, "click", close.bindAsEventListener(this));
	},

	unbind_close_by_fog_layer: function() {
		if (!this.fog) return false;

		var fog = $(this.fog_name);
		var close = (this.has_parent) ? this.child_close : this.close;
		Event.stopObserving(fog, "click", close.bindAsEventListener(this));

		fog.remove();
	},

	unbinds: function() {
		this.unbind_close_button();
		this.unbind_close_by_fog_layer();
	},

	append_fog: function() {
		if (!this.fog) return false;

		var width = document.documentElement.scrollWidth;
		var height = document.documentElement.scrollHeight;

		var fog = new Element("div", { id: this.fog_name });
		fog.setStyle({
			width: parseInt(width) + "px",
			height: parseInt(height) + "px",
			// backgroundColor: 'black',
			backgroundColor: 'white',
			position: 'absolute',
			top: '0px',
			left: '0px',
			zIndex: '997',
			cursor: 'pointer',

			filter: 'alpha(opacity=0)',
			'-moz-opacity': '0.0',
			'opacity': '0.0'
		});

		$(document.body).insert(fog);

		this.bind_close_by_fog_layer();
	},



	is_opend: function() {
		return ($(this.id_name) || $(this.child_id_name)) ? true : false;
	},

	is_sameLayer: function(id) {
		return $(this.id_name).title == id
	},

	has_child: function() {
		return $(this.id_name) && $(this.child_id_name)
	},

	is_parent: function() {
		return !this.has_parent
	},

	current_layer: function() {
		if ($(this.id_name)) return $(this.id_name)
		if (this.has_child()) return $(this.child_id_name);
	},

	get_title: function() {
		var title = "";
		if ($(this.dom)) title = $(this.dom).id;
		else if (this.image_src) title = this.image_src;
		else if (this.url) title = this.url;

		return title;
	},




	default_template: function(title, content, size) {
		var warpper = new Element("div", { 'id': "default_layer_template" });
		var head = new Element("div", { 'class': "layer_head" });
		var body = new Element("div", { 'class': "layer_body" });

		var close_btn = new Element("div", { 'class': "close_btn" }).insert(new Element("img", { src: "/images/btn_x_large.gif", 'class': "broong_layer_close" }));
		warpper.insert(head.insert(close_btn));
		warpper.insert(body);

		if (parseInt(size.width) > 0) warpper.setStyle({ width: parseInt(size.width) + this.magic_x_of_default_template + "px" });
		if (parseInt(size.height) > 0) warpper.setStyle({ height: parseInt(size.height) + this.magic_y_of_default_template + "px" });

		var title = title || "";
		var content = content || "";

		if (title) head.insert({ top: new Element("h3").update(title) });
		if (content) body.insert(content);

		return warpper;
	},




	just_plate: function(event, params) {
		var plate = new Element("div");
		plate.className = this.class_name;

		this.build_variables(event, params);

		if (this.has_parent) plate.className += " " + this.child_class_name;
		plate.id = (this.has_parent) ? this.child_id_name : this.id_name;
		plate.style.zIndex = (this.has_parent) ? "100" : "99";
		plate.title = params.title;

		if (this.styles) {
			plate = this.styling(plate);
		}
		if (this.position_by_dom || this.position_by_event || this.re_position) {
			plate = this.positioning(plate);
		}
		if (this.callback) {
			plate.callback = this.callback;
		}
		if (params.close) {
			this.toggle_after_delete_all_layers();
		}

		return plate;
	}
};


var Log = function(id) {
	console.debug(id);
}


var renderCheckbox = function(id) {
//	link_to_function image_tag('note/check_off.gif', :class => "checkbox"), "toggleCheckbox(this, '#{id}')", :class => "checkbox"
//	checkbox += "<script type='text/javascript'>$('#{id}').checked = false;</script>"
}

var toggleCheckbox = function(ele, id) {
	var img = ele.down("img");
	if ($(id).checked == true) {
		$(id).checked = false;
		img.src = "/images/note/check_off.gif";
	}
	else {
		$(id).checked = true;
		img.src = "/images/note/check_on.gif";
	}
}



var selectAll = function() {
	$$('input.checkbox').each(function(checkbox) {
		checkbox.checked = true;
	})
}

var deselectAll = function() {
	$$('input.checkbox').each(function(checkbox) {
		checkbox.checked = false;
	})
}

var toggleAll = function() {
	$$('input.checkbox').each(function(checkbox) {
		if(checkbox.checked == true) checkbox.checked = false;
		else checkbox.checked = true;
	})
}

var collectCheckedForParam = function() {
	var ids = ""
	$$('input.checkbox').each(function(checkbox) {
		if (checkbox.checked) {
			ids += "ids[]=" + checkbox.value + "&";
		}
	})
	return ids;
}



/* sent note & invite new member (in connect manager)

*/
var switchChild = function(child, node_id_1, node_id_2) {
	var node_1 = document.getElementById(node_id_1);
	var node_2 = document.getElementById(node_id_2);

	if(child.parentNode == node_1) var source = node_1, target = node_2
	else var source = node_2, target = node_1;

	target.appendChild(child.cloneNode(true));
	source.removeChild(child);
};


var makeReceivers = function(prefix) {
	var receiver_addresses = $(prefix + "_receiver_addresses");
	receiver_addresses.clear();

	var selected_friends = $$("#selected_friends li");
	for (var i=0; i<selected_friends.length; i++) {
		receiver_addresses.value += selected_friends[i].down(".user_login").innerHTML + " ";
	}

	receiver_addresses.value += $F("email_receivers");
}

var update_selected_filename = function(element) {
	var td = document.createElement("div");
	td.style.display = "none";
	td.innerHTML = element.value;
	var bd = document.getElementsByTagName("body")[0];
	if(bd) bd.appendChild(td);

	if(/win/gi.test(navigator.platform)) {
		var filename = td.innerHTML.split('\\').last();
	} else {
		var filename = td.innerHTML.split('/').last();
	}

	$("just_selected_filename").innerHTML = filename;
	bd.removeChild(td);
};

function submitForm(el) {
  var e = $(el);
  
  if (e.tagName != "form") {
    e = e.up("form") || e.down("form");
  }
  
  if (e)
    e.submit();

}

var set_layout = function(_cell) {
	var _rc = _cell.id.split("_");
	if(Number(_rc[2]) < 3) _rc[2] = 3;

	var _container = $('layout_helper_wrapper');
	for(var r=0; r<_container.childNodes.length; r++) {
		if(_container.childNodes[r].nodeType != 1) continue;
		
		for(var c=0; c<_container.childNodes[r].childNodes.length; c++) {
			if(_container.childNodes[r].childNodes[c].nodeType != 1) continue;
			var cell = _container.childNodes[r].childNodes[c];
			var rc = cell.id.split("_");
			if(Number(rc[1]) <= Number(_rc[1]) && Number(rc[2]) <= Number(_rc[2])) {
				$(cell).addClassName("hover")
			} else {
				$(cell).removeClassName("hover")
			}
		}

	}
}

var tippingAllCells = function() {
	var _container = $('layout_helper_wrapper');
	for(var r=0; r<_container.childNodes.length; r++) {
		if(_container.childNodes[r].nodeType != 1) continue;
		for(var c=0; c<_container.childNodes[r].childNodes.length; c++) {
			if(_container.childNodes[r].childNodes[c].nodeType != 1) continue;
			var cell = _container.childNodes[r].childNodes[c];
			if(/hover/i.test(cell.className)) {
				$(cell).addClassName("selected")
			}
		}
	}
}

var setLayout = function(rows,cols) {
	if(cols < 4) cols = 4;
	var sum = rows * cols;
	if(/connects/.test(location.href)) {
		setConnectNoteLayout(sum,cols);
	}
	else {
		setNoteLayout(sum,cols);
	}
};

var toggleSignin = function() {
	OnEvent.clear();
	OnEvent.add(window.document, "click", BindEvent(this, function(ev) {
		var node = new Eventor(ev)._node();
		if(!$(node).up("#signin") && !/btn_signin/i.test(node.src) && $('signin').style.display != "none") {
			$('forgot_wrapper').hide();
			$('signin').slideUp({duration: 0.4});
		}
	}));

	new zAjax().send({
		url: "/refresh_signin",
		sync: true,
		method: "GET",
		success: function(_xhr) {
			if($('signin').style.display == "none") {
				eval(_xhr.responseText);
				// if(Browser.msie) $('signin').style.top = "78px";
				$('signin').slideDown({duration: 0.4});
				window.setTimeout(function() {
					$('login').blur();
					$('login').focus();
				}, 800)
			}
			else {
				$('forgot_wrapper').hide();
				$('signin').slideUp({duration: 0.4});
			}
		},
		failure: function() {}
	})
};

var verifyUser = function(_field, _v) {
	// password
	if(_field == "password") {

		var _msg = "";
		if(_v.is_empty()) _msg = "Enter Password";
		else if(_v.length < 4 || _v.length > 12) _msg = "4 to 12 characters in length";

		var _f = document.getElementById("password-message");
		if(_f) _f.innerHTML = "<strong>" + _msg + "</strong>";

	// password confirmation
	} else if(_field == "password_confirmation") {

		var _f = document.getElementById("password_confirmation-message");
		var _msg = ($("user_password").value != $("user_password_confirmation").value) ? "Incorrect Password. Re-confirm Password" : "";
		if(_f) _f.innerHTML = "<strong>" + _msg + "</strong>"

	// nickname
	} else if(_field == "nickname") {

		var _f = document.getElementById("nickname-message");
		var _msg = (_v.is_empty()) ? "Enter Full Name.<br/>&nbsp;" : "&nbsp;<br/>&nbsp;";
		if(_f) _f.innerHTML = "<strong>" + _msg + "</strong>"

	// verification
	} else if(_field == "verification") {

		var _f = document.getElementById("verification-message");
		var _msg = "<br/>&nbsp;<br/>&nbsp;";
		if(_v.is_empty()) _msg = "Enter the Text Code from the image above.<br/>&nbsp;<br/>&nbsp;"
		else if(SHA1(_v) != $('user_verification_salt').value) _msg = "Incorrect Text code. Re-enter the Text Code.<br/>&nbsp;<br/>&nbsp;"

		if(_f) _f.innerHTML = "<strong>" + _msg + "</strong>"

	// else
	} else {
		try {
			new zAjax().send({
				url: "/verify/" + _field + "?field_value=" + encodeURIComponent(_v),
				sync: true,
				method: "GET",
				data: _v,
				success: function(_xhr) {
					var _r = _xhr.responseText;
					var _field = _r.replace(/_.*$/,'')
					var _msg = _r.replace(new RegExp(_field + "_"), '')

					var _f = document.getElementById(_field + "-message");
					if(_f) {
						// if(_msg.is_empty()) _f.style.display = "none";
						// _f.style.display = "block";
						if(_msg.is_empty()) _msg = "OK";
						_f.innerHTML = "<strong>" + _msg + "</strong>";
					}
				},
				failure: function() {} 
			})
		} catch(e) {
			// hmm
		}
	}
};

var enterToSubmit = function(ev) {
	var _ev = new Eventor(ev)
	if (_ev._keycode() == 13 && !_ev._event().shiftKey) submitForm(_ev._node());
}

// fragile layer
//
var initFragileLayer = function() {
	OnEvent.add(window.document, "mousedown", function() {
		var _e = arguments[0];
		var node = _e.target || _e.srcElement;

		var __ev_refer = node;
		var __select_trigger = false;
		do {
			if(/z_select/i.test(__ev_refer.className)) {
				__select_trigger = true;
				break;
			}
		} while(__ev_refer = __ev_refer.parentNode)

		// close layer
		if(!__select_trigger && !$(node).up(".fragile") || /layerClose/.test(node.className)) {
			$$(".fragile").each(function(_f) {
				var _method = String(/do_[a-z]+/i.exec(_f.className));
				switch(_method) {
					case "do_nullify":
						if(_f.innerHTML) _f.innerHTML = "";
						break;
					case "do_destroy":
						if(_f) _f.parentNode.removeChild(_f);
						break;
					case "do_hide":
						if(_f.style.display != "none") _f.style.display = "none"
						break;
					default:
						//
				}
			})
		}
	}.bindAsEventListener(this));
	OnEvent.add(window, "beforeunload", OnEvent.clear);
};