//////////////////////////////////////////////////////////////////////////////////////////////////// 
//
// This script requires certain parameters to have been pre-defined in another script.
// Example file 'content.js' in subfolders, e.g. othertrips/ski03/content.js (and index.html)
// 
//////////////////////////////////////////////////////////////////////////////////////////////////// 

//
// Global variables
//
	var thumbs = new Array();
	var picViewed = new Array();
	var borderwidth = 5;
	var current = 0;

	var preTextHeader = "<center><p>";
	var thePicsHeader = "<center><p>";
	var pstTextHeader = "<center><p>";
	var preText = new Array();
	var thePics = new Array();
	var pstText = new Array();

	var slideReady;

	// 
	// Override-ables
	// 

	// Pictures will be treated as relative to the current path, unless this var is set
	var thePicPath = "";
	// You can override the 'previous index' link by setting this var
	var indexLink = "<a href='../index.html'><img src='../index.gif' border=0 alt='Up to previous index'></a>";
	// You can override the "headline" on the front page by overriding this var
	var headline = ""

//
// Call this method at the end of your content.js script
//
function Start()
{

	if ( headline == "" ) headline = "<h2 align=center>" + document.title + "</h2>";

	//
	// Generate the HTML page layout
	//
	document.write( "	<a name='top'></a>" );
	document.write( "<table width=100% height=100% border=0><tr valign=top>" );
	document.write( "	<td width=50 align=center>" );
	document.write( indexLink );
	document.write( "		<p><span id=btnPrev></span>" );
	document.write( "		<p><span id=selPage></span>" );
	document.write( "		<p><span id=btnNext></span>" );
	document.write( "		<p>" );
	document.write( "		<span id=preload>" );
	document.write( "			<a href='javascript:preloadThumbs()'><img src='../../img/preload.gif' border=0 "
				+ "alt='Preload all pics\n\rLoads all the pictures and displays them as thumbnail images "
				+ "so that you can then switch between pictures instantly.'></a>" );
	document.write( "		</span>" );
	document.write( "		<div id=divThumbs></div>" );
	document.write( "	<p><a href='#top'><img src='../../img/top.gif' border=0></a>" );
	document.write( "	<br><span id=loadImage></span>" );
	document.write( "	</td>" );
	document.write( "	<td id=tdContent width=100% height=100%>" );

	document.write( "<center><a href='http://www.whiterider.org'><img id='banner' src='../../banner.gif' alt='www.whiterider.org' border=0></a></center><br>" );
	document.write( "	<a name='content'></a>" );
	document.write( "	<span id=preContent></span>" );
	document.write( "	<span id=theContent></span>" );
	document.write( "	<span id=pstContent><center>" );
	document.write( "		<a href='javascript:drawPage(0)'><img src='../../img/viewpics.gif' border=0><p></a>" );
	document.write( "		<a href='javascript:startSlideshow()'><img src='../../img/slideshow.gif' border=0></a>" );
	document.write( "	</center></span>" );
	document.write( "	</td>" );
	document.write( "</tr></table>" );

	document.getElementById('theContent').innerHTML = "<img src='../../img/spacer.gif' height=50><p>" + headline + "<img src='../../img/spacer.gif' height=50><p>";

	setupThumbTags();

	current = -1;
	drawButtons();
	document.getElementById('btnPrev').innerHTML = "<img src='../../img/spacer.gif' height=21>";
}


function nextPage( adj )
{
	drawPage( current + adj )
}

