var $filename = new Array();
var $aspect = new Array();
var $header = new Array();
var $caption = new Array();
var $options = new Array();   //rotate, starttime=00:00:00.0, volume=
var $myrate = new Array();    //show slide x times faster
var $soundname = new Array(); //sound will play until finished or new sound requested or show ends or fade requested (next line)
var $myvolume = new Array();  //='fade' to fadeout current sound
var $date = new Array();
var $choice=0;
var $showfilenames=0;
var $label='';
var $dur=2;		//default seconds for autoplay slides
var $number=0;  //slide number entered from keyboard and return
var $play=0;	//autoplay toggle
var $fade=1;	//transition between images

$i=0;
$filename[$i]='shows/black.jpg';   //$filename[$i]='shows/controls.jpg'; 
$aspect[$i]=3000/4000;
$header[$i]=window.location.pathname.split('/').slice(-1)[0]; //get url filename
$header[$i]=decodeURIComponent($header[$i].split('.')[0]); //remove %20 and the file type
$header[$i]='<div style="font-size: 250%;">'+$header[$i]+'</div>';

if (location.search.length>1) // page_address?number
{
	$choice = location.search.substring(1)
}
else 
{
	$choice = "0"
}

if (document.captureEvents) document.captureEvents(Event.KEYDOWN); //KEYPRESS does not see arrows
document.onkeydown = processKeypresses; 

function backward()
{
	if ($choice>0) 
	{
		$choice--
	}
	else 
	{
		$choice=$numberoffiles-1;
	}
	
	if ($filename[$choice].indexOf(".mp4") !=-1)   //file is a movie
	{
		insertpicture($choice);
	}
	else
	{
		var image1 = new Image();
		image1.src = '../'+$filename[$choice]; //cache
		image1.onload=function(){insertpicture($choice);}
	}
}

function forward()
{
	if ($choice<$numberoffiles-1) 
	{
		$choice++
	}
	else 
	{
		$choice = 0;
		document.getElementById('audioframe').innerHTML=''; //end sound
	}

	if ($filename[$choice].indexOf(".mp4") !=-1)   //file is a movie
	{
		insertpicture($choice);
	}
	else
	{
		var image1 = new Image();
		image1.src = '../'+$filename[$choice]; //cache
		image1.onload=function(){insertpicture($choice);}
	}
}

function myplay() 
{
	forward();
	if ($filename[$choice].indexOf(".mp4") !=-1)  //file is a movie
	{
//	wait for eventListener to signal videoended
	}
	else
	{
		$rate=1; if (typeof $myrate[$choice] !== 'undefined') {$rate=$myrate[$choice];}
		$autoplay = setTimeout(function(){ myplay() }, $dur*1000/$rate);
		//http://weblogs.asp.net/bleroy/setinterval-is-moderately-evil
	}
}

function videoended(e) 
{
        if(!e) {e = window.event;}
        if($play==1) {$autoplay = setTimeout(function(){ myplay() }, $dur*1000/2);}
} 

