function updateContent(data)
{
	// set content
	$('#bubble').html(data);
}

$(document).ready( function() {
    $('body').css('font','');
    var width, height;
    // get inner browser width/height
    width = $(window).width();
    height = $(window).height();
	
    // detect browser
    var browser = BrowserDetect.browser;

    // round corners for news block
    $('.navi').corner();
    $('.navi_item').corner('cc:#000').corner('7px').corner('cc:#000;');
    $('.menu_item').css('padding', '5px');
    // center the bubble for SAFARI
    if (browser == "Safari") {
			$('#bubble').center();
			$('#bubble').css('left','25%');
			$('#bubble').css('top','5%');

			}
	else {
	$('#bubble').center();
	}
    // for some browser was needed (ugly test)
	if (width < 400 || height < 400) {
		width = 800;
		height = 600;
	}
	// initialize map
	$("img#mypic").panFullSize(width, height);
	// move it baby
	$('div#panmypic').animate( {backgroundPosition: '(-400px -1000px)'}, 1500);

	// load frontpage
	jQuery.get(base_url+'./static/home.html', updateContent);

	// mouseOVERs and OUTS for navi
	$('.menu_item').mouseover(function() {
		$(this).css('color','#fff');
		$(this).css('background-color','#000');
	});
	$('.menu_item').mouseout(function() {
		$(this).css('background-color','#fff');
		$(this).css('color','#000');
		});
	
	// check mouseclicks on menu and move map
	$('.menu_item').click(function() {
		if (this.id == 'navi_home') {
			$('div#panmypic').animate( {backgroundPosition: '(-400px -1000px)'}, 1500);
			jQuery.get(base_url+'./static/home.html', updateContent);
		 
		}
		else if (this.id == 'navi_concept') {
			$('div#panmypic').animate( {backgroundPosition: '(-2100px -750px)'}, 1500);
			jQuery.get(base_url+'static/concept.html', updateContent);
		}
		else if (this.id == 'navi_video') {
			jQuery.get(base_url+'static/video.html', updateContent);
			$('div#panmypic').animate( {backgroundPosition: '(-4700px -1050px)'}, 1500);
		
		}
		else if (this.id == 'navi_pictures') {
			jQuery.get(base_url+'static/pictures.html', updateContent);
			$('div#panmypic').animate( {backgroundPosition: '(-650px -100px)'}, 1500);
		}
		else if (this.id == 'navi_order') {
			jQuery.get(base_url+'static/order.html', updateContent);
					$('div#panmypic').animate( {backgroundPosition: '(-3650px 0px)'}, 2500);
		}
		else if (this.id == 'navi_emulation') {
			jQuery.get(base_url+'static/emulation.html', updateContent);
					$('div#panmypic').animate( {backgroundPosition: '(-1650px -1300px)'}, 3500);
		}
		else if (this.id == 'navi_download') {
			jQuery.get(base_url+'static/download.html', updateContent);
					$('div#panmypic').animate( {backgroundPosition: '(-50px -900px)'}, 4500);
		}
		else if (this.id == 'navi_contact') {
			 //window.open("http://www.ludic-society.net");
			jQuery.get(base_url+'static/contact.html', updateContent);
					$('div#panmypic').animate( {backgroundPosition: '(-0px -1500px)'}, 2500);
		}
	});    
});

// resize the map if window resize occurs
$(window).bind('resize', function() {

    width = $(window).width();
    height = $(window).height();
    $("img#mypic").panFullSize(width, height);
});