<?xml version="1.0" encoding="gb2312"?>
<labeltemplate>
   <label name="proimages">
    <![CDATA[
	        <style type="text/css">
				#GroupImgList span{display:block;width:45px;height:56px;margin-right:2px;float:left}
				.DefaultSmallPic{width:45px;height:56px;margin-right:2px;}
	            .CurrSmallPic{border: #ff3300 1px solid;width:44px;height:54px; FILTER: Alpha(Opacity=60);}

			</style>   
			<script src="{$GetSiteUrl}HSK_JS/ZoomImage.js" type="text/javascript"></script>
			<script>
			var defaultbigpic='{$DefaultBigPic}';
			var defaultsmallpic='{$DefaultSmallPic}';
			var currobj=null;
			  function LoadByGroup(installdir,groupname,proid)
			  { 
			       jQuery("#ColorArea").html("loading...");
			                        jQuery.getScript(installdir+'shop/loadgrouppic.asp?proid='+proid+'&groupname='+escape(groupname),function(){
				    jQuery("#GroupImgList").html(data.str);
					jQuery("#ColorArea").html(groupname);
				 });
			  }
			 function ShowPhoto(smallpic,bigpic)
			 {
			  document.getElementById('PreSmallPic').src=smallpic;
			  document.getElementById('PreSmallPic').bigimg=bigpic;
			 }
			 function SetDefaultPhoto(obj,smallpic,bigpic)
			 {
			  defaultbigpic=bigpic;
			  defaultsmallpic=smallpic;
			  $("#GroupImgList").find("img").attr("class","DefaultSmallPic");
			  currobj=obj;
			  obj.className='CurrSmallPic';
			 }
			 function SetMouseOutPhoto()
			 {
			  document.getElementById('PreSmallPic').src=defaultsmallpic;
			  document.getElementById('PreSmallPic').bigimg=defaultbigpic;
			 }
			function ZoomImage_Setimg(event)
			{    
			 var img = document.getElementById("PreSmallPic");
			 var bg = document.getElementById("Pic_bg");
			 var drag = document.getElementById("Drag_Box");
			 var prev = document.getElementById("Prev_Win");        
			 ZoomImage_ShowPicBG(img, bg, drag, prev, img.height,img.width,250,250,800,800, event);
			}
			function ZoomImage_DragBox(event)
			{
			ZoomImage_DragImg(document.getElementById("Pic_bg"),event);
			}
			</script>
		<table width="300" border="0">
			<form>
		  <tr>
			<td align="center"style="POSITION: relative">
					 <div id=Div_Img onmouseover=ZoomImage_Setimg(event) onmouseleave=ZoomImage_HidePicBG(event) style="POSITION: relative" onMouseOut="ZoomImage_HidePicBG(event)">
									  <div onMouseMove="ZoomImage_DragBox(event)" id="Drag_Box" style="border-right: lightgrey 1px solid; border-top: lightgrey 1px solid; Z-INDEX: 2; visibility: hidden; overflow: hidden; border-left: lightgrey 1px solid; cursor: hand; border-bottom: lightgrey 1px solid; POSITION: absolute; background-color: transparent" ></div>
									  <div onMouseMove="ZoomImage_DragBox(event)" id="Pic_bg" style="Z-INDEX: 1; FILTER: Alpha(Opacity=60); visibility: hidden; OVERFLOW: hidden; POSITION: absolute; background-color: lightgrey; moz-opacity: 0.6"></div>
									  <div id=Prev_Win style="Z-INDEX: 999; visibility: hidden; OVERFLOW: hidden; POSITION: absolute"></DIV>
									  <IMG class="ProductImg" id="PreSmallPic" style="border-top-WIDTH: 0px; border-left-WIDTH: 0px; border-bottom-WIDTH: 0px; border-right-WIDTH: 0px" src="{$DefaultSmallPic}" alt="{$GetProductName}" bigimg="{$DefaultBigPic}" width="{$BigWidth}" height="{$BigHeight}"></div>
									  <div style="margin-top:2px;text-align:center;cursor:pointer" onClick="window.open('{$GetSiteUrl}shop/ShowPic.asp?id={$InfoID}&u='+document.getElementById('PreSmallPic').bigimg)"><img src="{$GetSiteUrl}images/look.gif"></div>
										<br />
			</td> 
		  </tr>
		  <tr>
			<td id="GroupImgList">
			{$GroupImgList}
			</td>
		  </tr>
		  <tr>
			<td>
			  {$DefaultGroupStr}
			</td>
		  </tr>
		  </form>
		</table>
	]]>
   </label>
  </labeltemplate>