/*
Herr Strauch - Friseurmeister / 
Frau Strauch und 
Conny - Friseurmeister,Diplomé Coloriste,Diplomé Createur / 
Domenik- Friseurmeister/ 
Jasmin- Diplomé Coloriste / 
Hülya Color Expert / 
Nadja und 
Nadine = Alles Top Stylisten
Myriam und 
Efti sind Stylisten 
Isabell, 
Kathy Assistent
*/

YUI({base:"js/yui3/", timeout: 10000}).use('node','overlay', function(Y) { //'io-form', 'cookie', 'anim', 'json-parse'
	MapOverlay = function() {
		
		var map = "personal";
		var xy;
		
		initArea = function(area) {
			var info = area.get('alt').split(';');
			var name = info[0];
			var spec = info[1];
//			console.log(area.get('alt'));
			var img = area.get('href');
			img = '<img src="' + img + '" alt="' + name + '">';
			img = '<div class="shadow5_nh"><div class="shadow4_nh"><div class="shadow3_nh"><div class="shadow2_nh"><div class="shadow_nh">'+
			img+'</div></div></div></div></div>';
			var overlay = new Y.Overlay({
			    bodyContent:img,
			    footerContent:"<p><strong>"+name+"</strong><br><small>"+spec+"</small></p>",
			    xy:xy,
			    visible:false
			});
			overlay.render("#main2");
			Y.on('mouseover', function() { overlay.show(); }, area);
			Y.on('mouseout', function() { overlay.hide(); }, area);
		};

		function _init() {
			xy = Y.one('#content').getXY();
			xy[0] += parseInt(Y.one('#content').getComputedStyle('width')) + 130;
			xy[1] += 80;
			Y.all('map[name="'+map+'"] area').each(initArea);
		};
		
		_init();
		
	};
	
	Y.on('domready', function() { new MapOverlay(); });
});