/***
  @auth leuko
  @date 2008-5-29
  @example:
  <script>var oFace = new ReplyMenu({elementID:'messagess',face:'tuzi',faceNum:19,ext:'gif',allowFace:5});oFace.draw();</script>
  {elementID:'messagess',face:'tuzi',faceNum:19,ext:'gif'}参数，elementID文本域的id，face表情的文件夹，faceNum要显示的表情数，ext表情的后缀名，faceLimit允许增加的表情个数
***/

var Class_face = {
	create:function(){
		return function(){
			this.initialize.apply(this,arguments);
		}
	},
	extend:function(d,s){
		for(var p in s)
			d[p] = s[p];
	}
}
var _showFaceTag = 1;
var _showLinkTag = 1;
var ReplyMenu = Class_face.create();
ReplyMenu.prototype={
	initialize:function(opt){
		var defaultOpt = {elementID:'textarea',face:'ppb',faceNum:19,ext:'gif',allowFace:8,'retn':0,faceLimit:5};
		if(typeof opt != 'undefined'){
			Class_face.extend(defaultOpt,opt);
		}
		this.options = defaultOpt;
	},
	draw:function(){
		var s = "<div style='border:0;height:24px;line-height:24px;clear:both'><a href='javascript:void(0)' onclick='init_face(\""+this.options.face+"\","+this.options.faceNum+",\""+this.options.ext+"\",this,\""+this.options.elementID+"\","+this.options.faceLimit+");return false;' onmouseover='_showFaceTag=1;' onmouseout='_showFaceTag=0;' onfocus='this.blur()'><img src='http://www.mzsky.cc/editface/style/ed_image.gif' title='更多表情插入' style='border:0;margin:2px;' /></a><a href='javascript:void(0)' onclick='init_link(this,\""+this.options.elementID+"\");return false;' onmouseover='_showLinkTag=1;' onmouseout='_showLinkTag=0;' onfocus='this.blur()'><img src='http://www.mzsky.cc/editface/style/ed_link.gif' title='插入连接' style='border:0;margin:2px;' /></a><img src='http://www.mzsky.cc/editface/style/bar.gif' />";
		for(var i=1;i<=this.options.allowFace;i++){
			s += '<img src="http://www.mzsky.cc/editface/qq/qq_0'+i+'.gif" onclick="insert_face(\'qq\',\''+i+'\',\''+this.options.elementID+'\','+this.options.faceLimit+');return false;" title="qq_'+i+'" style="margin:2px;" />';
		}
		if(this.options.retn==0)
			document.write(s + '</div>');
		else
			return s + '</div>';
	}
}

function init_face(f,num,ext,o,id,faceLimit){
	if($e('_face_show')){
		//$('#_face_show').remove();
		$e('_face_show').parentNode.removeChild($e('_face_show'));
	}
	var oDiv = document.createElement('div');
	oDiv.id = '_face_show';
	oDiv.style.position = 'absolute';
	oDiv.style.background = '#eee';
	oDiv.style.border = '1px solid #f00';
	oDiv.style.left = (getLeft(o)+3) + 'px';
	oDiv.style.top = (getTop(o)+22) + 'px';
	oDiv.style.zIndex = 99999; 
	document.body.appendChild(oDiv);
	try{document.body.addEventListener("click",hide_face,false); }catch(e){document.body.attachEvent("onclick",hide_face); };
	var sFace = '';
	var src = [];
	for(var i=1;i<num;i++){
		if(i<10)
			src[i] = 'http://www.mzsky.cc/editface/'+f+'/'+f+'_0'+i+'.'+ext;
		else
			src[i] = 'http://www.mzsky.cc/editface/'+f+'/'+f+'_'+i+'.'+ext;
		var oImg = new Image();
		oImg.src = src[i];
		if(i%6==0)
			var br = '<br />';
		else
			var br = '';
		sFace += '<img src="'+src[i]+'" onclick="insert_face(\''+f+'\',\''+i+'\',\''+id+'\','+faceLimit+');return false;" title="'+f+'_'+i+'" style="margin:2px;" />'+br;
	}
	oDiv.innerHTML = sFace;
	for(var i=1;i<num;i++){
		var oImg = new Image();
		oImg.src = src[i];
	}
}

