var ss_speed = 8000, ss_delay = 8000, ss_pause = 30000, ss_nav_btn = '<li>nr</li>';

document.observe("dom:loaded", function() {
  if ( $('menu') ) { menu_hover() }
  if ( $('cleaning_products') ) { cat_icons_hover() }
  if ( $('servicemenu3') ) { set_servmenu3() }
  if ( $('home-carrousel') ) { initSlideShows() }
  if ( $('hdr_search') ) { initHdrSearch() }
});

var menu_hover = function() {
  $('menu').immediateDescendants().each(function(i) {
    i.observe('mouseover', function() { i.addClassName('sfhover') })
    i.observe('mouseout', function() { i.removeClassName('sfhover') })
  });
}

var cat_icons_hover = function() {
  var c = -1;
  $$('div#cleaning_products ul li').each(function(i) {
    c++; i.id = 'c_' + c;
    i.observe('mouseover', toggle_cat_icon.bindAsEventListener( null, c, 1 ) )
    i.observe('mouseout', toggle_cat_icon.bindAsEventListener( null, c, 0 ) )
  });
}

function set_servmenu3() {
  var arr_li = $$('ul#servicemenu3 li');
  arr_li[0].addClassName('nospcr');
}

function toggle_cat_icon( evt, cat, state ) {
  var img = $$('li#c_' + cat + ' img ');
  if ( state == 1 ) { img[0].src = img[0].src.replace('.gif', '_color.gif') }
  else { img[0].src = img[0].src.replace('_color.gif', '.gif') }
}

function initHdrSearch() {
  $('hdr_search').update(
    '<form id="frm_srch" name="frm_srch" method="post" action="/service/zoeken.asp">'
    + '<input type="text" id="srch" name="srch" value="" size="8" maxlength="50" onkeyup="ajax_search(1,0);" />'
    + '<input id="srch_btn" type="image" src="/i/elements/buttons/btn-search.gif" />'
    + '</form>'
    + '<div id="autocomplete_choices" class="autocomplete"></div>'
  );
  new Ajax.Autocompleter("srch", "autocomplete_choices", "/includes/ajax/ajax_suggest_keywords.asp", { paramName: "wrd", minChars: 2, frequency: 0.2 });
}

function initSlideShows() {
  slideshow1  = new Slideshow('slideshow1', 'cat-details', 'slide', 'home-carrousel', 'cat-index', ss_speed, ss_pause);
  setTimeout("slideshow1.startShow()", ss_delay);
}

Slideshow = Class.create();
Slideshow.prototype = {

  initialize: function(name,elem,slideclass,navHolder,navClass,timeout,timepause) {

    this.name = name;
    this.playing = false;
    this.timeout = timeout;
    this.timepause = timepause;
    this.currentTimeout = null;

    this.container = $(elem);
    var slides = $$('#' + elem + ' .slide');
    this.slides = slides;
    this.slideCurrent = 0;
    this.slideCount = this.slides.length-1;

    var nav_btn_holder = $$('#' + navClass);

    var btnLabels = $('cat_names').value.split('#');
    var cat_codes = $('cat_codes').value.split('#');

    this.slide_codes = cat_codes;

    for (var i = 0; i < slides.length; i++) {
      nav_btn_holder[0].insert({bottom: ss_nav_btn.replace('nr', btnLabels[i])});
      if (i>0) { this.slides[i].hide() }
    }

    var navbtns = $$('#' + navClass + ' li');
    this.navbtns = navbtns;
    this.navbtns[0].addClassName('btn_card_selected');

    for (var i = 0; i < navbtns.length; i++) {
      $(navbtns[i]).observe('click', this.clickNav.bindAsEventListener(this,i) );
      $(navbtns[i]).addClassName(cat_codes[i]);
    };

  },

  startShow: function(event) {
    this.playing = true;
    this.showSlide(this,1);
  },

  stopShow: function(event) {
    this.playing = false;
    clearTimeout(this.currentTimeout, 0);
  },

  resetShow: function(wait) {
    clearTimeout(this.currentTimeout, 0);
    this.playing = false;
    this.slideCurrent = 1;
    this.showSlide(this,0,1);
    setTimeout(this.name + ".startShow(this)", wait);
  },

  clickNav: function(event,nr) {
    this.playing = false;
    clearTimeout(this.currentTimeout, 0);
    this.showSlide(event,nr,1);
    var slideNext = this.slideCurrent+1;
    if ( slideNext > this.slideCount ) { slideNext = 0 }
    this.currentTimeout = setTimeout(this.name + ".playing = true;" + this.name + ".showSlide(this," + slideNext + ");", this.timepause);
  },

  showSlide: function(event,nr,flip) {

    var slidePrev = this.slideCurrent;
    if ( slidePrev != nr ) {
      var slideCurrent = nr;
      var slideNext = nr+1;
      if ( slideNext > this.slideCount ) { slideNext = 0 }

      if ( flip == 1 ) {
        this.slides[slidePrev].hide();
        this.slides[slideCurrent].show();
      }
      else {
        Effect.Fade(this.slides[slidePrev], {duration:1, from:1.0, to:0.0});
        Effect.Appear(this.slides[slideCurrent], {duration:1, from:0.0, to:1.0, delay:0.5});

      }

      this.slideCurrent = slideCurrent;
      this.navbtns[slidePrev].removeClassName('btn_card_selected');
      this.navbtns[slideCurrent].addClassName('btn_card_selected');
      if (this.playing==true) {
        this.currentTimeout = setTimeout(this.name + ".showSlide(this," + slideNext + ");", this.timeout);
      };
    }
  }

}