var tmpColor
var picOffBorderColor = "#C8D4E2" 
var picOnBorderColor = "#FFAF24"
var picWidth = 108;
var TeamPicNum = 3;
var loadingImagePath = 'images/loading.gif'
var loadingImg = new Image();
loadingImg.src = loadingImagePath; //

function formatSmallPic(PicDivID, BigPicDivID, previous_btnID, next_btnID, BigPicBasePath){
	var PicDivObj = document.getElementById(PicDivID);
	var ImgObjs = PicDivObj.getElementsByTagName("IMG")	
	var pBtn = document.getElementById(previous_btnID)
	var nBtn = document.getElementById(next_btnID)
	PicDivObj.style.width = ImgObjs.length * picWidth + 'px';	//set smallPicDiv width
	//set smallPic event fucntion
	for (var i = 0; i < ImgObjs.length; i++){		
		if (i == 0){
			ImgObjs[i].style.borderColor = picOnBorderColor;
		}
		ImgObjs[i].onmouseover = function(){
			tmpColor = this.style.borderColor;
			this.style.borderColor = picOnBorderColor;
		}
		ImgObjs[i].onmouseout = function(){
			this.style.borderColor = tmpColor;
		}
		ImgObjs[i].onclick = function(){
			setCurPic(ImgObjs, this);			
			ChgBigPic(BigPicDivID, BigPicBasePath + this.getAttribute("bigPic"));
		}
	}
	//set btn event function
	if (ImgObjs.length <= TeamPicNum) {
		pBtn.style.display = "none";
		nBtn.style.display = "none";
		return ;
	}
	pBtn.onclick = function(){	
		nBtn.style.backgroundPosition = '-290px 0';
		var Left = PicDivObj.style.left.replace(/[p|x|P|X]/,"") + picWidth * TeamPicNum;		
		if (isNaN(Left) || Left > 0) {
			PicDivObj.style.left = 0 + 'px';
			pBtn.style.backgroundPosition = '0 -100px';	
		}else{
			PicDivObj.style.left = Left + 'px'
		}
	}
	nBtn.onclick = function(){	
		pBtn.style.backgroundPosition  = '0 0';
		var Left = PicDivObj.style.left.replace(/[p|x|P|X]/,"") - picWidth * TeamPicNum;
		var picNum = ImgObjs.length + 1;
		var restWidth = picNum % TeamPicNum?picNum % TeamPicNum * picWidth : picWidth * TeamPicNum;
		var maxLeft = -1 * picWidth * picNum + restWidth
		if (isNaN(Left) || Left <= maxLeft) {
			PicDivObj.style.left = maxLeft + 'px';
			nBtn.style.backgroundPosition = '-290px -100px';
		}else{
			PicDivObj.style.left = Left + 'px'
		}
	}	
	pBtn.style.backgroundPosition = '0 -100px';
}
function setCurPic(ImgObjs, ImgObj){
	for(var i = 0; i < ImgObjs.length; i++){
		ImgObjs[i].style.borderColor = picOffBorderColor;		
	}
	tmpColor = picOnBorderColor;
	ImgObj.style.borderColor = picOnBorderColor;
}
function ChgBigPic(BigPicDivID, BigPicPath){		
	var img = new Image();	
	var DivObj = document.getElementById(BigPicDivID);
	DivObj.innerHTML = '';	
	DivObj.style.background = 'url(images/loading.gif) no-repeat center center'	
	img.onload = function(){
		DivObj.style.background = '';
		DivObj.innerHTML = '<img src="' + this.src + '" />'	;
	}
	img.onerror = function(){
		DivObj.style.background = '';
		DivObj.innerHTML = 'sorry! Load error.'
	}
	img.src = BigPicPath;
}