function insert_face(d,n,id,faceLimit){
	var oText = $e(id);
	if(!!oText.getAttribute('tag')==false){
		oText.setAttribute('tag','change')
		oText.onkeyup = chkFaceNum_for_event(id,faceLimit);
		//oText.setAttribute('onpaste',"setTimeout('chkFaceNum("+id+","+faceLimit+")',200");
		if(navigator.userAgent.toLowerCase().indexOf('msie')>=0)
			oText.onpaste = chkFaceNum_for_event(id,faceLimit);
		else
			oText.oninput = chkFaceNum_for_event(id,faceLimit);
	}
	try{$e('_face_show').style.display = 'none';}catch(e){};
	if(chkFaceNum(id,faceLimit)==0){
		return false;
	}
	var sValue = oText.value;
	oText.value += '['+d+n+']';
}

function chkFaceNum(id,faceLimit){
	var reg = /\[\w{2,15}\d{1,3}\]/ig;
	var oText = $e(id);
	var sValue = oText.value;
	var i = 0;
	var tmpFace = [];
	while(res = reg.exec(sValue)){
		i++;
		if(i > faceLimit){
			tmpFace[i] = res;
			//var reg = new RegExp(res,'ig');
			//oText.value = oText.value.replace(/\[\w{2,15}\d{1,3}\]$/,'');
		}
	}
	if(i >= faceLimit){
		alert('你的表情太丰富了！');
		
		for(var i=0,l=tmpFace.length;i<l;i++){
			//alert(typeof tmpFace[i]);
			oText.value = oText.value.replace(tmpFace[i],'');
		}
		return 0;
	}
	return 1;
}
function chkFaceNum_for_event(id,faceLimit){
	return function(){
		chkFaceNum(id,faceLimit);
	}
}

function hide_face(){
	if(_showFaceTag==1)return;
	$e('_face_show').style.display = 'none';
}
function hide_link(){
	if(_showLinkTag==1)return;
	$e('_link_show').style.display = 'none';
	$e('link_txt').value='';
}
function init_link(o,id){
	if($e('_link_show')){
		//$('#_link_show').remove();
		$e('_link_show').parentNode.removeChild($e('_link_show'));
		/*$e('_link_show').style.left = (getLeft(o)+3) + 'px';
		$e('_link_show').style.top = (getTop(o)+22) + 'px';
		$e('_link_show').style.display = '';
		return;*/
	}
	var oDiv = document.createElement('div');
	oDiv.id = '_link_show';
	oDiv.style.position = 'absolute';
	oDiv.style.background = '#eee';
	oDiv.style.border = '1px solid #c6cdf2';
	oDiv.style.width = '324px';
	oDiv.style.zIndex = 99999; 
	oDiv.style.left = (getLeft(o)+3) + 'px';
	oDiv.style.top = (getTop(o)+22) + 'px';
	document.body.appendChild(oDiv);
	try{document.body.addEventListener("click",hide_link,false); }catch(e){document.body.attachEvent("onclick",hide_link); };
	
	oDiv.innerHTML = '<form action="" method="get"><div style="width:83%;float:left;text-align:right;" onmouseover="_showLinkTag=1" onmouseout="_showLinkTag=0"><div style="height:22px;width:100%;">链接地址：<input type="text" id="link_addr" style="border: 1px solid #c6cdf2;width:200px;" value="http://" /></div><div class="tt">连接文本：<input type="text" style="border: 1px solid #c6cdf2;width:200px;" id="link_txt" /></div></div><div style="width:17%;float:left;padding-top:10px;"><input type="button" name="button" value="确定" style="border:1px solid #c6cdf2;" onclick="face_add_link(\''+id+'\');" /></div></form>';
}

function face_add_link(id){
	if($e('link_addr').value=='' || $e('link_txt').value=='')
		return;
	$e(id).value += '[url='+$e('link_addr').value+']'+$e('link_txt').value+'[/url]';
}

function $e(s){
	return document.getElementById(s);
}

function getLeft(element){
	var positionX = 0;
	while (element != null){
		positionX += element.offsetLeft;
		element = element.offsetParent;
	}
	return positionX;
}
function getTop(element){
	var positionY = 0;
	while (element != null){
		positionY += element.offsetTop;
		element = element.offsetParent;
	}
	return positionY;
}