// JavaScript Document
// Funktionen für das Diagnose Image map
// Marcellus vom 16.11.2010
//
$(document).ready(function()
{
	/* -------------------------------------------------------------------------------------------- */
	/* Hier sind alle Aktionen der Navigation */
	/* -------------------------------------------------------------------------------------------- */
	/* Die Positionen des Hintergrundbildes */
	ms_bgPosArray = new Array(0, -312, -624);
	
	$('#ms_diag_navigation ul li').hover(function() {
		/* Wenn keine Klasse vorhanden, Aktionen durchführen und Balken umfärben */
		if ($(this).hasClass('')) {
			$(this).css('border-top', '6px solid #f29222');
		}
		/* beim Rollout wieder blau färben */
	}, function() {
		if ($(this).hasClass('')) {
			$(this).css('border-top', '6px solid #1f3179');
		}
	});
	
	$('#ms_diag_navigation ul li').click(function() {
		/* gilt nur für den aktiven Button, Klasse entfernen danach Button auf Ausgangsposition */
		if ($('#ms_diag_navigation ul li').hasClass('ms_aktiv')) {
			$('#ms_diag_navigation ul li').css('border-top', '6px solid #1f3179')
				.removeClass('ms_aktiv');
		}
		/* Den angeklickten Button umfärben und auf aktiv setzen */
		$(this).addClass('ms_aktiv')
			.css('border-top', '6px solid #f29222');
		/* Alle Punkte unsichtbar machen */ 
		$('.ms_punkte').css('display', 'none');
		$('.ms_diag_linkfenster').css('display', 'none');
		
		/* Die Nummern des Buttons und der Punkteebene festlegen */
		var z = $(this).index();
		var childNr = z+1;
		var ms_bgPos = ms_bgPosArray[z];
		
		/* Dies ist der Hack für den IE, der mit "background-position" nix anfangen kann */
		var ms_ieHack = $('#ms_diag_hg').css('background-position');  
		/* nach Verschiebeanimation die zugehörigen Punkte wieder sichtbar machen */
		 if( typeof ms_ieHack === 'undefined' || ms_ieHack == null )// if( !$.support.cssFloat)
		{
			//$('#ms_diag_hg').animate({'background-position-x': ms_bgPos+'px'}, 1500, "linear", function(){
			$('#ms_diag_hg').animate({backgroundPositionX: ms_bgPos+'px'}, 500, "linear", function(){
				$('.ms_diag_zeiger_aktiv').css('background', 'url(images/blaupunkt.png) no-repeat')
					.removeClass('ms_diag_zeiger_aktiv').addClass('ms_diag_zeiger');
				$('.ms_diag_zeiger').css('display', 'block');
				$('.ms_punkte:nth-child('+childNr+')').css('display', 'block');
			;});
		}
		else
		{
			$('#ms_diag_hg').animate({backgroundPosition: ms_bgPos+'px'}, 500, "linear", function(){
				$('.ms_diag_zeiger_aktiv').css('background', 'url(images/blaupunkt.png) no-repeat')
					.removeClass('ms_diag_zeiger_aktiv').addClass('ms_diag_zeiger');
				$('.ms_diag_zeiger').css('display', 'block');
				$('.ms_punkte:nth-child('+childNr+')').css('display', 'block');
			;});
		}
	});
	/* -------------------------------------------------------------------------------------------- */
	/* Hier sind alle Aktionen der Punkte */
	/* -------------------------------------------------------------------------------------------- */
	$('.ms_diag_zeiger').hover(function() {	
		/* Wenn keine Klasse vorhanden, Aktionen durchführen und Punkt austauschen */
		if ($(this).hasClass('ms_diag_zeiger')) {
			$(this).css('background', 'url(images/gelbpunkt.png) no-repeat');
		}
		/* beim Rollout wieder rückgängig */
	}, function() {
		if ($(this).hasClass('ms_diag_zeiger')) {
			$(this).css('background', 'url(images/blaupunkt.png) no-repeat');
		}
	});
	
	$('.ms_diag_zeiger').click(function() {
		/* Nummern des Einzelpunktes und des Punktbereichs festlegen */
		var einzel_punkt = $(this).index();
		var punkt_bereich = $(this).parent().index();
		/*	console.log("einzel_punkt= "+einzel_punkt);
		console.log("punkt_bereich= "+punkt_bereich);*/
		
		/* Klasse des angeklickten Button ändern, alle anderen verbergen*/
		$(this).removeClass('ms_diag_zeiger')
			.addClass('ms_diag_zeiger_aktiv');
		$('.ms_diag_zeiger').css('display', 'none');
		
		/* Knotennamen mit den zugehörigen Linkfenstern festlegen */
		var knoten_name = new Object();
		if(punkt_bereich == 0){
			knoten_name = $('#ms_diag_erwachsene_links');
		}else if(punkt_bereich == 1){
			knoten_name = $('#ms_diag_kind_links');
		}else if(punkt_bereich == 2){
			knoten_name = $('#ms_diag_baby_links');
		}
		/*console.log(knoten_name);*/
		
		/* Dazugehöriges Linkfenster sichtbar machen */
		/*console.log($('#ms_diag_container').children('#ms_diag_popup').children(knoten_name+':eq('+punkt_bereich+')').children('.ms_diag_linkfenster:eq('+einzel_punkt+')'));*/
		$('#ms_diag_container')
			.children('#ms_diag_popup')
			.children(knoten_name+':eq('+punkt_bereich+')')
			.children('.ms_diag_linkfenster:eq('+einzel_punkt+')')
			.css('display', 'block');
	});
	/* -------------------------------------------------------------------------------------------- */
	/* Hier sind alle Aktionen des Linkfensters */
	/* -------------------------------------------------------------------------------------------- */
	$('.ms_diag_close').click(function() {
		/* Bei Klick auf close linkfenster unichtbar machen */
		$('.ms_diag_linkfenster').css('display', 'none');
		
		/* aktiven Button zurücksetzen, alle Button sichtbar machen */
		$('.ms_diag_zeiger_aktiv').css('background', 'url(images/blaupunkt.png) no-repeat')
			.removeClass('ms_diag_zeiger_aktiv')
			.addClass('ms_diag_zeiger');
		$('.ms_diag_zeiger').css('display', 'block');
	});
}
)