var Index = {
    NUM_RECENT: 20,
    def : [],
    init : function() {
	$.ajax({
		type:'post',
		url:'/api/illustration/retrieve_all',
		dataType:'json',
		success: function(ret) {
		    for(var i=0;i<Math.min(Index.NUM_RECENT,ret.length);i++){
			Index.def.push(ret[i]);
		    }
		    $('#container').css({position:'absolute',zIndex:101});
		    $(document.body).append('<div id="cover"></div>');
		    $('#cover').css({position:'relative',zIndex:100,overflow:'hidden'});
		    $(window).resize(
			function() {
			   $('#cover').width($(window).width())
				.height($(window).height());
			}).resize();
		    Index.start();
		}});
    },
    cimg:undefined,
    current:-1,
    start : function() {
	Index.current = (Index.current+1)%Index.def.length;
	$('#cover').append('<img id="img-'+Index.current+'" src="">');
	var cimg = $('#img-'+Index.current);
	cimg
	    .css({position:'absolute',opacity:0})
	    .load(
		function() {
		    var ww = $(window).width();
		    var wh = $(window).height();
		    var w = $(this).width();
		    var h = $(this).height();
		    var s= ww/w;
		    if(h*s < wh) s = wh/h;
		    $(this).width(w*s).height(h*s);
		    $(this)
			.css({left:(ww-w*s)/2+'px',top:(wh-h*s)/2+'px'})
			.animate({opacity:1},300);
		    if(Index.cimg) Index.cimg.animate(
			{opacity:0},300,function() {
			    $(this).remove();
			});
		    Index.cimg = cimg;
		    setTimeout(Index.start,4000);
		})
	    .attr('src',Index.def[Index.current].img);
	
    }
};
$(Index.init);