<html>
<head>
<title>北 角 官 立 小 學 ﹝NORTH POINT GOVERNMENT PRIMARY SCHOOL﹞</TITLE>
<style type="text/css">
body {background-image:url("images/pta_logo.png")}
</style>

</head>

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();

// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["thumbnails/0001.JPG", "images/0001.JPG", ""];
theimage[1]=["thumbnails/0002.JPG", "images/0002.JPG", ""];
theimage[2]=["thumbnails/0003.JPG", "images/0003.JPG", ""];
theimage[3]=["thumbnails/0004.JPG", "images/0004.JPG", ""];
theimage[4]=["thumbnails/0005.JPG", "images/0005.JPG", ""];
theimage[5]=["thumbnails/0006.JPG", "images/0006.JPG", ""];
theimage[6]=["thumbnails/0007.JPG", "images/0007.JPG", ""];
theimage[7]=["thumbnails/0008.JPG", "images/0008.JPG", ""];
theimage[8]=["thumbnails/0009.JPG", "images/0009.JPG", ""];
theimage[9]=["thumbnails/00010.JPG", "images/00010.JPG", ""];
theimage[10]=["thumbnails/00011.JPG", "images/00011.JPG", ""];
theimage[11]=["thumbnails/00012.JPG", "images/00012.JPG", ""];
theimage[12]=["thumbnails/00013.JPG", "images/00013.JPG", ""];
theimage[13]=["thumbnails/00014.JPG", "images/00014.JPG", ""];
theimage[14]=["thumbnails/00015.JPG", "images/00015.JPG", ""];
theimage[15]=["thumbnails/00016.JPG", "images/00016.JPG", ""];
theimage[16]=["thumbnails/00017.JPG", "images/00017.JPG", ""];
theimage[17]=["thumbnails/00018.JPG", "images/00018.JPG", ""];
theimage[18]=["thumbnails/00019.JPG", "images/00019.JPG", ""];
theimage[19]=["thumbnails/00020.JPG", "images/00020.JPG", ""];
theimage[20]=["thumbnails/00021.JPG", "images/00021.JPG", ""];
theimage[21]=["thumbnails/00022.JPG", "images/00022.JPG", ""];
theimage[22]=["thumbnails/00023.JPG", "images/00023.JPG", ""];
theimage[23]=["thumbnails/00024.JPG", "images/00024.JPG", ""];




///// Plugin variables

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
playdiffernce=500; // The speed that the autoplay speed is changed by. 1000=1sec

//#####
//key that holds where in the array currently are
i=0;

//###########################################
window.onload=function(){

	//preload images into browser
	preloadSlide();

	//"jump to" box
	for (y=0;y<theimage.length;y++) {
		document.slideshow.imgComboBox[y]=new Option(theimage[y][2]);
	}

	//set the first slide
	SetSlide(0);

	//autoplay
	PlaySlide();
}

//###########################################
function SetSlide(num) {
	//too big
	i=num%theimage.length;
	//too small
	if(i<0)i=theimage.length-1;

	//switch the image
	document.images.imgslide.src=theimage[i][1];

	//if drop down box
	if(document.slideshow.imgComboBox){
		document.slideshow.imgComboBox.selectedIndex = i;
	}

	//if they want current slide number and total
	document.getElementById('slidecount').innerHTML= "Image "+(i+1)+" of "+theimage.length;

	//if they have the speed timer
	if(document.slideshow.slidespeed){
		SetSpeed(0);
	}
}

//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	// if you have to change the image for the "playing" slide
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}

//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function SetSpeed(num){
	if(playspeed+num>0){
		playspeed+=num;
		document.slideshow.slidespeed.value=playspeed;
	}
}


//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][1]=new Image().src=theimage[k][1];
	}
}


</script>


<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td align=center colspan=2>

<table border=5 cellpadding=5 cellspacing=0>
<tr>
	<td width=800 align=center bgcolor=yellow><b><font size=+2>春季郊遊</font></b></td>
</tr>
<tr>
	<td align=center bgcolor=turquoise>二零一六年三月份</td>
</tr>
</table>

</td>
</tr>

<tr>
<td>
	<marquee width=200 height=500 direction=up onMouseOver="this.stop();" onMouseOut="this.start();">
	<script type="text/javascript">
		for(k=0;k<theimage.length;k++) {
			document.write('<a href="javascript:SetSlide('+k+')">');
			document.write('<img src="'+theimage[k][0]+'" >');
			document.write('</a>')
		}
	</script>
	</marquee>
</td>
<td>

<!-- slide show HTML -->
<form name="slideshow">

<table border=0 cellpadding=2 cellspacing=0>
<tr>
	<td align="left">
		<input type="button" value="I<<" onClick="SetSlide(0);" title="Jump to starting image">
		<input type="button" value="<<" onClick="SetSlide(i-1);" title="Previous image">
		<input type="button" name="play" value="   Play   " onClick="PlaySlide();" title="Autoplay">
		<input type="button" value=">>" onClick="SetSlide(i+1);" title="Jump to next image">
		<input type="button" value=">>I" onClick="SetSlide(theimage.length-1);" title="Jump to ending image">
	</td>

	<td align="center">
		<select name="imgComboBox" onChange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select>
	</td>

	<td align="right" bgcolor=white>
	Delay: 
	<input type="button" value=" /\ " onClick="SetSpeed(playdiffernce)" TITLE="+ Speed" />
	<input type="text" name="slidespeed" readonly size="5" onFocus="blur();" />
	<input type="button" value=" \/ " onClick="SetSpeed(-playdiffernce)" TITLE="- Speed" />
	</td>
</tr>
<tr>
	<td align="center" colspan=3>
	<a href="#" onMouseOver="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][1]+'" border="0">')
	</script>
	</a>
	</td>
</tr>
<tr>
	<td align="center" colspan=3><div id="slidecount"></div></td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

</td>
</tr>
</table>

</BODY>
</HTML>