﻿var $j = jQuery.noConflict();

$j.fn.FormFace = function(o){
		var d = { cid : "", btn : "" , left : "50" , top : "1", button : true };	
		var o = $j.extend(d, o);
		var A = $j(this);
		var Num = 39 ; //图片数量
		var Url = "./imgaes/gif/";
		var T;
		var L;
		
		if($j(o.cid).size()<=0){
			alert("FormFace插件提醒：未找到 "+o.cid);
			return false;
		};
		
		//替换符号为图片
		var Replace = function(){
			Code = $j(o.cid).html();
			Code = Code.replace(/\[@/g, "<img src=" + Url + "");
			Code = Code.replace(/\@]/g, ".gif />");
			$j(o.cid).html(Code);
		};
		
		//控制按钮器位置
		var tiPos = function(){
			T = A.offset().top;
			L = A.offset().left;
			$j("#faceTitle").css("top", parseInt(T) - 0 + "px");  //按钮位置根据实际情况调整
			$j("#faceTitle").css("left", parseInt(L) + parseInt(o.left)+313+ "px");
		};
		
		Replace();
		
		//添加图标按钮及样式、控制图标按钮位置
		if(o.button){
			$j("body").append("<style> #faceTitle{height:26px; width:65px; position:absolute; background:url(./imgaes/qq_1.gif) no-repeat center center #fff;border:1px solid #aaa;border-bottom:none;'}</style><div id='faceTitle' style='cursor:pointer'></div>")
			tiPos();
		}
		//窗口改变时自动调整位置
		$j(window).resize(function(){
			if(o.button){
				tiPos();
				Pos();
			}
		});

		//点击图标按钮
		$j("#faceTitle").click(function(event){
			if(o.button){
			Con();
			Pos();
			event.stopPropagation();
			$j("html").click(function(){
				$j("#faceContent").hide();
			});
			}
		});
		
		//将容器、表情插入页面
		var Con = function(){
			if($j("#faceContent").size()>0){$j("#faceContent").toggle(); return false; }; //阻止再次点击重复添加
			var cArr = [];
			var iArr = [];
			for (var i = 1; i <= Num; i++) {
				iArr[iArr.length] = "<a href='javascript:'><img src=" + Url + "F_"+i+".gif fn=[@F_" + i + "@] /></a>"
			};
			cArr[cArr.length] ="<style>#faceContent{width:364px; position:absolute;border:1px solid #aaa;border-top:none;z-index:9999; text-align:center;padding:3px;padding-bottom:6px;background:#fff;} #faceContent a img{float:left;cursor:pointer;margin:1px 1px; border:#cacaca 1px solid}  #faceContent a:hover img{border:1px solid #f51d69} </style>"
			cArr[cArr.length] = "<div id='faceContent'>"+iArr.join("")+"</div>";
			$j("body").append(cArr.join(""));
			Click();
		};
		
		//控制弹出的表情容器位置
		var Pos = function(){
			T = A.offset().top;
			L = A.offset().left;
			$j("#faceContent").css("top", parseInt(T)+parseInt(o.top) + "px");
			$j("#faceContent").css("left", parseInt(L) +parseInt(o.left)+300 + "px");
		};
		
		//表情点击
		var Click=function(){
			$j("#faceContent img").click(function(){
				if(A.val()==A.attr("defaultValue")){
					A.val("");
					A.attr("style","color='#000'");
				}
				var V=A.val();
				A.val(V+$j(this).attr("fn"));
			});
		};
		
		//Btn点击 --- 这里预留，配合程序自行修改
			$j(o.btn).click(function(){
				if(A.val()==""){
					alert("输入框不能为空")
					A.focus();
					return false;
				};
				//这里可以写ajax功能将数据传递至后台，后判断是否成功，进行下面内容				
				$j(o.cid).append("<p>"+A.val()+"</p>");
				A.val("");
				Replace();
				
				var N=A.offset().top; 
				$j("#faceTitle").css("top", parseInt(N) - 22 + "px");
			});

}
