// JavaScript Document
//boxId:String = 容器ID,leftBtnUrl:String = 左按钮图片路径,rightBtnUrl:String = 右按钮图片路径,btnWidth:Number = 按钮宽度,btnHeight:Number = 按钮高度,btnLeftPo0:String = 左按钮原始状态position,btnLeftPo1:String = 左按钮鼠标经过状态position,btnRightPo0:String = 右按钮原始状态position,btnRightPo1:String = 右按钮鼠标经过状态position,btnAlong:Number = 按钮离容器边框距离，allWidth:Number = 实际显示的容器宽度,imgNum:Number = 第一屏显示的图片数量,imgUrl:String = 图片路径 用“|”隔开,imgIntro:String = 图片说明文字 用“|”隔开，imgHref:String = 图片点击的链接地址 用“|”隔开，imgWidth:Number = 图片宽度，imgHeight:Number = 图片高度，imgBorColor1:String = 图片原始边框颜色，imgBorColor2:String = 图片鼠标经过边框颜色，textColor1:String = 说明文字原始颜色，textColor2:String = 说明文鼠标经过颜色，imgBorWeight:Number = 图片边框宽度，imgBorPadding:Number = 图片边框的padding数
var rowImgShow = function(boxId,leftBtnUrl,rightBtnUrl,btnWidth,btnHeight,btnLeftPo0,btnLeftPo1,btnRightPo0,btnRightPo1,btnAlong,allWidth,imgNum,imgUrl,imgIntro,imgHref,imgWidth,imgHeight,imgBorColor1,imgBorColor2,textColor1,textColor2,imgBorWeight,imgBorPadding){
	
	var imgA = new Array();
	var imgObj = new Array();
	var leftBtn = 0;
	var rightBtn = 0;
	
	var imgGoListener = 0;
	
	var imgBox = document.getElementById(boxId);
	imgBox.style.overflow = "hidden";
	imgBox.style.zoom = 1;
	imgBox.style.position = "relative";
	
	var imgBase0 = document.createElement("div");
	with(imgBase0){
		style.clear = "both";
		style.width = allWidth + "px";
		//style.height = imgHeight + 20 + imgBorPadding*2 + imgBorWeight*2  + "px";
		//style.margin = (imgBox.offsetHeight - imgHeight - 20 - imgBorPadding*2 - imgBorWeight*2) / 2 + "px auto";
		style.margin = "15px auto";
		style.overflow = "hidden";
		style.zoom = 1;
		style.lineHeight = 20 + "px";
	}
	imgBox.appendChild(imgBase0);
	
	var liWidth = allWidth / imgNum;
	var imgBase1 = document.createElement("div");
	with(imgBase1){
		style.clear = "both";
		style.overflow = "hidden";
		style.zoom = 1;
		style.width = liWidth * imgUrl.split("|").length + "px";
	}
	imgBase0.appendChild(imgBase1);
	var uiCreate = function(){
		var imgUl = document.createElement("ul");
		imgBase1.appendChild(imgUl);
		imgUl.style.listStyle = "none";
		imgUl.style.margin = 0 + "px";
		imgUl.style.padding = 0 + "px";
		var imgLi = new Array();
		for(var a = 0; a < imgUrl.split("|").length; a ++){
			imgLi[a] = document.createElement("li");
			with(imgLi[a]){
				style.width = liWidth + "px";
				style.cssFloat = "left";
				style.styleFloat = "left";
				style.textAlign = "center";
			}
			imgBase1.appendChild(imgLi[a]);
			imgA[a] = document.createElement("a");
			imgA[a].href = imgHref.split("|")[a];
			imgLi[a].appendChild(imgA[a]);
			imgObj[a] = document.createElement("img");
			with(imgObj[a]){
				src = imgUrl.split("|")[a];
				style.width = imgWidth + "px";
				style.height = imgHeight + "px";
				style.padding = imgBorPadding + "px";
			}
			imgA[a].appendChild(imgObj[a]);
			var brObj = document.createElement("br");
			imgA[a].appendChild(brObj);
			var spanObj = document.createElement("span");
			spanObj.innerHTML = imgIntro.split("|")[a];
			imgA[a].appendChild(spanObj);
		}
		
		
		
		if(imgUrl.split("|").length > imgNum){
		leftBtn = document.createElement("div");
		rightBtn = document.createElement("div");
		with(leftBtn){
			style.width = btnWidth + "px";
			style.height = btnHeight + "px";
			style.position = "absolute";
			style.zIndex = 1;
			style.top = (imgBox.offsetHeight - btnHeight) / 2 + "px";
			style.left = btnAlong + "px";
			style.background = "url(" + leftBtnUrl + ") no-repeat " + btnLeftPo0;
			style.cursor = "pointer";
		}
		with(rightBtn){
			style.width = btnWidth + "px";
			style.height = btnHeight + "px";
			style.position = "absolute";
			style.zIndex = 2;
			style.top = (imgBox.offsetHeight - btnHeight) / 2 + "px";
			style.right = btnAlong + "px";
			style.background = "url(" + rightBtnUrl + ") no-repeat " + btnRightPo0;
			style.cursor = "pointer";
		}
		imgBox.appendChild(leftBtn);
		imgBox.appendChild(rightBtn);
		leftBtn.onmouseover = function(){leftBtn.style.backgroundPosition = btnLeftPo1;};
		leftBtn.onmouseout = function(){leftBtn.style.backgroundPosition = btnLeftPo0;};
		rightBtn.onmouseover = function(){rightBtn.style.backgroundPosition = btnRightPo1;};
		rightBtn.onmouseout = function(){rightBtn.style.backgroundPosition = btnRightPo0;};
		leftBtn.onclick = function(){leftBtnClick();};
		rightBtn.onclick = function(){rightBtnClick();};
		}
		//var imgGoListener = setInterval(imgGoFun,50);
	}
	
	var styleCreate = function(){
		document.write("<style>#" + boxId + " a:link,#" + boxId + " a:active,#" + boxId + " a:visited{color:" + textColor1 + ";text-decoration:none;}#" + boxId + " a:hover{color:" + textColor2 + ";text-decoration:none;}" + "#" + boxId + " img{border:solid " + imgBorWeight + "px " + imgBorColor1 + ";}#" + boxId + " a:hover img{border-color:" + imgBorColor2 + ";}</style>");
	}
	
	var displayNum = 0;
	var leftBtnClick = function(){
		if(imgGoListener == 0){
			imgGoListener = setInterval(imgGoFun,30);
		}
		if(displayNum > 0){
			displayNum --;
		}else{
			displayNum = imgUrl.split("|").length - imgNum;
		}
	}
	var rightBtnClick = function(){
		if(imgGoListener == 0){
			imgGoListener = setInterval(imgGoFun,30);
		}
		if(displayNum < imgUrl.split("|").length - imgNum){
			displayNum ++;
		}else{
			displayNum = 0;
		}
	}
	var imgGoFun = function(){
		if(imgUrl.split("|").length > imgNum){
			var thisLeft = imgBase0.scrollLeft;
			var goLeft = displayNum * liWidth;
			var goSpeed = (goLeft - thisLeft) / 5;
			if(goSpeed >= 1 || goSpeed <= -1){
				imgBase0.scrollLeft += goSpeed;
			}else{
				imgBase0.scrollLeft = goLeft;
				clearInterval(imgGoFun);
				imgGoFun = 0;
			}
		}
	}
	uiCreate();
	styleCreate();
}