<%@ page contentType="text/html; charset=GBK"%>
<%@ taglib uri="/cms4j" prefix="cms4j" %>

<%@ page import = "cn.com.dekn.cms.util.*" %>

<% 
/***********************************
* TAG參數初始化
***********************************/
//要顯示欄目的ID
String ARTICLE_ID = ParamUtil.getStrParam(request,"ARTICLE_ID","0"); 

%>



	<% int picIndex = 0; %>

	<cms4j:article_image article_id="<%=ARTICLE_ID%>">
		<% if(++picIndex == 1){ %>
		
			<script>
			var picURL = "";	//所有圖片地址
			var picTITLE = "";	//所有圖片標題
		  
			var picURLArray,picTITLEArray;
		  
			var fristPicURL = "";		//第一張圖片的地址
			var fristPicTITLE = "";	//第一張圖片的標題
		  
			var picCount = 0;	//圖片數
	
			picURL = "<%=article_image_info.getIMG_URL()%>";
			picTITLE = "<%=article_image_info.getTITLE()%>";
			fristPicURL = "<%=article_image_info.getIMG_URL()%>";
			fristPicTITLE = "<%=article_image_info.getTITLE()%>";
			
		<% }else{ %>
		
			picURL = picURL + "|" + "<%=article_image_info.getIMG_URL()%>";
			picTITLE = picTITLE + "|" + "<%=article_image_info.getTITLE()%>";
		
		<% } %>
	
		picCount++;
		
  	</cms4j:article_image>
  
		

  	<% if(picIndex > 0){ %>
	
		picURLArray = picURL.split("|");
		picTITLEArray = picTITLE.split("|");
	
		var currIndex = 1;
		</script>
	
	<table border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
	  <tr>
		<td align="center" bgcolor="#FFFFFF">
		<img src="" border="0" class="img_border" id="articlePicImg" onClick="next();" style="cursor:pointer" alt="點擊查看下一張">					</td>
	  </tr>
  </table>
  
	<table width="94%" border="0" cellspacing="10" cellpadding="0">
	  <tr>
		<td align="center" class="pptimg_title" id="articlePicTitle">loading...</td>
	  </tr>
	  <tr>
		<td align="center"><a href="javascript:perv()">
	<img src="images/btn_perv.gif" width="32" height="25" border="0"></a> 　<span class="pptimg_page" id="currIndexSpan">1</span><span class="pptimg_page"> of <span id="picCountSpan">2</span></span> 　<a href="javascript:next()"><img src="images/btn_next.gif" width="32" height="25" border="0"></a></td>
	  </tr>
	  <tr>
		<td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tr height="2">
			<td bgcolor="#D1D0C3"></td>
		  </tr>
		</table></td>
	  </tr>
	</table>

	<script>
	document.getElementById("picCountSpan").innerHTML = picCount;
	document.getElementById("articlePicImg").src = fristPicURL;
	document.getElementById("articlePicTitle").innerHTML = fristPicTITLE;
	
	function perv(){
		if(currIndex > 1){
			document.getElementById("articlePicImg").src = picURLArray[currIndex-2];
			document.getElementById("articlePicTitle").innerHTML = picTITLEArray[currIndex-2];
			currIndex--;
			document.getElementById("currIndexSpan").innerHTML = currIndex;
		}
	}
	
	function next(){
		if(currIndex < picCount){
			document.getElementById("articlePicImg").src = picURLArray[currIndex];
			document.getElementById("articlePicTitle").innerHTML = picTITLEArray[currIndex];
			currIndex++;
			document.getElementById("currIndexSpan").innerHTML = currIndex;
			
			
		}
	}
	</script>	
		
	<% } %>