var fixSafariCounter = 0;

productC.prototype.buildVIZmenu = function(vizmenu)
{
	/*
	image map quirks:
	- Image maps only work with # even though XHTML 1.1 DTD doesn't allow # in usemap
	- making an image map a block/relative can make it overlay the image it maps, therefore blocking any clicks
    - id vs name
	  - IE & FF support both name and id
	  - SF only supports name
	- FF bug: Although FF supports imagemap by giving an 'id' or 'name', an hover effect only works if the usermap="" refers to a name
    - SF bug: Safari seems to cache an imagemap... so we generate a new name each time we generate a menu to prevent caching.
	- For some reason our image map doesn't work on IE <8
	- By making the imagemap a visible element overlapping the image we can apply a cursor to the area for FF (doesn't work in IE8) ???
	*/

	var imagemap_supported = !(useragent.isIE && useragent.versionIE < 8);


	var menu = new TabStrip({ id:                'onzeid'
							, prefix:            'prefix'
							, btnclass:          'inactiveTab'
							, btnclass_selected: 'tabActive'
							/*                                ontabselect: function() { alert('old selection: '+menu.prevSelectedImem+"\n"+'new selection '+menu.selectedItem); }
							, onbeforetabclose: function() { alert('tab wordt gesloten'); } */
							});

	var rightcount=0, leftcount=0;

	var menuelement = document.createElement('div');
	menuelement.id = 'verkeerMenu';
	
	fixSafariCounter++;
	menumap_id = 'verkeerMenuMap'+fixSafariCounter;
	
	var menumap = document.createElement('map');
	//menumap.id = menumap_id; // FF needs either 'id' or 'name' to use for usemap=""
	menumap.name = menumap_id; // Although FF supports imagemap by giving an 'id' or 'name', an hover effect only works if the usermap="" refers to a name


	var mapheight = 0;
	
	for(var tabkey in vizmenu)
	{
		var tabspec = vizmenu[tabkey];

		var filename = 'gfx/menu/text/'+tabspec.image

		var tab = document.createElement('div');

		var tab_area = document.createElement('area');
		tab_area.shape = 'poly';
		//tab_area.setAttribute('shape', 'poly');
		//tab_area.setAttribute('nohref', '');
		menumap.appendChild(tab_area);
		//tab_area.href="#test";
		
/*
		if (useragent.isIE && useragent.versionIE < 7)
		{
				var tabImage = document.createElement('div');
//                      tabImage.style.width = "1px";
//                      tabImage.style.height = "1px";
				tabImage.style.zoom = '1'; // to make the filter work
				tabImage.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
																+ filename + "',sizingMethod='image')";
//                      tabImage.style.marginTop = "-30px";
		}
		else
		{
*/

		// afbeelding (met geroteerde tekst) voor over het verkeersbord
		var tabImage = document.createElement('img');
		tabImage.id = 'vizTabItem' + leftcount + 10 * rightcount;
		tabImage.src = filename;
		tab.appendChild(tabImage);
	
		
		if (tabspec.atright)
		{
			var posx = (109 + (-13*rightcount));
			var posy = ( 17 + ( 49*rightcount));
	
			tab.className = 'vizTab vizTabRight';
			tab.style.left = posx+'px';
			tab.style.top  = posy+'px';

			if (posy+79 > mapheight)
				mapheight = posy+79;//+155;
			
			tab_area.coords = posx+','+posy+','+(posx+137)+','+(posy+32)+','+(posx+155)+','+(posy+61)+','+(posx+124)+','+(posy+78)+','+(posx+5)+','+(posy+46)+','+posx+','+(posy+46);
			//tab_area.setAttribute('coords', posx+','+posy+','+(posx+137)+','+(posy+32)+','+(posx+155)+','+(posy+61)+','+(posx+124)+','+(posy+78)+','+(posx+5)+','+(posy+46)+','+posx+','+(posy+46));

			rightcount++;
		}
		else
		{
			var posx = ( -51 + (-13*leftcount));
			var posy = (  -5 + ( 49*leftcount));
	
			tab.className = 'vizTab vizTabLeft';
			tab.style.left = posx+'px';
			tab.style.top  = posy+'px';

			if (posy+79 > mapheight)
				mapheight = posy+79;

			tab_area.coords = (posx+31)+','+(posy+0)+','+(posx+150)+','+(posy+32)+','+(posx+155)+','+(posy+32)+','+(posx+155)+','+(posy+78)+','+(posx+137)+','+(posy+78)+','+(posx+19)+','+(posy+46)+','+posx+','+(posy+17);		
			//tab_area.setAttribute('coords', (posx+31)+','+(posy+0)+','+(posx+150)+','+(posy+32)+','+(posx+155)+','+(posy+32)+','+(posx+155)+','+(posy+78)+','+(posx+137)+','+(posy+78)+','+(posx+19)+','+(posy+46)+','+posx+','+(posy+17));		
			
			tabImage.onload = function() {
					// reposition the image with text so it's centered within the rotated rectangle
					this.style.marginTop  = -this.width/5+8+'px';
			}
			leftcount++;
		}

		if (tabspec.name)
			tab.name = tabspec.name;

		// pass click from imagemap to tab
		tab_area.tabelement = tab;
		tab_area.setAttribute('debug', tabspec.caption);
		tab_area.onclick = function(e) { this.tabelement.onclick(); stopEvent(e); };
		tab_area.onmouseover = function(e) { addClass(this.tabelement, 'hover'); stopEvent(e); };
		tab_area.onmouseout = function(e) { removeClass(this.tabelement, 'hover'); stopEvent(e); };
		
		menu.hookTab( tab, null, tabspec.onselect, tabspec.ondeselect, tabspec.dontkeepfocus );

		menuelement.appendChild(tab);
	}

	if (imagemap_supported)
	{
		var menuimgformap = document.createElement('img');
		menuimgformap.className = 'verkeerMenuMap';
		menuimgformap.src = 'gfx/dummy.gif'; // without picture Firefox won't even think of applying the imagemap?? (or does Firebug ignore it without picture?)

		//menuimgformap.usemap = '#verkeerMenuMap';               //<-- doesn't work (at least not in Firefox)
		//menuimgformap.setAttribute('usemap', 'verkeerMenuMap'); // won't work in FF (needs #)
		menuimgformap.setAttribute('usemap', '#'+menumap_id); //'#verkeerMenuMap');
		//menuimgformap.setAttribute('ismap', '');
			
		menuimgformap.style.height = mapheight+'px';

		// Als de browser het support geef kliks buiten de borden
		// door naar achterliggende elementen
	//	var area_default = document.createElement('area');
	//	area_default.shape = 'default'; // IE doesn't support default
	//	area_default.nohref = 'nohref';
	//	area_default.href = '#';
	//  area_default.onclick = function() { alert('default action'); }
	//	makeElementPassEventsTo(area_default, document.getElementById('verkeerMenu'));
	//	menumap.appendChild(area_default);

		menuelement.appendChild(menumap);
		menuelement.appendChild(menuimgformap);

	//	makeElementPassEventsTo(menuimgformap, document.getElementById('verkeerMenu'));
	}
	
	document.body.replaceChild(menuelement, document.getElementById('verkeerMenu'));
	document.getElementById('verkeerMenuPaal').style.display = 'block';
	
	return menu;
}


