/***
 * 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) {
    
    if(!tabid && this.tabs[0]) {
      
      // default id is first tab id
      var tabid = this.tabs[0].id;
      // if a tab is active overrule first set tabid
      for(var i = 0; i <  this.tabs.length; i++)
      {
          if(this.tabs[i].hasClass('active'))
          {
              tabid = this.tabs[i].id;
              break;
          }
      }
    }
    // reset tabs & content
    this.resetTabs();
    this.resetContents();
    
    // set tab with new tabid
    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 
    until 6 aug 2009
 */
/*
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);
  });
}
*/

/**

 * Setup folding of babynames

 */

function setupBabynameFolding() {
  
  ['male', 'female' , 'unisex'].each( function(block) {
 
    $$('.block-namedetail-' + block + ' .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();
	});
  });
}

//google maps

var map = null;
var geocoder = null;
var lat_points = [];
var lon_points = [];
var list = [];

// Call this function when the page has been loaded
function googlemaps_initialize() {

    var divs = $(document.body).getElements('.block-maps-searchresults-list .item');
    
    //alert(thumb[0].getProperty('html'));
    

    
    
    
    for(var i = 0; i <  divs.length; i++)
    {
        var parent =  new Element('div');
        var gm_div  = new Element('div', {'class': 'gm'});
        var mrl_div  = new Element('div', {'class': 'block-maps-searchresults-list'});
        mrl_div.inject(gm_div);
    
        var thumb = divs[i].getElements('.thumb');
        var title = divs[i].getElements('.title');
        var text = divs[i].getElements('.text');
        
        thumb.inject(mrl_div);
        title.inject(mrl_div);
        text.inject(mrl_div);
        
        gm_div.inject(parent);
        
        list.push(parent);
    }
    
    
    //alert(list[0].getProperty('html'));
    
    //if (!GBrowserIsCompatible()) return false;
    
    // Create the map
    map = new GMap2(document.getElementById("map"));
    geocoder = new GClientGeocoder();
    
    
    // Add controls
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GOverviewMapControl());
    map.addControl(new GMapTypeControl());
    

      
    
    
    for(var i = 0; i < searchResultList.length; i++) {
        var result = searchResultList[i];
        
        
        
        if(result.address != "" && result.address && geocoder)
        {
            showAddress(result.address, result.img, result.title, result.desc, result.url);

        }
        else if((result.lat != "" && result.lat) && (result.lon != "" && result.lon))
        {
            addCustomMarker(result.lat, result.lon, result.img, result.title, result.desc, result.url, result.target);
        }
        else
        {
            //alert(result.address + " not found");
        }
    }



}
// add marker
function addCustomMarker(lat, lon, img, title, desc, url, target) 
{

    var html = list[lat_points.length].get('html');
    

    lat_points.push(lat);
    lon_points.push(lon);
    
    var html =  "<div class='gm'><div class='block-maps-searchresults-list'><div class='thumb'><a href='" + url + "' target='"+target+"'><img src='" + img + "' alt='Map'/></a></div>"+
                "<div class='title'><a href='"+url+"' target='"+target+"'><span>"+title+"</span></a></div>"+
                "<div class='text'><a href='"+url+"' target='"+target+"'><span>"+desc+"</span></a></div>"+
                "</div></div>"

    
    
    var point = new GLatLng(lat, lon);
  
    var icon = new GIcon(G_DEFAULT_ICON);

    icon.image = "_images/customGMIcon.png";  
    icon.iconSize = new GSize(20, 34); 
    icon.iconAnchor = new GPoint(0, 33);
    icon.shadow = "_images/customGMIcon.png";  
    icon.shadowSize = new GSize(20, 34); 
    var marker = new GMarker(point, {icon: icon});
    GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
    map.addOverlay(marker);
    
    
    if(searchResultList.length <= lat_points.length) geocoderFinished();

}

