var xm = 0;


var ym = 0;





/* RGB code */


rgb = function(color, R, G, B) {


	color = Math.min(255,Math.max(0,color));


	return "RGB("+Math.round(color*R)+","+Math.round(color*G)+","+Math.round(color*B)+")";


}





/* isolate script */


function gf(){


	/* source images */ 


	this.images = document.getElementById('images').getElementsByTagName('img');


	/* id hash table */ 


	this.id = [];


	var items = document.getElementById('center').getElementsByTagName('*');


	for(var i in items)if(items[i].id)this.id[items[i].id]=items[i];


	/* variables */


	this.K      = 0;


	this.w2     = 0;


	this.h2     = 0;


	this.over   = false;


	this.origin = 0;


	this.oL     = 0;


	this.oT     = 0;


	this.xm     = 0;


	this.ym     = 0;


	/* functions */


	this.fade = function(o, c){


		with(o.getElementsByTagName('div')){


			item(0).style.color  = rgb(c,1,1,1);


			item(1).style.color  = rgb(255-c,1,1,1);


			item(0).style.zIndex = c;


			item(1).style.zIndex = 255-c;


		}


	}


	this.text = function(o, t){


		with(o.getElementsByTagName('div')){


			item(1).innerHTML = item(0).innerHTML;


			item(0).innerHTML = t;


		}


	}


	this.move = function(x,y,w,h){


		/* position image */


		with(gf.id.d2.style){


			left   = Math.round(x)+"px";


			top    = Math.round(y)+"px";


			width  = Math.max(0,Math.round(w))+"px";


			height = Math.max(0,Math.round(h))+"px";	


		}


		with(gf.id.i2.style){


			left = -(x+gf.w2)+"px";


			top  = -(y+gf.h2)+"px";


		}


		/* transition complete */


		if(gf.origin>0 && w>=gf.w2*2 && h>=gf.h2*2){


			gf.K = ++gf.K % gf.images.length;


			with(gf.id){


				i1.src = i2.src;


				i2.src = gf.images[gf.K].src;


				gf.text(title, gf.images[gf.K].title);


				gf.text(legend, gf.images[gf.K].alt);


			}


			gf.origin = 0;


			gf.over = false;


			w = 0;


			h = 0;


			gf.move(0,0,0,0);


		}


		/* text fade in/out */


		var c = Math.round(((h*w)/(gf.h2*2*gf.w2*2))*255);


		gf.fade(gf.id.title, c);


		gf.fade(gf.id.legend, c);


	}


	/* on load */


	this.init = function(){


		resize();


		with(gf.id){


			i1.src = gf.images[gf.K].src;


			gf.text(title, gf.images[gf.K].title);


			gf.text(legend, gf.images[gf.K].alt);


			i1.style.visibility = i2.style.visibility = "visible";


			i2.src = gf.images[++gf.K].src;


			gf.text(title, gf.images[gf.K].title);


			gf.text(legend, gf.images[gf.K].alt);


			gf.fade(title, 0);


			gf.fade(legend, 0);


		}


	}


	/* mouse move */


	this.movemouse = function(e){


		/* source/target of the event */


		var o = (e.target)?e.target:((e.srcElement)?e.srcElement:null);


		/* over is image */


		if(o == gf.id.i1){


			/* offset calculation */


			var o2 = o.offsetParent;


			gf.oL  = o.offsetLeft+o2.offsetLeft+o2.offsetParent.offsetLeft;


			gf.oT  = o.offsetTop+o2.offsetTop+o2.offsetParent.offsetTop;


			gf.xm  = xm-gf.oL;


			gf.ym  = ym-gf.oT;


			/* determine origin */


			if(!gf.over){


				if(gf.xm<gf.w2){


					if(gf.ym<gf.h2)gf.origin=1; else gf.origin=2;


				} else {


					if(gf.ym<gf.h2)gf.origin=4; else gf.origin=3;


				}


				gf.over=true;


			}


		} else {


			/* mouse is out */


			gf.xm = xm-gf.oL;


			gf.ym = ym-gf.oT;


		}


		/* move image */


		switch(gf.origin) {


			case 1:


				gf.move(-gf.w2,-gf.h2,gf.xm,gf.ym);


				break;


			case 2:


				gf.move(-gf.w2,Math.max(-gf.h2,-gf.h2+gf.ym),gf.xm,gf.h2*2-gf.ym);


				break;


			case 3:


				gf.move(Math.max(-gf.w2,-gf.w2+gf.xm),Math.max(-gf.h2,-gf.h2+gf.ym),gf.w2*2-gf.xm,gf.h2*2-gf.ym);


				break;


			case 4:


				gf.move(Math.max(-gf.w2,-gf.w2+gf.xm),-gf.h2,gf.w2*2-gf.xm,gf.ym);


				break;


		}	


	}


}





function resize(){


	gf.w2 = gf.id.i1.offsetParent.offsetWidth/2;


	gf.h2 = gf.id.i1.offsetParent.offsetHeight/2;


	gf.id.i1.style.width  = gf.id.i2.style.width  = (gf.w2*2)+"px";


	gf.id.i1.style.height = gf.id.i2.style.height = (gf.h2*2)+"px";


}


onresize = resize;





onload = function(){


	/* instantiation */


	gf = new gf();


	gf.init();


	/* mouse move event */


	document.onmousemove = function(e){


		if(window.event) e=window.event;


		xm = (e.x || e.clientX);


		ym = (e.y || e.clientY);


		gf.movemouse(e);


	}


}