$(document).ready(function() {

	$('#fader').hover(function() {
		$(this).stop();
		$(this).animate({bottom: 0, height: 400}, 600, 'swing');
	}, function () {
		$(this).stop();
		$(this).animate({bottom: 0, height: 110}, 800, 'easeOutBounce');
	});
		
	var timecounter = 1000;
	var idcounter = 1;
	
	if( $('.imagemap').length > 0 ) {
	
		imagemap = $('.imagemap').val();
	
		boxArray = imagemap.split(',');
		while(box = boxArray.shift()) {
	
			boxdata = box.split('||');

			$('#template_imagebild').append('<div class="box" id="box_'+idcounter+'"></div>');
			$('#box_'+idcounter).append('<a class="background" id="background_'+idcounter+'" href="'+boxdata[3]+'"></a>');
			$('#box_'+idcounter).css('top', boxdata[0]+'px');
			$('#box_'+idcounter).css('left', boxdata[1]+'px');
			$('#background_'+idcounter).append('<table class="boxtable"><tr><td>'+boxdata[2]+'</td></tr></table>');
	
			setTimeout('boxLoad('+idcounter+')',timecounter);
			
			idcounter++;
			timecounter = timecounter + 500;
			
		}
		
	}

	$('.box').hover(function(){
		
		var boxId = $(this).attr('id').replace('box_', '');
		$('#background_'+boxId).stop().animate({opacity: 1.0},400,'easeOutBounce');
		
    },function(){
    	var boxId = $(this).attr('id').replace('box_', '');
    	$('#background_'+boxId).stop().animate({opacity: 0.0},400,'swing');
    });

	
});	
	
function boxLoad (boxId) {

	$('#box_'+boxId).css('display', 'block');
	$('#background_'+boxId).animate({opacity: 0.0},0);
	$('#background_'+boxId).animate({opacity: 1.0},450,'swing');
	$('#background_'+boxId).animate({opacity: 0.0},450);
	
}