<%@ Page Language="C#" AutoEventWireup="true" CodeFile="pic.aspx.cs" Inherits="pic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>贴图区</title>
	<LINK href="css/common.css" type=text/css rel=stylesheet>
<script type="text/javascript" language="javascript">
//下面是单击图片时候把所有的select下拉框全部遍历隐藏
//隐藏所有列表框
function hidden_select(){
var selectlist=document.getElementsByTagName("select");
    for(var i=0;i<selectlist.length;i++){   
        selectlist[i].style.display = 'none';
    }
}
function show_select(){
var selectlist1=document.getElementsByTagName("select"); //父框架
    for(var i=0;i<selectlist1.length;i++){   
        selectlist1[i].style.display = 'block';
    }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
	
    <div class="room layout" id="xwxc">
      <div class="m73" style="width:400px; height:500px; margin-left:10px; overflow-y:hidden;overflow-x:hidden;"  align="left">
	  <p id="outer">
      <table width="400" border="0" cellspacing="0" cellpadding="0">
	  <tr>
		  <td>
		    <div align="left" style="padding-left:10px">
                <asp:Label ID="bigtitle" runat="server" Text="贴图区→" Font-Bold="True" Font-Size="Larger" ForeColor="#51300C"></asp:Label>
                <asp:Label ID="lbclass" runat="server" Font-Bold="True" Font-Size="Larger" ForeColor="#51300C"
                    Text="Label"></asp:Label></div>
					<hr style="height:1px; width:400px" align="left"/>
		  </td>
	   </tr>
	   <tr height="" valign="top">
	      <td>
		     
	   <asp:DataList ID="DataList2" runat="server" DataKeyField="ID" RepeatDirection="Horizontal"> 
         <itemtemplate>
			<table width="130" height="90" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:20px;margin-right:5px; margin-top:10px;">
                <tr>
                   <td align="center" valign="middle" height="70" onclick="javascript:hidden_select();">
                   <asp:Image ID="topimg" title=<%# Eval("id") %> runat="server" ImageUrl=<%# strpath(Eval("tpath").ToString()) %> _fcksavedurl=<%# strpath(Eval("ppath").ToString()) %> onmouseover="javascript:this.style.border='1px solid #9F0000';" onmouseout="javascript:this.style.border='1px dashed #51300C';" style="cursor:pointer;" BorderColor="#51300C" BorderStyle="Dashed" BorderWidth="1px"/>
				   </td>
                </tr>
                <tr>
                   <td height="20" align="center" valign="middle">[热]<%# Eval("pname") %></td>
                </tr>
            </table>
		 </itemtemplate>
	   </asp:DataList>
	   <asp:DataList ID="DataList1" runat="server" DataKeyField="ID" RepeatDirection="Horizontal" RepeatColumns="3"> 
         <itemtemplate>
           <table width="130" height="90" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:20px;margin-right:5px;">
             <tr>
               <td align="center" valign="middle" height="70" onclick="javascript:hidden_select();">
                   <asp:Image ID="comimg" title=<%# Eval("id") %> runat="server" ImageUrl=<%# strpath(Eval("tpath").ToString()) %> _fcksavedurl=<%# strpath(Eval("ppath").ToString()) %> onmouseover="javascript:this.style.border='1px solid #9F0000';" onmouseout="javascript:this.style.border='1px dashed #51300C';" style="cursor:pointer;" BorderColor="#51300C" BorderStyle="Dashed" BorderWidth="1px"/>
			   </td>
             </tr>
             <tr>
               <td height="20" align="center" valign="middle"><%# Eval("pname") %></td>
             </tr>
           </table>
		  </itemtemplate>
	   </asp:DataList>
	         
	      </td> 
	   </tr>
	   </table>
	   </p>
      </div>
      <table cellpadding="0" cellspacing="0" class="m73" style="margin-left: 70px">
            <tr>
              <td style="padding-top: 8px"> 当前
                <asp:Label ID="curpage" runat="server" Text="1"></asp:Label>
                /
                <asp:Label ID="allpage" runat="server" Text="Label"></asp:Label>
                页
                <asp:LinkButton ID="first" runat="server" OnClick="first_Click">首页</asp:LinkButton>
                <asp:LinkButton ID="pre" runat="server" OnClick="pre_Click">上一页</asp:LinkButton>
                <asp:LinkButton ID="next" runat="server" OnClick="next_Click">下一页</asp:LinkButton>
                <asp:LinkButton ID="last" runat="server" OnClick="last_Click">尾页</asp:LinkButton>
                &nbsp; 转到: </td>
              <td>
			  <asp:DropDownList ID="pagelist" runat="server" AutoPostBack="True" BackColor="White"
 Font-Size="XX-Small" ForeColor="#736f57" Height="8px" OnSelectedIndexChanged="downchange" style="z-index:-1;"> </asp:DropDownList>
			  </td>
            </tr>
       </table>
     </div>
     <script type="text/javascript">
		function ImgShow(evt){
			var imgTag=(window.event)?event.srcElement:evt.target;
			var imgPath=imgTag._fcksavedurl.replace("a.jpg",".jpg");//取得弹出的大图url
			var tagTop=Math.max(window.top.document.documentElement.scrollTop,window.top.document.body.scrollTop);
			var tag=window.top.document.createElement("div");
				tag.style.cssText="width:100%;height:"+Math.max(window.top.document.body.clientHeight,window.top.document.body.offsetHeight)+"px;position:absolute;background:white;top:0;filter: Alpha(Opacity=80);Opacity:0.8;";
				tag.ondblclick=function(){var clsOK=confirm("确定要取消图片显示吗?"); if(clsOK){closes();}};
			var tagImg=window.top.document.createElement("div");
			    tagImg.setAttribute("id","showpic");
				tagImg.style.cssText="font:12px /18px verdana;overflow:auto;text-align:center;position:absolute;width:200px;border:5px solid gray;background:gray;color:white;left:"+(parseInt(window.top.document.body.offsetWidth)/2-100)+"px;top:"+(window.top.document.documentElement.clientHeight/3+tagTop)+"px;"
				tagImg.innerHTML="<div style='padding:10px;background:#cccccc;border:1px solid white;z-index:-999;'><img src='images/wait2.gif'/><br /><br /><b style='color:#999999;font-weight:normal'>Image loading...</b><br /></div>";
			    
			var closeTag=window.top.document.createElement("div");
				closeTag.style.cssText="display:none;position:absolute;left:10px;top:10px;background:red;border:1px solid white;yellow:white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;";
				closeTag.innerHTML="<b> 关闭 </b>";
				//closeTag.onclick=closes;
				//下面是单击时候把div层关闭,而且把隐藏的select下拉框全部遍历显示出来
				closeTag.onclick=function(){var selectlist1=document.getElementsByTagName("select"); for(var i=0;i<selectlist1.length;i++){selectlist1[i].style.display = 'block';};closes();};
			window.top.document.body.appendChild(tag);
			window.top.document.body.appendChild(tagImg);
			//var img=new Image();
			var img=window.top.document.createElement("img");
				img.src=imgPath;
				img.style.cssText="border:1px solid #cccccc;filter: Alpha(Opacity=0);Opacity:0;";
				tagImg.oncontextmenu=function(){var clsOK=confirm("确定要取消图片显示吗?"); if(clsOK){closes();show_select();};return false};
			    
			var barShow,imgTime;
			img.complete?ImgOK():img.onload=ImgOK;
			function ImgOK(){
				var Stop1=false,Stop2=false,temp=0;
				var tx=tagImg.offsetWidth,ty=tagImg.offsetHeight;
				var ix=img.width,iy=img.height;
				var sx=window.top.document.documentElement.clientWidth,sy=Math.min(window.top.document.documentElement.clientHeight,window.top.document.body.clientHeight/*opera*/);
				var xx=ix>sx?sx-50:ix+4,yy=iy>sy?sy-50:iy+3;
				var maxTime=setInterval(function(){
					temp+=35;
					if((tx+temp)<xx){
						tagImg.style.width=(tx+temp)+"px";
						tagImg.style.left=(sx-(tx+temp))/2+"px";
					}else{
						Stop1=true;
						tagImg.style.width=xx+"px";
						tagImg.style.left=(sx-xx)/2+"px";
					}
					if((ty+temp)<yy){
						tagImg.style.height=(ty+temp)+"px";
						tagImg.style.top=(tagTop+((sy-(ty+temp))/2))+"px";
					}else{
						Stop2=true;
						tagImg.style.height=yy+"px";
						tagImg.style.top=(tagTop+((sy-yy)/2))+"px";
					}
					if(Stop1&&Stop2){
						clearInterval(maxTime);
						tagImg.appendChild(img);
						temp=0;
						imgOPacity();
					}
				},1);
				function imgOPacity(){
					temp+=10;
					img.style.filter="alpha(opacity="+temp+")";
					img.style.opacity=temp/100;
					imgTime=setTimeout(imgOPacity,1)
					if(temp>100) clearTimeout(imgTime);
				}
				tagImg.innerHTML="";
				tagImg.appendChild(closeTag);
				if(ix>xx||iy>yy){
					img.alt="左键拖动,双击放大缩小";
					img.ondblclick=function (){
						if(tagImg.offsetWidth<img.offsetWidth||tagImg.offsetHeight<img.offsetHeight){
							img.style.width="auto";
							img.style.height="100%";
							img.alt="双击可以放大";
							img.onmousedown=null;
							closeTag.style.top="10px";
							closeTag.style.left="10px";
							tagImg.style.overflow="visible";
							tagImg.style.width=img.offsetWidth+"px";
							tagImg.style.left=((sx-img.offsetWidth)/2)+"px";
						}else{
							img.style.width=ix+"px";
							img.style.height=iy+"px";
							img.alt="双击可以缩小";
							img.onmousedown=dragDown;
							tagImg.style.overflow="auto";
							tagImg.style.width=xx+"px";
							tagImg.style.left=((sx-xx)/2)+"px";
						}
					}
					img.onmousedown=dragDown;
					tagImg.onmousemove=barHidden;
					tagImg.onmouseout=moveStop;
					window.top.document.onmouseup=moveStop;
				}else{
					tagImg.style.overflow="visible";
					tagImg.onmousemove=barHidden;
				}
			}
			function dragDown(a){
				img.style.cursor="pointer";
				var evts=a||window.event;
				var onx=evts.clientX,ony=evts.clientY;
				var sox=tagImg.scrollLeft,soy=tagImg.scrollTop;
				var sow=img.width+2-tagImg.clientWidth,soh=img.height+2-tagImg.clientHeight;
				var xxleft,yytop;
				window.top.document.onmousemove=function(e){
					var evt=e||window.event;
					xxleft=sox-(evt.clientX-onx)<0?"0":sox-(evt.clientX-onx)>sow?sow:sox-(evt.clientX-onx);
					yytop=soy-(evt.clientY-ony)<0?"0":soy-(evt.clientY-ony)>soh?soh:soy-(evt.clientY-ony);
					tagImg.scrollTop=yytop;
					tagImg.scrollLeft=xxleft;
					closeTag.style.top=(yytop+10)+"px";
					closeTag.style.left=(xxleft+10)+"px";
					return false;
				}
				return false;
			}
			function barHidden(){
				clearTimeout(barShow);
				if(closeTag.style.display=="none")closeTag.style.display="block";
				barShow=setTimeout(function(){closeTag.style.display="none";},2000);
			}
			function closes(){
				window.top.document.body.removeChild(tag);
				window.top.document.body.removeChild(tagImg);
				clearTimeout(barShow);
				clearTimeout(imgTime);
				window.top.document.onmouseup=null;
				tag=img=tagImg=closeTag=null;
			}
			function moveStop(){
				window.top.document.onmousemove=null;
				tagImg.onmousemove=barHidden;
				img.style.cursor="default";
			}
		}
	</script>
<script type="text/javascript">//实例化
		var imgList1=document.getElementById("xwxc").getElementsByTagName("img");
		//var imgList3=document.getElementById("wenchuan").getElementsByTagName("img");
		for(var i in imgList1){
			imgList1[i].onclick=ImgShow;
		}
//		for(var i in imgList3){
//			imgList3[i].onclick=ImgShow;
//		}
</script>
    </form>
</body>
</html>
