/***********************************************
BASED ON
* Ultimate Fade-In Slideshow (v1.51): © 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.
AND MODIFIED BY ***CE***
***********************************************

to be declared elsewhere:

var fadeimages=new Array()
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

TO CALL IN PAGE: 
***CE*** added fadebgcolor as parameter - was previously a global variable
***CE*** added firstdelay - delay before starting first fade
***CE*** added fadestep - amount by which the fade changes each time : standard is 10, slowest possible is 1
new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, firstdelay, fadestep, pauseonmouseover (0=no, 1=yes), fadebgcolor, optionalRandomOrder)
for random order, put anything in last argument:
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
else leave out:
new fadeshow(fadeimages, 140, 225, 0, 3000, 1)
*/
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

	
//***CE added global variable global_fadestep
var global_fadestep

var PAUSED = false;   //***CE added to allow externally triggered stops & restarts with PAUSE and PLAY buttons
var FOCUSSED = false; //***CE added = user has just clicked on a thumbnail and wants that one displayed and paused
var NEWSLIDE;         //***CE index of new photo (photo number 1...N)
var DELAY;            //***CE to enable delay of zero when slide focussed
var CURRENTPHOTO = 1  //***CE 
var PREVIOUSPHOTO     //***CE 
var NPHOTOS           //***CE 

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, firstdelay, fadestep, pause, fadebgcolor, displayorder){
global_fadestep = fadestep //***CE***
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
NPHOTOS = theimages.length
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", firstdelay)  //***CE*** was this.delay i.e. standard delay
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=global_fadestep //***CE*** fadestep=10 is standard; fadestep=1 is slowest possible - was 10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
DELAY = (DELAY==0) ? 0 : obj.delay //***CE to allow temporary zero delay
setTimeout("fadearray["+obj.slideshowid+"].rotateimage();", DELAY) //***CE use DELAY rather than obj.delay 
if (DELAY==0) DELAY = obj.delay  //***CE reset DELAY to obj.delay once applied
if (FOCUSSED) {
  FOCUSSED=false
  CURRENTPHOTO = obj.nextimageindex
}
else  {
  CURRENTPHOTO = obj.nextimageindex-1
}
if (CURRENTPHOTO<1) CURRENTPHOTO = NPHOTOS + CURRENTPHOTO
for (i=1;i<NPHOTOS+1;i++) { if (document.getElementById("thumb"+i)) document.getElementById("thumb"+i).className="transOFF" }
if (document.getElementById("thumb"+CURRENTPHOTO)) document.getElementById("thumb"+CURRENTPHOTO).className="transON";
document.getElementById("slidehref").href=strWholePath+CURRENTPHOTO+"_"+strBlowupExtension+".jpg"
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
  
fadeshow.prototype.rotateimage=function(){
if (FOCUSSED)
  {
  if (iebrowser&&dom||dom){
    var FIXEDINDEX
	FIXEDINDEX = NEWSLIDE - 1
	FIXEDINDEX = (FIXEDINDEX<0) ? NPHOTOS + FIXEDINDEX : FIXEDINDEX
    this.resetit()
    var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    crossobj.style.zIndex++
    fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
    this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
    this.nextimageindex=FIXEDINDEX
    this.populateslide(crossobj, this.nextimageindex)
    CURRENTPHOTO = NEWSLIDE
    for (i=1;i<NPHOTOS+1;i++) { if (document.getElementById("thumb"+i)) document.getElementById("thumb"+i).className="transOFF" }
    if (document.getElementById("thumb"+CURRENTPHOTO)) document.getElementById("thumb"+CURRENTPHOTO).className="transON";
  }
  else {
    var ns4imgobj=document.images['defaultslide'+this.slideshowid]
    ns4imgobj.src=this.postimages[this.curimageindex].src
  }
  this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
  DELAY=0
}
else {
  if (this.pausecheck==1||PAUSED) {
	  var cacheobj=this  //if pause onMouseover enabled, cache object 
  }
  if (this.mouseovercheck==1||PAUSED) { 
    if (this.mouseovercheck==1) { 
    }
    setTimeout(function(){cacheobj.rotateimage()}, 100)
  }
  else
    if (iebrowser&&dom||dom){
      this.resetit()
      var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
      crossobj.style.zIndex++
      fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
      this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
    }
    else{
      var ns4imgobj=document.images['defaultslide'+this.slideshowid]
      ns4imgobj.src=this.postimages[this.curimageindex].src
    }
  this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
  }
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(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=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}