// do animation (wird insbesondere benötigt um IE6 auszuklammern)
window.doresize = true;


$(document).ready(function() {
	// Animationszeit
	window.anitime = 300;
	// Objekt fuer Daten (Groessen von Shriften und Bildern, die beim Resize umgerechnet werden)
	window.pos = new Object();
	// Initial resize
	$('#background img').load(function(e){
		resize();
	});
	resize();
	// Resize on window resize
	$(window).resize(function() {
		resize();
	});



	// Bubble animation with png		// DEPRECATED
	window.deltaWidth=200;
	window.deltaHeight=370;
	window.frametime=40
	window.posw=0;
	window.posh=0;
	if(false) {
		window.anim = window.setInterval(function(){
			window.posw += window.deltaWidth;
			$('#strip').css('left','-'+ window.posw +'px');
			if (window.posw >= 1400) {
				window.posw = 0;
				window.posh += window.deltaHeight;
				$('#strip').css('top','-'+ window.posh +'px');
				if (window.posh >= 2590) {
					window.posh = 0;
				}
			}
		},window.frametime);
	}


	// Berlin Hover in 
	var active; // timeout-var
	window.actbool = false; // zeigt an, ob ein timeout laeuft.
	var mouseoutdelay = 0;
	$('.hover_berlin').hover(function() {
		if( actbool ) {
			window.clearTimeout(active);
		} else {
			$(this).css('width','50%').css('height','100%');
			$('.hover_hamburg').css('width','0');
			resizeall( window.pos["hbl"], window.pos["hhs"], anitime );
			bubbleshow( window.pos["hbl"][5], window.pos["hbl"][6], anitime );
		}
	// Berlin Hover out
	}, function() {
		window.actbool = true;
		var str = "$('.hover_berlin').css('width','33%').css('height','50%'); $('.hover_hamburg').css('width','33%').css('height','50%');resizeall( window.pos['hbm'], window.pos['hhm'], anitime );bubblehide( 100 ); window.actbool = false;";
		active = window.setTimeout( str, mouseoutdelay );
	});


	// Hamburg Hover in
	$('.hover_hamburg').hover(function() {
		if( actbool ) {
			window.clearTimeout(active);
		} else {
			$(this).css('width','50%').css('height','100%');
			$('.hover_berlin').css('width','0');
			resizeall( window.pos["hbs"], window.pos["hhl"], anitime );
			bubbleshow( window.pos["hhl"][5], window.pos["hhl"][6], anitime );
		}
	// Berlin Hover out
	}, function() {
		window.actbool = true;
		var str = "$('.hover_hamburg').css('width','33%').css('height','50%'); $('.hover_berlin').css('width','33%').css('height','50%');resizeall( window.pos['hbm'], window.pos['hhm'], anitime );bubblehide( 100 ); window.actbool = false;";
		active = window.setTimeout( str, mouseoutdelay );
	});
	
});


/**
 * Ansicht modifizieren; Alle Parameter werden neu gesetzt.
 * hb Bildparameter Berlin-Header
 * hh Bildparameter Hamburg-Header
 */
function resizeall( hb, hh, anitime  ) {
	if(window.doresize) {
		$('img#berlin').animate({width: hb[3]+'px'},anitime);
		
		$('img#hamburg').animate({width: hh[3]+'px'},anitime);
		
		
	}
}

/**
 * Comment
 */
function bubbleshow( xparm, xpos, anitime ) {
    window.clearTimeout( window.bubtime );
	$('#pngani').css( 'left', '' ).css( 'right', '' );
	var str = "$('#pngani').css('display','block').css( '" + xparm + "', '" + xpos + "px' ).animate({opacity: 1}, anitime);";
    window.bubtime = window.setTimeout( str, anitime );
}
function bubblehide( anitime ) {
	window.clearTimeout( window.bubtime );
	$('#pngani').animate({opacity: 0}, anitime);
	var str = "$('#pngani').css('display','none');";
	window.bubtime = window.setTimeout( str, anitime );
}

