/*
 * Es wird jQuery vorausgesetzt
 */

$(document).ready(function() {
	
	
	$('#menue')	.append('<div id="menueStartseite">startseite</div>')
	.append('<div id="menueBand">die band</div>')
	.append('<div id="menueMedia">media</div>')
	.append('<div id="menueGB">gästebuch</div>')
	.append('<div id="menueAuftritte">auftritte & presse</div>')
	.append('<div id="menueKontakt">kontakt</div>');
	
	$('#menueStartseite').click(function(){
		window.location = "index.html";
	});
	$('#menueMedia').click(function(){
		window.location = "media.html";
	});
	$('#menueAuftritte').click(function(){
		window.location = "auftritte.html";
	});
	$('#menueGB').click(function(){
		window.location = "gaestebuch.php";
	});
	$('#menueKontakt').click(function(){
		window.location = "kontakt.html";
	});
	

	/*
	 * Jetzt werden die Personen-Minibilder geladen
	 */

	$('#headerEinblendung')
	.append('<div><img src="img/persos/maria_small.jpg" alt=""/></div>')
	.append('<div><img src="img/persos/nina_small.jpg" alt=""/></div>')
	.append('<div><img src="img/persos/marcel_small.jpg" alt=""/></div>')
	.append('<div><img src="img/persos/colja_small.jpg" alt=""/></div>')
	.append('<div><img src="img/persos/jannis_small.jpg" alt=""/></div>')
	.append('<div><img src="img/persos/carl_small.jpg" alt=""/></div>');
	
		$('#headerEinblendung div:eq(0)').click(function(){
			window.location = "band.html?id=1";
		});
		$('#headerEinblendung div:eq(1)').click(function(){
			window.location = "band.html?id=2";
		});
		$('#headerEinblendung div:eq(2)').click(function(){
			window.location = "band.html?id=3";
		});
		$('#headerEinblendung div:eq(3)').click(function(){
			window.location = "band.html?id=4";
		});
		$('#headerEinblendung div:eq(4)').click(function(){
			window.location = "band.html?id=5";
		});
		$('#headerEinblendung div:eq(5)').click(function(){
			window.location = "band.html?id=6";
		});
		
	/*
	 * Den Menüeinträgen werden Mouseover zugewiesen
	 */

	$.each($('#menue div'), function() {
		$(this).mouseover(function() {
			$(this).css({ cursor : 'pointer'})
			.animate({
				color : '#613813',
			}, 300);
		});
	});
	$.each($('#menue div'), function() {
		$(this).mouseout(function() {
			$(this).animate({
				color : '#f8f8f8',
			}, 300);
		});
	});
	/* Bei einem Klick auf "Die Band" werden Bilder der Bandmitglieder angezeigt */
	/* Boolean, ob eines der Bilder mindestens EINMAL gemouseovert wurde */
	var isSelected = false;
	
	/* Bilder werden mit Mouseover bestückt */
	$.each($('#headerEinblendung div'), function() {
		$(this).hover(function(){
			isSelected = true;
			$('#headerEinblendung div').not(this).fadeTo(200, 0.4);
		},function(){
			$('#headerEinblendung div').not(this).fadeTo(100, 1);
		});
	});
	/* Beim Klick auf Die Band wird der Hintergrund verdunkelt und dann die Porträts gezeigt */
	$('#menueBand').click(function() {
		$('#headerOverlay').animate({
			backgroundColor : '#000000',
			opacity : 0.3
		}, 500, function() {
			$.each($('#headerEinblendung div'), function() {
				$(this).css({ visibility : 'visible', opacity : 1}).show('clip', 500);
			});
		});
	});

	/* Wenn Maus in den Content gezogen wird, verschwinden die Porträts wieder */
	$('#content').mouseover(function(){
		if(isSelected){
			$.each($('#headerEinblendung div'), function() {
				$(this).fadeTo(200, 0).css({ visibility : 'hidden' });
			});
			isSelected = false;
			$('#headerOverlay').animate({
				backgroundColor : '#000000',
				opacity : 0
			}, 500).end();
		}
	});
	
});