/***
 * Jonge gezinnen - Userinterface enhancement
 *
 * TOC
 * ##GENERIC
 */



/**
 * Initiate toggled boxes
 */
function initToggledBoxes() {
  setupBoxToggle($('login-handle'), $('header-login-wrapper'));
  setupBoxToggle($('header-nav-bladtitels-handle'), $('header-nav-bladtitels-wrapper'));
}



/**
 * Setup Bladtitels list
 */
function setupBoxToggle(handle, box) {
  if(!handle || !box)
    return false;
  
  box.addClass('hidden');

  handle.addEvent('click', function(e){
    handle.hasClass('active') ?
        handle.removeClass('active') :
        handle.addClass('active');
    box.hasClass('hidden') ?
        box.removeClass('hidden') :
        box.addClass('hidden');
    e.stop();
  });
}



/**
 * Setup Tabs behaviour
 */
function setupTabs() {
  var tabWrappers = $$('div.tab-wrapper');
  tabWrappers.each(function(tabWrapper) {
    if($(tabWrapper.parentNode).hasClass('wrapper')) {
      var ts = new TabSystem();
      ts.init(tabWrapper.parentNode);
    }
  });
}

function TabSystem() {}
TabSystem.prototype = {
  container: null,
  tabs: [],
  contents: [],
  
  init: function(tabContainer) {
    this.container = tabContainer;
    var containerDivs = this.container.getElements('div');
    for(var i = 0, len = containerDivs.length; i < len; i++) {
      if(containerDivs[i].hasClass('tab'))
        this.tabs.push(containerDivs[i]);
      
      if(containerDivs[i].hasClass('content'))
        this.contents.push(containerDivs[i]);
    }
    this.initTabs();
  },
  
  resetContents: function() {
    for(var i = 0, len = this.contents.length; i < len; i++) {
      this.contents[i].removeClass('active');
    }
  },
  
  resetTabs: function() {
    for(var i = 0, len = this.tabs.length; i < len; i++) {
      this.tabs[i].removeClass('active');
    }
  },
  
  showTab: function(tabid) {
    this.resetTabs();
    this.resetContents();
    if(!tabid && this.tabs[0]) {
      var tabid = this.tabs[0].id;
      this.tabs[0].addClass('active');
      var currentContentId = 'tabs-content' + tabid.substring(tabid.indexOf('tabs-tab') + 8);
      $(currentContentId).addClass('active');
    }
    else {
      var currentTab = $(tabid);
      currentTab.addClass('active');
      var currentContentId = 'tabs-content' + tabid.substring(tabid.indexOf('tabs-tab') + 8);
      $(currentContentId).addClass('active');
    }
  },
  
  showContent: function(tabid) {
    this.resetContents();
  },
  
  initTabs: function() {
    this.showTab();
    for(var i = 0, len = this.tabs.length; i < len; i++) {
      var ts = this;
      this.tabs[i].addEvent('click', function(e){
        ts.showTab(this.id);
        if(this.getElement('a'))
          this.getElement('a').blur();
        e.stop();
      });
    }
  }
};



/**
 * IE6Fix! Formhelpballoons
 */
function ie6fixFormhelp() {
  if(Browser.Engine.name !== 'trident')
    return false;
  
  var fieldgroups = $$('form div.fieldgrp');
  var i = fieldgroups.length;
  var j = 1;
  for(var i = 0, len = fieldgroups.length, j = fieldgroups.length; i < len; i++) {
    fieldgroups[i].style.zIndex = j--;
  }
}



/**
 * Setup Textinput behaviour
 */
function setupTextinput() {
  var textInputs = $$('input[type=text]');
  var defaultTexts = [
    'Dit is een verplicht veld, vul dit veld in',
    'Gebruikersnaam',
    'Vul hier uw zoekterm in',
    'E-mail adres',
    'Uw e-mailadres'
  ];
  textInputs.each(function(textInput) {
    if (defaultTexts.contains(textInput.value)) {
      textInput.defaultValue = textInput.value;
      textInput.addEvent('focus', function(e){
        if(defaultTexts.contains(textInput.value))
          textInput.value = '';
        e.stop();
      });
      textInput.addEvent('blur', function(e){
        if (textInput.value == '')
          textInput.value = textInput.defaultValue;
        e.stop();
      });
    }
  });
}



/**
 * Setup Formhelp
 */
function setupFormhelp() {
  var tooltips = $$('span.tooltip', 'span.formhelp');
  tooltips.each(function(tooltip) {
    $(tooltip.parentNode.parentNode.parentNode).addClass('hidden-formhelp');
    tooltip.addEvent('mouseover', function(e){
      $(tooltip.parentNode.parentNode.parentNode).removeClass('hidden-formhelp');
      e.stop();
    });
    tooltip.addEvent('mouseout', function(e){
      $(tooltip.parentNode.parentNode.parentNode).addClass('hidden-formhelp');
      e.stop();
    });
  });
}



/**
 * Setup ABCWord
 */
function setupAbcword() {
  var abcwordTitles = $$('div.block-abcword div.h4-wrapper');
  abcwordTitles.each(function(abcwordTitle) {
    if($(abcwordTitle.parentNode.parentNode).hasClass('block-abcword'))
      $(abcwordTitle.parentNode).addClass('abcword-hidden');

    abcwordTitle.addEvent('click', function(e){
      $(abcwordTitle.parentNode).hasClass('abcword-hidden') ?
        $(abcwordTitle.parentNode).removeClass('abcword-hidden') :
        $(abcwordTitle.parentNode).addClass('abcword-hidden');
      e.stop();
    });
  });
}



