window.addEventListener?window.addEventListener('load',ssInit,false):window.attachEvent('onload',ssInit);

			
//make an array of the images then show the first one
function ssInit(){
	imgs = get('sl').getElementsByTagName('img');
	imgs[currentImage].style.display = 'block';
	ready=true;
	get('slideshow_control').style.display = 'block';
	name=makeName() //construct the image name from the src
	changeDetails();	
}
//play the slideshow
function play(){
	if (going==false){
		makePauseButton();				
		interval1 = setInterval("showNext();", 3500);//show next image every 3.5 seconds
		going=true; //set a var to show slideshow running
	}	
}
//pause the slideshow
function pause(){
	if(going==true){ //if show running		
		makePlayButton();
		clearInterval(interval1); //stop show
		going=false; //reset the var to show show not running
	}
}	
//initiates 'showNext function
function showNextButton(){
	if (going==true){//if show running
		makePlayButton();				
		clearInterval(interval1);//stop show
		going=false;//reset the var to show show not running
	}	
	showNext(); //show next image
}
	
function showPreviousButton(){
	if (going==true){
		makePlayButton();
		clearInterval(interval1);//stop show
		going=false;//reset the var to show show not running
	}
	showPrevious(); //show previous image
}

function showThumbButton(thumbImage){
	if (going==true){
		makePlayButton();
		clearInterval(interval1);//stop show
		going=false;//reset the var to show show not running
	}
	if(ready==true){ //only goes further if the sideshow has loaded
		//next 2 lines ensure no probs when clicking thumb that's already showing
		if(thumbImage!=currentImage || changingUp==true){
			if(changingThumb==false || thumbImage==currentImage){
				showThumb(thumbImage); //show thumb
			}
		}
	}
}

function showNext(){
	get('thumb' + currentImage).style.border='1px solid #000';//remove border round thumb
	changingUp=true;//set var to show the slides are changing
	t+=0.05;//increase teller				
	if(currentImage>=(imgs.length-1)){ //if current image is last one
		nextImage=0; //next one should be first one
	}
	else{
		nextImage=currentImage+1; //otherwise next image is +1
	}		
	setOpacity(imgs[(nextImage)],t); //increase opacity of next image
	imgs[(nextImage)].style.display = 'block';	//show next image
	setOpacity(imgs[(currentImage)],(1-t));	//decrease opacity of current image	
	if (t<1){	//if teller has not yet reached 1
		interval2 = setTimeout("showNext();", 10); //repeat, continuing fade routine	
		}		
	else{			
		changingUp=false; //show that fading has completed
		t=0; //reset teller
		imgs[(currentImage)].style.display = 'none'; //hide the prev image completely 
		currentImage=nextImage; //make current value up-to-date
		changeDetails();	
		}
}

function showPrevious(){	
	get('thumb' + currentImage).style.border='1px solid #000';//remove border round thumb
	if(changingUp==true){
		previousImage=currentImage;	//if during 'next fade', give the prev img the value of the current img
	}
	else{
		if(currentImage<=0){
		previousImage=imgs.length-1; //or, if it's at the beginning, make preious the last in the array
		}
		else{
			previousImage=currentImage-1;//otherwise, it's one less
		}
	t+=0.05;
	}			
	setOpacity(imgs[(previousImage)],t);//increase opacity of prev image
	imgs[(previousImage)].style.display = 'block';	//show prev image			
	setOpacity(imgs[(currentImage)],(1-t)); //decrease opacity of current image					
	if (t<1){
		interval3 = setTimeout("showPrevious();", 10);//repeat, continuing fade routine			
		}	
	else{			
		t=0;//reset teller
		imgs[(currentImage)].style.display = 'none';//hide the current image completely						
		currentImage=previousImage;//make current value up-to-date
		changeDetails();	
	}		
}


function showThumb(thumbImage){
	get('thumb' + currentImage).style.border='1px solid #000';//remove border round thumb
	if(changingUp==true){
		clearInterval(interval2);
		imgs[(nextImage)].style.display = 'none';
		if(currentImage==thumbImage){
			currentImage=nextImage;			
		}
		changingUp=false;
	}
	t+=0.05;
	changingThumb=true;
	setOpacity(imgs[(thumbImage)],t);
	imgs[(thumbImage)].style.display = 'block';					
	setOpacity(imgs[(currentImage)],(1-t));	
	
	if (t<1){
		interval4 = setTimeout(function(){showThumb(thumbImage)(thumbImage)}, 10);
		}	
	else{		
		t=0;
		changingThumb=false;
		imgs[(currentImage)].style.display = 'none';								
		currentImage=thumbImage;
		changeDetails();	
	}		
}

function setOpacity(obj, newOpacity){
	if(obj.xOpacity>.99){
		obj.xOpacity = .99;
		return;
	}
	obj.style.opacity = newOpacity;
	obj.style.MozOpacity = newOpacity;
	obj.style.filter = 'alpha(opacity=' + (newOpacity*100) + ')';
}

function makeName(){
		name=(imgs[(currentImage)]).src;
		name=(name.replace(".jpg",""));
		name=(name.replace(/%20/g," "));
		name=(name.replace(/%27/g,"'"));		
		positionSlash=(name.lastIndexOf("/"));
		name=(name.slice(positionSlash+1));
		return name;
}

function changeDetails(){
	name=makeName() 
	get('image_name').innerHTML='<div class="fl_left" id="image_name"><h1>' + name + '</h1></div>';//change the image name	f
	get('thumb' + currentImage).style.border='1px solid #FFF';//	
	get('thumb' + currentImage).style.width='100px';//		
}

function buttonMove(id, marginTop){
	get(id).style.marginTop=marginTop + 'px';
}

function makePlayButton(){
	get('play_pause_div').innerHTML='<div class="fl_left button_container"><img id="playpausebutton" class="button" src="' + slButtonsDir + 'playpause.png" onClick="play()" onmouseover="buttonMove(\'playpausebutton\', \'-30\')" onmouseout="buttonMove(\'playpausebutton\', \'0\')" onmouseup="buttonMove(\'playpausebutton\',\'-30\')" onmousedown="buttonMove(\'playpausebutton\',\'0\')" title="Play slideshow" alt="Play slideshow" /></div>';
			}	

function makePauseButton(){
	get('play_pause_div').innerHTML='<div class="fl_left button_container"><img id="playpausebutton" class="button" src="' + slButtonsDir + 'playpause.png" onClick="pause()" onmouseover="buttonMove(\'playpausebutton\',\'-60\')" onmouseout="buttonMove(\'playpausebutton\',\'-60\')" onmouseup="buttonMove(\'playpausebutton\',\'-60\')" onmousedown="buttonMove(\'playpausebutton\',\'-60\')" title="Pause slideshow" alt="Pause slideshow" /></div>';	
}