#c// ####################################################################
#c// Image Theme created by DaveSource.com, modified by frank@celler.de
#c// ####################################################################

<:
  # Path setting - this is the path to the images
  $PATH = Theme_URL();

  # Slideshow setting
	$SLIDESHOW = Option('slideshow');

  # Image arrays are: name, width, height
  sub img_src { print "<img src='$PATH/$_[0]' width='$_[1]' height='$_[2]' $_[3] alt='$_[4]' border='0'/>" if ($_[1]); }

  # Icons/graphics
  @Next =       ("Next.gif", 31, 30, "align='middle'", "(next)");
  @Prev =       ("Prev.gif", 31, 30, "align='middle'", "(prev)");
_:>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title> 
      Image: <:=Name($img) :>
    </title>

    <: Meta() :>

<script type='text/javascript'>
<!--

<: if ($SLIDESHOW) { :>
var cururl=<:=Image_Page_URL():>;
<:Set_Image_Next():>
var strurl =  <:=Image_Page_URL():>;
var timeout_value = 0;
var stop_request = 0;
var picnum = 2;
var loopCheck ='off';
<: } :>
function filler() {
var aspect;
var browseWidth = 0;
var browseHeight = 0;
getSize(browseWidth, browseHeight);
imageWidth=document.photo.width;
imageHeight=document.photo.height;
aspect=imageHeight/imageWidth;
document.photo.width=Math.min(imageWidth,browseWidth*0.8,browseHeight/aspect*.7);
document.photo.height=document.photo.width*aspect;
function getSize() {
#c  if( typeof( window.innerWidth ) == 'number' ) {
#c    //Non-IE
#c    browseWidth = window.innerWidth;
#c    browseHeight = window.innerHeight;
#c    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
#c    //IE 6+ in 'standards compliant mode'
#c    browseWidth = document.documentElement.clientWidth;
#c    browseHeight = document.documentElement.clientHeight;
#c  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
#c    //IE 4 compatible
#c    browseWidth = document.body.clientWidth;
#c    browseHeight = document.body.clientHeight;
#c  }
    browseWidth = document.body.clientWidth;
    browseHeight = document.body.clientHeight;
}
<: if ($SLIDESHOW) { :>
slideshow();
<: } :>
}

<: if ($SLIDESHOW) { :>
function slideshow() {
   if (timeout_value != 0 && <:=num('pics'):>-picnum >=0) {
     setTimeout('gonext()', timeout_value*1000)
     }
}

function gonext() {
     var counter='';
     if (loopCheck != 'on'){
	counter ='&counter='+picnum;
     };
     this.location=strurl+'?time='+timeout_value+'&loop='+loopCheck+counter
}

function checkanimate() {
   if (this.location.toString().indexOf('?time=30') >= 0) {
     timeout_value=30
   }
   else if (this.location.toString().indexOf('?time=15') >= 0) {
     timeout_value=15
   }
   else if (this.location.toString().indexOf('?time=10') >= 0) {
     timeout_value=10
   }
   else if (this.location.toString().indexOf('?time=5') >= 0) {
     timeout_value=5
   }
   else if (this.location.toString().indexOf('?time=3') >= 0) {
     timeout_value=3
   }
   else if (this.location.toString().indexOf('?time=0') >= 0) {
     timeout_value=0
   };
   if (this.location.toString().indexOf('&loop=on') >= 0) {
	loopCheck='on'
   };
   if (this.location.toString().indexOf('&counter=') >= 0) {
	do_count();
   };
}

function do_count(){
	var x =this.location.toString().indexOf('&counter=');
	picnum=parseInt(this.location.toString().substring(x+9))+1;
}

function reset_timer() {
timeout_value = document.TopForm.time.options[document.TopForm.time.selectedIndex].value;
}

function stopshow() {
   this.location=cururl;
}

function toggleLoop(){
	if( loopCheck =='on'){
		loopCheck='off'
	}else{ loopCheck='on'
	}
}

function createform(){
        if (this.location.toString().indexOf('&stop=1') >= 0) {
        stopshow();
	}
	checkanimate();
	document.write("<form name=TopForm>&nbsp<b>Slideshow settings:</b>&nbsp&nbsp&nbsp&nbsp&nbsp<select name='time' onchange='reset_timer()' size=1  style='font-size:12px;'><option value=0 ");
	if(timeout_value == 0) {document.write(" selected ");};
        document.write(">Select</option><option value=3 ");
	if(timeout_value == 3) {document.write(" selected ");};
	document.write(">3  seconds</option><option value=5");
	if(timeout_value == 5) {document.write(" selected ");};
        document.write(" >5  seconds</option><option value=10 ");
	if(timeout_value == 10) {document.write(" selected ");};
	document.write(">10  seconds</option><option value=15");
	if(timeout_value == 15) {document.write(" selected ");};
	document.write(" >15  seconds</option><option value=30 ");
	if(timeout_value == 30) {document.write(" selected ");};
	document.write(">30  seconds</option></select>&nbsp delay&nbsp<input type=checkbox  name='loop'");
	if (loopCheck =='on'){document.write("checked");};
	document.write(" onclick='toggleLoop()'>&nbsp loop &nbsp&nbsp <button>Start</button> <button name='stop' value=1>Stop</button></form>");
}

<: } :>
//-->
</script>
  </head>
  <body bgcolor=white onload='filler()'>

#c// #########################
#c// ##      Prev/next      ##
#c// #########################
<script type='text/javascript'>
<!--
	createform();

//-->
</script>

<table cellspacing='10' width='100%'>
  <tr>
    <td align='left' width='30%'>
      <: Set_Image_Prev(); :>
#c      <: $img=Prev($img); :>
      <a href=<:=Image_Page_URL():>><:img_src(@Prev); print "(prev)" unless @Prev; :><:=Name($img):></a>
    </td>
    <td align='center' width='40%'>
      <: Set_Image_This(); :>
#c      <: $img :>
      <b><:=Name($img):></b>
    </td> 
    <td align='right' width='30%'>
      <: Set_Image_Next(); :>
#c      <: $img=Next($img); :>
      <a href=<:=Image_Page_URL():>><:=Image_Name():><:img_src(@Next); print "(next)" unless @Next; :></a>
    </td>
  </tr>
</table>

#c// Go back to the current image
<: Set_Image_This(); :>

#c// ###########################
#c// ## The image and caption ##
#c// ###########################
<:if (Image_Height()> 700 || Image_Width() > 900) {if (Image_Height() > Image_Width()){$my_img_width="40%"}else{$my_img_width="'85%'"}:>
<center>
  <a href=<:=Image_URL():>>
  <img border='0' width=<:=$my_img_width:> src=<:=Image_URL():> name='photo' alt='<:=Image_Alt():>'/></a><br/>
  <font size='+1'><i>
    <: pImage_Caption() :>
  </i></font>
</center>
<:}else{:>
<center>
  <a href=<:=Image_URL():>>
  <img border='0' src=<:=Image_URL():> name='photo' alt='<:=Image_Alt():>'/></a><br/>
  <font size='+1'><i>
    <: pImage_Caption() :>
  </i></font>
</center>
<:}:>
#c// #########################
#c// ##       Footer        ##
#c// #########################

<hr/>
  <font size='-1'>
   <: Credit() :> on <:=scalar localtime:>
  </font>
</body>
</html>
