{include header.html}

    <div class="main_bg">
        <div class="box_top">
      	</div>

        <div class="box_mid">
            <div class="left" id="content_left">
				<form action="convert.php?action=save" method="post" name="myform" id="myform">
				<table width="700" border="0" id="mytable1">
				 
				 <if condition="$TW_CONFIG['up_is_share']==1">				  
						  <tr>
							<td width="100" height="40" align="right" class="tabletext"><span id="titletip">长微博标题</span></td>
							<td><input type="text" name="title" id="title" value="" style="width:360px;border:1px solid #ccc;height:24px;font-size:12px">
							&nbsp;
							<input type="checkbox" name="is_share" id="is_share" checked value="1" onclick="select_share()"> <span class="font13_666">设为共享</span>
							<span style="color:blue;font-size:12px;" id="titletip2">(共享需填写长微博的标题)</span>
							</td>
						  </tr>
					</if>
				  <if condition="$TW_CONFIG['up_is_share']==0">
						  <tr>
							<td width="100" height="40" align="right" class="tabletext"><span id="titletip">共享长微博</span></td>
							<td><input type="text" name="title" id="title" value="" style="display:none;width:360px;border:1px solid #ccc;height:24px;font-size:12px">
							&nbsp;
							<input type="checkbox" name="is_share" id="is_share" value="1" onclick="select_share()"> <span class="font13_666">设为共享</span>
							<span style="color:blue;font-size:12px;display:none" id="titletip2">(共享需填写长微博的标题)</span>
							</td>
						  </tr>
					</if>
				  <tr>
					<td align="right" class="tabletext">长微博内容</td>
					<td><textarea name="content" id="content" style="background:{$TW_CONFIG[background_color]};color:{$TW_CONFIG[font_color]};width:{$TW_CONFIG[input_area_width]}px;height:{$TW_CONFIG[input_area_height]}px;border:1px solid {$TW_CONFIG[border_color]}" ></textarea></td>
				  </tr>
				  
				 <tr style="display:none">
				 	<td></td>
					<td height="40">
						<input type="hidden" name="text_bg_color" id="input_text_bg_color" value="{$TW_CONFIG[background_color]}">
						<input type="hidden" name="font_color" id="input_font_color" value="{$TW_CONFIG[font_color]}">
						<input type="hidden" name="border_color" id="input_border_color" value="{$TW_CONFIG[border_color]}">

						<table width="600" border="0" class="font13_666">
						  <tr>
							<td width="53">背景颜色</td>
							<td width="42" align="left"><div class="colorbox_white" id="text_bg_color" style="background:{$TW_CONFIG[background_color]}"></div></td>
							<td width="8"></td>
							<td width="53">字体颜色</td>
							<td width="42"><div class="colorbox_black" id="font_color" style="background:{$TW_CONFIG[font_color]}"></div></td>
							<td width="8"></td>
							<td width="53">边框颜色</td>
							<td width="42"><div class="colorbox_gray" id="border_color" style="background:{$TW_CONFIG[border_color]}"></div></td>
							<td width="8"></td>
							<td width="80">
								<select name="font_family" id="font_family" style="width:80px;">
									<for var="font" value="textfont" key="key">
										<option value="{$textfont['font_pre']}|||{$textfont['id']}">{$textfont['font_name']}</option>
									</for>
								</select>
							</td>
							<td width="13">
								<div id="font_family_prev"><a href="javascript:"><img src="images/prev.gif"></a></div>
							</td>

							<td width="8"></td>
							<td width=110>
							<select name="background_image" id="background_image" style="width:110px;text-align:left;margin-top:2px;">
							 <option>无图片背景</option>
								<for var="bg" value="textbg" key="key">
									<option value="{$textbg['bg_pre']}|||{$textbg['id']}" style="background:{$textbg['bg_select_color']}">{$textbg['bg_name']}</option>
								</for>
							 </select>
							</td>
							<td>
							<div id="background_image_prev"><a href="javascript:" title='当前背景预览'><img src="images/prev.gif" alt='当前背景预览'></a></div>
							</td>
							<td></td>
						  </tr>
						</table>

					</td>
				  </tr>

				 <if condition="$show_vc==1">
				 <tr id="vc_div" style="display:none">
				  <td class="tabletext" align=right>验证码</td>
				  <td align=left>
					<table width="170" border="0" >
					<tr>
					<td>   <a href="javascript:void(0);" onclick="document.getElementById('vcimg').src='../getvc.php?rand='+Math.random(1000);" title="点击更换验证码"><img src="getvc.php" id="vcimg" ></a></td>
					<td align=left><input name="vc" size="20" id="vc" style="width: 60px; border: 1px solid rgb(204, 204, 204); height: 24px; font-size: 14px; "></td>
					</tr>
					</table>
				  </td>
				  </tr>
					</if>
					
				  <tr>
				  <td></td>
				  <td align=center height=100><a href="javascript:post_content()"><img src="images/btn_conver_to_img.jpg"></a>
				  </td>
				  </tr>
				</table>
				</form>
				
				<table width="700" border="0" id="mytable2" style="display:none">
				<tr>
				<td colspan=2><h1>恭喜，转换成功！</h1></td>
				</tr>
				 <tr>
					<td width="100" height="40" align="right" class="tabletext">图片路径</td>
					<td>
					<div id="picurl"></div>
					</td>
				  </tr>
				</table>

          	</div>
            <div class="right">
					<div style="height:565px;width:190px; "> 
					  <iframe width="190" height="565" class="share_self"  frameborder="0" scrolling="no" src="{$weibo_url}"></iframe>
					</div>
          	</div>
      	</div>

		{include bottom.html}