function drawPage( page )
{
//	window.scrollTo( 0, 50 );

	// Remove the highlight (border) from the previous thumb
	if ( current >= 0 && current < numPages )
	{
		document.getElementById( "athumb"+current ).border = 0;
		document.getElementById( "athumb"+current ).hspace = 1;
	}

	current = page

	while ( current < 0 )		current += numPages
	while ( current >= numPages )	current -= numPages

	// Add the highlight (border) to the new thumb
	document.getElementById( "athumb"+current ).border = 1;
	document.getElementById( "athumb"+current ).hspace = 0;
	picViewed[current] = "Y";

	if ( preText[current] ) document.getElementById('preContent').innerHTML = preTextHeader + preText[current]; else document.getElementById('preContent').innerHTML = "<br>";
	if ( pstText[current] ) document.getElementById('pstContent').innerHTML = pstTextHeader + pstText[current]; else document.getElementById('pstContent').innerHTML = "<br>";

	contentText = "";
	if ( thePics[current] )
	{
		contentText += thePicsHeader ;
		contentText += "<img src='" + thePicPath + thePics[current] + "'";
		contentText += " border=" + borderwidth;
		contentText += " onload='fitPicToWindow(this)'";
		contentText += " onClick='nextPage(+1)'";
		contentText += " alt='Click for next image'";
		contentText += ">";
	}

	document.getElementById('theContent').innerHTML = contentText;

	drawButtons();

	// add the thumbnail image
	addThumb();
}


function fitPicToWindow( thePic )
{
	// Calc the window size
	ns4 = (document.layers)? true:false
	ie4 = (document.all)? true:false
	winW = (ns4) ? window.innerWidth-16	: document.body.offsetWidth-20
	winH = (ns4) ? window.innerHeight	: document.body.offsetHeight

	// Get the original size of the image
	origW = thePic.width;
	origH = thePic.height;
	//..and calculate its aspect ratio
	aspectRatio = origW / origH;

	// Work out how much room we have to display the image
	availH = (winH + document.body.scrollTop) - (document.getElementById('preContent').scrollHeight + document.getElementById('pstContent').scrollHeight + 100);
	availW = winW - 100;

	// Calculate the height to use, but don't make the image larger than its actual size
	if ( origW > availW )	scaleW = availW;
	else				scaleW = origW;
	//..and calculate the appropriate width
	scaleH = scaleW / aspectRatio;

	// Check whether the calculated height will fit in the available space, and scale down if not
	if ( scaleH > availH )
	{
		imgH = availH;
		imgW = imgH * aspectRatio;
	}
	else
	{
		imgW = scaleW;
		imgH = imgW / aspectRatio;
	}

	// Set the size of the displayed image
	thePic.height = imgH;
	thePic.width = imgW;
}


function drawButtons()
{
	if ( numPages != 0 )
	{
		// Draw the 'prev' and 'next' buttons
		if ( current != 0 )
			document.getElementById('btnPrev').innerHTML = "<a href='javascript:nextPage(-1)'><img src='../../img/prev.gif' border=0></a>"
		else
			document.getElementById('btnPrev').innerHTML = "<a href='javascript:nextPage(-1)'><img src='../../img/prevgrey.gif' border=0></a>"

		if ( current != (numPages-1) )
			document.getElementById('btnNext').innerHTML = "<a href='javascript:nextPage(+1)'><img src='../../img/next.gif' border=0></a>"
		else
			document.getElementById('btnNext').innerHTML = "<a href='javascript:nextPage(+1)'><img src='../../img/nextgrey.gif' border=0></a>"

		// Draw the page numbers
		selPageText = "";
		for ( i = 0; i < numPages; i++ )
		{
			selPageText += "<span id='pagelabel"+i+"' "
			selPageText += "onMouseover='document.getElementById(\"pagelabel"+i+"\").style.color=getPageColour("+i+",1)' "
			selPageText += "onMouseout='document.getElementById(\"pagelabel"+i+"\").style.color=getPageColour("+i+",0)' "
			selPageText += "onClick='drawPage(" + i + ")'>"

			selPageText += "<big>";
			if ( current == i )	selPageText += "<b>" + (i+1) + "</b> "
			else				selPageText += "<u>" + (i+1) + "</u> "
			selPageText += "</big></span>";

		}
		// Now colour the page numbers correctly
		document.getElementById('selPage').innerHTML = selPageText;
		for ( i = 0; i < numPages; i++ )
		{
			document.getElementById( "pagelabel"+i ).style.color = getPageColour(i);
		}

	}
}

