// JavaScript Document

var imgs=new Array();
imgs[imgs.length]="userfiles/20091019182000859.jpg";
imgs[imgs.length]="userfiles/20091019182009988.jpg";
imgs[imgs.length]="userfiles/20091019182048572.jpg";
imgs[imgs.length]="userfiles/2009101918201921.jpg";
imgs[imgs.length]="userfiles/20091019182004454.jpg";
imgs[imgs.length]="userfiles/20091019182022880.jpg";
imgs[imgs.length]="userfiles/2009101918202830.jpg";
imgs[imgs.length]="userfiles/20091019182015626.jpg";
imgs[imgs.length]="userfiles/20091019182043359.jpg";
imgs[imgs.length]="userfiles/20091019182012929.jpg";
imgs[imgs.length]="userfiles/20091019182038283.jpg";
imgs[imgs.length]="userfiles/20091019182034263.jpg";
imgs[imgs.length]="userfiles/20091019182007221.jpg";
 
	function showImage(offset)
	{
		var currentIndex=parseInt(document.getElementById("hdnImage").value);
		var index=currentIndex+offset;
		if(index<0)
			index=0;
		if(index>=imgs.length)
			index=imgs.length-1;
		document.getElementById("showImg").src=imgs[index];
		document.getElementById("hdnImage").value=index.toString();
		if(index==0)
		{
			document.getElementById("imgPrev").style.cursor="default";
			document.getElementById("imgPrev").alt="";
		}
		else
		{
			document.getElementById("imgPrev").style.cursor="hand";
			document.getElementById("imgPrev").alt="上一張";
		}
		if(index==imgs.length-1)
		{
			document.getElementById("imgNext").style.cursor="default";
			document.getElementById("imgNext").alt="";
		}
		else
		{
			document.getElementById("imgNext").style.cursor="hand";
			document.getElementById("imgNext").alt="下一張";
		}
		listImages(index);
	}
	function listImages(index)
	{
		var div=document.getElementById("imglist");
		div.innerHTML="";
 
		if(imgs.length<=5)
		{
			for(var i=0;i<imgs.length;i++)
			{
				if(i==index)
					div.innerHTML+="<div class=\"img current\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td valign=\"middle\" style=\"height:71px;\"><img onClick=\"viewImage('"+i.toString()+"');\" onload=\"DrawImage(this,90,67);\" src=\""+imgs[i]+"\" style=\"cursor:hand;\" width=\"90px\" height=\"67px\" /></td></tr></table></div>";
				else
					div.innerHTML+="<div class=\"img\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td valign=\"middle\" style=\"height:71px;\"><img onClick=\"viewImage('"+i.toString()+"');\" onload=\"DrawImage(this,94,71);\" src=\""+imgs[i]+"\" style=\"cursor:hand;\" width=\"90px\" height=\"67px\" /></td></tr></table></div>";
			}
		}
		else
		{
			var start = index-2;
			if(index+2>=imgs.length)
				start=imgs.length-5;
			if(start<0)
				start=0;
			var len=5;
			if(len>imgs.length)
				len=imgs.length;
			for(var i=start;i<start+len;i++)
			{
				if(i==index)
					div.innerHTML+="<div class=\"img current\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td valign=\"middle\" style=\"height:71px;\"><img onClick=\"viewImage('"+i.toString()+"');\" onload=\"DrawImage(this,90,67);\" src=\""+imgs[i]+"\" style=\"cursor:hand;\" width=\"90px\" height=\"67px\" /></td></tr></table></div>";
				else
					div.innerHTML+="<div class=\"img\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td valign=\"middle\" style=\"height:71px;\"><img onClick=\"viewImage('"+i.toString()+"');\" onload=\"DrawImage(this,94,71);\" src=\""+imgs[i]+"\" style=\"cursor:hand;\" width=\"90px\" height=\"67px\" /></td></tr></table></div>";
			}
		}
		/*
		for(var i=0;i<imgs.length;i++)
		{
			if(i==index)
				div.innerHTML+="<div class=\"img current\"><img onClick=\"viewImage('"+i.toString()+"');\" onload=\"DrawImage(this,90,67);\" src=\""+imgs[i]+"\" style=\"cursor:hand;\" /></div>";
			else
				div.innerHTML+="<div class=\"img\"><img onClick=\"viewImage('"+i.toString()+"');\" onload=\"DrawImage(this,94,71);\" src=\""+imgs[i]+"\" style=\"cursor:hand;\" /></div>";
		}*/
	
	}
	function viewImage(index)
	{
		document.getElementById("hdnImage").value=index.toString();
		showImage(0);
	}
	showImage(0);
