//
// ページ読み込み時
//
jQuery(document).ready(function(){
	//
	// 顔文字フレームの作成
	//
	if(jQuery("#id-frmKaomoji").length) {
		var rows = jQuery("#id-kaodata").val().split("_$nxtrow=");
		var count = 1;
		var phtml = '<table class="tkr-parent" border="0" cellpadding="0" cellspacing="0"><tbody><tr>';
		var chtml = '';
		var extw = 0;
		var tw = 0;
		var maxw = jQuery("#id-frmKaomoji").innerWidth();
		var pw = 0;
		var pmaxc = 0;
		var pcount = 1;
		var pwidth = "";
		var p_class = "";

		// 分類の一番長い文字列を取得
		jQuery.each(rows, function() {
			var kaomoji = this.split("_&child=");
			jQuery("#ruler").text(kaomoji[0]);
			if(jQuery("#ruler").width() > pw) {
				pw = jQuery("#ruler").width();
			}
		});
		// 分類項目の幅の設定値を取得
		pw += 20;
		pmaxc = Math.floor(maxw / pw);
		pwidth = Math.floor(maxw / pmaxc) + "px";

		jQuery.each(rows, function() {
			var kaomoji = this.split("_&child=");
			var value = kaomoji[1].split("_&nxt=");
			jQuery("#ruler").text("");
			extw = 0;
			p_class = "#ffffff";

			if(pcount > pmaxc) {
				phtml += '</tr><tr>';
				pcount = 1;
			}

			phtml += '<td id="id-parentli-' + count + '" onclick="showKaomojiChild(' + count + ')">' + kaomoji[0] + '</td>';
			chtml += '<div class="frmKaomoji-child" name="child-' + count + '" id="id-child-' + count + '"style=" display: none;">'
						+ '<ul class="tkr-child-ul" style="background-color: ' + p_class + ';">';

			// 顔文字の追加
			jQuery.each(value, function() {
				// 文字の長さを取得
				extw += 20;
				jQuery("#ruler").text(jQuery("#ruler").text() + this);
				tw = jQuery("#ruler").width() + extw;
				// 要素の最大長(-20px)を超えた場合
				if(tw > (maxw-20)) {
					if(p_class == "#efefef") {
						p_class = "#ffffff";
					} else {
						p_class = "#efefef";
					}

					chtml += '</ul><ul class="tkr-child-ul" style="background-color: ' + p_class + ';">';
					extw = 20;
					jQuery("#ruler").text('' + this);
				}

				chtml += '<li onclick="insertKaomoji(this)" onmouseover="drawLine(this);" onmouseout="eraseLine(this);">' + this + '</li>';
			});
			chtml += '</ul></div>';

			count++;
			pcount++;
		});
		phtml += '</ul>';
		jQuery("#kao-parent").html(phtml);
		jQuery("#kao-child").html(chtml);
		jQuery(".tkr-parent td").css("width", pwidth);
	}
});


//
// 顔文字フレームの表示
//
function frmKaomoji_On_Click() {
	var pos = jQuery("#id-tkr-view").position();
	var xtop = pos.top + jQuery("#id-tkr-view").outerHeight();

	jQuery("#id-frmKaomoji").css("left", pos.left + "px");
	jQuery("#id-frmKaomoji").css("top", xtop + "px");
	jQuery("#id-frmKaomoji").toggle();
}


//
// 項目に該当する顔文字一覧を表示
//
function showKaomojiChild(id) {
	var parent = "id-parentli-";
	var pObj = "#id-parentli-" + id;
	var child = "id-child-";
	var obj = "#id-child-" + id;

	jQuery("td[id^='" + parent + "']").css("background-color", "#dcdcdc");
	jQuery(pObj).css("background-color", "#ffffff");

	jQuery("div[id^='" + child + "']").hide();
	jQuery(obj).show();
}


//
// 顔文字の周囲に線を引く
//
function drawLine(obj) {
	jQuery(obj).css("border", "1px solid #6666ff");
	jQuery(obj).css("padding", "1px 4px");
}


//
// 顔文字の周囲の線を消す
//
function eraseLine(obj) {
	jQuery(obj).css("border", "");
	jQuery(obj).css("padding", "2px 5px");
}


//
// フォームに顔文字を追加
//
function insertKaomoji(obj) {
	sender = jQuery("#id-insertform").val();
	jQuery(sender).insertText(jQuery(obj).text());
	jQuery("#id-frmKaomoji").hide();
}

jQuery.extend(jQuery.fn, {
	insertText: function(kaomoji) {
		var target = jQuery(this).get(0);
		var sel;

		if(document.selection) {
			// IE
			target.focus();
			sel = document.selection.createRange();
			sel.text = kaomoji;
			target.focus();
		} else if (target.selectionStart || target.selectionStart == '0') {
			// MOZILLA
			var startPos = target.selectionStart;
			var endPos = target.selectionEnd;
			target.value = target.value.substring(0, startPos)
										+ kaomoji
										+ target.value.substring(endPos, target.value.length);
			target.focus();
			target.selectionStart = startPos + target.length;
			target.selectionEnd = startPos + target.length;
		} else {
			target.value += kaomoji;
			target.focus();
		}
	}
});