//显示表情菜单
function showFace(id,showid,target,type,page)
{
	var div = $('face_bg');
	
	if($(showid+'_menu'))
	{
		div.parentNode.removeChild($(showid+'_menu'));
	}
	if(div)
	{
		div.parentNode.removeChild(div);
		
	}
	div = document.createElement('div');
	div.id = 'face_bg';
	div.style.position = 'absolute';
	div.style.left = div.style.top = '0px';
	div.style.width = '100%';
	div.style.height = document.body.scrollHeight + 'px';
	div.style.backgroundColor = '#000';
	div.style.zIndex = 10000;	
	div.style.display = 'none';
	div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=0,finishOpacity=100,style=0)';
	div.style.opacity = 0;	
	if(id !='')
	{
		$(id).appendChild(div);
		
		div.onclick = function(){
		   $('face_bg').style.display = 'none';
		   
		     }
	}
	else
	{
		div.onclick = function(){
		   $(showid+'_menu').style.display = 'none';
		   $('face_bg').style.display = 'none';
		  }
		$('append_parent').appendChild(div);
	}
	var faceDiv = document.createElement("div");
	faceDiv.id = showid+'_menu';
	faceDiv.className = 'facebox';
	faceDiv.style.position = 'absolute';
	
	//表情显示层
	var moodboxdiv = document.createElement("div");
	moodboxdiv.id  ='moodbox';
	moodboxdiv.className = 'moodbox';
	
	//表情显示表头部分	(顶部)
	
	var moodselectdiv = document.createElement("div");
	moodselectdiv.id='moodlist';
	moodselectdiv.className = 'moodlist';
	
	moodselectdiv.innerHTML = '<span style="font-weight :normal;">选择表情分类:    </span><span id="faceselectid" onmouseover="showmoodtype()" onmouseout="hidenmoodtype()" style="font-weight:bold;">默认表情</span><span><img src="http://a.pojaaimg.cn/lj/i/arrow_down.gif"></span>';
	moodboxdiv.appendChild(moodselectdiv);
	
	 //不同类型的图片总个数
	var typenum = 0;
	switch(type)
	{
		case 'A':typenum = 41;
		break
		case 'B':typenum = 44;
		break
		case 'C':typenum = 72;
		break
		default: typenum = 22;
	}
	
	//中间图片	
	var faceul = document.createElement("ul"); //图片内容
	for(var i=1; i<22; i++)
	{
	   if(i+(page-1)*21 <= typenum)
	       {
		var faceli = document.createElement("li");	
		faceli.innerHTML = '<img src="http://a.pojaaimg.cn/lj/i/face/'+type+'/'+(i+(page-1)*21)+'.gif" class="faceshowtype" onclick="insertFace(\''+showid+'\',\''+type+'/'+(i+(page-1)*21)+'\', \''+ target +'\',\''+id+'\')" style="cursor:pointer; position:relative;"  />';
		faceul.appendChild(faceli);
		}
	}
	moodboxdiv.appendChild(faceul);
	
	//底部分页
	var moodpagerdiv = document.createElement("div");
	moodboxdiv.appendChild(moodpagerdiv);
	moodpagerdiv.id='moodpager';
	moodpagerdiv.className = 'moodpager';
	
	//页码控制
	var pagenum = 0;
	var optionnum = 0;
	var optionname ='';
	switch(type) //不同类型的图片分页数
	{
		case 'A':pagenum = 2;optionnum = 0;optionname = '默认表情';
		break
		case 'B':pagenum = 3;optionnum = 1;optionname = '洋葱头';
		break
		case 'C':pagenum = 4;optionnum = 2;optionname = '旺旺';
		break
		default: pagenum = 2;optionnum = 3;optionname = '悠嘻猴';
	}
	var str = '';
	for(i=1;i<=pagenum;i++)
	{
		if(page == i)
		{
			str += '<span  class="current"><a onclick="showFace(\''+id+'\',\''+showid+'\',\''+target+'\',\''+type+'\','+i+')">'+i+'</a></span>';
		}
		else
		{
			str += '<span><a onclick="showFace(\''+id+'\',\''+showid+'\',\''+target+'\',\''+type+'\','+i+')" >'+i+'</a></span>';
		}

	}
	moodpagerdiv.innerHTML = str;	
	faceDiv.appendChild(moodboxdiv);
	
	if(id !='') //判断插入位置
	{
		$(id).appendChild(faceDiv);
	}
	else
	{
		$('append_parent').appendChild(faceDiv);
	}
	var strtype='';
	document.getElementById('faceselectid').innerHTML=optionname;

	//下拉框
	strtype  = '<div id="moodtype" class="moodtype" onmouseover="showmoodtype()" onmouseout="hidenmoodtype()" style="width:55px;">';
	strtype += (0==optionnum)?'':'<span class="moodtypespan"><a  onclick="showFace(\''+id+'\',\''+showid+'\',\''+target+'\',\'A\',1)">默认表情</a></span>';
	strtype += (1==optionnum)?'':'<span class="moodtypespan"><a  onclick="showFace(\''+id+'\',\''+showid+'\',\''+target+'\',\'B\',1)">洋葱头</a></span>';
	strtype += (2==optionnum)?'':'<span class="moodtypespan"><a  onclick="showFace(\''+id+'\',\''+showid+'\',\''+target+'\',\'C\',1)">旺旺</a></span>';
	strtype += (3==optionnum)?'':'<span class="moodtypespan"><a  onclick="showFace(\''+id+'\',\''+showid+'\',\''+target+'\',\'D\',1)">悠嘻猴</a></span>';
	strtype += '</div>';		
	
	var newDiv = document.createElement("div");
	newDiv.id='newDiv';
	document.getElementById('moodbox').appendChild(newDiv);
	document.getElementById('newDiv').innerHTML+=strtype;	
	document.getElementById('moodtype').style.display='none';
	
	//定位菜单
	if(id =='')
	{
		setMenuPosition(showid, 0);
	}
	div.style.display = '';

}

