//*******************************************************************************************
//****		This script is property of & copyrighted by LEO Project Foundation Pvt	*****
//****		Do not use any part of this scripting without prior, 			*****
//****		written permission of the copyright holder				*****
//*******************************************************************************************

// Define imageHTML and initiate total image width
var imagesHtml='';
var totalImageWidth=0;			// variable for the width of all visible images together
var widthArray=new Array();		// stores image width
var totalImageHeight=0;			// variable for the height of all visible images together
var heightArray=new Array();		// stores image height


// Define variables
var frame;		// variable that controls the frame
var slider;		// variable that controls the slider div
var cfi = 0; 		// cfi = currentFocussedImage. Image that determines when to display the next image
var mi;			// mi is used to keep track on at what number to start the image building loop

var loaded = false;	// loaded will determine if the start function has been called and prevent it from being 
			// called again. Firefox does this due to the onload function in the script instead of
			// the body tag.
var direction;		// specifies if the scroller goes horizontal or vertical. Perhaps extend to from left to right, right to left,
			// top to bottom and bottom to top at a later stage.

var gallery_link; // link of photo gallery

function setSpeed()
{
	// function sets the scroll speed after clicking the image to enlarge
	sspeed = 0;

	// mouseoutspeed handles the scroll speed on mouse out.
	mouseoutspeed = sspeed;
}

function mouseStuff()
{
	// funtion to handle the speed on mouse out events
	sspeed = mouseoutspeed;
}


function populateImageHtml(iHtml)
{
	// populate imagesHtml with html code
	imagesHtml=imagesHtml+'<img id="image'+iHtml+'" src="'+imageArray[iHtml]+'" alt="'+altArray[iHtml]+'" border=0 pbsrc="'+largeImageArray[iHtml]+'" onClick="self.location=\''+gallery_link+'\';" style="cursor: url(http://www.leoproject.org/images/popbox/magplus.cur), pointer;">';
}

//*******************************************************************************************
//****			Scripting for horizontal scrolling				*****
//*******************************************************************************************

function startSlider()
{
		slider = document.getElementById('slider');

		slider.style.textAlign = 'left';

		// Start keeping track of images at the cfi
		mi = cfi;

		// determine and store width and height of each image
	      	for (i=0; i<imageArray.length; i++)
	      	{
			widthArray[i] = document.getElementById('image'+i).width;
			heightArray[i] = document.getElementById('image'+i).height;
		}
		
		// set slider start position
		slider.style.left = "0px";

		if(direction == 'horizontal')
		{
			slider.style.bottom = "0px";
		}
		else // vertical
		{
			slider.style.bottom = (heightArray[cfi]*2)+"px";
		}


		imagesHtmlFill();
		scroll();
}


// Determine how many/which images to put into the imagesHtml.
// The must equal in lenght at least the width of the frame div + the current focussed image (cfi) (horizontal scroll)
// or the height of the frame + 2x the height of the cfi (vertical scroll)
function imagesHtmlFill()
{

	// Set imagesHtml to empty & totalImageWidth to 0 & get the width of the cfi
	imagesHtml = '';

	totalImageWidth = 0;
	cfiWidth = widthArray[cfi];		// width of most left image
	visibleWidth = (sWidth+cfiWidth);	// width of visible area + cfi

	totalImageHeight = 0;
	cfiHeight = heightArray[cfi];		// height of bottom image
	visibleHeight = (sHeight+cfiHeight+cfiHeight);	// height of visible area + cfi


	if(direction=='horizontal')
	{
		// Get sWidth (= frame div width) + the cfi width and compare to width of 
		// all images currently displayed.

		for (mi; visibleWidth > totalImageWidth; mi++)
		{

			populateImageHtml(mi);

			// put images into slider div (needed to get width of latest image
			slider.innerHTML = '<nobr>'+imagesHtml+'</nobr>';

			// determine total width of displayed images
			totalImageWidth = totalImageWidth + widthArray[mi];

			// check if mi needs to be set back to the start (0). However, the loop increases
			// mi with 1 when it ends, so set mi here to -1 and the ending of the loop makes it 0
			if((mi+1) >= imageArray.length)
			{
				mi = -1;
			}
		}
	}
	else // vertical
	{
		// Get sHeight (= frame div heigth) + the cfi height and compare to height of 
		// all images currently displayed.

		for (mi; visibleHeight > totalImageHeight; mi--)
		{
			populateImageHtml(mi);
	
			// write imageHtml into slider div
			slider.innerHTML = imagesHtml+'<br/>';

			// determine total height of displayed images
			totalImageHeight = totalImageHeight + heightArray[mi];

			// check if mi needs to be set back to the start (0). However, the loop increases
			// mi with 1 when it ends, so set mi here to -1 and the ending of the loop makes it 0
			if((mi-1) < 0)
			{
				mi = imageArray.length;
			}
		}
	}
}

function scroll()
{
	// Check if the cfi is completely out of sight. That means that the next image
	// is precisely at the utter left of the frame div
				
	if(direction=='horizontal' && parseInt(slider.style.left)<=-cfiWidth)
	{
		// check if cfi needs to be set back to the start (0)
		if((cfi+1) >= imageArray.length)
		{
			cfi = 0;
			mi = cfi;

			// Initialize and display first image to get it's width 
			// (not doing so give null for its properties and an error in javascript.
			populateImageHtml(cfi);
			slider.innerHTML = '<nobr>'+imagesHtml+'</nobr>';
		}
		else
		{
			cfi = cfi+1;
			mi = cfi;
		}

		// Fill the imagesHtml 
		imagesHtmlFill();

		// Set the div back to it's original position
		slider.style.left = "0px";
		scroll();
	}
	else if(direction=='vertical' && parseInt(slider.style.bottom)<=heightArray[cfi])
	{{
		if((cfi+1) >= imageArray.length)
		{
			cfi = 0;
			mi = cfi;

			// Initialize and display first image to get it's width 
			// (not doing so give null for its properties and an error in javascript.
			populateImageHtml(cfi);
			slider.innerHTML = imagesHtml+'<br>';
		}
		else
		{
			cfi = cfi+1;
			mi = cfi;
		}

		// Fill the imagesHtml 
		imagesHtmlFill();

		// Set the div back to it's original position
		slider.style.bottom =(heightArray[cfi]*2)+"px";
		scroll();
	}}
	else
	{
		if(direction == 'horizontal')
			slider.style.left = (parseInt(slider.style.left)-sspeed)+"px";
		else // vertical
			slider.style.bottom = (parseInt(slider.style.bottom)-sspeed)+"px";
		setTimeout("scroll()",100);
	}
}