function fullscreen() { 
//https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript
    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);

    var docElm = document.documentElement;
    if (!isInFullScreen) {
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

function processKeypresses(e) {
if(navigator.appName == "Netscape") k = e.which; // key's ASCII code (Netscape and Mozilla and Safari)
else k=event.keyCode; // key's ASCII code (IE and Opera)
if (k==13) {$choice=$number-1;$number=0; forward();}  //return
if (k==27) window.location.assign("index.html"); //{$choice=0; insertpicture($choice);} //esc
if (k==32) forward(); // space
if (k==33) backward(); // page up
if (k==34) forward(); // page down
if (k==37) backward(); // arrow left 
if (k==38) backward(); // arrow up
if (k==39) forward(); //  arrow right 
if (k==40) forward(); // arrow down
if (k==65) {$play=1-$play; myplay();} //a
if (k==68) $dur = prompt("Time interval duration (seconds)",$dur); //d
if (k==70) {$showfilenames=1-$showfilenames; insertpicture($choice);} //f
if (k==71) fullscreen(); //g
if (k==72) $fade=1-$fade; //h
if (k==83) clearTimeout($autoplay); //s
if (k==188) backward(); //, lower case <  
if (k==190) forward(); //.  lower case > 
if (k>=48 && k<=57) $number=k-48+10*$number;
if (k!=27) {return false; } // cancel event otherwise
}

function insertpicture(n)
{
//	scroll(0,0);  //scroll back to top of page
	if (n>$numberoffiles) {n=$numberoffiles}
	$choice=n;  //remember selected file

//	www.geekpedia.com/code100_Get-window-width-and-height.html   
	var $x=0;
	var $y=0;
	
	if (self.innerHeight) // all except Explorer
	{
		$x=self.innerWidth;
		$y=self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight) //Explorer 6 strict mode
	{
		$x=document.documentElement.clientWidth;
		$y=document.documentElement.clientHeight;
	}
	else if (document.body) // other Explorers
	{
		$x=document.body.clientWidth;
		$y=document.body.clientHeight;
	}

// Set base font size relative to window size
	var P = Math.sqrt ($x*$x+$y*$y);
    P =  Math.floor (8+P/125);
	document.body.style.fontSize = P + 'px';
// 	alert(" "+P);

	if (!$aspect[n]>0) 	{$aspect[n]=1;} //aspect value not set
	$label='';
	if ($caption[n]) $label="&nbsp;&nbsp;"+$caption[n];
	if ($showfilenames==1) {$label="&nbsp;&nbsp;"+n+"&nbsp;&nbsp;"+$filename[n];}
	if ($date[n]) $label=$label+" "+$date[n];
	if ($label!="") {$y = $y - 1.8*P;} //leave space
	$width= $x;
	if ($width*$aspect[n] > $y) {$width=$y/$aspect[n];} //too tall so shrink width
	$code='<div align="center">';
	if ($header[n]) {$y = $y - 3*P; $code=$code+'<div style="width:'+$width+'px; ">'+$header[n]+'</div>';}
	
	if($filename[n].indexOf(".mp4") !=-1)   //file is a movie
	{
		$code=$code+'<video id="myVideo" width="' + $width + '" height="'+ ($width*$aspect[n]) +'" controls autoplay';  //must have controls to play
		if($options[n])
		{
			$time=0;
			if ($options[n].indexOf("starttime=") != -1)
			{
				$time=$options[n].split("starttime=")[1]; //portion that follows starttime=
				$time=$time.split(" ")[0];  //up to next blank
				$time = $time.split(':'); // split it at the colons 00:00:00.0
				$seconds= (+$time[0]) * 60 + (+$time[1]) + (+$time[2]/60); // convert to seconds
				$code=$code+' onloadeddata="this.currentTime='+$seconds+'"';
			}
			
			if ($options[n].indexOf("volume=") != -1)
			{
				$volume=$options[n].split("volume=")[1]; //portion that follows volume=
				$volume=$volume.split(" ")[0];  //up to next blank
				$code=$code+' onloadeddata="this.volume='+$volume+'"';
			}
		}		
		$code=$code+'><source src="../'+$filename[n]+'"'; 
		if($fade) $code=$code+'" class="fade" ';
	    $code=$code+' type="video/mp4">Your browser does not support HTML5 video.</video>';
	}
	else
 	{
		if($options[n]) //rotate
 		{	
 			$code=$code+'<div class="'+$options[n]+'" style="position: absolute; top: 0em;  left: 50%; margin-left:'+(-$y/2)+'px;"><img src="../'+$filename[n];
 			if($fade) $code=$code+'" class="fade" ';
 			$code=$code+'" width='+$y+'px></div>';
		}
 		else
		{
			$code=$code+'<img src="../'+$filename[n];
			if($fade && typeof $myrate[n-1] == 'undefined') $code=$code+'" class="fade" ';
			$code=$code+'" width='+$width+'px>';
		}
	}

	$code=$code+'<div class="smallerfont" style="position: absolute; bottom: .5em;">'+ $label+'</div></div>';
//	alert(n+" "+$code);	 "
	document.getElementById('pictureframe').innerHTML=$code;
	if($filename[n].indexOf(".mp4") !=-1) {document.getElementById('myVideo').addEventListener('ended',videoended,true);}  //http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events
	if(typeof $soundname[n] !== 'undefined') {document.getElementById('audioframe').innerHTML='<audio id="mysound" controls autoplay src="../'+$soundname[n]+'">HTML5 audio not supported.</audio>';}
	if($myvolume[n] == 'fade')  {FadeAudio("mysound");}
//	if($myvolume[n] == 'fade')  {document.getElementById('mysound').volume = 0;}
}

function FadeAudio (audiosnippetId) {
//	https://stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out
    var sound = document.getElementById(audiosnippetId);
    var fadeAudio = setInterval(function () {
    	//decrease volume
   		if ((sound.volume != 0.0)) {sound.volume -= 0.1;}
        //when volume at zero stop decrease loop
        if (sound.volume === 0.0) {clearInterval(fadeAudio);}
    }, 200);

}