var fadebgcolor="white"
var fadearray  = new Array() //array to cache fadeshow instances
var fadeclear  = new Array() //array to cache corresponding clearinterval pointers
var rotateid  = new Array() //array to cache corresponding clearinterval pointers
var agt        = navigator.userAgent.toLowerCase()
var ie         = (agt.indexOf('msie') != -1);
//var ie         = ((agt.indexOf('opera')== -1)) ? false: ie;
var iebrowser  = document.all;
var dom        = (document.getElementById) //modern dom browsers
var fade_url   = '../php/getfadeinfo.php';
var detitel    = document.title;
var fadenr     = 0
//var Rotateid   = "";

function fade_info(idd){
	var pars='id=' + idd;
	var myAjax = new Ajax.Request(
	             fade_url,
				{
					method: 'get',
					parameters: pars,
					onComplete: showResponse
				});
}


function showResponse(originalRequest)
{
	//alert("starting getFaded "+originalRequest);
	new getFaded(originalRequest);
	//alert("getFaded done");

}

function setPosition(breedte){
           
		   //alert('a');
		   
           var sliderEl=$('slideshow');
		   
		   //alert(sliderEl);
		   
		   var slide_y = getOffsetTop  (sliderEl);
		   var slide_x = getOffsetLeft (sliderEl);
		   var correctie=parseInt(breedte)-25;
           //var deleft=sliderEl.offsetHeight

		   //alert('b');
		   
           //window.status=correctie;
           $('canvas0_0').style.top = slide_y+"px";
           $('canvas0_0').style.left= slide_x+"px";

           $('canvas0_1').style.top = slide_y+"px";
           $('canvas0_1').style.left= slide_x+"px";

		   //alert('c');
		   
           $('controls').style.width = "30px";
           $('controls').style.top = slide_y+300+"px";
           $('controls').style.left= slide_x+correctie+"px";
           window.onresize=function(){setPosition(breedte)}
		   
		   //alert('d');
}

var breedte=0;
var getFaded = Class.create();

