// thumbLoader.js - Copyright (c) 2008 Terry Hurcombe
// Script to load random thumbnail images and fade them in. Should work for most browsers but untested on a lot
// of the less common flavours. Feel free to use it on your website but please don't rip it off and take 
// credit for my work as that is just plain rude.
//
// TODO:	Add preloader
// 			Add Ajax to load image list from server side code

// Caveats: It aint perfect, it requires that thumbs are scaled to 150px wide
// 			picView content is scaled to 400px wide, you can go smaller but 
// 			anything larger is going to be cropped. I'll fix this at some point (maybe)

// ***************  pic view options  *************** //
//
// set to false to enable large view of thumbnail
// requires:
// large image matching thumb image file in picViewUrl
// extra div in page to recieve the pic
var disablePicView 	= false;
var picViewDiv		= 'picView';
var picViewUrl		= './img/picView/large';


// *************** thumbnail options *************** //
var thumbDivs 		= [ '1','2','3','4' ];
var thumbDivPrefix	= 'thumbDiv';
var thumbUrl		= './img/picView/thumb';
var thumbImgPrefix	= 'thumb';


// *************** image configuration *************** //
var imageCount = 20;


// *************** Fader settings *************** //
var faderIncrement 	= 5;
var faderIntervalMs	= 10;
var fadingOut		= 0;

// used to track the thumbs on screen so we don't use the same one twice
// will be redundant after move to Ajax
var tracker = [];



function loadThumbs() {

	// for each thumb div, select a random image
	// from the images array, set its opacity and
	// start fading it in
	for (var i=0; i< thumbDivs.length; i++) {

		var thumbDivId = thumbDivPrefix + thumbDivs[i];
		var thumbImgId = thumbImgPrefix + thumbDivs[i];

		var imageSelect	= random_selector();
		var imgSrc		= imageSelect + '.jpg';

		var fullThumb	= thumbUrl + '/' + imgSrc;

		var fullPic		= picViewUrl + '/' + imgSrc;

		// hackcount++ 
		// this is lame since we're about to load the full size
		// pic even though the user may never request to see it
		// but its a last ditch attempt since the img.onload isnt
		// w3c compliant.
		var imageO = new Image();
		imageO.src = fullPic;

		// grab the image object and set the src
		var thumbImg		= document.getElementById(thumbImgId);
		thumbImg.src 		= fullThumb;

		// add custom property so that the picView can use it to load the full pic
		thumbImg.picView 	= fullPic;

		// get the thumb div and lose the loader
		var thumbDiv = document.getElementById(thumbDivId);
		thumbDiv.style.backgroundImage = 'none';


		//alert('Setting divid ' + thumbDivId + ' to use img src ' + fullThumb);
		// set the opacity of the image to 0, make it visible
		// then kick off the fader
  		setOpacity(thumbImg, 0);
  		thumbImg.style.visibility = 'visible';
  		fader(thumbImgId,1,0);
	}
}

function togglePicView(thumbImgObj,action) {

	//  get outta here if we're disabled
	if (disablePicView == true) {
		return false;
	}

	// grab the full picture url and get the picView div ready for populating
	var picViewContent = thumbImgObj.picView;
	var picViewObj = document.getElementById(picViewDiv);

		
	// show the pic
	// Use alt text in case the image doesn't exist
	if (action == 'show') {

		thisImage = new Image();
		thisImage.src = picViewContent;
		picViewObj.innerHTML='<center><img id="picViewImg" alt="The image could not be loaded." src="' + thisImage.src  + '"/></center>';
		setOpacity(picViewObj,0);
		fader(picViewDiv,1,0);
		
		picViewObj.style.display = 'block';
		picViewObj.style.zIndex = '9999'; // just in case :)
	}
	else {
		picViewObj.style.display='none';

	}
	return false;
}


function setOpacity(obj, oVal) {

	if (oVal == 100) { // Some versions of firefox dont like this, set to 99.8 instead
		oVal = 99;
	}

	// now we just fire and forget, we'll try 4 different methods of setting
	// opacity which should cover all of the common browsers

 	// Konquerer
	obj.style.KHTMLOpacity = oVal/100;
  
	// Old mozilla engine
  	obj.style.MozOpacity = oVal/100;
  
  	// IE filter
	obj.style.filter = "alpha(opacity:"+oVal+")";

  	// CSS3 Compliant browsers
	obj.style.opacity = oVal/100;
}

function fader(objId,direction,opacity) {
	if (document.getElementById) {
  		obj = document.getElementById(objId);

		if (direction == 1) {
		    if (opacity <= 100) {
				setOpacity(obj, opacity);
				opacity += faderIncrement;

				// set timer to come back here again in N milliseconds
				window.setTimeout("fader('"+objId+"',1,"+opacity+")", faderIntervalMs);
	    	}
		}
		else {
				if (opacity >= 0) {
					fadingOut = 1;
					setOpacity(obj, opacity);
					opacity -= faderIncrement;

					// set timer to come back here again in N milliseconds
					window.setTimeout("fader('"+objId+"',0,"+opacity+")", faderIntervalMs);

					if (opacity == 0) {
						fadingOut = 0;
					}
				}

		}
	}
}



// this is a bit lame but it will do right now
function random_selector() {
	//var maxNumber = images.length;

	var retry = 1;
	while (retry > 0) {

		// get a random number within range of images array length
		var randomNumber=Math.floor(Math.random()* imageCount);

		if (randomNumber < 1) {
			randomNumber =1;
		}

		// check that we're not already using it
		var found = 0;

		for (var i=0; i< tracker.length; i++) {
			if (tracker[i] == randomNumber) {
				found = 1;
			}
		}
		if (found < 1) {
			retry = 0;
		}
	}
	// store this number so we dont use it again
	tracker.push(randomNumber);
	return randomNumber;
}