window.onerror = new Function("return true");
var obj = [];
var scr;
var spa;
var img;
var zap;
var W; // screen width
var Wi;
var H; // screen height
var Hi;
var wi;
var hi;
var Sx;
var Sy;
var M; // margin
var xm;
var ym;
var xb = 0;
var yb = 0;
var ob =  - 1;
var cl = false;

var md = false; // mousedown
var move_on = false; //zoom activated
var maincore;
/* show me the way */
var Mvl = 1;
var Mvt = 1;

/* needed in standard mode */
px = function(x)
{
	return Math.round(x) + "px";
}

/* center image  - do not resize for perf. reason */
img_center = function(o)
{
	with(img[o])
	{
		//style.left = px( - (width - Wi) / 2);
		//style.top = px( - (height - Hi) / 2);
		style.left = px(0);
		style.top = px(0);
		//if(obj[o])src=obj[o].src;
	}
}

img_reset = function()
{
    move_on=false;
    for(i=0; i < obj.length; i++)
    {
        img[i].src = obj[i].src;
        obj[i].act = false;
        obj[i].mv = false;
    }
}

//////////////////////////////////////////////////////////
var Nx = 4; //size grid x
var Ny = 4; //size grid y
var Tx = 4; // image width
var Ty = 4; // image height
var Mg = 40; // margin
var SP = 0.8; // speed
//////////////////////////////////////////////////////////

var Nb = 10; // size row x
//////////////////////////////////////////////////////////

function Cobj(o, x, y)
{
	this.o = o;
	//this.src = src;
	this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
	this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
	this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
	this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
	this.l = 0;
	this.t = 0;
	this.w = 0;
	this.h = 0;
	this.s = 0;
	
	this.act = false; // activation du zoom
	
	this.mv = false;
	if(spa[o] != "undefined")
    {
    	this.spa = spa[o].style;
    	this.img = img[o];
    	this.txt = img[o].alt;
    	
        this.txtchapo = spa[o].title;
    	this.imgchapo = img[o].title;

        img[o].alt = "";
    	
    	this.zsrc = cha[o].title;
    	this.src = img[o].src;
    	
    	tmp=new Image();
    	tmp.src=this.zsrc;
    }
    
	/* zooming loop */
	this.zoom = function()
	{
		with(this)
		{
			l += li * s;
			t += ti * s;
			w += wi * s;
			h += hi * s;
			if ((s > 0 && w < Wi) || (s < 0 && w > Sx))
			{
				/* force window.event */
				window.focus();
				/* loop */
				setTimeout("obj[" + o + "].zoom()", 16);
			}
			else
			{
				/* finished */
				mv = false;
				/* set final position */
				if (s > 0)
				{
					l = ix * M + ix * Sx;
					t = iy * M + iy * Sy;
					w = Wi;
					h = Hi;
				}
				else
				{
					l = x * M + x * Sx;
					t = y * M + y * Sy;
					w = Sx;
					h = Sy;
					
					img_center(o);
				}
				//alert("Image "+o);
			}
			
			/* html animation */
			with(spa)
			{
				left = px(l);
				top = px(t);
				width = px(w);
				if(h>0)	height = px(h);
				zIndex = Math.round(w);
			}
		}
	}

	this.click = function()
	{
		with(this)
		{
			/* zooming logic */
			if ( ! mv || cl)
			{
				if (s > 0)
				{
					/*if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)
					{
						s =  - 2;
						mv = true;
						zoom();
						cap.innerHTML = txt;
					}*/
				}
				else
				{
				    //alert("Taille de l'écran" + img.height);
				    //scr.style.height=px(600);
				    //W = parseInt(scr.style.width);
                	H = parseInt(img.height);
                	//M = W / Mg;
                
                	/*Sx = (W - (Nx - 1) * M) / Nx;
                	Sy = (H - (Ny - 1) * M) / Ny;
                    
                	Wi = Tx * Sx + (Tx - 1) * M;
                	Hi = Ty * Sy + (Ty - 1) * M;
                	SP = M * Tx * SP;*/
                	//Sx=1;
                    //Sy=1;
                    Wi = W;
                	Hi = H;
                	//SP = M * Tx * SP;
                	
                	wi = (Wi - Sx) / SP;
                	hi = (Hi - Sy) / SP;
						
					if (cl || ob != o)
					{
						if (ob >= 0)
						{
							with(obj[ob])
							{
								s =  - 2;
								mv = true;
								zoom();
			                    img_center(o);
							}
						}
						ob = o;
						s = 1;
						xb = xm;
						yb = ym;
						mv = true;						

						zoom();					   
        				/*if(maincore.style.minHeight) maincore.style.minHeight = px(H + 500);
                        else */maincore.style.height = px(H + 320 + 80*((obj.length - (obj.length%8))/8));
                        
                        //alert('Taille image : '+imgcha.height);
                        if(imgcha)maincha.style.top = px(H - imgcha.height + 90);
                        else maincha.style.top = px(H + 90);
                        //cap.style.top = px(H + 10);
						cap.innerHTML = txt;
						tch.innerHTML = '<img src="'+imgchapo+'" /><br />'+txtchapo;
                        //alert ("Image "+imgchapo+"\n"+txtchapo);
                        //setTimeout("obj[" + o + "].zoom()", 0);
                        //zoom();
					}
				}
			}
		}
	}
	
	this.move = function()
	{
	    with(this)
	    {
	        if(!mv && s>0)
	        {
	             /* html animation */
			     /*with(spa)
			     {
				     left = px(l);
    				 top = px(t);
    				 width = px(w);
    				 height = px(h);
    				 zIndex = Math.round(w);
    			 }*/
		         with(img)
		         {
		            if(move_on)
                    {
                        var sm = 0;
                        var sl=parseInt(style.left) + 1.8*Math.round(Mvl);
                        
                        if(sl > sm) style.left=px(-sm);
                        else
                        {
                            if(sl > parseInt(w)-parseInt(width))
                            {
    		                  style.left=px(sl);
    		                }
    		                else style.left=px(parseInt(w)-parseInt(width) - sm);
		                }
		                //alert("Left : "+ (sl+parseInt(width)+w));
		                
                        var st=parseInt(style.top) + 1.8*Math.round(Mvt);
                        if(st > 0) style.top=px(-sm);
                        else
                        {
                            if(st > parseInt(h)-parseInt(height))
                            {
    		                  style.top=px(st);
    		                }
    		                else style.top=px(parseInt(h)-parseInt(height) - sm);
		                }
                        //alert("Position actuelle de l'image : " + style.left + "," + style.top +"Taille de l'image : "+width+","+height);
                        //alert("Position actuelle de la souris" + xm + "," + ym);
                    }
                 }
            }
            
        }
    }
    
    this.activate_move = function()
    {
        move_on=!move_on;
        with(this)
        {
            if(!act){img.src = zsrc;act=true;}
            with(img)
            {   
                style.cursor=(move_on)?'move':'crosshair';
                //onmouseout();
                //document.fireEvent('onmousemove', event);
                
                //alert("Image "+zsrc);
            }
        } 
    }
	
	/* hook up events */
	//img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");
	
    thb[o].onclick = new Function("cl=true;img_reset();obj[" + o + "].click();");
	thb[o].onmouseover = new Function("thb[" + o +"].style.cursor = 'pointer';");
	
    img[o].onload = new Function("img_center(" + o + ")");
	img[o].onmousemove = new Function("cl=false;obj[" + o + "].move()");
	//img[o].onclick = new Function("obj[" + o + "].activate_move();");
    
    img[o].onmouseup = new Function("obj[" + o + "].activate_move();");
    //img[o].onmouseover = new Function("obj[" + o + "].activate_move()");
    //img[o].onmouseout = new Function("md=false");
    //img[o].style.cursor = "move";
	
    /* initial display */
	this.zoom();
}

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