//插入表情
function insertFace(showid, id, target,sid) {
	var faceText = '[em:'+id+':]';
	if($(target) != null) {
		insertContent(target, faceText,sid);
	}
	if(sid =='')
	{
		$(showid+'_menu').style.display = 'none';
		
	}
	$('face_bg').style.display = 'none';
}

function textCounter(obj, showid, maxlimit) {
	var len = strLen(obj.value);
	var showobj = $(showid);
	if(len > maxlimit) {
		obj.value = getStrbylen(obj.value, maxlimit);
		showobj.innerHTML = '0';
	} else {
		showobj.innerHTML = maxlimit - len;
	}
	if(maxlimit - len > 0) {
		showobj.parentNode.style.color = "";
	} else {
		showobj.parentNode.style.color = "red";
	}
	
}
function getStrbylen(str, len) {
	var num = 0;
	var strlen = 0;
	var newstr = "";
	var obj_value_arr = str.split("");
	for(var i = 0; i < obj_value_arr.length; i ++) {
		if(i < len && num + byteLength(obj_value_arr[i]) <= len) {
			num += byteLength(obj_value_arr[i]);
			strlen = i + 1;
		}
	}
	if(str.length > strlen) {
		newstr = str.substr(0, strlen);
	} else {
		newstr = str;
	}
	return newstr;
}
function byteLength (sStr) {
	aMatch = sStr.match(/[^\x00-\x80]/g);
	return (sStr.length + (! aMatch ? 0 : aMatch.length));
}
function strLen(str) {
	var charset = document.charset; 
	var len = 0;
	for(var i = 0; i < str.length; i++) {
		len += str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255 ? (charset == "utf-8" ? 3 : 2) : 1;
	}
	return len;
}

function showmoodtype()
{
	document.getElementById('moodtype').style.display='';
}

function hidenmoodtype()
{
	document.getElementById('moodtype').style.display='none';
}