// JavaScript Document

$(function() {
	
	// image déplaçables
	$( '#images li' ).hide();
	$("#images li").draggable({
		start: function(event, ui) {
			if ($.browser.msie){
				$(this).css("background-image","url(/images/ombre.gif)")
			}
		},
		stop: function(event, ui) {
			saveAll();
		}
	});
	$( '#images li' ).show();
	
	// initialisation du z-index
	var zmax = 100;
	$('#images li' ).each(function() {
		$( this ).css( 'zIndex',zmax++);
	 });

	// changement du z-index au survol
	var zmax = 0;
	$( '#images li' ).mouseover( function () {
		zmax = 0;
		$('#images li' ).each(function() {
			var cur =  $( this ).css( 'zIndex');
			zmax = cur > zmax ? cur : zmax;   // use 'cur' here instead of $( this ).css( 'zIndex')
		});
		$( this ).css( 'zIndex', zmax*1+1 );
		 
		reorder(); 
		saveAll();
		return false;
	});
	
	// enregistrement de la position de l'image qui a été survolée
	$( '#images li' ).mouseout( function () {
		saveAll();
	});
	
	// chargement de la position sauvée par les cookies
	loadAll();
	
	function centerVertivaly(){
/*		var h0=580;
		var h=$(window).height();
		var top=(h-h0)/2;
		if (top<0){
			top=0;
		}
		$("#fond").css("margin-top",top);
		$("#page").css("height",h0+top-10);/**/
	}
	function cropHorizontaly(){
		var w0=980;
		var ww=$(window).width();
		var w=w0+(ww-w0)/2;
		if (w<w0){
			w=w0;
		}/**/
		$("#page").css("width",w);
	}
	/*
	$(window).resize(function(){
		centerVertivaly();
		cropHorizontaly();
	});
	
	centerVertivaly();
	if (!ie6){
        // do ie6 stuff
		cropHorizontaly();
	}/**/
	 
});/**/

function saveIt(id){
	var left=$("#"+id).position().left;
	var top=$("#"+id).position().top;
	var z=$("#"+id).css('z-index');
	$.cookie(page+'-'+id+'-left', left, {expires: 365});
	$.cookie(page+'-'+id+'-top', top, {expires: 365});
	$.cookie(page+'-'+id+'-z', z, {expires: 365});/**/
}
function clearIt(id){
	$.cookie(page+'-'+id+'-left', null);
	$.cookie(page+'-'+id+'-top', null);
	$.cookie(page+'-'+id+'-z', null);/**/
}
function loadIt(id){
	var left = $.cookie(page+'-'+id+'-left');
	var top = $.cookie(page+'-'+id+'-top');
	var z = $.cookie(page+'-'+id+'-z');
	if (left!=null && top!=null && z!=null){
		$("#"+id).animate({top: top+"px",left: left+"px"},1);
		$("#"+id).css('z-index' , z);
	}
	$("#"+id).show();
}
function loadAll(){
	$('#images li' ).each(function() {
		loadIt( $(this).attr('id') );
	});
}
function saveAll(){
	$('#images li' ).each(function() {
		saveIt( $(this).attr('id') );
	});
}
function clearAll(){
	$('#images li' ).each(function() {
		clearIt( $(this).attr('id') );
	});
	location.reload(true);
}
function reorder(){
	// crée un tableau avec z comme index et contenant une référence à un objet DOM
	var tab=new Array();
	var cp=0;
	$('#images li' ).each(function() {
		var z=$(this).css('z-index');
		tab[z]=$(this);
		cp++;
	});
	
	var zMin=100;
	var num=0;
	var antibug=0;
	while (num<cp){
		var elt=tab[num];
		if (elt==null){
			tab.shift();
		} else {
			tab[num].css('z-index',zMin+num);
			num++;
		}
		antibug++;
		if (antibug>200){
			break;
		}
	}
}