// toggle the display of an element by its id
function toggleDisplay(id){
  if (document.getElementById(id).style.display != 'block'){
    document.getElementById(id).style.display = 'block';
  }
  else {
    document.getElementById(id).style.display = 'none';
  }
}

//============================== START IMAGE BANNER SLIDESHOW ===========================//

// time in ms between images
var fadeInterval = 4500;
// time it takes during fade to decrease 1/100.
var fadeTime = 50;
// declaring global variables so that setTimeout function can use them
var imageArray;
var imgFG;
var imgBG;
    
// function that gets called from the page
function startFadeshow(containerID, images, imageWidth, imageHeight){
    
    // set global image array to be used with setTimeout
    imageArray = images;
    
    // set global img variables to be used with setTimeout and add attributes
    imgBG = document.createElement('img');
    imgFG = document.createElement('img');
    imgBG.id = containerID + '_background';
    imgFG.id = containerID + '_foreground';
    imgBG.src = imageArray[1];
    imgFG.src = imageArray[0];
    
    // create div tags and inject them into the container.
    var divBG = document.createElement('div');
    var divFG = document.createElement('div');
    divBG.style.position = 'absolute';
    divBG.style.width = imageWidth + 'px';
    divBG.style.height = imageHeight + 'px';
    divFG.style.position = 'absolute';
    divFG.style.width = imageWidth + 'px';
    divFG.style.height = imageHeight + 'px';
    divBG.appendChild(imgBG);
    divFG.appendChild(imgFG);
    document.getElementById(containerID).appendChild(divBG);
    document.getElementById(containerID).appendChild(divFG);
    
    // preload the rest of the images
    var preload = new Array;
    for (var i=1; i<imageArray.length; i++){
        preload[i] = new Image(imageWidth, imageHeight);
        preload[i].src = imageArray[i];
    }
    
    // start the actual rotation of the slideshow - add 1 second to make up for loading time
    setTimeout("fadeImages(1, 99);", (fadeInterval + 1000));
}

// fade foreground image out
function fadeImages(currentImageNumber, opacityPercent){
    
    // change opacity for ie, old mozilla/firefox, and everything else
    imgFG.style.filter = 'alpha(opacity=' + opacityPercent + ')';
    imgFG.style.MozOpacity = opacityPercent/100;
    imgFG.style.opacity = opacityPercent/100;
    
    // if the opacity is not 0 yet, keep making it lower
    if (opacityPercent > 0){
        setTimeout("fadeImages('" + currentImageNumber + "', '" + (opacityPercent-3) + "');", fadeTime);
    }
    else {

        //if the last image is being displayed start over at the first one, otherwise increment the current photo to the next one
        if (currentImageNumber == (imageArray.length - 1)){
            currentImageNumber = 0;
        }
        else {
            currentImageNumber++;
        }
        
        // move the background image to the foreground and make it's opacity 100%
        imgFG.src = imgBG.src;
        imgFG.style.filter = 'alpha(opacity=100)';
        imgFG.style.MozOpacity = 1;
        imgFG.style.opacity = 1;
        
        // set the next image in line as the background
        imgBG.src = imageArray[currentImageNumber];
        
        // start the fading of the new foreground image
        setTimeout("fadeImages('" + currentImageNumber + "', 99);", fadeInterval);
    }
}

//============================== END IMAGE BANNER SLIDESHOW ===========================//
//============================== START IMAGE GALLERY SLIDESHOW ===========================//

var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.fader=function(){
	function fade(n,p){this.n=n; this.init(p)}
	fade.prototype.init=function(p){
		var s=T$(p.id), u=this.u=T$$('li',s), l=u.length, i=this.l=this.c=this.z=0;
		if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
		s.style.overflow='hidden'; this.a=p.auto||0; this.p=p.resume||0;
		for(i;i<l;i++){
			if(u[i].parentNode==s){
				u[i].style.position='absolute'; this.l++; u[i].o=p.visible?100:0;
				u[i].style.opacity=u[i].o/100; u[i].style.filter='alpha(opacity='+u[i].o+')'
			}
		}
		this.pos(p.position||0,this.a?1:0,p.visible)
	},
	fade.prototype.auto=function(){
		this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
	},
	fade.prototype.move=function(d,a){
		var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
	},
	fade.prototype.pos=function(i,a,v){
		var p=this.u[i]; this.z++; p.style.zIndex=this.z;
		clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i;
		if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'}
		if(this.g){for(var x=0;x<this.l;x++){this.g[x].className=x==i?this.s:''}}
		p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20)
	},
	fade.prototype.fade=function(i,a){
		var p=this.u[i];
		if(p.o>=100){
			clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}
		}else{
			p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')'
		}
	};
	return{fade:fade}
}();
//============================== END IMAGE GALLERY SLIDESHOW ===========================//