/**
 * Resize BG and arenas on browser window resize
 */
function resize() {
	// Detect viewport sizes
	var width = $(window).width();
	var height = $(window).height();

	// Parameter fuer Header neu berechnen
	var scale = width / 1427;

	// Schriftzug Berlin
	window.pos["hbm"] =  new Array('','',Math.round(318 * scale));
	window.pos["hbl"] =  new Array('','',Math.round(424 * scale));
	window.pos["hbs"] =  new Array('','',Math.round(255 * scale));
	// Schriftzug Hamburg
	window.pos["hhm"] =  new Array('','',Math.round(395 * scale));
	window.pos["hhl"] =  new Array('','',Math.round(477 * scale));
	window.pos["hhs"] =  new Array('','',Math.round(320 * scale));

	// BG Groesse ausrichten
	// Fuer Layer und Bild die Hoehe setzen
	$('#background img,#background').height(height);
	
	
	// Linksversatz des Bg_bildes berechnen. Haelfte von Viewport-Breite minus Bildbreite (Ergebnis immer negativ, weil Bg wirklich breit ist)
	var diff = width - Math.round($('#background img').width());
	var halfdiff = Math.round(diff/2);
	// Hintergrund verschieben.
	$('#background img').css('left',halfdiff+'px');
	// $('#background').width(width-halfdiff);

	// aspect ratio w510 / h495

	// breite Bild =
	window.imgwidth = width;

	if( Math.round( width / 2 / 1.03 ) > height ) {
		window.imgwidth = Math.round( height * 1.0303 * 2 );
	}
	// Bildgröße der statischen Bubbles an die Stadions angleichen.
	$('#strip img').css('width', Math.round(window.imgwidth * 0.135)+'px' );

	// B-Arena size
	window.pos["hbm"][3] = Math.round(window.imgwidth*0.377);
	window.pos["hbl"][3] = Math.round(window.imgwidth*0.5);
	window.pos["hbs"][3] = Math.round(window.imgwidth*0.303);

	// HH-Arena size
	window.pos["hhm"][3] = Math.round(window.imgwidth*0.377);
	window.pos["hhl"][3] = Math.round(window.imgwidth*0.5);
	window.pos["hhs"][3] = Math.round(window.imgwidth*0.303);

	// BubbleShow Parameters alle deaktivieren, die keine Bubbles anzeigen
	window.pos["hhm"][4] = false;
	window.pos["hhs"][4] = false;
	window.pos["hbm"][4] = false;
	window.pos["hbs"][4] = false;



	// Parameter fuer Bubbles
	// Bildhoehe (ratio of natural arena-img-size = 586x713)
	window.bildh = Math.round(window.imgwidth*0.5*586/713);
	// Filmhoehe = Screenhoehe - (Bildhoehe * 0.34)
	window.bubh = Math.round(height - (window.bildh * 0.31));
	// Filmbreite (ratio of natural flash-film-size = 370x220)
	window.bubw = Math.round(window.bubh / 370 * 220);
	// Film (Bubbleimg-Parameter) setzen 
	$('#pngani').css('width', window.bubw+'px').css('height', window.bubh+'px');

	//
	window.pos["hbl"][4] = true;
	window.pos["hbl"][5] = 'left';
	// Film-position-x-Berlin = ((Screenbreite * 0.5) * 0.86 ) - (Filmbreite * 0.5)
	window.pos["hbl"][6] = Math.round((window.imgwidth * 0.5 * 0.88) - (window.bubw * 0.5));
	
	window.pos["hhl"][4] = true;
	window.pos["hhl"][5] = 'right';
	// Film-position-x-Hamburg = ((Screenbreite * 0.5) * 0.78 ) - (Filmbreite * 0.5)
	window.pos["hhl"][6] =  Math.round((window.imgwidth * 0.5 * 0.825) - (window.bubw * 0.5));


	// Finaly call the 'do all function'.
	resizeall( window.pos["hbm"], window.pos["hhm"],0  );
}