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



/**
 * Initiate toggled boxes
 */
function initToggledBoxes() {
  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 je zoekterm in',
    'E-mail adres',
    'Jouw 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 buttonlinks2 = $$('div.block-buttonlink-type2');
  buttonlinks2.each(function(buttonlink) {
    buttonlinks2.addEvent('mouseover', function(e){
      $(this).addClass('block-buttonlink-type2-hover');
      e.stop();
    });
    buttonlinks2.addEvent('mouseout', function(e){
      $(this).removeClass('block-buttonlink-type2-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 "uitgerekende datum" block
 */
function setupValidator()
{
	// Fetch form, selectboxes and submit button.
	var dateForm = $$('div.block-formtype3 form')[0];
	if (!dateForm) return false;
	
	var dateFormSubmit = dateForm.getElement('input[type="submit"]');
	dateFormSubmit.onclick = function() { };

	dateForm.onsubmit = function() { return Validator(); }
} 
 

function Validator() {
	datum  = new Date();
	var tempdag;
	
	// Fetch form, selectboxes and submit button.
	var dateForm = $$('div.block-formtype3 form')[0];
	var dateFormSelects = dateForm.getElements('select');
	var dateFormOut = dateForm.getElement('div.formtextbox input[type="text"]');

	var jaar = parseInt(dateFormSelects[2].options[dateFormSelects[2].selectedIndex].value);
	var maand = parseInt(dateFormSelects[1].options[dateFormSelects[1].selectedIndex].value);
	var dag = parseInt(dateFormSelects[0].options[dateFormSelects[0].selectedIndex].value);
	var month;
	
	dateStr = ((maand-1) + "/" + dag + "/" + jaar);

	datum.setMonth(maand-1); // Subtract one, because Date object calculates with months 0-11!
	datum.setYear(jaar);
	datum.setDate(dag);
	
	datum.setDate(datum.getDate() + 280);
	
				
	if(!isDate(dateStr)){ 
		alert("We konden je uitgerekende datum niet bepalen. Vul een andere datum in.");
	}
	else {
		if (datum.getMonth() == 0){
			month = "januari";
		}
		else if	(datum.getMonth() == 1){
			month = "februari";
		}
		else if	(datum.getMonth() == 2){
			month = "maart";
		}
		else if	(datum.getMonth() == 3){
			month = "april";
		}
		else if	(datum.getMonth() == 4){
			month = "mei";
		}
		else if	(datum.getMonth() == 5){
			month = "juni";
		}
		else if	(datum.getMonth() == 6){
			month = "juli";
		}
		else if	(datum.getMonth() == 7){
			month = "augustus";
		}
		else if	(datum.getMonth() == 8){
			month = "september";
		}
		else if	(datum.getMonth() == 9){
			month = "oktober";
		}
		else if	(datum.getMonth() == 10){
			month = "november";
		}
		else if (datum.getMonth() == 11){
			month = "december";
		}
		//console.log("Jaar: "+datum.getFullYear()+" | Maand: "+month+" | Dag: "+datum.getDate());
		dateFormOut.value = (datum.getDate() + " " + month + " " + datum.getFullYear());	
	}
	
	return false;
} 


function isDate(dateStr) {
	var datePat = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
	var matchArray = dateStr.match(datePat); // is the format ok?

	if (matchArray == null) {
		alert("Please enter date as either mm/dd/yyyy or mm-dd-yyyy.");
		return false;
	}

	month = matchArray[1]; // p@rse date into variables
	day = matchArray[3];
	year = matchArray[5];

	if (month < 0 || month > 11) { // check month range
		return false;
	}
	if (day < 1 || day > 31) {
		return false;
	}
	if ((month==3 || month==5 || month==8 || month==10) && day==31) {
		return false;
	}
	if (month == 1) { // check for february 29th
		var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
		if (day > 29 || (day==29 && !isleap)) {
			return false;
		}
	}
	return true; // date is valid
}






/**
 * 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 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');
      }
    }
  });
}



/**
 * Setup folding of babynames
 */
function setupBabynameFolding() {
  $$('.column .block-namedetail-female .paragraph').each(function(elem, index){
    //elem.setStyle('background-color','pink');
    
    // Fetch heading for toggle.
    var toggle = elem.getFirst("div.h2-wrapper");
    var foldable = elem.getFirst("div.text-wrapper");
    
    foldable.baseHeight = foldable.getHeight() + 10; // Add some extra margin
		foldable.fold = new Fx.Morph(foldable,
		{
			'duration': 500,
			'transition': Fx.Transitions.Sine.easeOut
		});
    foldable.setStyle('overflow', 'hidden');
    foldable.fold.start({'height': 0});
    toggle.addEvent("click", toggleName);
    toggle.addEvent("mouseenter", toggleFoldover);
    toggle.addEvent("mouseleave", toggleFoldover);
  });
}

function toggleName()
{
  var toggle = $(this);
  var foldable = toggle.getParent().getFirst("div.text-wrapper");
  
  if (!toggle.getParent().hasClass("foldout"))
  {
    toggle.getParent().addClass("foldout");
    foldable.fold.start({'height': foldable.baseHeight});
  }
  else
  {
    foldable.fold.start({'height': 0});
    toggle.getParent().removeClass("foldout");
  }
}

function toggleFoldover()
{
  $(this).toggleClass("foldover");
}


function setupDialogueRemover() {
  $$('div.dialogue').each(function (dialogue) {
    var dialogueContainer = dialogue.parentNode;
    var close = $(dialogueContainer).getElement('a.dialogue-close');
    close.addEvent('click', function(e) {
	  dialogueContainer.addClass('dialogue-hidden');
	  e.stop();
	});
  });
}

/**
 * Creates custom alt background
 */
function setupMagazinsAltBG()
{
    var containerDivs = $(document.body).getElements('.magazin_img');
    
    for(var i = 0, len = containerDivs.length; i < len; i++) {
        var img_element = containerDivs[i];
        img_element.addEvent("mouseenter", imgMouseEnter);
        img_element.addEvent("mouseleave", imgMouseLeave);
        
    }

}

function imgMouseEnter()
{
    //todo get parent.parent then inject
    
    var alt_div = new Element('div', {id: 'magazin_alt_bg'});
    
    
    var div = $(this);

    alt_div.inject(div);

}
function imgMouseLeave()
{

}




/**
 * Attach setups to domready event.
 */
window.addEvent('domready', function() {
  $(document.body).addClass('js');
});
window.addEvent('domready', initToggledBoxes);
window.addEvent('domready', setupValidator);
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', setupBabynameFolding);
window.addEvent('domready', setupDialogueRemover);

window.addEvent('load', setupArticleSizing);
window.addEvent('load', setupMagazinsAltBG);