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

<%@ page import = "cn.com.dekn.cms.util.*,cn.com.dekn.common.util.*" %>
<script>
function searchManage(searchStr,operType,name,value){
	var searchArray = new Array();
	var returnStr = "";		
	if (searchStr != ""){
		searchArray = searchStr.split("&");	
		
		for(var i = 0 ; i < searchArray.length ; i ++){
			if (searchArray[i] != ""){
				var paramArray = new Array();
				paramArray = searchArray[i].split("=");		
				if (paramArray[0] == name){
					searchArray.splice(i,1);
					i--;
				}
			}
		}
	}
	
	if (operType == "add"){
		returnStr = name +  "=" + value;
	}
	
	if (operType == "remove"){
	}
	
	
	for(var j = 0; j < searchArray.length; j++){
		if (searchArray[j] != ""){
			returnStr += "&" + searchArray[j];
		}
	}

	return returnStr;
	
}


function addSearch(searchStr,name,value){
	if (searchStr == "URL"){
		return searchManage(this.location.search.substr(1),"add",name,value);
	}
	return searchManage(searchStr,"add",name,value);	
}




function removeSearch(searchStr,name){
	if (searchStr == "URL"){
		return searchManage(this.location.search.substr(1),"remove",name,"");	
	}
	return searchManage(searchStr,"remove",name,"");	
}

function getSearchValue(searchStrParam,name){
	if (searchStrParam == "URL"){
		searchStr = this.location.search.substr(1);
	}else{
		searchStr = searchStrParam;
	}
	
	
	var searchArray = new Array();
	var returnStr = "";		
	if (searchStr != ""){
		searchArray = searchStr.split("&");	
		
		for(var i = 0 ; i < searchArray.length ; i ++){
			if (searchArray[i] != ""){
				var paramArray = new Array();
				paramArray = searchArray[i].split("=");		
				if (paramArray[0] == name){
					returnStr = paramArray[1];
					return returnStr;
				}
			}
		}
	}
	
	return "";
}
</script>
<% 
/***********************************
* TAG参数初始化
***********************************/
//要显示栏目的ID
String ARTICLE_ID = ParamUtil.getStrParam(request,"ARTICLE_ID","0"); 

//缩略图尺寸
String SUMMARY_SIZE = ParamUtil.getStrParam(request,"SUMMARY_SIZE","small"); 

//滚动区域宽度
int SCROLL_AREA_WIDTH = ParamUtil.getIntParam(request,"SCROLL_AREA_WIDTH",405); 

//滚动速度
int SCROLL_SPEED = ParamUtil.getIntParam(request,"SCROLL_SPEED",5); 

