var fadeslideshow
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
	
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, displayorder){
	this.delay=delay
	this.curimageindex=0
	fadeslideshow=this
	this.slideshowid="mhm_fade"
	this.canvasbase="canvas"+this.slideshowid
	if (displayorder != 0) {
		theimages.sort(function() {return 0.5 - Math.random();})
	}
	this.theimages=theimages
	this.imageborder=parseInt(borderwidth)
	this.preimages=new Array() //preload images
	this.fadewidth = fadewidth
	this.fadeheight = fadeheight
	this.fadeheight_extension = 30 //extend canvas e.g imagetitle
	this.fadewidth_extension = 2 //extend canvas e.g. border 
	this.fadestep = 3 //loop step opacity

  	if (iebrowser&&dom||dom) {//if IE5+ or modern browsers (ie: Firefox)
		
		document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:' +(fadewidth+this.fadewidth_extension)+ 'px;height:' +(fadeheight+this.fadeheight_extension)+ 'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:' +(fadewidth+this.fadewidth_extension)+ 'px;height:' +(fadeheight+this.fadeheight_extension)+ 'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" align="center" valign="middle"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:' +(fadewidth+this.fadewidth_extension)+ 'px;height:' +(fadeheight+this.fadeheight_extension)+ 'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;" align="center" valign="middle"></div></div>')
	
		this.canvas0 = iebrowser ? iebrowser[this.canvasbase+"_0"] : document.getElementById(this.canvasbase+"_0")
		this.canvas1 = iebrowser ? iebrowser[this.canvasbase+"_1"] : document.getElementById(this.canvasbase+"_1")
		this.degree0 = 0
		this.degree1 = 0 
	
		this.startit()
 	
	}
}

function getBaseBackground(el) {
        while(el!=null) {
        	el = el.parentNode;
			if (el.bgColor!=undefined && el.bgColor.length>0) return el.bgColor;
			if (el.style.background.length>0) return el.style.background;
        }
}

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

fadeshow.prototype.updateOpacity=function() {
	if (this.degree0<0) this.degree0=0
	else if (this.degree0>100) this.degree0=100
	if (this.degree1<0) this.degree1=0
	else if (this.degree1>100) this.degree1=100

	setOpacity(this.canvas0,this.degree0)
	setOpacity(this.canvas1,this.degree1)
}

fadeshow.prototype.preload = function(index) {
	if (!this.preimages[index]) {
		this.preimages[index]=new Image(1,1)
		this.preimages[index].src=this.theimages[index][0]
	}
}

fadeshow.prototype.fadepic = function(direction) {

	if (direction==1) {
		if (this.degree0<100) this.degree0 += this.fadestep
		if (this.degree1>0) this.degree1 -= this.fadestep
		this.updateOpacity()
		if (this.degree0==100 && this.degree1==0) {
			clearInterval(this.interval)		
			this.curimageindex=(this.curimageindex<this.theimages.length-1) ? this.curimageindex+1 : 0
			this.populateslide(this.canvas1, this.curimageindex)
			setTimeout("fadeslideshow.rotateimage()", this.delay)
		}
	} else if (direction==0) {
		if (this.degree1<100) this.degree1 += this.fadestep
		if (this.degree0>0) this.degree0 -= this.fadestep
		this.updateOpacity()
		if (this.degree1==100 && this.degree0==0) {
			clearInterval(this.interval)		
			this.curimageindex=(this.curimageindex<this.theimages.length-1) ? this.curimageindex+1 : 0 
			this.populateslide(this.canvas0, this.curimageindex)
			setTimeout("fadeslideshow.rotateimage()", this.delay)
		}
	}
}
	
fadeshow.prototype.populateslide=function(picobj, picindex){

	this.preload(picindex)

	var slideHTML=""
	var faktor1 = (this.fadewidth/this.theimages[picindex][2])
	var faktor2 = (this.fadeheight/this.theimages[picindex][1])
	var endbreite = Math.round(this.theimages[picindex][2] * Math.min(faktor1,faktor2))
	var endhoehe = Math.round(this.theimages[picindex][1] * Math.min(faktor1,faktor2))
	var vspace = Math.floor((this.fadeheight-endhoehe)/2)
	var hspace = Math.floor((this.fadewidth-endbreite)/2)
	slideHTML+='<img src="media/blank.gif" width="1" height="'+vspace+'"><br><img src="'+this.preimages[picindex].src+'" width="'+endbreite+'" height="'+endhoehe+'" style="border: 1px solid;">'
	if (this.theimages[picindex][3].length > 0) { slideHTML+='<br><br>'+(this.theimages[picindex][3]) }
	picobj.innerHTML=slideHTML
}

fadeshow.prototype.rotateimage=function(){
	var direction
	if (this.degree0==100) {
		direction = 0
		this.canvas1.style.zIndex++;
		this.canvas0.style.zIndex--;
	} else {
		direction=1
		this.canvas0.style.zIndex++;
		this.canvas1.style.zIndex--;		
	}
	this.interval=setInterval("fadeslideshow.fadepic("+direction+")",30)
}


fadeshow.prototype.startit=function(){
	this.canvas0.style.background=getBaseBackground(this.canvas0);
	this.canvas1.style.background=getBaseBackground(this.canvas1);
	this.populateslide(this.canvas1, this.curimageindex)
	this.degree0=100
	this.degree1=0
	this.rotateimage()
}