var xm;
var ym;

/* ==== onmousemove event ==== */
document.onmousemove = function(e){
	if(window.event) e=window.event;
	xm = (e.x || e.clientX);
	ym = (e.y || e.clientY);
};

/* ==== window resize ==== */
function resize() {
	if(diapo)diapo.resize();
}
onresize = resize;

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

////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
	O : [],
	DC : 0,
	div : 0,
	img : 0,
	N : 0,
	xm : 0,
	ym : 0,
	nx : 20,
	ny : 20,
	nw : 0,
	nh : 0,
	rs : 0,
	rsB : 0,
	zo : 0,
	
	//tx_pos : 0,
	//tx_var : 0,
	//tx_target : 0,

	/////// script parameters ////////
	attraction : 1,
	acceleration : 0,
	dampening : .7,
	zoomOver : 1.6,
	zoomClick : 6,
	transparency : 1,
	font_size: 18,
	//////////////////////////////////

	/* ==== diapo resize ==== */
	resize : function(){
		with(this){
			nx = DC.offsetLeft;
			ny = DC.offsetTop;
			nw = DC.offsetWidth;
			nh = DC.offsetHeight;
			//txt.style.fontSize = Math.round(nh / font_size) + "px";
			if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
			rsB = rs;
		}
	},

	/* ==== create diapo ==== */
	CDiapo : function(o,a){
		/* ==== init variables ==== */
		this.o        = o;
		this.txt	   = 0;
		this.a_o        = a; //add a element
		this.x_pos    = this.y_pos    = 0;
		this.x_origin = this.y_origin = 0;
		this.x_var    = this.y_var    = 0;
		this.x_target = this.y_target = 0;
		this.w_pos    = this.h_pos    = 0;
		this.w_origin = this.h_origin = 0;
		this.w_var    = this.h_var    = 0;
		this.w_target = this.h_target = 0;
		this.over     = false;
		this.click    = false;

		/* ==== create thumbnail image ==== */
		this.div = document.createElement('div');
		this.div.className = "divDc";
		this.a = document.createElement('a');
		this.a.className = "aDc";
		this.a.href = this.a_o.href;
		//anchor.innerHTML = 'Show';
		this.img = document.createElement("img");
		this.img.className = "imgDC";
		this.img.src = o.src;
		this.div.O = this;
		this.p = document.createElement("p");
		this.span = document.createElement("span");
		this.span.innerHTML = o.alt;
		this.p.appendChild(this.span);
		this.a.appendChild(this.img);
		this.a.appendChild(this.p);
		this.div.appendChild(this.a);
		diapo.DC.appendChild(this.div);
		//setOpacity(this.img, diapo.transparency);

		/* ==== mouse events ==== */
		this.img.onselectstart = new Function("return false;");
		this.img.ondrag = new Function("return false;");
		this.div.onmouseover = function(){
			
			this.O.over=true;
			this.O.x_target = this.O.x_origin-(this.O.w_origin*diapo.zoomOver-this.O.w_origin)/2;
			this.O.y_target = this.O.y_origin-(this.O.h_origin*diapo.zoomOver-this.O.h_origin)/2+30;
			setOpacity(this,this.O.click?diapo.transparency:1);
			
		};
		this.div.onmouseout = function(){
			
			this.O.over=false;
			setOpacity(this,diapo.transparency);
			
		};
	
		/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
		this.resize = function (){
			with (this) {
				x_origin = o.offsetLeft;
				y_origin = o.offsetTop;
				w_origin = o.offsetWidth;
				h_origin = o.offsetHeight;
			}
		};

		/* ==== animation function ==== */
		this.position = function (){
			with (this) {
				/* ==== set target position ==== */
				w_target = w_origin;
				h_target = h_origin;
				if(over){
					/* ==== mouse over ==== */
					w_target = w_origin * diapo.zoomOver;
					h_target = h_origin * diapo.zoomOver;
				} else {
					/* ==== mouse out ==== */
					if(!click) {
						x_target = x_origin;
						y_target = y_origin;
					}
				}
				if(click){
					/* ==== clicked ==== */
					w_target = w_origin * diapo.zoomClick;
					h_target = h_origin * diapo.zoomClick;
				}

				/* ==== magic spring equations ==== */
				x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
				y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
				w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
				h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
				diapo.rs += (Math.abs(x_var) + Math.abs(y_var));

				/* ==== html animation ==== */
				with(img.style){
					left   = Math.round(x_pos) + "px";
					top    = Math.round(y_pos) + "px";
					width  = Math.round(Math.max(0, w_pos)) + "px";
					height = Math.round(Math.max(0, h_pos)) + "px";
					zIndex = Math.round(w_pos*(1));
				}
				with(div.style){
					left   = Math.round(x_pos) + "px";
					top    = Math.round(y_pos) + "px";
					width  = Math.round(Math.max(0, w_pos)) + "px";
					height = Math.round(Math.max(0, h_pos)) + 20 + "px";
					zIndex = Math.round(w_pos*(1));
				}
			}
		};
	},

	/* ==== main loop ==== */
	run : function(){
		diapo.xm = xm - diapo.nx;
		diapo.ym = ym - diapo.ny;
		/* ==== caption anim ==== */
		//diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
		//diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
		//diapo.txt.style.left = 0;
		/* ==== images anim ==== */
		for(var i in diapo.O) diapo.O[i].position();
		/* ==== loop ==== */
		setTimeout("diapo.run();", 16);
	},

	/* ==== load images ==== */
	images_load : function(){
		// ===== loop until all images are loaded =====
		var M = 0;
		for(var i=0; i<diapo.N; i++) {
			if(diapo.img[i].complete) {
				diapo.img[i].style.position = "relative";
				diapo.O[i].img.style.visibility = "visible";
				diapo.O[i].span.style.visibility = "visible";
				M++;
			}
			resize();
		}
		if(M<diapo.N) setTimeout("diapo.images_load();", 128);
	},

	/* ==== init script ==== */
	init : function() {
		diapo.DC = document.getElementById("diapoContainer");
		diapo.img = diapo.DC.getElementsByTagName("img");
		diapo.a = diapo.DC.getElementsByTagName("a");

		diapo.N = diapo.img.length;
		for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i],diapo.a[i]));
		diapo.resize();
		//diapo.tx_pos = -diapo.nw;
		//diapo.tx_target = -diapo.nw;
		diapo.images_load();
		diapo.run();
	}
};