<%@ page contentType="text/html; charset=GBK" session="false"%>

<%@ taglib uri="/cmsTag" prefix="cms"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
      <%
      	response.setHeader("Pragma", "No-cache");
      	response.setHeader("Cache-Control", "no-cache");
      	response.setDateHeader("Expires", 0);
      %>
      <title>图片列表</title>
      <link rel="stylesheet" type="text/css" href="../../style/default/main.css" />
      <script type="text/javascript" src="../javascript/imagePreviewd.js"></script>
      <script type="text/javascript" src="../common/js/jquery-1.7.gzjs"></script>
      <script type="text/javascript" src="../javascript/commonUtil.js"></script>

   </head>
   <script>
      var maxWidth = 115;
      var maxHeight = 125;

      $(function(){
        
        <cms:SystemImageResList imgClassId="${param.classId}"  pageSize="10" page="true">
			<cms:SystemImage >
               var index = "${status.index+1}";
               if(index <= 10)
               {
                  loadImg(index,"${Image.source}","${Image.imgName}","${Image.width}","${Image.height}");    
               }  
			</cms:SystemImage>
		</cms:SystemImageResList>
         
         //loadImg("container-1");
         
      })
   </script>
   <body>
      <select id="imgClassId" name="imgClassId" onChange="javascript:changeimgClass(this.value)">
         <option value="-1">
            --默认分类--
         </option>
         <option value="1">
            够够
         </option>
         <option value="2">
            花草
         </option>
      </select>
      &nbsp;


      <br>
      <br>


      <table width="98%" height="360" border="0" align="center" cellpadding="2" cellspacing="0">
         <tr>
            <td width="14%" height="191">
               <table width="100%" height="185" border="1" id="x-1" style="display:none">
                  <tr>
                     <td id='container-1' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(1);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-1">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>
            <td width="14%">
               <table width="100%" height="185" border="1" id="x-2" style="display:none">
                  <tr>
                     <td id='container-2' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(2);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-2">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>
            <td width="14%">
               <table width="100%" height="185" border="1" id="x-3" style="display:none">
                  <tr>
                     <td id='container-3' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(3);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-3">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>
            <td width="14%">
               <table width="100%" height="185" border="1" id="x-4" style="display:none">
                  <tr>
                     <td id='container-4' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(4);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-4">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>
            <td width="14%">
               <table width="100%" height="185" border="1" id="x-5" style="display:none">
                  <tr>
                     <td id='container-5' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(5);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-5">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>

         </tr>
         <tr>
            <td height="191">
               <table width="100%" height="185" border="1" id="x-6" style="display:none">
                  <tr>
                     <td id='container-6' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(6);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-6">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>
            <td>
               <table width="100%" height="185" border="1" id="x-7" style="display:none">
                  <tr>
                     <td id='container-7' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(7);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-7">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>
            <td>
               <table width="100%" height="185" border="1" id="x-8" style="display:none">
                  <tr>
                     <td id='container-8' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(8);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-8">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>
            <td>
               <table width="100%" height="185" border="1" id="x-9" style="display:none">
                  <tr>
                     <td id='container-9' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(9);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-9">

                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>
            </td>
            <td>
               <table width="100%" height="185" border="1" id="x-10" style="display:none">
                  <tr>
                     <td id='container-10' height="137" colspan="3" align="center" style="cursor:pointer" onClick="javascript:regImage(10);"></td>
                  </tr>
                  <tr>
                     <td width="28%" height="22">
                        <input type="checkbox" name="checkImg" id="checkImg-10">
                     </td>
                     <td width="48%" height="22">
                        &nbsp;

                     </td>
                     <td width="24%" height="22">
                        &nbsp;

                     </td>
                  </tr>
               </table>

            </td>

         </tr>
         <tr>
            <td>
               &nbsp;

            </td>
            <td>
               &nbsp;

            </td>
            <td>
               &nbsp;

            </td>
            <td>
               &nbsp;

            </td>
            <td>
               &nbsp;

            </td>
            <td>
               &nbsp;

            </td>
            <td>
               &nbsp;

            </td>
         </tr>
      </table>
      <div>
         <page:page />
         <br>
         <br>

      </div>
      <div style="float:right">
         <button type="button" id="save" onClick="javascript:submitResImg();">
            <img src="../../core/style/default/images/add-act.png" alt="" />
            确认
         </button>
         &nbsp;&nbsp;&nbsp;
         <button type="button" onClick="window.close();">
            <img src="../../core/style/default/images/reset-act.png" alt="" />
            取消
         </button>

      </div>
   </body>

</html>
<script type="text/javascript">

initSelect('imgClassId','${param.classId}');

var valueMap = new HashMapJs();

function gotoAddImgClassPage()
{
   window.showModalDialog("AddImgClass.jsp?random="+Math.random(),null,"dialogWidth=620px;dialogHeight=370px;status=no");
   window.location='';
}




//var img = '<img  onreadystatechange="javascript:autoImgSize(this)" src="http://localhost:8083/ButterflyCMS/UPLOAD/1331114171296402881f735ec873c5380135ec965ba00000.JPG" />'

<!--
function loadImg(index,imgSrc,imgName,width,height)
{
   	
   var img= document.createElement('img');

  if('' != imgSrc )
  {
  
  
   img.src="<cms:Domain/>/UPLOAD/imgResize"+imgSrc;
   img.alt=imgName;
   //alert(width+" : "+height);
   
   var newSize=checkSize(width, height);
   img.width = newSize[0]; // image width
   img.height = newSize[1]; // image height
       
  // alert(newSize[1]);
   document.getElementById("checkImg-"+index).value=imgSrc;
   document.getElementById("x-"+index).style.display='';
   document.getElementById("container-"+index).appendChild(img);
   }
}

function submitResImg()
{
  var selectedImage =  document.getElementsByName("checkImg");
  
  var returnArray = new Array();
  returnArray['type']="resource";
  returnArray['allImg']=valueMap.allValueToString('*');
  window.returnValue=returnArray;
  window.close();
}

function changeimgClass(classId)
{
   window.location="EditorListImageResources.jsp?classId="+classId;
}

function regImage(id)
{
   var target = document.getElementById("checkImg-"+id);
   if(target.checked)
   {
      target.checked=false;
      valueMap.remove(target.id);
       document.getElementById("x-"+id).style.backgroundColor="#FFFFFF";
   }
   else
   {
      target.checked=true;
      valueMap.put(target.id,target.value);
     
      document.getElementById("x-"+id).style.backgroundColor="#FFCC99";
   }
}
//-->
</script>
