<?xml version="1.0"?>
<labeltemplate>
   <label>
    <![CDATA[
	   <style type="text/css">
.pk_css{width:620px;margin:0 auto; margin-top:15px;border:1px solid #ddd;padding-right:20px} 
.pk_css h2{font-family:"\5FAE\8F6F\96C5\9ED1";font-size:21px;color:#555; text-align:center;padding-top:15px;height:45px}
.clear{clear:both}
.pk_css .round01{ margin:0 auto; width:542px; height:10px;}
.pk_css .pk_box{padding-top:25px;}
.pk_css .pk_box .left{width:261px; float:left;padding:10px;margin-left:15px; background:url({$GetInstallDir}images/pkbox04.png) no-repeat;height:93px}
.pk_css .pk_box .left h4{font-size:14px;color:#555}
.pk_css .pk_box .center{width:20px;float:left;}
.pk_css .pk_box .right{width:261px; float:right;padding:10px;margin-left:15px; background:url({$GetInstallDir}images/pkbox03.png) no-repeat;height:93px}
.pk_css .pk_box .right h4{font-size:14px;color:#555}

.pk_css .pk_tiao{width:540px;margin:0 auto;  line-height:12px;margin-top:15px;}
.pk_css .pk_tiao .pk_yes{ float:left; width:270px;}
.pk_css .pk_tiao .pk_yes span{ float:left; height:11px; background:url({$GetInstallDir}images/pkt03.png)}
.pk_css .pk_tiao h3{ float:left;font-size:12px; font-weight:normal;width:59px;padding-left:10px}
.pk_css .pk_tiao .pk_no{ float:right; width:270px;}
.pk_css .pk_tiao .pk_no span{ float:left; height:11px; background:url({$GetInstallDir}images/pkt04.png)}

.pk_css .pk_pl{ line-height:12px;margin-top:15px;}
.pk_css .pk_pl img{margin:15px 0px 0px 20px}
.pk_css .pk_pl .left{width:270px; float:left;}
.pk_css .pk_pl .right{width:277px; float:right;}
.pk_css .pk_pl .input01{width:270px; height:120px;padding:5px;border:1px solid #ddd;border-top:1px solid #aaa;border-left:1px solid #aaa;margin-left:15px; background:url({$GetInstallDir}images/zfgd.png) no-repeat 50% 50%}
.pk_css .pk_pl .input02{width:270px; height:120px;padding:5px;border:1px solid #ddd;border-top:1px solid #aaa;border-left:1px solid #aaa;background:url({$GetInstallDir}images/ffgd.png) no-repeat 50% 50%}

.pk_css .more{ padding:10px 0px; text-align:right}
.pk_css .more span a{ color:#0654b5;border:1px solid #ddd;padding:5px 10px;font-size:12px}

</style>

<div class="pk_css">
    <h2>{KS:PK:Title}</h2>
	<div class="clear"></div>
	<div class="pk_box">
		<div class="left">
			<h4>正方观点</h4>
			{KS:PK:ZFGD}
		</div>
		<div class="center">
		</div>
		<div class="right">
			<h4>反方观点</h4>
			{KS:PK:FFGD}
		</div>
	</div>	  
	<div class="pk_tiao">
		<div class="pk_yes" id="pk_yes"><h3 id="agreenum">0人支持</h3><span class="img_agree" id="img_agree"></span></div>
		<div class="pk_no" id="pk_no"><span class="img_argue" id="img_argue"></span><h3 id="arguenum">0人支持</h3></div>
	</div>
	<div class="pk_pl">
		<div class="clear"></div>
		<div class="left">
			<textarea name="agreeContent" id="agreeContent" class="input01" onclick="CheckPKLogin()"></textarea>
			<a href="#" onclick="submitCheck(1);return false;"/><img class="sbpk" data1="agree" data2="y" src="{$GetSiteUrl}/plus/pk/images/pk_button_tj.gif" width="70" height="23" border="0" /></a>
		</div>
		<div class="right">
			<textarea name="argueContent" id="argueContent" class="input02" onclick="CheckPKLogin()"></textarea>
			<a href="#" onclick="submitCheck(2);return false;"/><img class="sbpk" data1="argue" data2="y" src="{$GetSiteUrl}/plus/pk/images/pk_button_tj.gif" width="70" height="23" border="0" /></a>
		</div>
	</div>
	<div class="clear"></div>
      <div class="more"><span><a href="{$GetSiteUrl}/Plus/Plus.PK/More.aspx?id={KS:PK:PKID}" target="_blank">查看PK结果 >></a></span></div>
      <div class="clear"></div>
    
</div>
<script>
 var pkid={KS:PK:PKID};
 var isLogin=false;
 function CheckPKLogin()
 { 
    if (isLogin==true) return;
     jQuery.ajax({
			  url: "{$GetSiteUrl}/plus/ajaxs.ashx",
			  cache: false,
			  data: "a=checkpklogin&pkid=" + pkid,
			  success: function(r){
			        r=unescape(r);
				  	var arrobj=r.split('|');
					if (arrobj[0]!="success")
					{
						if (arrobj[0]=="login")
						{
						 showuserlogin();
						}else{
						jQuery.dialog.alert(arrobj[1]);
						}
					}else{
					  isLogin=true;
					}
			  }
			  });

 }


function submitCheck(role){
 var content=''
 if (role==1)
 {
    if (jQuery("#agreeContent").val()=='')
	{
	   KesionJS.Alert("请输入您的想法!",'jQuery("#agreeContent").focus();');
	   return;
	}
	content=jQuery("#agreeContent").val();
 }else if(role==2){
    if (jQuery("#argueContent").val()=='')
	{
	   KesionJS.Alert("请输入您的想法!",'jQuery("#argueContent").focus();');
	   return;
	}
	content=jQuery("#argueContent").val();
 }else{
    if (jQuery("#otherContent").val()=='')
	{
	   KesionJS.Alert("请输入您的想法!",'jQuery("#otherContent").focus();');
	   return;
	}
	content=jQuery("#otherContent").val();
 }
   jQuery.ajax({
			  url: "{$GetSiteUrl}/plus/ajaxs.ashx",
			  cache: false,
			  data: "a=savepkpost&pkid=" + pkid+"&content="+escape(content)+"&role="+role,
			  success: function(r){
			      r=unescape(r);
				  var arrobj=r.split('|');
				  if (arrobj[0]!="success")
				  {
				    	if (arrobj[0]=="login")
						{
						  showuserlogin();
						}else{
						KesionJS.Alert(arrobj[1],'');
						}
				  }else{
				      KesionJS.Alert("恭喜,您的观点提交成功!",'');
					  setpkimg();
					  jQuery("#agreeContent").val('');
					  jQuery("#argueContent").val('');
					  jQuery("#otherContent").val('');
				  }
			  }
	});
	

}
//设置PK图片显示
function setpkimg() {
	var agreeNum = 0;
	var argueNum = 0;
	 
	  jQuery.ajax({
			  url: "{$GetSiteUrl}/plus/ajaxs.ashx",
			  cache: false,
			  data: "a=getpkvotes&pkid=" + pkid,
			  success: function(r){
			    r=unescape(r)
				var arr=r.split('|');
			   agreeNum=parseInt(arr[0]);
			   argueNum=parseInt(arr[1]);
				jQuery("#agreenum").html(agreeNum+"人支持");
				jQuery("#arguenum").html(argueNum+"人支持");
			
				var total = agreeNum + argueNum;
				var h3Width = 70;
				var imgAgreeSpan = imgArgueSpan = 200;
				var imgAgree = imgArgue = imgAgreeSpan + h3Width;
				
				if (total != 0)	{
					var totalSpan = imgAgreeSpan * 2;
					imgAgreeSpan = Math.round(agreeNum / total * totalSpan);
					imgAgree = imgAgreeSpan + h3Width;
					imgArgueSpan = totalSpan - imgAgreeSpan;
					imgArgue = imgArgueSpan + h3Width;
				}
			     
				jQuery("#pk_yes").css("width", imgAgree);
				jQuery("#pk_no").css("width", imgArgue);
				jQuery("#img_agree").css("width", imgAgreeSpan);
				jQuery("#img_argue").css("width", imgArgueSpan);			  
			  }
      });

}


jQuery(document).ready(function(){
	setpkimg();
});

</script>



	]]>
   </label>
</labeltemplate>