var id;
var refresh_mosaic = Array();
var refresh_id = 0;
var images;
var trou_x = 0;
var trou_y = 0;
var time_base = 800;
var mosaic_refresh_mode = true;

initMosaic = function(id){
    this.id = id;
    this.resize();
    this.loadMosaicInfo(id);
    
    this.images = document.getElementById("mosaic").getElementsByTagName('IMG');
    
    for (i=0 ; i<images.length ; i++){
        if (i<10) id = "0"+i;
        else id = i;
        this.refresh_mosaic[i] = Array(id, images[i].src);
    }
    this.refresh_mosaic = shuffle(this.refresh_mosaic);
    refresh();
    
}

resize = function(){
    this.trou_x = document.getElementById("bouton_chambre").offsetLeft;
    this.trou_y = document.getElementById("bouton_chambre").offsetTop;
    this.setMosaicPos(id);
    t = parseInt(this.trou_x/120)+1
    document.getElementById("fond").style.left = this.trou_x-( (parseInt(this.trou_x/120)+1) * 120)+"px";
}
onresize = resize;

showMosaic = function(type){
    switch (type) {
    	case "haut":
        	if (id>8) id = id-8;
        	else id = id+56;
            moveMosaictoPos(id);
            loadMosaicInfo(id);
        
            break;
    	case "bas":
        	if (id<56)id = id+8;
        	else id = id-56;
            moveMosaictoPos(id);
            loadMosaicInfo(id);        	
            break;
    	case "gauche":
        	if (id%8!=1) id = id-1;
        	else id = id+7;
            moveMosaictoPos(id);
            loadMosaicInfo(id); 	
            break;
    	case "droite":
        	if (id%8!=0) id = id+1;
        	else id = id-7;
            moveMosaictoPos(id);
            loadMosaicInfo(id);  	
            break;
    }
}

loadMosaicInfo = function(id){
    new Ajax.Updater("mosaic_info","/mosaic_info/"+id,{ method: 'get'});
};
        

moveMosaictoPos = function(id){
    //bouton_left = document.getElementById("bouton_chambre").offsetLeft;
    //bouton_top = document.getElementById("bouton_chambre").offsetTop;
    posy = this.trou_y-((Math.floor((id/8)-0.1))*120)-1;
    posx = this.trou_x-(((id-1)%8)*120);
    new Effect.Move('mosaic',{y : posy, x : posx, mode : 'absolute'});
};

setMosaicPos = function(id){
    //bouton_left = document.getElementById("bouton_haut").offsetLeft;
    //bouton_top = document.getElementById("bouton_gauche").offsetTop;
    document.getElementById("mosaic").style.top = this.trou_y-((Math.floor((id/8)-0.1))*120)+"px";
    document.getElementById("mosaic").style.left = this.trou_x-(((id-1)%8)*120)+"px";
};

shuffle = function(o){
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
};

refresh = function (){
    if (mosaic_refresh_mode){
        img_id = refresh_mosaic[refresh_id][0];
        src = refresh_mosaic[refresh_id][1]+"?rand="+Math.random()*100000;
        var imgs = getElementsByClassName("img"+img_id);
        for(var i=0; i<imgs.length; i++){
            imgs[i].src = src;
        }
        this.refresh_id++;
        if (this.refresh_id==64) this.refresh_id=0;
        time = time_base+Math.random()*500;
        //setTimeout(this.refresh, time);
    }
    else{
        //setTimeout(this.refresh, 5000);
    }
    

};

getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}