function getPageColour( page, over )
{
	if ( over == 1 )
	{
		if ( page == current )		pageColour = "blue";
		else if ( picViewed[page] )	pageColour = "red";
		else					pageColour = "red";
	}
	else
	{
		if ( page == current )		pageColour = "blue";
		else if ( picViewed[page] )	pageColour = "gray";
		else					pageColour = "black";
	}

	return pageColour;
}


function setupThumbTags()
{
	ttt = "";
	for ( i = 0; i < numPages; i++ )
	{
		ttt += ( "<img id=athumb" + i
			 + " src='../../img/spacer.gif' hspace=1"
			 + " onclick='drawPage(" +i+ ")' onload='onloadThumb(this)'"
			 + " alt='Picture " + (i+1) + "'><br>" );
	}
	document.getElementById('divThumbs').innerHTML = ttt;
}


function preloadThumbs()
{
	for ( i = 0; i < numPages; i++ )
	{
		addThumb( i );
	}

	document.getElementById('preload').innerHTML = "";
}


function addThumb( index )
{
	if ( !index ) index = current;
	if ( index < 0 ) index = 0;

	if ( thumbs[index] )
	{	// do nothing if the thumb has already been added
	}
	else if ( thePics[index] )
	{
		thumbs[ index ] = "NO";

		document.getElementById( "athumb"+index ).src = thePicPath + thePics[index];
		document.getElementById( "athumb"+index ).width = 48;
		document.getElementById( "athumb"+index ).vspace = 2 ;
	}
}


function onloadThumb( theThumb )
{
	if ( theThumb.src == "../../img/spacer.gif" ) return;

	h = theThumb.height;
	w = theThumb.width;

//	document.getElementById('preload').innerHTML = h + "/" + w;

	if ( h > w )
	{
		theThumb.width = 48 * (w / h);
		theThumb.height = 48;
	}
}


function makeIFrame( link, tablewidth_, tableheight_, tableborder_ )
{
	iframeText = "";

	if ( !tablewidth_ ) tablewidth_ = "100%";
	if ( !tableheight_ || tableheight_=="100%" ) tableheight_ = "90%"; // 100% overshoots the bottom of the page!

	iframeText += "<table align=center width="+tablewidth_ + " height="+tableheight_;
	if ( tableborder_ ) iframeText += " border="+tableborder_;
	iframeText += "><tr><td>";

	iframeText += "<iframe width=100% height=100% src='";
	iframeText += link;
	iframeText += "'><a href='";
	iframeText += link;
	iframeText += "' target='_top'>Click here to view page</a></iframe>";

	iframeText += "</td></tr></table>";

	return iframeText;
}


// Call this function from content.js to include an autoplay video
// Call it like this:
//      preText = video("<filename>","<comment>");
function video( file, info )
{
	if ( info ) info += "\n\r"; else info = "";

	html = info + "<p>"
		+ "<embed src='" + file +"' autostart='true' loop='true'><p>"
		+ "<a href='" + file + "'>"
		+ "<img src='../../img/downloadvideo.gif' border=0 alt='" + info + "Right-click and Save-Target-As'></a>"
		+ "<p align=right><small><i>Please note: at the moment I can only make <br>the videos play in Internet Explorer, but the <br>'<a href='" + file + "'>downloadVideo</a>' link should work in all browsers.</i></small>";

	return html;
}


function startSlideshow()
{
	drawPage(0);

	prepareNextSlide();
}


function prepareNextSlide()
{
	slideReady = 0;

	nextSlide = current + 1;
	if ( nextSlide >= numPages )
	{
		return;
	}

	if ( thePics[nextSlide] )
	{
		html = "<img src='" + thePics[nextSlide] + "' height=0 width=0 border=0 onLoad='slideReady=1'>";
		document.getElementById('loadImage').innerHTML = html;
	}
	else
	{
		slideReady = 1;
	}

	setTimeout( "showNextSlide()", 2000 );
}


function showNextSlide()
{
	if ( slideReady == 0 )
	{
		setTimeout( "showNextSlide()", 1000 );
	}
	else
	{
		nextPage(1);
		prepareNextSlide();
	}
}