//zet deze op 1 om de grootte van de menutabel te debuggen....
var borderOnOff=0;
var scale=0.5;
//Very important, make sure this is set to the correct value
var nrLinks=8;

//variables for createMyMenu Most other vars depend on thes vars 
var tableW=185;

//hoogte van het menugedeelte (gebruik om de lengte van de gekleurde streep te wijzigen)
var tableH=600;
var colBorderSize=10;
var colBorderH=(tableH-colBorderSize);
var textAreaW=(tableW-colBorderSize);
var textAreaH=(tableH-colBorderSize);

//vars for createMarginPane
//Margin indicates the distance between the leftborder and the actual menu
var figH=130;
var figW=textAreaW;
var firstRowH=39;
var lastRowH=0;
var linkRowH=32;
var menuAreaW=textAreaW;
var marginW=15;
var linkW=(textAreaW-marginW);

var theFoto='images/foto_paars.jpg';
var theColorImg='images/space_paars.gif';
var theBgCol='bgpaars';

function writeLink(id, title, theUrl, selectedItemId)
{
  document.write('<tr valign="top">');
     document.write('<td width="'+ marginW +'" height="'+ linkRowH +'"> </td>');
	 if (id==selectedItemId){
	   document.write('<td><span class="linkz">'+title+'</span></td>');
	 } else {
	   document.write('<td><a href="'+theUrl+'" target="_top">'+title+'</a></td>');
	 }     
  document.write('</tr>');
}

// Voeg hier navigatielinks toe.
//   - volgnummer
//   - link
//   - bestand waarnaar de link verwijst
//   - 'selectedItemId' - niet veranderen
function writeLinks(selectedItemId)
{
    //itemid, tekst voor link, url, geselecteerd itemid
    writeLink('intro', 'Home', 'http://www.shine-reiki.nl/html/init_intro.html', selectedItemId);
	writeLink('reiki', 'Wat is Reiki?', 'http://www.shine-reiki.nl/html/init_reiki.html', selectedItemId);
	writeLink('cursussen', 'Reiki cursussen', 'http://www.shine-reiki.nl/html/init_cursussen.html', selectedItemId);
	writeLink('behandelingen', 'Reiki behandelingen', 'http://www.shine-reiki.nl/html/init_behandelingen.html', selectedItemId);
	writeLink('reikidoe', 'Reiki Doe', 'http://www.shine-reiki.nl/html/init_reikidoe.html', selectedItemId);
	writeLink('reikiintro', 'Reiki Intro', 'http://www.shine-reiki.nl/html/init_reikiintro.html', selectedItemId);
	writeLink('agenda', 'Agenda', 'http://www.shine-reiki.nl/html/init_agenda.html', selectedItemId);
	writeLink('contact', 'Contact', 'http://www.shine-reiki.nl/html/init_contact.html', selectedItemId);	
	writeLink('intro2', 'Meer...', 'http://www.shine-reiki.nl/html/init_reikihist.html', selectedItemId);
}


function writeLinks2(selectedItemId)
{
    //itemid, tekst voor link, url, geselecteerd itemid
    writeLink('intro', 'Home', 'http://www.shine-reiki.nl/html/init_intro.html', selectedItemId);
	writeLink('reikihist', 'Reiki historie', 'http://www.shine-reiki.nl/html/init_reikihist.html', selectedItemId);
	writeLink('reikiregels', 'Reiki leefregels', 'http://www.shine-reiki.nl/html/init_reikiregels.html', selectedItemId);
	writeLink('chakras', "Chakra's", 'http://www.shine-reiki.nl/html/init_chakras.html', selectedItemId);
	writeLink('poszelf', 'Zelfbehandeling', 'http://www.shine-reiki.nl/html/init_poszelf.html', selectedItemId);	
	writeLink('postafel', 'Tafelbehandeling', 'http://www.shine-reiki.nl/html/init_postafel.html', selectedItemId);
	writeLink('posstoel', 'Stoelbehandeling', 'http://www.shine-reiki.nl/html/init_posstoel.html', selectedItemId);
	writeLink('mani', 'Om Mani Padme Hum', 'http://www.shine-reiki.nl/html/init_mani.html', selectedItemId);		
	writeLink('links', 'Links', 'http://www.shine-reiki.nl/html/init_links.html', selectedItemId);
}


function get_random(number)
{
    var ranNum= Math.round(Math.random()* (number-1));
    return ranNum;
}