/* init */
window.onload=load;
function load()
{
    //alert ("Screen Play");
	/* html elements */
	scr = document.getElementById("screen");
	spa = scr.getElementsByTagName("span");
	img = scr.getElementsByTagName("img");
	
	zap = document.getElementById("zap");
	thb = zap.getElementsByTagName("img");
	cha = zap.getElementsByTagName("span");
	
    cap = document.getElementById("caption");
    tch = document.getElementById("chapo");
    //scr.onmousedown = new Function("md=true");
    //scr.onmouseup = new Function("md=false");
    /*scr.onmouseclick = function()
	{
		cl = true;
		if(ob >= 0 && obj[ob].s > 0) obj[ob].click();
		ob = -1;
	}*/
	
	/* mouseover border */ 
	/*document.getElementById("border").onclick = function()
	{
		cl = true;
		if(ob >= 0 && obj[ob].s > 0) obj[ob].click();
		ob = -1;
	}*/

	/* global variables */
	W = parseInt(scr.style.width);
	H = parseInt(scr.style.height);
	M = W / Mg;

	/*Sx = (W - (Nx - 1) * M) / Nx;
	Sy = (H - (Ny - 1) * M) / Ny;
    
	Wi = Tx * Sx + (Tx - 1) * M;
	Hi = Ty * Sy + (Ty - 1) * M;
	SP = M * Tx * SP;*/
	Sx=1;
    Sy=1;
    Wi = W;
	Hi = H;
	SP = M * Tx * SP;
	
	wi = (Wi - Sx) / SP;
	hi = (Hi - Sy) / SP;
	/* create objects */
	for(i = 0; i < img.length;)
	{
	   obj[i] = new Cobj(i ++, 0, 0);
    }
    /*for (k = 0, i = 0; i < Nx; i ++)
	{
		for (j = 0; j < Ny; j ++)
		{
			obj[k] = new Cobj(k ++, 0, 0);
		}
	}*/
	maincore = document.getElementById("core");
	maincha = document.getElementById("subcha");
	imgcha = document.getElementById("chaimg");
	
	obj[0].click();
}