
    //
    //
    // jquery Menu plugin .
    //
    // Author:  J. Boersma
    //
    // Date:  29-10-2008
    //
    //
    // Eerste Item wordt geselecteerd door er de class 'selected' aan te geven
    //
    // Options (default):
    //   - pad            : pad naar de afbeeldingsbestanden        (default 'img/')
    //   - extension      : extensie van de afbeeldingen            (default '.gif')
    //   - over           : naamstoevoeging voor 'over' afbeelding  (default '-over')
    //   - down           : naamstoevoeging voor 'down' afbeelding  (default '-down')
    //
    //
    // Noodzakelijke plugins:
    //
    //
    //
    // In de eigen code opnemen:
    //
    // function SelectMenu (opt) {}
    //   - waarbij opt een string is die de naam van het geselecteerde menuItem bevat.
    //
    //
    // Gereserveerde css classes:
    //   - selected
    //   - subMenu
    //   - menuKnop
    //
    //
		//  Voorbeeld opbouw menu met submenu:
		//  Let op bij submenuknop:  de class "subMenuKnop" wordt gebruikt om eventueel een andere knop css te gebruiken
		//
    //	<div id="Menu">
    //     <div class="menuKnop" id="home" name="home">Ahoy Rondvaarten</div>
    //     <div class="menuKnop" id="english" name="english">Ahoy in english</div>
    //     <div class="menuKnop" id="wat" name="wat">Wat kan je doen</div>
		//  		<div class="subMenu wat">
		//  		  <div class="menuKnop subMenuKnop" id="stad" name="stad">De Stadsroute</div>
		//  		  <div class="menuKnop subMenuKnop" id="vecht" name="vecht">De Vecht op</div>
		//  		  <div class="menuKnop subMenuKnop" id="zuiden" name="zuiden">Zuidelijker ?</div>
		//  		</div>
    //     <div class="menuKnop" id="historie" name="historie">Boten historie</div>
    //     <div class="menuKnop" id="contact" name="contact">Prijs &amp; contact</div>
    //     <div class="menuKnop" id="info" name="info">Info</div>
		//  </div>

    
    
    // De plugin met al zijn functies insluiten
    (function($) {
      
      $.fn.Menu = function(options) {
        
        // Extend our default options with those provided.
        var opts = $.extend({}, $.fn.Menu.defaults, options);
        
        var menu = this;
        $(menu).find('.subMenu').hide();
        
        // selecteer het menuItem welke de class 'selected' heeft
        selectItem($(menu).children('.selected'))
        
        $(menu).find('.menuKnop')
          .hover(
            function() {
              if (!$(this).hasClass('selected')) {
                var bi = String($(this).css("background-image"));
                if (bi.indexOf(opts.over)<0){
                  bi2 = bi.replace(opts.extension, opts.over+opts.extension);
                  $(this).css("background-image", bi2);
                  bi = String($(this).css("background-image"));
                }
              }
            },
            function() {
              if (!$(this).hasClass('selected')) {
                var bi = String($(this).css("background-image"));
                var bi2 = bi.replace(opts.over, '');
                $(this).css("background-image", bi2);
              }
            })
          .click(
            function() {
              //controleren of knop al geselecteerd is:
              if (!$(this).hasClass('selected')) {
                // knop is niet geselecteerd dus Aktie!
                var sm = $(this).parent();
                //de oude geselecteerde menuknop uitzetten
                deselectItem($(sm).children('.selected'));
                //de nieuwe menuknop selecteren
                selectItem(this);                
                //controle of de knop een submenu heeft
                var cl = '.' + $(this).attr('name');
                if ($(this).siblings(cl).hasClass('subMenu')) {
                  sm = $(this).siblings(cl);
                  //overige submenus sluiten
                  $(sm).parent().children('.subMenu').hide('slow');
                  //submenu laten zien
                  $(sm).css('visibility', 'visible').show('slow');
                  //controleren of er een sub menuknop geselecteerd is.
                  if ($(sm).children().hasClass('selected')) {
                    //aktie bij de geselecteerde submenuknop uitvoeren
                    selectItem($(sm).children('.selected'))
                  }
                  else {
                    //eerste submenuknop selecteren an aktie uitvoeren
                    selectItem($(sm).children(":first"))
                  }  
                }
                else {
                  //overige submenus sluiten
                  if ($(this).siblings().hasClass('subMenu')) {
                    $(this).parent().children('.subMenu').hide('slow');
                  }
                }
              }
            }
          );  
        
        
        // selecteer menuItem
        function selectItem(obj) {
          if ($(obj).css('background-image')!='') {
            bi = String($(obj).css("background-image"));
            if (bi.search(opts.over)>0) {
              bi2 = bi.replace(opts.over, opts.down);
            }
            else if (bi.search(opts.down)>0) {
              bi2 = bi;
            }
            else {
              bi2 = bi.replace(opts.extension, opts.down+opts.extension);
            }
            $(obj).css('background-image', bi2);
          }
          else {
            $(obj).css('backgroundColor',  opts.color_down)
          }
          $(obj).css({fontWeight:"bolder" })
          if (!$(obj).hasClass('selected')) {$(obj).addClass('selected')};
					$(obj).css('cursor', 'default');
          selectMenu ($(obj).attr('name'));
        }
        
        // deselecteer menuItem
        function deselectItem(obj) {
          if (!$(obj).hasClass('selected')) {$(obj).addClass('selected')};
          if ($(obj).css('background-image')!='') {
            bi = String($(obj).css("background-image"));
            bi2 = bi.replace(opts.down, '');
            $(obj).css('background-image', bi2);
          }
          else {
            $(obj).css('backgroundColor',  opts.color_norm)
          }
          $(obj).css({fontWeight:"" });
          $(obj).removeClass('selected');
					$(obj).css('cursor', 'pointer');					
        }
          

      }
      
      
      $.fn.Menu.defaults = {
          pad         : 'img/bg/',
          extension   : '.png',
          over        : '-over',
          down        : '',
          color_norm  : '#fff',
          color_over  : '#aaa',
          color_down  : '#ddd'

      };



      
      
    })(jQuery);    
    // einde jquery
    