</div>


<div id="fullbg"></div>
<div id="dialog" style="left: 349px; ">
<div class="tit">
	<table width="563" border="0" cellspacing="0" cellpadding="0">
	  <tbody><tr>
		<td class="fb3" style="padding-left:4px;">
			<B>网站提示</B>
		</td>
		<td align="right"><img src="images/guanbi.gif" width="30" height="32"  onclick="closeBg();" style="cursor:pointer;"></td>
	  </tr>
	</tbody></table></div>

	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		 <tbody>
		  <tr id="showtips1">
			<td align="center" class="fb2" style="padding:10px;font-size:14px">
				<img src="images/loading.gif">
			</td>
		  </tr>
		  <tr>
			<td align="center" class="fb2" style="padding:10px;font-size:14px" id="showtips2">
				正在处理，请稍等片刻... 
			</td>
		  </tr>
		   <tr>
			<td align="center" class="fb2" style="padding:10px;font-size:14px">
				<input type="button" name="closebt" id="closebt" value=" 取 消 " onclick="closeBg()">
			</td>
		  </tr>
		</tbody>
	</table>
</div>
     

<script type="text/javascript">
	var max_title  ="{$TW_CONFIG['up_title_max']}";
	var max_content="{$TW_CONFIG['up_content_max']}";
	var min_title  ="{$TW_CONFIG['up_title_min']}";
	var min_content="{$TW_CONFIG['up_content_min']}";

	<if condition="$show_vc==1">
		$("#content").bind('blur',function(){
			var content=$.trim($("#content").val());
			if(content.length>1){
				$("#vc_div").show();
			}
		});

		$("#content").bind('click',function(){
			$("#vcimg").show();
		});
	</if>

	function format_path(thepath){
		if(thepath.substring(0,3)=='../'){
			return thepath.substring(3,thepath.length);
		}else{
			return thepath;
		}
	}
	function suopic(Img,width,height){  
		var image=new Image();  
		image.src=Img.src;  
		if(image.width>width||image.height>height){ 
			w=image.width/width; 
			h=image.height/height; 
			if(w>h){
				Img.width=width; 
				Img.height=image.height/w; 
			}else{
				Img.height=height; 
				Img.width=image.width/h; 
			 } 
		} 
	} 

	function ispic(str){
		var thestr=str.toLowerCase();
		if(thestr.indexOf('.jpg')>-1||thestr.indexOf('.png')>-1||thestr.indexOf('.gif')>-1||thestr.indexOf('.jpeg')>-1){
			return true;
		}else{
			return false;
		}
	}



	$(function(){
		$("#text_bg_color").bigColorpicker(function(el,color){
			$(el).css("backgroundColor",color);
			$("#content").css("backgroundColor",color);
			$("#input_text_bg_color").val(color);
		});
		$("#font_color").bigColorpicker(function(el,color){
			$(el).css("backgroundColor",color);
			$("#content").css("color",color);
			$("#input_font_color").val(color);
		});
		$("#border_color").bigColorpicker(function(el,color){
			$(el).css("backgroundColor",color);
			$("#content").css("borderColor",color);
			$("#input_border_color").val(color);
		});
	})

	var showfont = function() {
		var xOffset = 10;
		var yOffset = 30;
		$("#font_family").mouseover(function(e) {
			pageY=e.pageY;
			pageX=e.pageX;
			var the_value=this.value.split("|||")[0];
			if(ispic(the_value)){
				$("<img id='imgshow' src='" + the_value + "' onload='suopic(this,200,60)' />").appendTo("body");
				$("#imgshow")
					.css("top", (e.pageY - xOffset) + "px")
					.css("left", (e.pageX + yOffset) + "px")
					.fadeIn("fast");
			}
		});

		$("#font_family").mouseout(function(e) {
			$("#imgshow").remove();
		});
	};

	var showfont_prev = function() {
		var xOffset = 10;
		var yOffset = 30;
		$("#font_family_prev").mouseover(function(e) {
			pageY=e.pageY;
			pageX=e.pageX;
			var the_val=$("#font_family").val();
			var the_value=format_path(the_val.split("|||")[0]);
			if(ispic(the_value)){
				$("<img id='imgshow' src='" + the_value + "' onload='suopic(this,200,60)' />").appendTo("body");
				$("#imgshow")
					.css("top", (e.pageY - xOffset) + "px")
					.css("left", (e.pageX + yOffset) + "px")
					.fadeIn("fast");
			}
		});

		$("#font_family_prev").mouseout(function(e) {
			$("#imgshow").remove();
		});
	};



	var showbackground = function() {
		var xOffset = 10;
		var yOffset = 30;
		$("#background_image").mouseover(function(e) {
			var the_val=$("#background_image").val();
			var the_value=format_path(the_val.split("|||")[0]);
			if(ispic(the_value)){
				$("<img id='imgshow' src='" + the_value + "' onload='suopic(this,436,300)' />").appendTo("body");
				$("#imgshow")
					.css("top", (e.pageY - xOffset) + "px")
					.css("left", (e.pageX + yOffset) + "px")
					.fadeIn("fast");
			}
		});

		$("#background_image").mouseout(function(e) {
			$("#imgshow").remove();
		});

		$("#background_image").change(function(e) {
			var the_val=$("#background_image").val();
			var the_value=format_path(the_val.split("|||")[0]);
			$("#content").css("background","url("+the_value+") no-repeat");
		});
	};

	var showbackground_prev = function() {
		var xOffset = 10;
		var yOffset = 30;
		$("#background_image_prev").mouseover(function(e) {
			var the_val=$("#background_image").val();
			var the_value=format_path(the_val.split("|||")[0]);
			if(ispic(the_value)){
				$("<img id='imgshow' src='" + the_value + "' onload='suopic(this,436,300)' />").appendTo("body");
				$("#imgshow")
					.css("top", (e.pageY - xOffset) + "px")
					.css("left", (e.pageX + yOffset) + "px")
					.fadeIn("fast");
			}
		});

		$("#background_image_prev").mouseout(function(e) {
			$("#imgshow").remove();
		});
	};


	jQuery(document).ready(function() {
		showfont();
		showfont_prev();
		showbackground();
		showbackground_prev();
	});

	function select_share(){
		if($("#is_share").attr("checked")){
			//alert('温馨提示：如果共享，任何人员将会看到此文章。\n\n如果您共享需要填写相应标题。');
			$("#title").show();
			$("#titletip").text("长微博标题");
			$("#titletip2").show();
		}else{
			$("#title").hide();
			$("#titletip").text("共享长微博");
			$("#titletip2").hide();
		}
	}

	function showBg(ct){
		var bH=$("body").height();
		var bW=$("body").width()+16;
		var objWH=getObjWh(ct);
		$("#fullbg").css({width:bW,height:bH,display:"block"});
		var tbT=objWH.split("|")[0]+"px";
		var tbL=objWH.split("|")[1]+"px";
		$("#"+ct).css({top:tbT,left:tbL,display:"block"});

		$(window).scroll(function(){resetBg()});
		$(window).resize(function(){resetBg()});
		}
		function getObjWh(obj){
		var st=document.documentElement.scrollTop;//滚动条距顶部的距离
		var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
		var ch=document.documentElement.clientHeight;//屏幕的高度
		var cw=document.documentElement.clientWidth;//屏幕的宽度
		var objH=$("#"+obj).height();//浮动对象的高度
		var objW=$("#"+obj).width();//浮动对象的宽度
		var objT=Number(st)+(Number(ch)-Number(objH))/2;
		var objL=Number(sl)+(Number(cw)-Number(objW))/2;
		return objT+"|"+objL;
		}
		function resetBg(){
		var fullbg=$("#fullbg").css("display");
		if(fullbg=="block"){
		var bH2=$("body").height();
		var bW2=$("body").width()+16;
		$("#fullbg").css({width:bW2,height:bH2});
		var objV=getObjWh("dialog");
		var tbT=objV.split("|")[0]+"px";
		var tbL=objV.split("|")[1]+"px";
		$("#dialog").css({top:tbT,left:tbL});
		}
	}

	//关闭灰色JS遮罩层和操作窗口
	function closeBg(){
		$("#fullbg").css("display","none");
		$("#dialog").css("display","none");
	}



	function post_content(){
		var title=$.trim($("#title").val());
		var is_share="0";
		var content=$.trim($("#content").val());
		var text_bg_color=$("#input_text_bg_color").val();
		var font_color=$("#input_font_color").val();
		var border_color=$("#input_border_color").val();
		var font_family=$("#font_family").val();
		var background_image=$("#background_image").val();
		var vc=$("#vc").val();
		var flag=true;
		if($("#is_share").attr("checked")){
			if(title==''){
				alert('长微博标题不能为空！');
				flag=false;
				return false;
			}else if(title.length<min_title){
				alert('长微博标题长度不能少于'+min_title+'个字符。');
				flag=false;
				return false;
			}else if(
				title.length>max_title){
				alert('长微博标题不能大于'+max_title+'个字符');
				flag=false;
				return false;
			}
			is_share="1";
		}

		if(content==''){
			alert('长微博内容不能为空！');
			flag=false;
			return false;
		}else if(content.length<min_content){
			alert('长微博内容长度不能少于'+min_content+'个字符。');
			flag=false;
			return false;
		}else if(content.length>max_content){
			alert('长微博内容不能大于'+max_content+'个字符');
			flag=false;
			return false;
		}
		
		<if condition="$show_vc==1">
			if(flag){
				$("#vc_div").show();
				$("#vcimg").show();
				var vc=$.trim($("#vc").val());
				if(vc==""){
					alert("请填写验证码");
					flag=false;
					return false;
				}else if(vc.length!=4){
					alert("您输入的验证码有误。");
					flag=false;
					return false;
				}
			}
		</if>

		if(flag){
			showBg('dialog');
			$.ajax({
				url: 'convert.php?'+Math.random(1000),
				type: 'POST',
				data:{"action":"save","title":title,"is_share":is_share,"content":content,"text_bg_color":text_bg_color,"font_color":font_color,"border_color":border_color,"font_family":font_family,"background_image":background_image,"vc":vc},
				dataType: 'html',
				timeout: 10000,
				error: function(){
					$("#showtips1").hide();
					$("#closebt").val(' 关 闭 ');
					$("#showtips2").html("<font color='red'>抱歉，转换失败，请重新试。</font>");
				},
				success: function(result){
				//alert(result);
				//return false;
					if(result.indexOf('OK!')>-1){
						location.href="view.php?id="+result.substr(3,result.length-3);
					}else if(result.indexOf('REPEAT')>-1){
						closeBg();alert('请不要重复提交一样的数据。');
						return false;
					}else if(result.indexOf('VCODE_ERROR')>-1){
						closeBg();alert('验证码不正确。');
						return false;
					}else{
						$("#showtips1").hide();
						$("#closebt").val(' 关 闭 ');
						$("#showtips2").html("<font color='red'>抱歉，转换失败，请重新试。</font>");
					}

				}
			});
		}
	}
</script>
{include footer.html}