productC.prototype.createMainMenu = function()
{
	this.mainmenu = this.buildVIZmenu(
			[/*{        caption:              'productie'
					, onselect:             function() { }
					, ondeselect:   		function() { }
					, atright:              false
					, image:                'productie.png'
					, dontkeepfocus:		true
			 },*/
			 {        caption:              'login'
					, onselect:             function() { product.showLoginDialog(); }
					, ondeselect:   function() { }
					, atright:              false
					, image:                'login.png'
					, dontkeepfocus:		true
			 },
			 {        caption:              'viz'
					, onselect:             function() { product.gotovizwebsite(); }
					, ondeselect:   function()
							{
//                                      product.mainmenu.deselect();
							}
					, atright:              true
					, image:                'viz.png'
			 },
			 {        caption:              'borden'
					, onselect:             function() { product.showTrafficSignsQ(); }
					, ondeselect:   function() { }
					, atright:              true
					, image:                'borden.png'
			 },
			 {        caption:              'lesbrief'
					, onselect:             function() { product.showLesbrief(); }
					, ondeselect:   function() { /*product.closeWindow('lesbrief');*/}
					, atright:              true
					, image:                'lesbrief.png'
					, dontkeepfocus:		true
			 }
			 ]);
}

productC.prototype.createMapMenu = function()
{
	this.mainmenu = this.buildVIZmenu(
			[
// WAS WEG
			 {        caption:              'login'
					, onselect:             function() { product.showLoginDialog(); }
					, ondeselect:   function() { }
					, atright:              false
					, image:                'login.png'
			 },
			 {        caption:              'home'
					, onselect:             function() { product.switchSection('mainmenu'); product.showCitySelection(); }
					, ondeselect:   function() { }
					, atright:              false
					, image:                'home.png'
			 },
			 
			 {        caption:              'WIKI'
					, onselect:             function() { showPointGallery(0); }
					, ondeselect:   function() { }
					, atright:              false
					, image:                'beelden.png'
			 },
/*
			 {        name:                 ''
				, caption:          'beelden'
					, onselect:             function() { showPointGallery( 0 ); }
					, ondeselect:   function() { }
					, atright:              true
					, image:                'beelden.png'
			 },
// WAS WEG EINDE
*/
			 {        caption:              'lesbrief'
					, onselect:             function() { product.showLesbrief(); }
					, ondeselect:   function() { /*product.closeWindow('lesbrief');*/ }
					, atright:              true
					, image:                'lesbrief.png'
			 },
			 {        caption:              'melding'
					, onselect:             function() { product.openMeldingDialog(); }
					, ondeselect:   function() { }
					, atright:              true
					, image:                'melding.png'
			 }
			 ]);
}

