/* ==================================================================================
                          ===== DHTML slide show =====
            script by Gerard Ferrandez - ge1doot - April 10th, 2006
                          http://www.dhteumeuleu.com
   ================================================================================== */

id = function(o){return document.getElementById(o);}

position = function(o, css){for(var i in css)o.style[i]=Math.round(css[i])+'px';}

setOpacity = function(o,alpha){
	if(o.filters)o.filters.alpha.opacity = alpha*100;
	else o.style.opacity = alpha;
}

diapo = {
	N:0,
	W:0,
	H:0,
	///////////////////
	image_ratio:4/3,
	fsTitle:16,
	fsText:8,
	imgMargin:3,
	butMargin:3,
	///////////////////
	ims:0,
	imx:[],
	tit:[],
	txt:[],
	thu:0,
	pos:0,
	xc:0,
	xd:0,
	xm:0,
	dt:0,
	xs:0,
	move:false,

	slide:function(){
		with(this){
			// ===== scrolling loop =====
			xm += xs;
			xc += (dt*xm*.01);
			id("slider").style.left = Math.round(xc)+"px";
			if (xm == 10) xs = -1;
			if (xm) setTimeout("diapo.slide();", 16);
			else {
				// ===== enlighten pic =====
				for(var i=.5;i<=1;i+=.1)setTimeout("setOpacity(diapo.ims[diapo.pos], "+i+")", 160*i);
				setTimeout("diapo.move=false", 160);
			}
		}
	},

	cxd:function(p){
		with(this){
			// ===== calculates slider position =====
			if(W/H>image_ratio){
				wi = Math.round(H*(ims[p].width/ims[p].height));
				xd = -imx[p]+((W-wi)/2);
			} else xd = -imx[p];
			// ===== display text =====
			thu[p].className = "selected";
			id("title").innerHTML = tit[p];
			id("txt").innerHTML = txt[p];
		}
	},

	scroll:function(p){
		with(this){
			if(move){
				// ===== already scrolling: queue event =====
				setTimeout("diapo.scroll("+p+");", 128);
			} else {
				if(thu[p].className == "loaded"){
					// ===== start scrolling =====
					cxd(p);
					setOpacity(ims[pos], .4);
					thu[pos].className = "loaded";
					pos = p;
					dt = xd-xc;
					xm = 0;
					xs = 1;
					move = true;
    				slide();
				}
			}
		}
	},

	pos_button:function(x,y,w){
		with(this){
			// ===== button bar & text positioning =====
			position(id("button"), {'left':x,'top':y+butMargin,'width':w,'height':H/20});
			position(id("legend"), {'left':x,'top':y+(butMargin*2)+H/20,'width':w,'height':H});
			position(id("title"), {'fontSize':Math.max(12,H/(250/fsTitle))});
			position(id("txt"), {'fontSize':Math.max(10,H/(250/fsText)),'marginTop':.5*H/(250/fsText)});
			thu = id("button").getElementsByTagName("span");
			for(var i=0;i<N;i++){
				var wi = Math.round(w/N)-butMargin;
				position(thu[i], {'left':(butMargin*.5)+i*(wi+butMargin),'width':wi});
				if(ims[i].complete)thu[i].className = (i==pos)?"selected":"loaded";
			}
		}
	},

	resize:function(){
		with(diapo){
			// ===== resize layout =====
			W=id("slider").offsetWidth;
			H=id("slider").offsetHeight;
			var w=0;
			var h=0;
			var x=0;
			for(var i=0;i<N;i++){
				if(ims[i].complete){
					w=ims[i].width;
					h=ims[i].height;
					ims[i].style.visibility="visible";
					setOpacity(ims[i], (i==pos)?1:.4);
					if(W/H>image_ratio){
						// ===== horizontal centering =====
						wi = Math.round(H*(w/h));
						position(ims[i], {'left':x,'top':0,'width':wi,'height':H});
						imx[i] = x;
						x += wi+imgMargin;
						if(i==0) pos_button((W-wi)/2,H,wi);
					} else {
						// ===== vertical centering =====
						hi = Math.round(W/(w/h));
						position(ims[i], {'left':x,'top':(H-hi)/2,'width':W,'height':hi});
						imx[i] = x;
						x += W+imgMargin;
						if(i==0) pos_button(0,hi+(H-hi)/2,W);
					}
				}
				if(xs==0)xc=xd;
			}
			// ===== reajust scroll position =====
			if(!move){
				cxd(pos);
				position(id("slider"), {'left':xd});
			}
		}
	},

	images_load:function(){
		with(this){
			// ===== loop until all images are loaded =====
			var M=0;
			for(var i=0;i<N;i++) if(ims[i].complete) M++;
			if(!move && ims[0].complete) resize();
			if(M<N || move) setTimeout("diapo.images_load();", 128);
		}
	},

  // Fix: initializes variable
	// Necessary if the page is called several times
  initVar:function() {
		with(this){
    	N=0;
    	W=0;
    	H=0;
    	///////////////////
    	image_ratio=4/3;
    	fsTitle=16;
    	fsText=8;
    	imgMargin=3;
    	butMargin=3;
    	///////////////////
    	ims=0;
    	imx=[];
    	tit=[];
    	txt=[];
    	thu=0;
    	pos=0;
    	xc=0;
    	xd=0;
    	xm=0;
    	dt=0;
    	xs=0;
    	move=false;
    }
  },

	init:function(){
		with(this){
  		// Fix: remove already appended children
  		// Necessary if the page is called several times
      var buttonChildNodesCount = id("button").childNodes.length;
      if (buttonChildNodesCount > 0) {
        diapo.initVar();
        for(var i=0;i<buttonChildNodesCount;i++) {
      	  id("button").removeChild(id("button").childNodes[0]);
      	}
      }
		
			// ===== images source =====
			ims = id("slider").getElementsByTagName("img");
			N = ims.length;
			// ===== create buttons =====
			for(var i=0;i<N;i++) {
				o = document.createElement("span");
				tit[i] = ims[i].title;
				txt[i] = ims[i].alt;
//				ims[i].title = "";
//				ims[i].alt = "";
				o.onmousedown = new Function("diapo.scroll("+i+");");
				id("button").appendChild(o);
			}
			images_load();
		}
	}
}