/***********************************************
* hacked/extended/cleaned up (somewhat) by peter@datahedron.com
* See documentation (such as it is) below.
*
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadearray = new Array() //array to cache fadeshow instances
var fadeclear = new Array() //array to cache corresponding clearinterval pointers
var idSsNext = 0;    // slide show id
 
var d = document;
var dom = (d.getElementById) //modern dom browsers
var iebrowser = d.all
var is_khtml = (navigator.vendor == 'KDE') ||
    (d.childNodes && !d.all && !navigator.taintEnabled) ? true : false;

function ObjFId(id) {
    obj = iebrowser ? iebrowser[id] : document.getElementById(id);
    return obj;
} // ObjFId

function fadeshow(args){
    this.pausecheck = args['pause'] || 0;
    this.mouseovercheck = 0;
    this.delay = args['delay'] || 3000;
    this.center = args['center'] || 0;
    var steps = args['steps'] || 10;
    this.degreeStep = 100/steps;
    this.delayStep = args['delayStep'] || 50;
    this.degree = this.degreeStep; //initial opacity degree (10%)
    this.repeat =  args['cycle'] || Math.pow(2,31);
    this.klass = args['class'] || 'fadeshow';
    this.iImgCur = 0;
    this.iImgNext = 1;
    fadearray[idSsNext] = this;
    this.slideshowid = idSsNext++;
    this.id = args['id'] || 'fadeshow_'+this.slideshowid;
    this.canvasbase = this.id + "_canvas";
    this.curcanvas = this.canvasbase+"_0";
    this.imgargs = imgargs = args['images'];
    this.random_order = args['random'] || args['random_order'] || 0;
    this.random_position = (typeof args['random_position'] != 'undefined')
    if (args['random_position']) {
	this.dxRand = args['random_position'][0];
	this.dyRand = args['random_position'][1];
    }
    this.imageborder = args['border'] || 0;
    this.rgImg = new Array(); //preload images
    var dxMax = 0;
    var dyMax = 0;
    for (var i = 0; i<imgargs.length; i++){
	this.rgImg[i] = img = new Image()
	img.src = imgargs[i][0]
	if (img.id == '')
	    img.id = this.id + '_img_' + i;
	img._link = imgargs[i][1] || "";
	img._other = imgargs[i][2] || "";
	// this doesn't work right unless images are already in the cache
	// if (img.width > dxMax) dxMax = img.width;
	// if (img.height > dyMax) dyMax = img.height;
    }
    if (this.random_order)
	this.rgImg.sort(function() {return 0.5 - Math.random();});
     
    this.dx = args['width'] || dxMax;
    this.dy = args['height'] || dyMax;
    var dx = this.dx + this.imageborder*2
    var dy = this.dy + this.imageborder*2
    var other = args['style'] || '';
    other += "background-color:" + (args['bgcolor'] || "white") + ';';

    var txtWin = '';
    if (dom) {
	//if IE5+ or modern browsers (ie: Firefox)
	var size = 'width:'+dx+'px;height:'+dy+'px;';
	var opac = '';
	if (iebrowser)
	    opac += 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);';
	else if (is_khtml)
	    opac += '-khtml-opacity:10;';
	else
	    opac += '-moz-opacity:10;';
	var klass = ' class="' + this.klass + '" ';
	var style = 'style="overflow:hidden;position:absolute;top:0;left:0;'+size+other+opac+'"'
	txtWin =
	    '<div id="'+this.id+'" ' + klass
		  + 'style="position:relative;'+size+other+'">&nbsp;'
		+ '<div id="'+this.canvasbase+'_0" ' + style + '></div>'
		+ '<div id="'+this.canvasbase+'_1" ' + style + '></div>'
	    + '</div>';
    } else {
	txtWin = '<div><img name="defaultslide'+this.id+'" src="'+this.rgImg[0].src+'"></div>';
    }
    document.write(txtWin);
     
    if (dom) {
	this.startit()
    } else {
	++this.iImgCur
	setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
    }
} // fadeshow

function SetOpacity(obj, val) {
    if (obj.filters && obj.filters[0]){
	if (typeof obj.filters[0].opacity=="number") //if IE6+
	    obj.filters[0].opacity = val;
	else //else if IE5.5-
	    obj.style.filter = "alpha(opacity="+obj.degree+")"
    }
    else if (obj.style.MozOpacity)
	obj.style.MozOpacity = val/101;
    else if (obj.style.KhtmlOpacity)
	obj.style.KhtmlOpacity = val/100;
} // SetOpacity

function fadepic(obj){
    if (obj.degree < 100) {
	obj.degree += obj.degreeStep;
	SetOpacity(obj.tempobj, obj.degree);
    } else {
	clearInterval(fadeclear[obj.id]);
	obj.nextcanvas = (obj.curcanvas==obj.canvasbase+"_0")
		? obj.canvasbase+"_0" : obj.canvasbase+"_1";
	obj.tempobj = ObjFId(obj.nextcanvas);
	obj.populateslide(obj.tempobj, obj.iImgNext);
	if (++obj.iImgNext >= obj.rgImg.length)
	    obj.iImgNext = 0;
	setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay);
    }
} // fadepic
 
fadeshow.prototype.populateslide = function(picobj, iImg){
    var slideHTML = ""
    var img = this.rgImg[iImg]
    if (this.center)
	slideHTML += '<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr><td align=center valign=middle>';
    var pos = '';
    if (this.random_position) {
	pos += ' style="position:relative;';
	// if (this.dx > img.width) {
	    dxRand = this.dxRand +
		Math.floor((this.dx-img.width-2*this.dxRand) * Math.random());
	    pos += 'left:' + dxRand + ';';
	// }
	// if (this.dy > img.height) {
	    dyRand = this.dyRand +
		Math.floor((this.dy-img.height-2*this.dyRand) * Math.random());
	    pos += 'top:' + dyRand + ';';
	// }
	pos += '"';
    }

    if (img._link != "") {
	// if associated link exists for image
	slideHTML += '<a href="' + img._link + '" ' + img._other + pos + '>';
	slideHTML += '<img src="' + img.src + '" '
		    + ' border="'+this.imageborder+'px">';
	slideHTML += '</a>';
    } else {
	slideHTML += '<img src="' + img.src + '" ' + img._other + pos
		    + ' border="'+this.imageborder+'px">';
    }
    //alert(slideHTML);
    if (this.center)
	slideHTML += '</td></tr></table>';
    // SetOpacity(picobj, 0);
    picobj.innerHTML = slideHTML;

    // the following does not work
    if (false && this.pausecheck) {
	// if slideshow should pause onmouseover
	var cacheobj = this; // make it available in the closures
	img.onmouseover = function(){cacheobj.mouseovercheck=1;alert('ON');}
	img.onmouseout=function(){cacheobj.mouseovercheck=0;alert('OFF');}
    }
} // fadeshow.populateslide
 
 
fadeshow.prototype.rotateimage = function(){
    if (this.repeat == 0)
	return;
    if (this.mouseovercheck == 1) {
	var cacheobj = this; // make it available in the closure
	setTimeout(function(){cacheobj.rotateimage()}, this.delayStep)
    } else if (dom) {
	this.resetit()
	var crossobj = this.tempobj = ObjFId(this.curcanvas);
	crossobj.style.zIndex++
	fadeclear[this.id] = setInterval("fadepic(fadearray["+this.slideshowid+"])",this.delayStep)
	this.curcanvas = (this.curcanvas==this.canvasbase+"_0")
			    ? this.canvasbase+"_1"
			    : this.canvasbase+"_0";
    } else {
	var ns4imgobj = document.images['defaultslide'+this.id]
	ns4imgobj.src = this.rgImg[this.iImgCur].src
    }
    if (++this.iImgCur>=this.rgImg.length) {
	// wrap-around check
	--this.repeat;
	this.iImgCur = 0;
	if (this.random_order)
	    this.rgImg.sort(function() {return 0.5 - Math.random();});
    }
} // fadeshow.rotateimage
 
fadeshow.prototype.resetit = function(){
    this.degree = this.degreeStep // initial opacity degree
    var crossobj = ObjFId(this.curcanvas);
    if (crossobj.filters&&crossobj.filters[0]){
	if (typeof crossobj.filters[0].opacity == "number") //if IE6+
	    crossobj.filters(0).opacity = this.degree
	else //else if IE5.5-
	    crossobj.style.filter = "alpha(opacity="+this.degree+")"
    }
    else if (crossobj.style.MozOpacity)
	crossobj.style.MozOpacity = this.degree/101
    else if (crossobj.style.KhtmlOpacity)
	crossobj.style.KhtmlOpacity = obj.degree/100
} // fadeshow.resetit
 
 
fadeshow.prototype.startit = function(){
    var crossobj = ObjFId(this.curcanvas)
    this.populateslide(crossobj, this.iImgCur);
    if (this.pausecheck) {
	// if slideshow should pause onmouseover
	var cacheobj = this; // make it available in the closures
	var crossobjcontainer = ObjFId(this.id);
	crossobjcontainer.onmouseover = function(){cacheobj.mouseovercheck=1}
	crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
    }
    this.rotateimage();
} // fadeshow.startit
 
/*

    Documentation --

    To use this script, do 3 things:
    1. Somewhere in the <HEAD> put:
	<script type="text/javascript" src="fadeshow.js"></script>

    2. Somewhere in <HEAD> or before you need it, define your arguments
	for each slide show on the page. Each show must have a unique
	name for the 'args' array.

    <script type="text/javascript">
	// You can call the array anything you like,
	// but change the 'images' arg below.
    var myimages=new Array(
	// values are: <path to image>, <link associated w/image>,
							    <other link stuff>
	// first arg is required, other two are optional
	['founder.jpg'],
	['flowers.jpg', '/index.html'],
	['trees.jpg', 'trees.html', 'shape="rect" coords="118,0,184,28"']
	['insects.jpg', 'http://www.bugs.com/', 'target="_new"']
	);
    var myargs = {
	// required arguments
	'images':   myimages,	// name of array containing the images
	'width':    780,	// images will be clipped to this size box
	'height':   435,	// images will be clipped to this size box

	// optional args, default values are in []
	'id':	    'elmer',	// id of enclosing DIV [auto generated]
	'class':    'fudd',	// class of enclosing DIV [fadeshow]
	'border':   1,		// border width in px [0]
	'center':   1,		// center image horiz/vert in DIV [0]
	'cycle':    5,		// number of cycles through sequence [forever]
	'random_order': 1,	// randomize order shown [array order]
	'random_position': [dx,dy], // See below
	'pause':    1,		// mouse-on-image causes pause [0]
	'steps':    20,		// number of steps in fade  [10]
	'delaySstep':    50,	// delay (in millisecs) between steps [50]
	'bgcolor' : "black",	// background color ["white"]
	'style':    "whatever",	// inserted into style= attr of DIV
	'delay':    1000	// delay (in millisecs) between images [3000]
	 };
	// NOTE! It is *very* important that there is no comma after
	// the last item in the args array. Firefox will work OK,
	// but IE will break and not tell you why.


	// Random position:
	// The [dx,dy] arg specifies the minimum distance the image can
	// be to the edge of the bounding DIV. For example, [10,15] would
	// meant that the image should never be closer than 10px to either the
	// left or right edges, and no closer than 15px to the top or bottom.
	// Images that are too large for the DIV will mostly do the right thing.
    </script>

    3. Where you want the fadeshow in the main body do:

    <script type="text/javascript">
	// Note: 'myargs' is whatever you called it above
	new fadeshow(myargs)
    </script>

 */