/*
	Before the page loads, set up some strings to be used as an index to some images.
	e.g. [001, 002, ... ].length == available_images (set in the script of each page)
	
	As the page loads, write the img tags with their initial src path.
	
	Then, when the page is loaded (using onload), set a timer that changes the images.
	The selection will be random, but the update frequency will be fixed.
	
*/


var replaceable_images_names = ["image_a","image_b", "image_c", "image_d"];
if (available_images == undefined) { var available_images = 15;}
if (delaySeconds == undefined) { var delaySeconds = 5;}

var base_image_path = "/images/";
var image_type = ".jpg"
var image_prefx = "hdr_img";
// which gives us images in src="images/" + current-page-name + "/img_001.jpg"
//console.log("available images",available_images);
// the default images (in the HTML) should be from a common group (e.g. images/default_image1.jpg)
// and be different to any images in the page-folders. 
// this will ensure that you don't get 2 of the same image. 

var desired_images = replaceable_images_names.length;
var image_numbers = [];
var selected_images = [];

createRandomSet(); // initial run

function getRandomSelection(i) {
	var pick = Math.floor(Math.random() * (available_images -i));
	var selectedImage = image_numbers[pick];
    image_numbers.splice(pick,1); // remove the selected number from this array
    return selectedImage;
}
// ASSERT selected_images.length ==  desired_images;

var currentPath = document.location.href;  "home.html"
var pathParts = currentPath.split("/");
var lastPart = pathParts.pop();
var pageNameParts = lastPart.split(".");
var pageName = pageNameParts[0];
if (pageName === null) alert("No page name!");
var folderPath = "/images/"+ pageName;
var loading_images  = [];

createRandomSet(); // 

function makeImagePath(selectedImageNumber) {
// return folderPath + "/img_" + selectedImageNumber + ".jpg"; // should use the constants from above
return "/images" + "/hdr_img_" + selectedImageNumber + ".jpg"; // should use the constants from above
}

var index = 0;
function updateImage(i) {
	var repImg = loading_images[i]; 
	if (repImg) {
		var n = replaceable_images_names[index++]; // this ensures that the new images load from top to bottom.
		document.images[n].src = repImg.src;
	} else { alert("no loading_images " + i); }
}

function writeImageElements() {
	for (var i = 0; i < 4; i++ ) {
		var imageHref = makeImagePath(selected_images[i]);
		document.writeln('<img name="' + replaceable_images_names[i] + '" src="' + imageHref + '" width="188" height="112" alt="" />');
	}
}

function setupChoices() {
	image_numbers = [];
	for (var i = 0; i < available_images; i++ ) {
		var chars = ("000" + (i + 1)).split(""); // ---------------------- Assume an image number padded to 3 digits
		var strNum = chars.slice(-3).join(""); // e.g. img_ 001,002,..,999 .jpg
	   //var strNum = chars.join("");
		image_numbers.push(strNum);
	}
}

function createRandomSet() { 
	setupChoices(); // (re)create the image_numbers array
	selected_images = []; // clear existing set
	for (var i = 0; i < desired_images; i++ ) {
		selected_images.push(getRandomSelection(i)); // create the new set
	}
}

function getNextSet() {  // get another set of images
	createRandomSet();
	index = 0; // reset the index used by updateImage(i)
	for (var i = 0; i < desired_images; i++) {
		loading_images[i] = new Image();
		//var f = (function (x) { return function () { alert (x) } })(x); 
		var f = (function (n) {return function () { updateImage(n);}; })(i);
		loading_images[i].onload = f;
		loading_images[i].imageIndex = i;
		loading_images[i].src = makeImagePath(selected_images[i]);
	}
}


var timer = setInterval(getNextSet, delaySeconds * 1000);