var $filename = new Array();
var $aspect = new Array();
var $header = new Array();
var $caption = new Array();
var $options = new Array();   //rotate9025 rotate-9025 rotate9016 rotate-9016, pan, starttime=00:00:00.0, volume=  , fadeaudio, rate= (play x times faster)
var $soundname = new Array(); //sound will play until finished or new sound requested or show ends or fade requested
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=0;	//transition between images
var $autoplay='';
var $pantime=$dur;

$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: 100%;">'+$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()
		{
			$aspect[$choice]=image1.naturalHeight/image1.naturalWidth; 
			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()
		{
			$aspect[$choice]=image1.naturalHeight/image1.naturalWidth; 
			insertpicture($choice);
		}
	}
}

function myplay() 
{
	forward();
	if ($filename[$choice].indexOf(".mp4") !=-1)  //file is a movie
	{
//	wait for eventListener to signal video ended
	}
	else if ($options[$choice] && $options[$choice].indexOf("pan") != -1) 
	{
//	wait for eventListener to signal pan ended
	}
	else
	{
		$rate=1;
		if ($options[$choice] && $options[$choice].indexOf("rate=") != -1) 
		{
			$rate=$options[$choice].split("rate=")[1]; //portion that follows rate=
			$rate=$rate.split(" ")[0];  //up to next blank
		}
		$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() { 
//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) {clearTimeout($autoplay); $play=1; 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); $play=0;} //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
	$myoptions='';
	if ($options[n]) $myoptions=$options[n];
//	alert($aspect[$choice]);

//	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=$caption[n];
	if ($showfilenames==1) {$label=n+"&nbsp;&nbsp;"+$filename[n]+$label;}
	if ($date[n]) $label=$label+" "+$date[n];
	if ($label!="") {$y = $y - 1.8*P;} //leave space
	if ($label.length>100) {$y = $y - 1.4*P;} //leave space
	if ($header[n]!="") {$y = $y - 1.4*P;} //leave space 
	$width= $x;
	if ($width*$aspect[n] > $y || $myoptions.indexOf("pan") != -1) {$width=$y/$aspect[n]; } //make height full screen
	if ($aspect[n]>1) {$y=$width;}
	$code='<div align="center">';
	if ($header[n]!="") {$code=$code+'<div style="width:'+$width+'px; ">'+$header[n]+'</div><br>';}
	
	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
		$time=0;
		if ($myoptions.indexOf("starttime=") != -1)
		{
			$time=$myoptions.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 ($myoptions.indexOf("volume=") != -1)
		{
			$volume=$myoptions.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 ($myoptions.indexOf("pan") != -1) 
		{
			$pan= (1-$width/$x)*100;
			$pantime=(5*$width/$x);
//stackoverflow.com/questions/18481550/how-to-dynamically-create-keyframe-css-animations
			var style = document.createElement('style');
			style.type = 'text/css';			
			var keyFrames = '\
			.panwindow {position: relative; animation: panleft '+$pantime+'s linear; animation-fill-mode: forwards;}\
			@keyframes panleft {\
				from { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); }\
				10%  { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); }\
				95%  { transform: translate3d('+$pan+'%,0,0); -webkit-transform:translate3d('+$pan+'%,0,0); -ms-transform:translate3d('+$pan+'%,0,0); }\
				to   { transform: translate3d('+$pan+'%,0,0); -webkit-transform:translate3d('+$pan+'%,0,0); -ms-transform:translate3d('+$pan+'%,0,0); }\
			}';
			style.innerHTML = keyFrames; 
			document.getElementsByTagName('html')[0].appendChild(style);
			$code=$code+' <div class="panwindow" id="mypan"> ';	
		}
		if ($myoptions.indexOf("rotate") != -1) //rotate
		{	
			$rotate=$myoptions.split("rotate")[1]; //portion that follows rotate
			$rotate=$rotate.split(" ")[0];  //up to next blank
			$code=$code+'<div class="rotate'+$rotate+'" ';
			
			$code=$code+' style="position: absolute; ';
			if ($header[n]!="") {$code=$code+'top: '+1.4*P+'px; ';} else {$code=$code+'top: 0em; ';}
			$code=$code+'left: 50%; margin-left:'+(-$y/2)+'px;"><img src="../'+$filename[n]+'" ';
			if($fade) $code=$code+' class="fade" ';
			$code=$code+' width='+$y+'px></div></div>';
		}
 		else
		{			
			$code=$code+'<div ';
//  		if($fade && !$options[n-1]) $code=$code+' class="fade" ';
//			$code=$code+' width='+$width+'px>';
			
			$code=$code+' style="position: absolute; ';
			if ($header[n]!="") {$code=$code+'top: '+1.4*P+'px; ';} else {$code=$code+'top: 0em; ';}
			$code=$code+'left: 50%; margin-left:'+(-$y/2)+'px;"><img src="../'+$filename[n]+'" ';
			if($fade) $code=$code+' class="fade" ';
			$code=$code+' width='+$y+'px></div></div>';
		}
//		if ($myoptions.indexOf("pan") != -1)  $code=$code+' </div> ';
	}

	$code=$code+'<div class="smallerfont" style="position: absolute; bottom: .5em; margin-left: 1em; margin-right: 1em; ">'+ $label+'</div></div>';
//	alert(n+" "+$code);
	document.getElementById('pictureframe').innerHTML=$code;
	if($filename[n].indexOf(".mp4") !=-1) {document.getElementById('myVideo').addEventListener('ended',videoended,true);}  //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 ($myoptions.indexOf("fadeaudio") != -1) {FadeAudio("mysound");}
	if ($myoptions.indexOf("pan") != -1)
	{
		document.getElementById('mypan').addEventListener('webkitAnimationEnd',videoended); //www.w3schools.com/jsref/event_animationend.asp
		document.getElementById('mypan').addEventListener('animationend',videoended);
	}
}

function FadeAudio (audiosnippetId) {
//  to turn off sound, document.getElementById('audiosnippetId').volume = 0;
//	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);
}