// relearning javascript for the Nth time...

// "start image" index
var cur_image = 0;

// how long to display images before advancing
var slide_time = 2000; // ms

// how fast to advance
var advance_time = 1500; // ms

// add more images here if you desire
var images = new Array();
images[0] = 'img/1.png';
images[1] = 'img/2.png';
images[2] = 'img/4.png';
images[3] = 'img/7.png';
images[4] = 'img/5.png';

var num_images = images.length;


// preload all the images
var preLoad = new Array();
for (i = 0; i < num_images; ++i) {
    preLoad[i] = new Image();
    preLoad[i].src = images[i];
}

// entry point
function run(_backid, _frontid) {
    
    // change-over after some delay...
    setTimeout("next_image('" + _backid + "', '" + _frontid + "')", 
	       slide_time);
 
    // and then re-rerun this function after some delay
    setTimeout("run('" + _backid + "', '" + _frontid + "')", 
	       slide_time + 1000);
}

function next_image(_backid, _frontid) {

    var front_image = document.getElementById(_frontid);
    
    var prev_image = cur_image;
    cur_image = (cur_image + 1) % num_images;
    
    front_image.src = preLoad[prev_image].src;
    changeOpac(99, _frontid);

    // hack: run these commands after a delay to allow the
    // front opacity to change

    // back_image.src = preLoad[cur_image].src;
    // setTimeout("opacity('" + front_image.id + "', 99, 0, 1000)", 1000);

    setTimeout("_doit('" + _backid + "', '" + _frontid + 
	       "', " + cur_image + ")",
	       200);
}

function _doit(back_id, front_id, cur_image) {
    var back_image = document.getElementById(back_id);
    back_image.src = preLoad[cur_image].src;
    setTimeout("opacity('" + front_id + "', 99, 0," + advance_time + ")", 
	       200);
}

// the following graciously borrowed from:
// http://www.brainerror.net/media/scripts/js/blendtrans/blendtrans.js

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, 
    // if start and end are the same nothing happens
    if(opacStart > opacEnd) {
	for(i = opacStart; i >= opacEnd; i--) {
	    setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
	    timer++;
	}
    } else if(opacStart < opacEnd) {
	for(i = opacStart; i <= opacEnd; i++)
	    {
		setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
		timer++;
	    }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //if an element is invisible, make it visible, else make it ivisible
    if(document.getElementById(id).style.opacity == 0) {
	opacity(id, 0, 100, millisec);
    } else {
	opacity(id, 100, 0, millisec);
    }
}

function blendimage(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;
    
    //set the current image as background
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    
    //make image transparent
    changeOpac(0, imageid);
    
    //make new image
    document.getElementById(imageid).src = imagefile;
    
    //fade in image
    for(i = 0; i <= 100; i++) {
	setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
	timer++;
    }
}

function currentOpac(id, opacEnd, millisec) {
    //standard opacity is 100
    var currentOpac = 100;
    
    //if the element has an opacity set, get it
    if(document.getElementById(id).style.opacity < 100) {
	currentOpac = document.getElementById(id).style.opacity * 100;
    }
    
    //call for the function that changes the opacity
    opacity(id, currentOpac, opacEnd, millisec);
}