// JavaScript Document


$(document).ready(function(){
	var w = $('#grid').width();
	var h = $('#grid').height();
	var pw = w/6.0;
	var ph = h/6.0;
	
	var i = 0;
	setInterval(function(){
		if ( i < imgarray.length-1 ){
			i++;
		}else{
			i = 0;
		};
		swapbuffer();
		switchimg(w, h, pw, ph, imgarray[i]);
		
	}, 6000);
});
	
var img = 1;

var swapbuffer = function(){
	$('#grid .under').html('');
	$('.over').children().each(function(){
		$('#grid .under').append($(this));
		
	});
	$('#grid .over').html('');
	
}
var switchimg = function(w, h, pw, ph, img){

	
	for (var i=0; i<=(h-ph); i+=ph){
		for (var j=0; j<=w-pw; j+=pw){
			var id = parseInt(i)+'_'+parseInt(j);
			$('#grid .over').append('<div id="'+id+'" class="gridpanel" ></div>');
			$('.gridpanel').css({width:pw, height:ph});
			$('#'+id).css({'background':'url('+img+')', opacity:0, backgroundPosition:"-"+j+"px -"+i+"px"});
			$('#'+id).animate({opacity:1}, (500+(i*3)+(j*2)));

		}
	};
};