/**
 * global variables
 */
arrRollover = {};
var allowMouseover = true;
var timer;
var flyoutdelay = 1000; // in milliseconds
var activeTabIndex = 0; // default flyouttab, begins at 0

/**
 * helper function getId expects parameter name in the format "string_string"
 */
var getId = function(name){
	return name.substr(name.search(/_.+/)+1);
}

/**
 * function handles flyout fadein and sets the default tab
 */
var showFlyout = function(id,fadespeed){
	if(fadespeed==''){fadespeed = 'slow';}
	$('#overlayLayer')
	.fadeIn(fadespeed)
	.css('top', arrRollover[id][3]+'px').css('left',arrRollover[id][4]+'px');
	$('#flyout_'+id).show();
	selectTab(activeTabIndex,id);
	allowMouseover = false;
}

/**
 * helper function for selecting a flyout tab
 */
var selectTab = function(tabindex,id){
	$('div.content').hide();
	$('.flyout ul li').removeClass('active');
	$('#flyout_'+id+' div.content:eq('+tabindex+')').show();
	$('#flyout_'+id+' ul li:eq('+tabindex+')').addClass('active');
}


$(document).ready(function(){
	
	/**
	 * arrRollover is a hash map, each of which contain an array with image name, top (.area), left (.area), top (overlayLayer), left (overlayLayer)
	 */
	arrRollover['gebietA'] = new Array('Gebiet_A.gif',122,311,260,35);
	
	arrRollover['gebietB'] = new Array('Gebiet_B.gif',196,257,400,100);
	arrRollover['gebietC'] = new Array('Gebiet_C.gif',239,283,40,30);
	arrRollover['gebietD'] = new Array('Gebiet_D.gif',342,35,130,110);
	arrRollover['gebietE'] = new Array('Gebiet_E_01.gif',111,189,300,110);
	arrRollover['gebietF'] = new Array('Gebiet_F_01.gif',174,37,360,110);
	arrRollover['elsass1'] = new Array('elsass.gif',35,30,290,110);
	arrRollover['elsass2'] = new Array('elsass.gif',35,30,290,110);

	/**
	 * loop through the arrRollover and create area divs dynamically
	 */
	for(i in arrRollover){
		$('#content_karte').append('<div class="area" id="area_'+i+'" style="top:'+arrRollover[i][1]+'px; left:'+arrRollover[i][2]+'px;"><img class="areaimg" src="/fileadmin/template/main/ebm09/img/netzkarte/'+arrRollover[i][0]+'" alt=""></div>');
	}

	$('map area').mouseover(function(){
		// check if mouseovers are allowed, so that the user has a chance to click on the flyout
		if(!allowMouseover){
			return;
		}
		 // hide everything to clear the map
		$('.area').hide();
		$('.flyout').hide();
		$('#overlayLayer').hide();
		$('#area_'+$(this).attr('class')).show(); // show only the specific area

		if($('#overlayLayer').css('display')=='none'){
			timer = setTimeout("showFlyout('"+$(this).attr('class')+"','slow')",flyoutdelay);
		}
	});
	
	$('map area').click(function(){
		// check if mouseovers are allowed, so that the user has a chance to click on the flyout
		if(!allowMouseover){
			return;
		}
		 // hide everything to clear the map
		$('.area').hide();
		$('.flyout').hide();
		$('#overlayLayer').hide();
		$('#area_'+$(this).attr('class')).show(); // show only the specific area

		if($('#overlayLayer').css('display')=='none'){ // do this only if there is no flyout currently open
			$('#overlayLayer').appendTo('#content_karte') ;// add flyout to div#content
			showFlyout($(this).attr('class'),'fast');
		}
	});

	$('map area').mouseout(function(){
		clearTimeout(timer);
	});

	$('#map').mouseout(function(){
		$('.area').hide();
		$('.flyout').hide();
		$('#overlayLayer').hide();
	});

	$('#overlayLayer div.closebutton').click(function(){
		$('#overlayLayer').hide();
		$('.area').hide();
		$('.flyout').hide();
		allowMouseover = true;		
	});

$('.flyout ul li').mouseover(function(){
				 $('.content').hide();
		 		 $('.flyout ul li').removeClass('active');
		 		 var page = $(this).attr('class');
		 		 var flyoutid = $(this).parent().parent().attr('id');
		 		
				// alert('#'+flyoutid+' div.'+page);
		 		 $('#'+flyoutid+' div.'+page).show();
		 		 $(this).addClass('active');
		 });
	$('#map_overlay').mouseout(function(){
		clearTimeout(timer);
	});
});