function selectFoto(col)
{ 
  var bordeauxfotos=17;
  var gelefotos=17;
  var groenefotos=17;
  var lblauwefotos=18;
  var lgroenefotos=11;
  var mblauwefotos=20;
  var oranjefotos=17;
  var paarsefotos=21;
  var rodefotos=17;
  
  var index=0;
 
  switch (col){
    case 'bordeaux':
	  index=get_random(bordeauxfotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break;
    case 'rood':
	  index=get_random(rodefotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break;
    case 'oranje':
	  index=get_random(oranjefotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break;
	case 'geel':
	  index=get_random(gelefotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break;
	case 'lgroen':
	  index=get_random(lgroenefotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break;
	case 'groen':
	  index=get_random(groenefotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break;
	case 'lblauw':
	  index=get_random(lblauwefotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break;
	case 'blauw':
	  index=get_random(mblauwefotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break; 
	case 'paars':
	  index=get_random(paarsefotos);
	  theFoto='images/foto_'+col+''+index+'.gif';
	  break; 	  
	default:
	  theFoto='images/foto_'+col+'.gif';
  }
}


function setImageAndColor(selectedItemId){
var col='paars';
  switch (selectedItemId){
        case 'intro':         col='bordeaux'; break;
	case 'reikihist':     col='bordeaux'; break;
	
        case 'reiki':         col='rood';     break;
	case 'reikiregels':   col='rood';     break;
	
	case 'cursussen':     col='oranje';   break;
	case 'chakras':       col='oranje';   break;
	
	case 'behandelingen': col='geel';     break;
	case 'poszelf':       col='geel';     break;
	
	case 'reikidoe':      col='lgroen';   break;
	case 'postafel':      col='lgroen';   break;
	
	case 'reikiintro':    col='groen';    break;
	case 'posstoel':      col='groen';    break;
	
	case 'agenda':        col='lblauw';   break;
	case 'mani':          col='lblauw';   break;
	
	case 'gbbekijk':      col='blauw';    break;
	
	case 'links':         col='paars';    break;
	case 'contact':       col='paars';    break;
	
	default:              col='paars';    break;
  }
  theColorImg='images/space_'+col+'.gif';
  //gebruik om stylesheet aan te spreken 
  theBgCol='bg'+col;
  selectFoto(col);  
}

var menutype='';

//Verdeelt het vlak binnen de gekleurde rand in 2 delen
//bovenste gedeelte wordt gevuld met foto onderste deel wordt gebruikt voor het menu. 
function createMarginPane(selectedItemId)
{
setImageAndColor(selectedItemId);
var selectedColorImg=theColorImg;
var selectedFoto='<a href="http://www.martijnlammerts.nl/fotolog" target="_blank" title="klik voor fotolog van Martijn"><img src="'+theFoto+'" height="'+figH+'" width="'+figW+'" alt="klik voor de fotolog van Martijn" title="klik voor de fotolog van Martijn"  border="0" align="top"></a>';
  document.write('<div><table width="'+ menuAreaW +'" border="' +borderOnOff+ '" cellpadding="0" cellspacing="0" background="images/kanji.gif">');
  document.write('<tr valign="top">');
    document.write('<td colspan="2" height="'+ figH +'" background="'+ selectedColorImg +'">'+ selectedFoto +'</td>');
  document.write('</tr>');
  
  // maak het menu. 
  document.write('<tr valign="top">');
     document.write('<td width="'+ marginW +'" height="'+ firstRowH +'"></td>');
     document.write('<td width="'+ linkW +'" height="'+ firstRowH +'"></td>');
  document.write('</tr>');
  if (menutype=='menu2')
  {
    //more menu
	writeLinks2(selectedItemId);
  } else {
    //main menu
    writeLinks(selectedItemId);
  }
  document.write('<tr valign="top">');
     document.write('<td width="'+ marginW +'" height="'+ lastRowH +'"></td>');
     document.write('<td width="'+ linkW +'" height="'+ lastRowH +'"></td>');
  document.write('</tr>');
document.write('</table>');
document.write('</div>');
}



//hoofdroutine maakt de gekleurde rand
function showMyMenu(selectedItemId, menuId){
setImageAndColor(selectedItemId);

//set the global
menutype=menuId;

var selectedColorImg=theColorImg;

// gebruik een image met picsize = 1*1pixel om de achtergrond te vullen. 
var borderImgTop='<img src="'+selectedColorImg+'" alt="" height="'+colBorderSize+'" width="'+textAreaW+'" align="top">';
var borderImgCorner='<img src="'+selectedColorImg+'" alt="" height="'+colBorderSize+'" width="'+colBorderSize+'" align="top">';
var borderImgR='<img src="'+selectedColorImg+'" alt="" height="'+colBorderH+'" width="'+colBorderSize+'" align="top">';

//first create the outline in the specified color
document.write('<div><table width="'+tableW+'" border="'+borderOnOff+'" cellpadding="0" cellspacing="0">');
document.write('<tr valign="top">');
  //tvd document.write('<td width="+figW+" height="'+colBorderSize+'">'+borderImgTop+'</td>');
  //bovenste streep boven het menu 
  document.write('<td class="'+theBgCol+'" width="+figW+" height="'+colBorderSize+'"></td>');
  //blokje in de hoek
  document.write('<td width="'+colBorderSize+'" height="'+colBorderSize+'">'+borderImgCorner+'</td>'); 
  //document.write('<td class="'+theBgCol+'" width="'+colBorderSize+'" height="'+colBorderSize+'"></td>');
document.write('</tr>');
document.write('<tr valign="top">');
  document.write('<td width="'+textAreaW+'" height="+colBorderH+">');
  createMarginPane(selectedItemId);
  
  document.write('</td>');
document.write('<td width="+colBorderSize+" height="+colBorderH+">'+borderImgR+'</td>');
document.write('</tr>');
document.write('</table></div>');
}



//------------------------------------------------------------------
//
//Noframes sectie
function writeNoFramesTable(title, colId, dir){
  document.write('<div><table width="80%" border="0" cellpadding="0" cellspacing="0">');
  document.write('<tr valign="top" height="40">');
  
  document.write('<td colspan="18"></td>');
  document.write('</tr>');

  document.write('<tr valign="top">');
  document.write('<td colspan="18"><span class="kopje_'+ colId+'">'+ title +'</span></td>');
  document.write('</tr>');

  document.write('<tr valign="top" width="80%" height="20">');
  document.write('<td colspan="18"></td>');
  document.write('</tr>');

  document.write('<tr valign="top" width="80%" bgcolor="lightgrey">');
  //menuitem 1
  document.write('<td align="center"><a href="'+ dir +'init_intro.html" class="'+ colId +'"><span class="'+ colId +'"><i>Shine!</i></span></a></td>');
  document.write('<td width="5">&nbsp </td>');  
  //menuitem 2
  document.write('<td align="center"><a href="'+ dir +'init_reiki.html" class="'+ colId +'"><span class="'+ colId +'">Reiki</span></a></td>');
  document.write('<td width="5">&nbsp </td>');
  //menuitem 3
  document.write('<td align="center"><a href="'+ dir +'init_cursussen.html" class="'+ colId +'"><span class="'+ colId +'">Cursussen</span></a></td>');
  document.write('<td width="5">&nbsp </td>');
  //menuitem 4
  document.write('<td align="center"><a href="'+ dir +'init_behandelingen.html" class="'+ colId +'"><span class="'+ colId +'">Behandelingen</span></a></td>');
  document.write('<td width="5">&nbsp </td>');
  //menuitem 5
  document.write('<td align="center"><a href="'+ dir +'init_reikidoe.html" class="'+ colId +'"><span class="'+ colId +'">Reiki Doe</span></a></td>');
  document.write('<td width="5">&nbsp </td>');
  //menuitem 6
  document.write('<td align="center"><a href="'+ dir +'init_reikiintro.html" class="'+ colId +'"><span class="'+ colId +'">Reiki Intro</span></a></td>');
  document.write('<td width="5">&nbsp </td>');
  //menuitem 7
  document.write('<td align="center"><a href="'+ dir +'init_contact.html" class="'+ colId +'"><span class="'+ colId +'">Contact</span></a></td>');
  document.write('<td width="5">&nbsp </td>');
  //menuitem 8
  document.write('<td align="center"><a href="'+ dir +'init_mani.html" class="'+ colId +'"><span class="'+ colId +'">Mantra</span></a></td>');
  document.write('<td width="5">&nbsp </td>');
  //menuitem 9
  document.write('<td align="center"><a href="'+ dir +'init_links.html" class="'+ colId +'"><span class="'+ colId +'">Links</span></a></td>');
  //empty space
  document.write('<tr valign="top" width="80%" height="20">');
  document.write('<td colspan="18"></td>');
  document.write('</tr>');

  document.write('<tr valign="top" width="80%">');
  document.write('<td colspan="18">');
}

function writeNoFramesTableEnd() {
  document.write('</td>');
  document.write('</tr>');
  document.write('</table>');
  document.write('</div>');
}