%>



	<% int picIndex = 0;String BSummaryPicURL="";String MSummaryPicURL="";String SSummaryPicURL=""; %>

	<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()%>";
			
			<%
				//大缩略图URL
				BSummaryPicURL = article_image_info.getB_SUMMARY_IMG();
				//中缩略图URL
				MSummaryPicURL = article_image_info.getM_SUMMARY_IMG();
				//小缩略图URL
				SSummaryPicURL = article_image_info.getS_SUMMARY_IMG();
			%>
		<% }else{ %>
		
			picURL = picURL + "|" + "<%=article_image_info.getIMG_URL()%>";
			picTITLE = picTITLE + "|" + "<%=article_image_info.getTITLE()%>";
			
			<%
				//大缩略图URL
				BSummaryPicURL = BSummaryPicURL + "|" + article_image_info.getB_SUMMARY_IMG();
				//中缩略图URL
				MSummaryPicURL = MSummaryPicURL + "|" + article_image_info.getM_SUMMARY_IMG();
				//小缩略图URL
				SSummaryPicURL = SSummaryPicURL + "|" + article_image_info.getS_SUMMARY_IMG();
			%>
			
		<% } %>
	
		picCount++;
		
  	</cms4j:article_image>
  
		

  	<% if(picIndex > 0){ %>
	
		picURLArray = picURL.split("|");
		picTITLEArray = picTITLE.split("|");
	
		var currIndex = getSearchValue("URL","ipn");
		if(currIndex < 1){
			currIndex = 1;
		}
		</script>
	
	
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td align="center"><img src="" border="0" class="img_border" id="articlePicImg" onClick="next();" style="cursor:pointer" alt="点击查看下一张"></td>
		</tr>
		<tr>
		  <td>&nbsp;</td>
		</tr>
		<tr>
		  <td>
		  <table border="0" align="center" cellpadding="0" cellspacing="5">
			<%
				String[] summaryArray = null;
				
				if(SUMMARY_SIZE.equals("big")){
					summaryArray = BSummaryPicURL.split("\\|");
				}else if(SUMMARY_SIZE.equals("middle")){
					summaryArray = MSummaryPicURL.split("\\|");
				}else if(SUMMARY_SIZE.equals("small")){
					summaryArray = SSummaryPicURL.split("\\|");
				}
			%>
			<tr> 
				<td width="20"><img src="images/scroll_left.gif" id="scrollLeftImg" width="20" height="60" onmousedown="startScroll(1)" onmouseup="stopScroll(1)" /></td>
			  	<td>
					<div id="scrollLayer" style="overflow:hidden;width:<%=SCROLL_AREA_WIDTH%>px;position:relative;">
           				<div id="scrollContainer" style="position:relative;left:0px;">
							<table border='0' cellpadding='5' cellspacing='0' id='imgTab'>
								<tr>						
						<%
							for(int s = 0;s<summaryArray.length;s++){
						%>
								<td>
							<a href='javascript:removeSearch("URL","ipn");this.location.search = addSearch("URL","ipn",<%=s+1%>);'><img src="<%=summaryArray[s]%>" border="0"/></a>
								</td>
						<%
							}
						%>
								</tr>
							</table>
						</div>
					</div>
				</td>
				<td width="20"><img src="images/scroll_right.gif" id="scrollRightImg" width="20" height="60" onmousedown="startScroll(-1)" onmouseup="stopScroll(-1)" /></td>
			</tr>
		  </table>		  </td>
		</tr>
		<tr>
		  <td>&nbsp;</td>
	  </tr>
	</table>
				  
	<script>
	document.getElementById("articlePicImg").src = picURLArray[currIndex-1];
	
	function perv(){
		if(currIndex > 1){
			removeSearch("URL","ipn");
			this.location.search = addSearch("URL","ipn",--currIndex);
		}
	}
	
	
	function next(){
		if(currIndex < picCount){
			removeSearch("URL","ipn");
			this.location.search = addSearch("URL","ipn",++currIndex);
		}
	}
	
	var startScrollTimer = null;//开始滚动计时器
	function startScroll(dir){
		var scrollLayerObj = document.getElementById("scrollLayer");
		var scrollContainerObj = document.getElementById("scrollContainer");
		var leftIndex = parseInt(scrollContainerObj.style.left); 
		var scrollLayerWith = parseInt(scrollLayerObj.clientWidth||scrollLayerObj.offsetWidth);
		var scrollContainerWith = parseInt(scrollContainerObj.clientWidth||scrollContainerObj.offsetWidth);
		if(dir=="1"){
			if(leftIndex==0){
				document.getElementById("scrollLeftImg").src = "images/scroll_left.gif";
				stopScroll(1)
				return;
			}
			document.getElementById("scrollLeftImg").src = "images/scroll_left2.gif";
		}else{
			if(leftIndex-scrollLayerWith<=-scrollContainerWith){
				document.getElementById("scrollRightImg").src = "images/scroll_right.gif";
				stopScroll(-1)
				return;
			}
			document.getElementById("scrollRightImg").src = "images/scroll_right2.gif";
		}
		if(null == startScrollTimer){
			startScrollTimer = setInterval("startScroll("+dir+")",20);
		}
		document.getElementById("scrollContainer").style.left = leftIndex + <%=SCROLL_SPEED%>*dir;
	}
	
	function stopScroll(dir){
		if(null != startScrollTimer){
			clearInterval(startScrollTimer);
			startScrollTimer = null;
			//alert(startScrollTimer);
			if(dir=="1"){
				document.getElementById("scrollLeftImg").src = "images/scroll_left.gif";
			}else{
				document.getElementById("scrollRightImg").src = "images/scroll_right.gif";
			}
		}
	}
	</script>	
		
	<% } %>		