$(document).ready(function(){
	resizeWindow();
	var resizeTimer = null;
	$(window).bind('resize', function(){
		if (resizeTimer){
			clearTimeout(resizeTimer);
		}
		resizeTimer = setTimeout(resizeWindow, 100);
	});
	//
	var cols = 4;
	var rows = 4;
	var size = 128;
	var egonschiele = $('.egon');
	for(var i = 0; i < cols; i++){
		for(var j = 0; j < rows; j++){
			var id = i + j * cols;
			egonschiele.append('<div class="schiele' + id + '"></div>');
			$('.schiele'+id).css({'position':'absolute', 'backgroundImage':'url(images/poof.png)', 'width':size + 'px', 'height':size + 'px', 'left':size * i +'px', 'top':size * j + 'px'});
			var poof = $('.schiele'+id);
			poof.hover(
				function(){
					$(this).toggle();
				},
				function(){
					$(this).toggle();	
				}	
			);
			setInterval("movePoof('.schiele" + id + "')", 1000);
		}
	}
});
//
var it = 0;
function movePoof(obj, id){
	$(obj).css('backgroundPosition', 'left -' + 128 * it + 'px');
	it++;
}
function resizeWindow(){
	w = $(document).width();
	h = $(document).height();
	objw = $('.egon').innerWidth();
	objh = $('.egon').height();
	posx = (w / 2) - (objw / 2);
	posy = (h / 2) - (objh / 2);
	$('.egon').css({'position':'absolute', 'top':posy + 'px', 'left':posx + 'px'});
}