//global vars
var numslides=0;
var currentslide=0;
var old_slide=0;
var x = 0;
var slides = new Array();

function makeSlideShow(){
//find all the images with in the slide class.
imgs = document.getElementsByTagName('img');

for(i = 0; i<imgs.length;i++){
	if(imgs[i].className != "slide") continue; 
		slides[numslides]=imgs[i];
		//compile images with first img on top
		if(numslides==0){
			imgs[i].style.zIndex=10;
		}else{
			imgs[i].style.zIndex=0;
		}
		if( i == imgs.length){
			imgs[i].style.display="none";
		}
		imgs[i].onclick = NextSlide;
		
		numslides++;
     }
}//end make slide show function

function NextSlide(){
//set next selection ovr the top img
slides[currentslide].style.display="block";
slides[currentslide].style.zIndex=9;

//move the top slide to the bottom
slides[old_slide].style.zIndex=0;

old_slide =currentslide;
currentslide++;

if(currentslide >= numslides){ currentslide = 0;}

//start playing at the right edge of the containing elements. 
slides[currentslide].style.top=400;
x=400;

//move the new slides to the top.
slides[currentslide].style.zIndex = 10;
animateSlide();

}

function animateSlide(){
	  x = x-10;
		slides[currentslide].style.top = x+"px";
	//last img moves of the left side of the element.
	//comment out the line bellow for a different effect. \/
		slides[old_slide].style.top=x-400+"px";
	//repeat until the img pos.x is 0
	
	if(x >= 0){ setTimeout("animateSlide();",10) }
}	
	
window.onload=makeSlideShow;
	for(var i=0;i<50;i++){
		setTimeout('NextSlide();', 5000*i);
		
	}