/**
 * Setup Faqitems
 */
function setupFaqItems() {
  var faqitems = $$('div.block-faq-wrapper div.item div.question');
  faqitems.each(function(faqitem) {
    if($(faqitem.parentNode).hasClass('item'))
      $(faqitem.parentNode).addClass('answer-hidden');
    
    faqitem.addEvent('click', function(e){
      $(faqitem.parentNode).hasClass('answer-hidden') ?
        $(faqitem.parentNode).removeClass('answer-hidden') :
        $(faqitem.parentNode).addClass('answer-hidden');
      e.stop();
    });
  });
}



/**
 * Setup button hovers
 */
function setupButtonhovers() {
  var formbuttons = $$('div.formbutton');
  formbuttons.each(function(formbutton) {
    formbutton.addEvent('mouseover', function(e){
      $(this).addClass('formbutton-hover');
      e.stop();
    });
    formbutton.addEvent('mouseout', function(e){
      $(this).removeClass('formbutton-hover');
      e.stop();
    });
  });
  
  
  var buttonlinks = $$('div.block-buttonlink');
  buttonlinks.each(function(buttonlink) {
    buttonlink.addEvent('mouseover', function(e){
      $(this).addClass('block-buttonlink-hover');
      e.stop();
    });
    buttonlink.addEvent('mouseout', function(e){
      $(this).removeClass('block-buttonlink-hover');
      e.stop();
    });
  });
  
  
  var galleryItems = $$('div.block-gallery div.mo-type1 div.item');
  galleryItems.each(function(galleryItem) {
    galleryItem.addEvent('mouseover', function(e){
      $(this).addClass('item-hover');
      e.stop();
    });
    galleryItem.addEvent('mouseout', function(e){
      $(this).removeClass('item-hover');
      e.stop();
    });
  });
}


/**
 * Setup search icon as button
 */
function setupSearchButton() {
  // Get search input element, and skip setup if it doesn't exist.
  var searchInput = $('q');
  if (!searchInput) return;

  // Fetch the parent element of our search input.  
  var searchParent = searchInput.getParent();
  searchParent.setStyle('position', 'relative');
  
  // Fetch the form element for this input.
  var searchForm = searchParent;
  while (searchForm.nodeName != "FORM") {
    searchForm = searchForm.getParent();
  }
  
  // Build new element, and position above search icon in input.
  var searchBtn = new Element('span', {
    'class': 'search-button',
    'styles': {
      'display': 'block',
      'width': '24px',
      'height': '20px',
      'position': 'absolute',
      'right': '0',
      'top': '0',
      'z-index': '1000',
      'cursor': 'pointer'
    },
    'events': {
      'click': function(){
          if (searchInput.value == searchInput.defaultValue || searchInput.value == '') return;
          searchForm.submit();
      }
    }
  });

  // Insert in form.
  searchBtn.inject(searchParent);
}


/**
 * Setup font sizing
 */
function setupFontSizing() {
  // Init default size.
  $(document.body).sizes = new Array('smallest','smaller','normal','larger','largest');
  $(document.body).sizer = 2; 
  $(document.body).addClass($(document.body).sizes[$(document.body).sizer]); 
  
  // Set up buttons.
  var smallerBtn = new Element('li', {
    'class': 'size-button',
    'id': 'size-smaller',
    'events': {
      'click': function(){
          if ($(document.body).sizer == 0) return false;
          var currentSize = $(document.body).sizer;
          $(document.body).sizer--;
          $(document.body).addClass($(document.body).sizes[$(document.body).sizer]); 
          $(document.body).removeClass($(document.body).sizes[currentSize]);
      }
    }
  });
  var largerBtn = new Element('li', {
    'class': 'size-button',
    'id': 'size-larger',
    'events': {
      'click': function(){
          if ($(document.body).sizer == 4) return false;
          var currentSize = $(document.body).sizer;
          $(document.body).sizer++;
          $(document.body).addClass($(document.body).sizes[$(document.body).sizer]); 
          $(document.body).removeClass($(document.body).sizes[currentSize]);
      }
    }
  });
  
  // Insert into DOM.
  largerBtn.inject($('header-nav-main').getElement('ul'));
  smallerBtn.inject($('header-nav-main').getElement('ul'));
}



/**
 * Setup length correction for articles
 */
function setupArticleSizing() {
  $$('.block-mainarticles .mo-type1 .odd').each(function(elem, index){
    if (elem.getNext() && !elem.getNext().hasClass('clearer')) {
      if (elem.getHeight() == elem.getNext().getHeight()) return;
    
      if (elem.getHeight() < elem.getNext().getHeight()) {
        elem.setStyle('height', ''+(elem.getNext().getHeight()-15)+'px');
      } else {
        elem.getNext().setStyle('height', ''+(elem.getHeight()-15)+'px');
      }
    }
  });
}



/**
 * Attach setups to domready event.
 */
window.addEvent('domready', function() {
  $(document.body).addClass('js');
});
window.addEvent('domready', initToggledBoxes);
window.addEvent('domready', setupTabs);
window.addEvent('domready', ie6fixFormhelp);
window.addEvent('domready', setupTextinput);
window.addEvent('domready', setupFormhelp);
window.addEvent('domready', setupAbcword);
window.addEvent('domready', setupFaqItems);
window.addEvent('domready', setupButtonhovers);
window.addEvent('domready', setupSearchButton);
window.addEvent('domready', setupFontSizing);

window.addEvent('load', setupArticleSizing);