var x=0;
	var columns=3;
	var rows=3;
	var first = 0;
	var last;
	var bigStr;
	var hint;
	var annotation;
	
	var titleStr;
	
	var album;
	var inThumbs=true;
	var pic=0;
	
	var text = new Array("Our ICT Suite.",
						"Our ICT Suite.",
						"We can use Knowledge Box.",
						"Bee Bots.",
						"We are learning to log on and off.",
						"Our Corridor - We enjoy reading traditional tales.",
						"The Three Little Pigs",
						"Three Billy Goats Gruff",
						"Goldilocks and The Three Bears",
						"Many Years Ago",
						"Hansel and Gretel",
						"Snow White",
						"The Three Little Pigs"
						);

	function selectAlbum(albumStr)
		{
			//extract album name and number of pics
			var k =0;
			var tempStr="";
			while (albumStr.charAt(k)!='#')
				{
					tempStr+=albumStr.charAt(k);
					k++;
				}
			x=albumStr.slice(k+1);
			album=tempStr;
			if (x != 0)
				{
										
					show();
		
          document.getElementById("backdiv").innerHTML="<div class =\"menu\" onmouseover=\"over('back')\" onmouseout=\"off('back')\" onclick = \"dec()\" id =\"back\" style=\"border:2px solid #ba0901\" >\<\<\<\< Back \<\<\<</div>";
          
					document.getElementById("fordiv").innerHTML="<div class =\"menu\" onmouseover=\"over('forward')\" onmouseout=\"off('forward')\" onclick = \"inc()\" id =\"forward\" style=\"border:2px solid #ba0901\">\>\>\> Forward \>\>\>\></div>";
					
					document.getElementById("slidesDiv").innerHTML="<div class =\"menu\" onmouseover=\"over('slides')\" onmouseout=\"off('slides')\" onclick = \"startSlides()\" id =\"slides\" style=\"border:2px solid #ba0901\" >Slide Show</div>";
					
					document.getElementById("counter").style.width="160px";
					document.getElementById("hint").style.width="180px";
					
										
				}
		}

	function inc()
		{
			if (inThumbs)
				{
					if (canMove(1))
						{
							first=first+rows*columns;
						}
					show();
				}
			else
				{
					if (pic<x)
						{
							pic++;
							if (pic>first+rows*columns)
								{
									first=first+rows*columns;
								}
							bigPic(pic);
						}
				}
		}

	function dec()
		{
			if (inThumbs)
				{
					if (canMove(-1))
						{
							first=first-rows*columns;
						}
					show();
				}
			else
				{
					if (pic>1)
						{
							pic--;
							if (pic==first)
								{
									first=first-rows*columns;
								}
							bigPic(pic);
						}
				}
		}

	function canMove(direction)
		{
			if (direction==1)
				{
 					if ((first+rows*columns) < x)
						{
							return true;
						}
					else
						{
							return false;
						}
				}
			else
				{
					if (first>0)
						{
							return true;
						}
					else
						{
							return false;
						}
				}
		}


	function show()
  	{
			if (x<=(first+rows*columns))
				{
					last=x;
				}
			else
				{
					last=first+rows*columns;
				}
			str="<table  class=\"thumb\">";
			for (j=0;j<rows;j++)
				{
					str+="<tr align=\"center\">";
					for (i=1;i<=columns;i++)
						{
							var c=first+j*columns+i;
							if (c<=x)
								{
									str+="<td><img src=\"pix/"+album+"/thumbnails/pic"+c+".jpg\" id=\""+c+"\" height = \"108\" border=\"0\" onclick=\"inThumbs=!inThumbs;bigPic("+c+")\" onmouseover=\"on("+c+")\" onmouseout=\"out("+c+")\" alt=\""+text[c-1]+"\" title=\""+text[c-1]+"\" style=\"border: 1px solid #000000\"></td>";
								}
							else
								{
									str+="<td>\&nbsp</td>";
								}
						}
					str+="</tr>";
				}
			str+="</table>";

			document.getElementById("picture").innerHTML=str;

			annotation="Click the forward or back button to scroll through the pictures.";
			document.getElementById("annotation").innerHTML=annotation;

			
			hint="<p>Click on thumbnail to<br>view a larger version</p>";
			document.getElementById("hint").innerHTML=hint;
			document.getElementById("counter").innerHTML="Images <span class=\"blue\">"+(first+1)+"</span> to <span class=\"blue\">"+last+"</span> of <span class=\"blue\">"+x;
  	}


	function bigPic(pIn)
		{
			pic=pIn;
			bigStr="<img src=\"pix/"+album+"/pic"+pic+".jpg\" id=\"big\" onclick=\"stopSlides();inThumbs=!inThumbs;show()\" onmouseover=\"on('big')\" onmouseout=\"out('big')\" alt=\""+text[pic-1]+"\" title=\""+text[pic-1]+"\" style=\"border: 2px solid #000000\">";
			hint="<p>Click on picture to<br>return to thumbnails</p>";
			document.getElementById("picture").innerHTML=bigStr;
			document.getElementById("hint").innerHTML=hint;
			document.getElementById("big").style.cursor="pointer";
			document.getElementById("annotation").innerHTML=text[pic-1];
			document.getElementById("counter").innerHTML="Image <span class=\"blue\">"+pic+"</span> of <span class=\"blue\">"+x;
		}

	function on(name)
		{
			document.getElementById(name).style.cursor="pointer";
		}
	function out(name)
		{
			document.getElementById(name).style.cursor="default";
		}