// add marker by address
function showAddress(address, img, title, desc, url) {
  if (geocoder) {
    geocoder.getLatLng(address,
      function(point) {
        if (!point) {
          //alert(address + " not found");
        } else {
            addCustomMarker(point.y, point.x, img, title, desc, url);
        }
      }
    );
  }
}
// executed if all addresses are loaded
function geocoderFinished()
{
    lat_points.sort();
    lon_points.sort();

    var new_bounds = new GLatLngBounds(new GLatLng(lat_points[0], lon_points[0]), new GLatLng(lat_points[lat_points.length-1], lon_points[lon_points.length-1]));

    map.setCenter(new_bounds.getCenter(), map.getBoundsZoomLevel(new_bounds));

}

// groeiboek stats flash component

var jsReady = false;
var tabClick = false;
var flashActiveTabId = 1;


function groeiboek_flash_init() 
{
  jsReady = true;
  getGroeiboekTabs();
}
function getGroeiboekTabs()
{
  var tabElements = $(document.body).getElements('.tab');
    
  for(var i = 0; i < tabElements.length; i++) { 
    var tabElement = tabElements[i];
    tabElement.addEvent('click', function(e){
      flashActiveTabId = $(this).id.substring($(this).id.indexOf('tabs-tab') + 8);
    });
  }

}

   
function isReady() {
  setGrafiekDataProvider("data/" + grafiekDataList[flashActiveTabId-1], flashActiveTabId);
  if(!tabClick)
  {
    setGrafiekDataProvider("data/" + grafiekDataLength, "length");
    setGrafiekDataProvider("data/" + grafiekDataWeight, "weight");
    tabClick = true;
  }
  return jsReady;
}

function getFlashMovie(movieName) {
  var isIE = navigator.appName.indexOf("Microsoft") != -1;
  return (isIE) ? window[movieName] : document[movieName];
}


 function setGrafiekDataProvider(value, id) {
  getFlashMovie("groeiboekgrafiek_"+id).setDataProvider(value);
 }
 
 function sendToJavaScript(value) {
    //alert("ActionScript says: " + value);
 }


function setupLoginboxEqualHeights() {
  var formtitles = $$(
    'div.column-wide div.column-left div.block-formtype1 form h2 span',
	'div.column-wide div.column-right div.block-formtype1 form h2 span'
  );
  var titleheight = 0;
  formtitles.each(function(loginboxHeader) {
    if(loginboxHeader.getSize().y > titleheight) {
	  titleheight = loginboxHeader.getSize().y;
	}
  });
  formtitles.each(function(loginboxHeader) {
    loginboxHeader.setStyle('height', titleheight + 'px');
  });
  
  
  var loginforms = $$(
    'div.column-wide div.column-left div.block-formtype1 form',
	'div.column-wide div.column-right div.block-formtype1 form'
  );
  var formheight = 0;
  loginforms.each(function(loginbox) {
    if(loginbox.getSize().y > formheight) {
	  formheight = loginbox.getSize().y;
	}
  });
  loginforms.each(function(loginbox) {
    loginbox.setStyle('height', formheight + 'px');
  });
}

/**
 * Creates custom alt background
 */
function setupMagazinsAltBG()
{
    var containerDivs = $(document.body).getElements('div.block-magazinlink');
    for(var i = 0, len = containerDivs.length; i < len; i++) {
        var element = containerDivs[i];
        // add event handlers
        element.addEvent("mouseenter", imgMouseEnter);
        element.addEvent("mouseleave", imgMouseLeave);
        
    }

}

function imgMouseEnter()
{
    var elements = $(this).getElements('em');
    //alert(elements.length);
    var element = elements[0];
    element.setProperty('class', 'magazin-alt-hover');
}

function imgMouseLeave()
{
    var elements = $(this).getElements('em');
    var element = elements[0];
    element.setProperty('class', 'magazin-alt');
}





  
  
  
/**
 * 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('domready', setupLoginboxEqualHeights);

window.addEvent('load', setupArticleSizing);
//window.addEvent('load', googlemaps_initialize);
//window.addEvent('load', groeiboek_flash_init);
window.addEvent('load', setupMagazinsAltBG);