// JavaScript Document
//docId:容器ID,bigImgUrl:大图路径,smallImgUrl:小图路径,imgIntro:图片说明,imgUrlGo:点击图片跳转页面连接,bigWidth:大图宽度,bigHeight:大图高度,smallWidth:小图宽度,smallHeight:小图高度,imgTotal:图片数量,marginNum:间隔距离,intervalTime:自动播放间隔时间,firstColor:初始颜色,activeColor:作用颜色
var createDoc = function(docId,bigImgUrl,smallImgUrl,imgIntro,imgUrlGo,bigWidth,bigHeight,smallWidth,smallHeight,imgTotal,marginNum,intervalTime,firstColor,activeColor){
	var divBase = document.getElementById(docId);
	divBase.style.position = "relative";
	var bigDivBox = document.createElement("div");
	var bigDivBase = document.createElement("div");
	var introBase = document.createElement("div");
	var smallImgBase = document.createElement("div");
	var smallImgUl = document.createElement("ul");
	var smallImgLi = new Array();
	var thisSmallImg = new Array();
	var thisBigImg = new Array();
	var smallImgCheckNum = new Array();
	var bigImgCheckNum = 0;
	var bigImgA = new Array();
	var bigImgCoolNum = 0;
	var loopGoNum = 0;
	var imgCheck = function(obj,thisCheckNum){
		var checkNum = 0;
		var checkFun = function(){
			if(obj.complete){
				obj.style.display = "block";
			}else{
				if(checkNum < 10000){
					checkNum ++;
					thisCheckNum = setTimeout(checkFun,100);
				}
			}
		}
		checkFun();
	}
	with(bigDivBox){
		style.width = bigWidth + "px";
		style.height = bigHeight + "px";
		style.overflow = "hidden";
		style.clear = "both";
		style.border = "0";
		style.background = "url(img/loading.gif) no-repeat";
		style.backgroundPosition = (bigWidth - 24) / 2 + "px" + " " + (bigHeight - 24) / 2 + "px";
	}
	divBase.appendChild(bigDivBox);
	with(bigDivBase){
		style.width = bigWidth*imgTotal + "px";
		style.height = bigHeight + "px";
		style.overflow = "hidden";
		style.zoom = 1;
	}
	bigDivBox.appendChild(bigDivBase);
	with(introBase){
		style.width = bigWidth + "px";
		style.height = 29 + "px";
		style.clear = "both";
		style.textAlign = "center";
		style.lineHeight = 29 + "px";
		style.fontSize = 14 + "px";
		style.color = "#fff";
		style.background = "#000";
		style.filter = "alpha(opacity = 70)";
		style.opacity = 0.7;
		style.position = "absolute";
		style.zIndex = 1;
		style.top = bigHeight - 29 + 1 + "px";
		style.left = 0 + "px";
	}
	divBase.appendChild(introBase);
	with(smallImgBase){
		style.clear = "both";
		style.overflow = "hidden";
		style.zoom = 1;
		style.paddingTop = marginNum + "px";
	}
	divBase.appendChild(smallImgBase);
	with(smallImgUl){
		style.listType = "none";
		style.margin= 0 + "px";
		style.padding = 0 + "px";
	}
	smallImgBase.appendChild(smallImgUl);
	var liOver = function(obj){
		return function(){
			obj.style.borderColor = activeColor;
			//this
			imgClick(d);
		}
	}
	var liOut = function(obj){
		return function(){
			if(obj != smallImgLi[thisPageNum]){
				obj.style.borderColor = firstColor;
			}
		}
	}
	for(var a = 0; a < imgTotal; a ++){
		smallImgLi[a] = document.createElement("li");
		with(smallImgLi[a]){
			style.width = smallWidth + "px";
			style.height = smallHeight + "px";
			style.border = "solid 1px #000";
			style.borderColor = firstColor;
			style.styleFloat = "left";
			style.cssFloat = "left";
			style.display = "inline";
			style.cursor = "pointer";
			style.fontSize = 0 + "px";
			style.lineHeight = 0 + "px";
			style.background = "url(img/loading.gif) no-repeat";
			style.backgroundPosition = (smallWidth - 24) / 2 + "px" + " " + (smallHeight - 24) / 2 + "px";
			if(a != imgTotal - 1){
				style.marginRight = marginNum + "px";
			}
		}
		smallImgUl.appendChild(smallImgLi[a]);
		smallImgLi[a].onmouseover = liOver(smallImgLi[a]);
		smallImgLi[a].onmouseout = liOut(smallImgLi[a]);
		
		var thisA = new Object();
		thisA = document.createElement("a");
		thisA.href = imgUrlGo[a];
		thisA.target = "_blank";
		smallImgLi[a].appendChild(thisA);
		
		thisSmallImg[a] = document.createElement("img");
		with(thisSmallImg[a]){
			style.width = smallWidth + "px";
			style.height = smallHeight + "px";
			style.display = "none";
		}
		thisA.appendChild(thisSmallImg[a]);
		thisSmallImg[a].src = smallImgUrl[a];
		imgCheck(thisSmallImg[a],smallImgCheckNum[a]);
		
		bigImgA[a] = document.createElement("a");
		with(bigImgA[a]){
			style.display = "block";
			style.width = bigWidth + "px";
			style.height = bigHeight + "px";
			style.styleFloat = "left";
			style.cssFloat = "left";
			href = imgUrlGo[a];
			target = "_blank";
		}
		bigDivBase.appendChild(bigImgA[a]);
		thisBigImg[a] = document.createElement("img");
		with(thisBigImg[a]){
			style.width = bigWidth + "px";
			style.height = bigHeight + "px";
			style.display = "none";
		}
		bigImgA[a].appendChild(thisBigImg[a]);
		thisBigImg[a].src = bigImgUrl[a];
	}
	var thisPageNum = 0;
	var imgCoolGo = function(){
		var imgCoolFun = function(){
			var bigImgX = thisPageNum*bigWidth;
			var thisImgX = bigDivBox.scrollLeft;
			if((bigImgX - thisImgX) > 3 || (bigImgX - thisImgX) < -3){
				var thisSpeed = (bigImgX - thisImgX) / 3;
				bigDivBox.scrollLeft += thisSpeed;
			}else{
				bigDivBox.scrollLeft = bigImgX;
			}
		}
		bigImgCoolNum = setInterval(imgCoolFun,40);
	}
	var imgLoopGo = function(thisNum){
		for(var a = 0; a < imgTotal; a ++){
			if(a != thisNum){
				smallImgLi[a].style.borderColor = firstColor;
			}else{
				smallImgLi[a].style.borderColor = activeColor;
			}
		}
		introBase.innerHTML = imgIntro[thisNum];
		thisPageNum = thisNum;
	}
	var imgClick = function(thisNum){
		return function(){
			imgLoopGo(thisNum);
		}
	}
	
	var bigImgCheck = function(){
		var thisBigImgCheckNum = 1;
		for(var c = 0; c < imgTotal; c ++){
			if(thisBigImg[c].complete){
				thisBigImgCheckNum *= 1;
			}else{
				thisBigImgCheckNum *= 0;
			}
		}
		if(thisBigImgCheckNum == 1){
			for(var d = 0; d < imgTotal; d ++){
				thisBigImg[d].style.display = "block";
				//smallImgLi[d].onclick = imgClick(d);
				smallImgLi[d].onmouseover =  imgClick(d);
				thisSmallImg[d].onmouseover = function(){clearInterval(loopGoNum);}
				thisBigImg[d].onmouseover = function(){clearInterval(loopGoNum);}
				thisSmallImg[d].onmouseout = function(){loopGoNum = setInterval(function(){if(thisPageNum + 1 < imgTotal){thisPageNum++;}else{thisPageNum = 0;} imgLoopGo(thisPageNum);},intervalTime);}
				thisBigImg[d].onmouseout = function(){loopGoNum = setInterval(function(){if(thisPageNum + 1 < imgTotal){thisPageNum++;}else{thisPageNum = 0;} imgLoopGo(thisPageNum);},intervalTime);}
			}
			introBase.innerHTML = imgIntro[0];
			smallImgLi[0].style.borderColor = activeColor;
			imgCoolGo();
			loopGoNum = setInterval(function(){if(thisPageNum + 1 < imgTotal){thisPageNum++;}else{thisPageNum = 0;} imgLoopGo(thisPageNum);},intervalTime);
		}else{
			bigImgCheckNum = setTimeout(bigImgCheck,100);
		}
	}
	bigImgCheck();
}