var height,i=0,listLen=imgs.length,history,setI;
	$(function(){
		if (listLen>0){
			height = 75*listLen;
			i = listLen+1;
			var smallList=$("#ProList div");
			var bigList=$("#bigList");
			
			for(var jj=0,rel=0;jj<3;jj++){
				for(var j=0;j<listLen;j++){
					if (imgs[j].id!=""){
						smallList.append("<a href='show.asp?ID="+imgs[j].id+"' rel='"+rel+"'><img src='"+imgs[j].small+"'/></a>");
					}else{
						smallList.append("<a href='javascript:;'></a>");
					}
					rel++;
				}
			}
			if (imgs[1].id!=""){
				bigList.append("<img src='"+imgs[1].big+"'/>");
				smallList.find("a").eq(i).css({filter:"Alpha(opacity=100);",opacity:"1"});
			}else{
				bigList.append("<img src='"+imgs[0].big+"'/>");
				smallList.find("a").eq(i-1).css({filter:"Alpha(opacity=100);",opacity:"1"});
			}
			smallList.css("top","-"+height);
			
			$("#UpBtn").click(function(){
				if (setI!=null) clearTimeout(setI);
				smallMove("Up");
			});
			$("#DowmBtn").click(function(){
				if (setI!=null) clearTimeout(setI);
				smallMove("Dowm");
			});
			smallList.find("a").click(function(){
				if (bigList.length>0){
					if (setI!=null) clearTimeout(setI);
					smallList.find("a").css({filter:"Alpha(opacity=80);",opacity:"0.8"});
					$(this).css({filter:"Alpha(opacity=100);",opacity:"1"});
					
					smallMove($(this).attr("rel"));
					return false;
				}
			});
			$("#ProList").mouseover(function(){
				if (setI!=null) clearTimeout(setI);
			}).bind("mouseleave", function() {    
				setI = setTimeout(function(){smallMove("Up");},4000);
			});
			bigList.mouseover(function(){
				if (setI!=null) clearTimeout(setI);
			}).bind("mouseleave", function() {  
				setI = setTimeout(function(){smallMove("Up");},4000);
			});
			
			setI = setTimeout(function(){smallMove("Up");},4000);
		}
	});
	
	function smallMove(action){
		var smallList=$("#ProList div");
		smallList.find("a").css({filter:"Alpha(opacity=80);",opacity:"0.8"});
		if (setI!=null) clearTimeout(setI);
		var top = parseInt(smallList.css("top"));
		
		if (listLen>4){
			if (action=="Up"){
				if (history == "Dowm") i+=2;
				if (history == null) i++;
				
				if ("-"+(75*(listLen*2+(listLen-5))) >= parseInt(smallList.css("top"))){
					smallList.css("top",-(75*(listLen+(listLen-5))));
					smallList.animate({top: -(75*(listLen+(listLen-4)))}, 300);
					i=listLen*2-3;
				}else{ smallList.animate({top: -(75*(i-1))}, 300); }
				
				setImg(smallList,i);
				i++;
				history = "Up";
			}else if (action=="Dowm"){
				if (history == "Up") i-=2;
				if (history == null) i--;
				if ("-75px" == smallList.css("top")){
					smallList.animate({top: -(75*(i-1))}, 300,function(){ smallList.css("top",-(height)); });
				}else{ smallList.animate({top: -(75*(i-1))}, 300); }
				if (i<=1) i=listLen+1;
				setImg(smallList,i);
				i--;
				history = "Dowm";
			}else{
				ai = action;
				//alert("-"+(75*(listLen*2+(listLen-6))) +"======="+ parseInt(smallList.css("top")));
				if ("-75px" == smallList.css("top")){
					smallList.animate({top: -(75*(ai-1))}, 300,function(){ smallList.css("top",-(height)); });
				}else if ("-"+(75*(listLen*2+(listLen-6))) >= parseInt(smallList.css("top"))){
					//alert();
					ai-=listLen;
					smallList.css("top",-(75*(ai-(ai-(i-listLen)+1))));
					//alert((ai-(i-listLen)+1))
					smallList.animate({top: -(75*(ai-1))}, 300);
				}else{ smallList.animate({top: -(75*(ai-1))}, 300); }
				history = null;
				if (ai<=1) {
					ai=listLen+1;
				}else if (ai>=listLen*2+4) ai=listLen+4;
				setImg(smallList,ai);
				i=ai;
			}
			setI = setTimeout(function(){smallMove("Up");},4000);
		}else if(action!="Up"&&action!="Dowm"&&action!=""){setImg(smallList,action);}
	}
	function setImg(element,i){
		element.find("a").eq(i).css({filter:"Alpha(opacity=100);",opacity:"1"});
		var bigList = $("#bigList"),j;
		if (i>=listLen){
			j=i-listLen;
			if (j>=listLen) j-=listLen;
		}else{ j=i; }
		bigList.stop().animate({opacity: '0'},300,function(){
			bigList.find("img").attr("src",imgs[j].big);
			bigList.animate({opacity: '1'},300);
		});
	}