/*

Deze versie van mouseover.js is iets makkelijker te gebruiken dan de tweede, omdat je alleen de plaatjes
hoeft aan te passen. Deze versie is echter niet compatible met Netscape 4 (wel met NS6).

SCRIPT-vereisten:
1. Alle plaatjes die een mouseover effect moeten hebben dienen als name en id te beginnen met mouseover
   en te eindigen in het bijbehorende thema nummer. Thema's beneden 10 worden voorafgegaan met een 0.
   bijv.
    <img src="/images/nav/home/nav01off.gif" name="mouseover01" width="177" height="15" id="mouseover01">
    <img src="/images/nav/home/nav02off.gif" name="mouseover02" width="177" height="15" id="mouseover02">
    <img src="/images/nav/home/nav03off.gif" name="mouseover03" width="177" height="15" id="mouseover03">

2. Als src dient een plaatje te worden gebruikt die eindigt in off.gif (of off.jpg)

3. In het html-document dient de volgende regel te worden opgenomen als verwijzing naar dit script:
   <script language="javascript" type="text/javascript" src="//javascript/mouseover.js"></script>
   Uiteraard dient hiervoor mouseover.js wel in de /javascript map te staan. 
   De javascriptregel dient onder </body> te worden geplaatst. Met het virtuele pad wordt het script alleen
   online aangeroepen. 
   ALS DIT BESTAND NIET mouseover.js HEET DAN EVEN RENAMEN. 

4. In de zelfde map als waarin het off.gif (of off.jpg) plaatje staat dienen ook de on.gif (of on.jpg)
   en de stay.gif (of stay.jpg) plaatjes te worden geplaatst.    

5. In de head van de template dient de volgende code opgenomen te worden:

<script language="JavaScript" type="text/javascript">
<!--
var themaID;
themaID = <$
type=internal_variable
varname=theme_id
$>;

browserName = navigator.appName;
browserVer  = parseInt(navigator.appVersion);

if ((browserName == "Netscape" && browserVer >= 4)
  || (browserName == "Microsoft Internet Explorer" && browserVer >= 4)) {
  MouseOver = 1;
} 
else {
  MouseOver = 0;
}
//--></script>

*/


//------------------------------------------------------------------







// themaID dient te zijn ingesteld, anders wordt 0 aangenomen
if (typeof(themaID) == 'undefined')
{
  var themaID = 0;
}

// bepaal het thema-id, als thema<10 dan een nul ervoor zetten
var sThemeID
if (themaID <10)
{
	sThemeID = '0' + themaID;
}
else
{
	sThemeID = '' + themaID;
}

function newmouseover()
{
  var sImageThemeID = this.name.substring(9);
  this.src = eval('imgOn' + sImageThemeID + '.src');
}

function newmouseout()
{
  var sImageThemeID = this.name.substring(9);
  this.src = eval('imgOff' + sImageThemeID + '.src');
}

for (var iImgNr = 0; iImgNr < document.images.length; iImgNr++)
{
	if (document.images[iImgNr].name.indexOf('mouseover') == 0)
	{
		// bepaal theme_id van het plaatje
		var sImageThemeID = document.images[iImgNr].name.substring(9);
		var sImageSrc = document.images[iImgNr].src;
    bImageIsJPG = sImageSrc.indexOf('off.jpg') != -1; 
		
    // maak imgXXOn en imgXXOff aan
    eval('var imgOn' + sImageThemeID + ' = new Image();');
    eval('var imgOff' + sImageThemeID + ' = new Image();');
    if (bImageIsJPG) 
    {
      eval('imgOn' + sImageThemeID + '.src = \'' + sImageSrc.replace('off.jpg', 'on.jpg') + '\';');
      eval('imgOff' + sImageThemeID + '.src = \'' + sImageSrc.replace('off.jpg', 'off.jpg') + '\';');
    }
    else
    {
      eval('imgOn' + sImageThemeID + '.src = \'' + sImageSrc.replace('off.gif', 'on.gif') + '\';');
      eval('imgOff' + sImageThemeID + '.src = \'' + sImageSrc.replace('off.gif', 'off.gif') + '\';');
    }
    
    
		// als het plaatje bij het huidige thema hoort dan laten branden
		if (sImageThemeID == sThemeID)
		{
			document.images[iImgNr].src = document.images[iImgNr].src.replace('off.gif', 'stay.gif')
			document.images[iImgNr].src = document.images[iImgNr].src.replace('off.jpg', 'stay.jpg')
			document.images[iImgNr].onmouseover = function() {return true};
			document.images[iImgNr].onmouseout = function() {return true};
		}
		else
		{
			// stel nieuwe mouseover in voor alle plaatjes met als name en id 'mouseover...'
			// die niet het huidige thema aangeven
			document.images[iImgNr].onmouseover = newmouseover;
			document.images[iImgNr].onmouseout = newmouseout;
		}
	}
}