getFaded.prototype = {

initialize: function(originalRequest) {

           this.originalRequest= originalRequest;
           this.response       = originalRequest.responseXML.documentElement;
           this.responset      = originalRequest.responseText;
           this.slideshow      = originalRequest.responseXML.getElementsByTagName('slideshow');
           this.fadewidth      = this.slideshow[0].getElementsByTagName('breedte')[0].firstChild.nodeValue;
           breedte             = this.fadewidth
		   
           this.curcanvas="canvas0_0";
           fadenr++;
           if(fadenr>1){
	           $('canvas0_0').style.zIndex=0;
	           $('canvas0_1').style.zIndex=0;

	           window.clearTimeout(rotateid[0]);
	           window.clearInterval(fadeclear[0]);
	           window.clearTimeout(fadeclear[0]);
           }
		   
		   //alert('0');

           //setPosition(breedte);
		   
		   //alert('1');

           //window.onresize=function(){ setPosition(breedte)}
           /******* verwerken request naar vars ***************/

           this.response_parts = "";
           this.fadeimages     = new Array()


           /******* voorbereiden overige vars ***************/

           this.fadeimages         = new Array();
           this.imageborder        = 0;
           this.fadewidth          = 328;
           this.fadeheight         = 300;
           this.delay              = 5000;
           this.pausecheck         = 1;
           this.status             = 1;
           this.mouseovercheck     = 0;
           this.degree             = 10; //initial opacity degree (10%)
           this.curimageindex      = 0;
           this.nextimageindex     = 1;
           this.titel_inner        = "";
		   
		   //alert('2');


           //alert(this.slideshow.length);
           fadearray[0]=this;

           this.slideshowid=fadearray.length-1;
           this.canvasbase="canvas"+this.slideshowid;



           for (var i=0;i<this.slideshow.length;i++){
	           this.illustratie=new Image();
	           this.illustratienaam = this.slideshow[i].getElementsByTagName('bestandsnaam')[0].firstChild.nodeValue;
	           this.map             = this.slideshow[i].getElementsByTagName('map')[0].firstChild.nodeValue;

	           this.illustratie.src = this.illustratienaam;
			   //alert(this.illustratie.src);

	           this.titel           = this.slideshow[i].getElementsByTagName('titel')[0].firstChild.nodeValue;
	           this.url_title       = this.slideshow[i].getElementsByTagName('titel')[0].firstChild.nodeValue;
	           this.url             = this.slideshow[i].getElementsByTagName('url')[0].firstChild.nodeValue;


	           this.fadeimages[i]=[this.illustratie.src, this.url, this.url_title, this.titel];
           }
		   
		   //alert('3');

           this.startit();
		   
		   //alert('4');
},

rotate_title: function(){
             var detitels=$('titels').getElementsByTagName('DIV')
             //window.status=;
             for(i=0; i<detitels.length; i++){
	             this.div=detitels[i];
	             if(i==this.curimageindex){
		             this.div.style.fontWeight="bold";
		             this.div.onclick     = this.no_slide.bindAsEventListener(this.div);
	             }else{
		             this.div.style.fontWeight="normal";
		             this.div.onclick     = this.next_slide.bindAsEventListener(this.div);
	             }

             }

},


next_slide: function(){
           var objee=fadearray[0]
           objee.resetit();
           objee.mouseovercheck2();
           var rcrossobj=iebrowser? iebrowser[objee.nextcanvas] : $(objee.nextcanvas);
           this.clickID= this.id.split('_');
           objee.curimageindex = parseInt(this.clickID[1]);

           window.clearInterval(fadeclear);
           window.clearTimeout(fadeclear);
           window.clearTimeout(rotateid[0]);

           objee.nextimageindex=(objee.curimageindex<objee.fadeimages.length-1)? objee.curimageindex+1 : 0
           objee.populateslide(rcrossobj, objee.curimageindex)
           fadearray[objee.slideshowid].rotateimage();
           objee.mouseovercheck1();
           //setTimeout(function(){objee.mouseovercheck1();}, objee.delay)
           //objee.playbutton.onclick     = objee.startit.bindAsEventListener(objee);

           //window.status=objee.playbutton;
            },

no_slide: function(){
            window.status="hold";

            },


startit: function(){
            var crossobj=iebrowser? iebrowser[this.curcanvas] : $(this.curcanvas)

            $('controls').innerHTML="";

            this.stopbutton             = document.createElement("IMG");
            this.stopbutton.src         = "../img/stop_on.gif";
            this.stopbutton.style.margin= "0px 3px 0px 0px";
            this.stopbutton.title       = "slideshow stoppen";
            this.stopbutton.id          = "stopbutton";
			this.stopbutton.className   = "pointer";
            Event.observe(this.stopbutton, 'mousedown', this.mouseovercheck1, false);


            this.playbutton             = document.createElement("IMG");
            this.playbutton.src         = "../img/play.gif";
            this.playbutton.title       = "slideshow gestart";
            this.playbutton.id          = "playbutton";
			this.playbutton.className   = "nopointer";
            Event.observe(this.playbutton, 'mousedown', this.mouseovercheck2, false);

            $('controls').appendChild(this.stopbutton);
            $('controls').appendChild(this.playbutton);
            /**/

            //this.populateslide(crossobj, this.curimageindex)
            if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
            Event.observe($('master0'), 'mouseover', this.mouseovercheck1, false);
            Event.observe($('master0'), 'mouseout', this.mouseovercheck2, false);
            }
            this.populateslide(crossobj, this.curimageindex)
            this.rotateimage()

            },


stopit: function(){

           window.clearInterval(fadeclear);
           window.clearTimeout(fadeclear);
           window.clearTimeout(rotateid[0]);
           },

mouseovercheck1: function(evt){
           fadearray[0].mouseovercheck=1;
           fadearray[0].stopbutton.src         = "../img/stop.gif";
           fadearray[0].stopbutton.alt         = "";
		   fadearray[0].stopbutton.title       = "slideshow is stopped";
		   fadearray[0].stopbutton.className   = "nopointer";

           fadearray[0].playbutton.src         = "../img/play_on.gif";
           fadearray[0].playbutton.alt         = "";
		   fadearray[0].playbutton.title       = "start slideshow";
		   fadearray[0].playbutton.className   = "pointer";
           },

