var pact = false,
		aact = false,
		oact = false;

$.fn.popup = function(){
	return $(this).each(function(){
	
		var pset = $(this);

		if(pact !== false){
			pact.fadeOut('fast',function(){
				pset.fadeIn('fast',function(){
					pact = pset;	
				});
			});
		}
		else {
				pset.fadeIn('fast',function(){
					pact = pset;	
				});
		}
	});
}

$.fn.popout = function(){
	return $(this).each(function(){
	
		var pout = $(this);

		pout.fadeOut('fast',function(){
			pact = false;	
		});
	});
}

$.fn.cShow = function(){
	return $(this).each(function(){
		$(this).stop(true, true).delay(200).fadeIn(400);
	});
}

$.fn.cHide = function(){
	return $(this).each(function(){
		$(this).stop(true, true).delay(200).fadeOut(400);
	});
}


$(document).ready(function(){
	var cont = $('div.karte'),
			karte = $('#karte-deutschland'),
	    offs = karte.position(),
	    map  = $('#map-deutschland'),
	    area =  map.find('area'),
	    over = $('#laender-auswahl').find('ul.hide-subelements > li a');

	if(area.length > 0){
		
		cont.css('position','relative');
		map.css('position','absolute');
		map.css('z-index','800');		
		area.css('position','absolute');
		area.css('z-index','700');		
		
		karte.data('default',karte.attr('src'));
		
		area.each(function(){
			var ref = $(this),
					idf = ref.attr('href').replace('#',''),
					src = ref.attr('rel'),
					rel = $('#laender-auswahl').find('ul.hide-subelements > li a#link-' + idf);

			
			if(rel.length < 1){
				rel = $('#laender-auswahl').find('ul.hide-subelements > li a#link-andere');
				idf = 'andere';
				src = andere;
			}
			
			if($('#card-' + idf).length < 1){
			
				var add = $('<img />');
				
				add.attr('id','card-' + idf);
				add.attr('usemap','#map-deutschland');				
				add.attr('src',src);
				add.css('display','none');
				add.css('position','absolute');
				add.css('top',offs.top);
				add.css('left',offs.left);
				add.css('z-index','500');

				cont.append(add);
			}

			var card = $('#card-' + idf);
			
			ref.bind('setdefault',function(){
					karte.attr('src',karte.data('default'));
					
					card.css('display','block');
					$(this).trigger('mouseout');
					
					if(aact){
						aact = false;
					}
			});
			
			
			ref.bind('setactive',function(){
				if(aact != $(this)){

					karte.attr('src',card.attr('src'));
					aact = $(this);
				}					
			});
			
			ref.click(function(){
					if(aact != $(this)){
						rel.trigger('click');
					}
			});			
			
			ref.mouseover(function(e){

				if(aact != $(this)){
					if(!oact || oact.attr('id') != rel.attr('id')){
						rel.addClass('hover');
					}
					
					card.cShow();
					
				}
			}); 
			
			ref.mouseout(function(){

				if(!oact || oact.attr('id') != rel.attr('id')){
					rel.removeClass('hover');
				}
				
				card.cHide();
			}); 					

		});
	}
	
	if(over.length > 0){
		over.each(function(){
			var ref = $(this),
					rel = $('#map-deutschland').find('area#area-' + ref.attr('href').replace('#',''));
			
			ref.click(function(){
				if(oact != $(this)){

					if(oact && oact != $(this)){
						oact.removeClass('hover');
					}
					
					oact = $(this);
					
					$(this).addClass('hover');
					
					var popup = $(this).next('.popup'),
							popclose = popup.find('a.close');
							
					popup.popup();
					popclose.click(function(){
						popup.popout();
						aact = oact = false;
						ref.removeClass('hover');
						rel.trigger('setdefault');
					});
					
					
					rel.trigger('setactive');
				}
			});
			
			ref.mouseover(function(){
				rel.trigger('mouseover');
			}); 
			
			ref.mouseout(function(){
				rel.trigger('mouseout');
			}); 
		});
	}
});