/*the small Images for mid images*/
function changeImg(picsrc,url,show, num) {
	if(num == null ) num = 0;
	var aa = show + "_a";
	var ii = show + "_i";	
    var vv = show + "_v";    
	document.getElementById(ii).src = picsrc.replace('/im45/','/l/');
	document.getElementById(vv).src = picsrc.replace('/im45/','/v/');
	//var bigUrl = url.replace('/l/','/v/');	
    document.getElementById(aa).href = url;   
	document.getElementById(show).href = url;	
}

function initBtn(btns,showimg,num){
	var smallImgBtns = document.getElementById(btns).getElementsByTagName("img");
	clearBtnBorder(smallImgBtns,true,num);
	var bigUrl, imgSize;
	for (i = 0; i <smallImgBtns.length; i++) {		
		imgSize = parseInt(smallImgBtns[i].getAttribute("imgSize"));
		//cached the large images
		var imagesHiltite = new Object();
		imagesHiltite[i] = new Image(imgSize, imgSize);
		if(bigUrl != null  && bigUrl != 'undefined'){
			imagesHiltite[i].src = bigUrl;
		}
		//define the onclick
		smallImgBtns[i].onclick = function() {
			var newUrl = this.getAttribute("big");
            var newPic = this.getAttribute("src");
			changeImg(newPic,newUrl,showimg, parseInt(this.getAttribute("num")));
		//	changeImg(newUrl,showimg, parseInt(this.getAttribute("num")));
            clearBtnBorder(smallImgBtns,false,num);
			this.style.border='1px solid #F5A79A';			
			this.style.cursor = "default";
		}
		smallImgBtns[i].onmouseover = function(){
			this.style.backgroundColor = "#ddd";
		}
		smallImgBtns[i].onmouseout = function(){
			this.style.backgroundColor = "#fff";
		}
	}
}

function clearBtnBorder(smallImgBtns,flg,num){
	for (i = 0; i <smallImgBtns.length; i++) {
		if(flg && i==num){
			smallImgBtns[i].style.border='1px solid #F5A79A';			
			smallImgBtns[i].style.cursor = "default";
		}else{
			smallImgBtns[i].style.border='1px solid #EEEEEE';
			smallImgBtns[i].style.cursor = "pointer";
		}
	}
}