productC.prototype.createBordenMenu = function()
{
	this.mainmenu = this.buildVIZmenu(
		[{        caption:              'home'
		        , onselect:             function() { wndBorden.close(); }
		        , ondeselect:   function() { }
		        , atright:              false
		        , image:                'home.png'
		 },
		 {        caption:              'kijk hier'
		        , onselect:             function()
		                {
		                        wndBorden.ifrm.src = product.url.bordenbase+'kijk_hier_menu_v2.htm';
		                        wndBorden.setTitle('Kijk hier... borden');
		                }
		        , ondeselect:   function() { }
		        , atright:              true
		        , image:                'borden kijk hier.png'
		 },
		 {        caption:              'mag niet'
		        , onselect:             function()
		                {
		                        wndBorden.ifrm.src = product.url.bordenbase+'mag_niet_menu_v2.htm';
		                        wndBorden.setTitle('Mag niet... borden');
		                }
		        , ondeselect:   function() { }
		        , atright:              true
		        , image:                'borden mag niet.png'
		 },
		 {        caption:              'pas op'
		        , onselect:             function()
		                {
		                        wndBorden.ifrm.src = product.url.bordenbase+'pas_op_menu_v2.htm';
		                        wndBorden.setTitle('Pas op... borden');
		                }
		        , ondeselect:   function() { }
		        , atright:              true
		        , image:                'borden pas op.png'
		 },
		 {        caption:              'moet hier'
		        , onselect:             function()
		                {
		                        wndBorden.ifrm.src = product.url.bordenbase+'moet_hier_menu_v2.htm';
		                        wndBorden.setTitle('Moet hier... borden');
		                }
		
		        , ondeselect:   function() { }
		        , atright:              true
		        , image:                'borden moet hier.png'
		 },
		 {        caption:              'voorrang'
		        , onselect:             function()
		                {
		                        wndBorden.ifrm.src = product.url.bordenbase+'voorrang_menu_v2.htm';
		                        wndBorden.setTitle('Voorrang... borden');
		                }
		        , ondeselect:   function() { }
		        , atright:              true
		        , image:                'borden voorrang.png'
		 }
		 ]);
}