mouseovercheck2: function(evt){
           fadearray[0].mouseovercheck=0;

           fadearray[0].stopbutton.src         = "../img/stop_on.gif";
           fadearray[0].stopbutton.alt         = "";
		   fadearray[0].stopbutton.title       = "stop slideshow";
		   fadearray[0].stopbutton.className   = "pointer";

           fadearray[0].playbutton.src         = "../img/play.gif";
           fadearray[0].playbutton.alt         = "";
		   fadearray[0].playbutton.title       = "slideshow is started";
		   fadearray[0].playbutton.className   = "nopointer";
           },

resetit: function(){

            this.degree=10
            var crossobj=$(this.curcanvas);//iebrowser? iebrowser[this.curcanvas] : document.getElementById
            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.opacity)
            crossobj.style.opacity=this.degree/101
            else if (crossobj.style.opacity)
            crossobj.style.opacity=obj.degree/100

            },


rotateimage: function(){

             //window.status=this.mouseovercheck;
             if (this.pausecheck==1) //if pause onMouseover enabled, cache object
             var cacheobj=this
             if (this.mouseovercheck==1)
             setTimeout(function(){cacheobj.rotateimage()}, 100)
             else if (iebrowser&&dom||dom){
             this.resetit()

             //var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : $(this.curcanvas)

             $(this.curcanvas).style.zIndex++
             //window.status=$('canvas0_0').style.zIndex+" | "+$('canvas0_1').style.zIndex;
             fadeclear[this.slideshowid]=setInterval("fadearray["+this.slideshowid+"].fadepic()", 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
             }

             if (this.mouseovercheck!=1){
             this.rotate_title();
             this.curimageindex=(this.curimageindex<this.fadeimages.length-1)? this.curimageindex+1 : 0
             }


             },


            //$(obj.curcanvas).style.filter="alpha(opacity="+obj.degree+")"
fadepic: function(){
             var obj=this
             var scrossobj=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
             var scrossobj=$(scrossobj);
             //this.scrossobj=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
             //alert(scrossobj);



             if (obj.degree<100){
             obj.degree+=10

             if (scrossobj.filters&&scrossobj.filters[0]){

             if (typeof scrossobj.filters[0].opacity=="number"){ //if IE6+
             scrossobj.style.filter="alpha(opacity="+obj.degree+")" //obj.tempobj.filters[0].opacity=obj.degree
             }else{ //else if IE5.5-
             scrossobj.style.filter="alpha(opacity="+obj.degree+")"
             }


             }else if (scrossobj.style.MozOpacity){

             scrossobj.style.MozOpacity=obj.degree/101;

             }else if (scrossobj.style.opacity)     { //
             scrossobj.style.opacity=obj.degree/100

             }

             }else{
             document.title=detitel+" - "+this.fadeimages[this.curimageindex][3];
             //alert($(scrossobj).style.KhtmlOpacity)

             clearInterval(fadeclear[obj.slideshowid])
             obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
             //obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : $(obj.nextcanvas)
             obj.populateslide($(obj.nextcanvas)  , obj.nextimageindex);
             obj.nextimageindex=(obj.nextimageindex<obj.fadeimages.length-1)? obj.nextimageindex+1 : 0
             //document.getElementById("test").innerHTML=obj.tempobj.childNodes[0].title;
             rotateid[this.slideshowid]=setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)

             }
            /* */

             },


populateslide: function(picobj, picindex){

             this.slideHTML=""

             if (this.fadeimages[picindex][1]!="" && this.fadeimages[picindex][1]!="..."){ //if associated link exists for image
             this.slideHTML+='<a href="'+this.fadeimages[picindex][1]+'" target="_self" title="'+this.fadeimages[picindex][3]+'">'
             }
             this.slideHTML+='<img src="'+this.fadeimages[picindex][0]+'" border="'+this.imageborder+'px">'
             if (this.fadeimages[picindex][1]!="" && this.fadeimages[picindex][1]!="..."){ //if associated link exists for image
             //alert(this.fadeimages[picindex][1]);
             this.slideHTML+='</a>'
             //alert(slideHTML);
             }
             picobj.innerHTML=this.slideHTML;


             }
             ,


pointer: function(){
            this.style.cursor='pointer';
},


nopointer: function(){
            this.style.cursor='default';
}
}