//link button variations
function changeButton(nameIn,state)
  {
	  if (state==0)
	  {
	  	document.getElementById(nameIn).src="pix/openDay/buttons/"+nameIn+"Hover.jpg";
	  }
	  else
	  {
	  	document.getElementById(nameIn).src="pix/openDay/buttons/"+nameIn+"Normal.jpg";
	  }
  }

/////////////////////////////////////////////////////////////////////////////



var s;
var timeoutId;	
var i=1;	
var slideGo=false;
function stopSlides()
	{
		slideGo=false;
		document.getElementById("slidesDiv").innerHTML="<div class =\"menu\" onmouseover=\"over('slides')\" onmouseout=\"off('slides')\" onclick = \"startSlides()\" id =\"slides\" style=\"border:2px solid #ba0901\" >Slide Show</div>";
		document.getElementById("backdiv").innerHTML="<div class =\"menu\" onmouseover=\"over('back')\" onmouseout=\"off('back')\" onclick = \"dec()\" id =\"back\" style=\"border:2px solid #ba0901\" >\<\<\<\< Back \<\<\<\<</div>";

    document.getElementById("fordiv").innerHTML="<div class =\"menu\" onmouseover=\"over('forward')\" onmouseout=\"off('forward')\" onclick = \"inc()\" id =\"forward\" style=\"border:2px solid #ba0901\">\>\>\> Forward \>\>\>\></div>";
		
	}

function startSlides()
	{
		if ((inThumbs)&&((first>pic)||(last<pic)))
			{
				pic=first+1;
				
			}
		inThumbs=false;
		document.getElementById("slidesDiv").innerHTML="<button type =\"button\" onclick = \"stopSlides()\" id =\"slides\" style=\"border:2px solid #ba0901\" >Stop Show</button>";
		document.getElementById("slidesDiv").innerHTML="<div class =\"menu\" onmouseover=\"over('slides')\" onmouseout=\"off('slides')\" onclick = \"stopSlides()\" id =\"slides\" style=\"border:2px solid #ba0901\" >Stop Show</button>";
		document.getElementById("backdiv").innerHTML="";
		document.getElementById("fordiv").innerHTML="";
		document.getElementById("annotation").innerHTML="";
		slideGo=true;
		
		if(pic>0){pic--};
		slideshow();
	}


function slideshow()
	{
		if (slideGo)
			{
				if (pic>=x)
	    		{
	    			pic=0;
	    			first=0;
      		}
    		inc();
				s="slideshow()";
    		timeoutId=setTimeout(s,3000);
    	}
			
	}