if (document.observe) document.observe("dom:loaded", function() {
  
  /*
  HM.Flash.Text.load("h1", {
    src: "/flash/titel.swf"
  })
      
  HM.Flash.Text.load("h2", {
    src: "/flash/header.swf"
  })
  */
            
});
function initializeHomePage() {
  var param = arguments[0] || {};
  
  // Initialize loader
  Loader = new HM.Tooltip.Loader('<img src="/images/loading.gif" alt="" width="16" height="16" border="0">', {
    'text'      : 'Gegevens worden opgehaald',
    'separator' : '&nbsp;'
  });
  
  // Main searchform
  formSearchElement = $('frm_search');
  
  if(param.list) {
    observeListContext();
  }else{
    observeMapContext();
  }
  
  // Initialize calendars
  initializeCalendars();
  
  // Initialize some values
  if(param.datestart) Calendar_datestart.setDate(new Date(param.datestart));
  if(param.dateend)   Calendar_dateend.setDate(new Date(param.dateend));
  if(param.type)      changeHiddenValues(formSearchElement,'type',param.type);
  if(param.categorie) changeHiddenValues(formSearchElement,'categorie',param.categorie);
  
  // Initialize checkbox
  checkboxValueToText(formSearchElement);
  
  // Initialize tooltip
  HM.Tooltip.load("a.tooltip", {
    width           : 400,
    effectDuration  : 0.5,
    delay           : 50,
    opacity         : 0.9,
    zIndex          : 1000000,
    loadingMsg      : "/images/loading.gif"
  });
  
  // Initialize google maps 
  if(!param.list) initHomeMap();
  
}
function initializeCalendars() {
  Calendar_datestart = Calendar.setup({
    dateField      : 'datumvan',
    triggerElement : 'datumvan'
  });
  Calendar_dateend = Calendar.setup({
    dateField      : 'datumtot',
    triggerElement : 'datumtot'
  });
}
function observeListContext() {
   formSearchElement.observe('value:changed', function(event) {
    doNavigateTo();
  });
} 
function observeMapContext() {
   formSearchElement.observe('value:changed', function(event) {
    updateMap(Event.element(event));
  });
}
function initHomeMap() {
  map = new HM.Googlemaps('kaartContainer', {
    //'latlng'             : '51.6377, 5.338325',
    'latlng'             : '51.6505, 5.3700',
    'zoom'               : 12,
    'useClusters'        : true,
    'hotspotsURI'        : '/handlers/json/hotspots.lp',
    'options'            : {
     'scrollwheel'  : false
    },
    cluster: {
      'styles'          : {
    		0   : {
  			  image     : "/images/googlemaps/hs_cluster.png",
  			  textColor : '#FFFFFF',
  			  width     : 53,
  			  height    : 52
  		  },
    		10  : {
    			image     : "/images/googlemaps/hs_cluster.png",
    			textColor : '#FFFFFF',
    			width     : 56,
    			height    : 55
    		},
    		20  : {
    			image     : "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png",
    			textColor : '#FFFFFF',
    			width     : 66,
    			height    : 65
    		}
    	}
    },
    'afterMarkersInitialized' : function() {
      Loader.hide();
    }
  });
  
  updateMap($('frm_search'));
}
function initArrangementenMap(activiteiten) {
  if(activiteiten) {
    var mapArrangementen = new HM.Googlemaps('map', {
      'latlng'             : '51.6525, 5.3900',
      'zoom'               : 12,
      'useClusters'        : true,
      'options'            : {
       'scrollwheel'  : false
      },
      cluster: {
        'styles'          : {
      		0   : {
    			  image     : "/images/googlemaps/hs_cluster.png",
    			  textColor : '#FFFFFF',
    			  width     : 53,
    			  height    : 52
    		  },
      		10  : {
      			image     : "/images/googlemaps/hs_cluster.png",
      			textColor : '#FFFFFF',
      			width     : 56,
      			height    : 55
      		},
      		20  : {
      			image     : "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png",
      			textColor : '#FFFFFF',
      			width     : 66,
      			height    : 65
      		}
      	}
      }
    });
    mapArrangementen.addMarkers(activiteiten);
  }
}
function getContent(param) {
  if(!param) param = {};
  
  var element = param.element,
      page    = param.page,
      q       = param.q;
     
  if(!(element = $(element) || $('ajaxContent') )) {
    return;
  }
  
  Loader.show();
  
  new Ajax.Request(getURI(page), {  
  	method          : 'get',   
  	parameters      : $H(q).toQueryString(),
  	onSuccess       : function(request) {     
  		try{
        new Effect.Fade(element, {
          duration: 0.5,
          afterFinish: function() {
            element.update(request.responseText);
            new Effect.Appear(element, {
              duration: 0.5
            });
            Loader.hide();
          }
        });
  		}catch(e){
        console.log(e);
      }
  	}
  }); 
}
function getURI(page) {
  var URI;
  switch(page) {
    case 'activiteiten':
      URI = '/handlers/ajax/activities-list.lp';
      break;
    default:
      URI = '/handlers/ajax/activities-list.lp';
  }
  return URI;
}
function toggleFilterDropDown(element) {
	$(element).down(0).toggle();
}
function higlightOptionName(element) {
	$(element).next().toggleClassName("filterButtonActive");
}
function updateMap(form) {
  Loader.show();
  map.retrieveAndUpdateMarkers(form.serialize(true));
}
function setHiddenValues(form,name,value) {
  changeHiddenValues(form,name,value);
  fireSearchEvent();
  return false;
}
function changeHiddenValues(form,name,value,force) {
  form = $(form);
  if(!force && form[name].value == value) value = '';
  form[name].value = value;
  
  if(!value || value == 'voortdurend') {
    if(name == 'type') {
      form.datestart.value = '';
      form.dateend.value = '';
    }
  }
  
  if(value == 'eenmalig' && !(form.datestart.value || form.dateend.value)) {
    form.datestart.value = dateToday;
    form.dateend.value   = dateAhead;
  }
  
  var selector = 'opt'+name
  $$('.'+selector).each(function(el) {
    if(el.hasClassName('isSelected')) el.removeClassName('isSelected');
    if(value) {
      var cName = selector+'_'+value;
      if(el.hasClassName(cName)) el.addClassName('isSelected');  
    }
  });
  
}
function handleCheckboxEvent() {
  var form;
  if(form = checkboxEvent(arguments[0],arguments[1])) {
    fireSearchEvent();
  }
};
function checkboxEvent() {
  var name         = arguments[0],
      form         = $(arguments[1]);
  
  checkboxValueToText(form,name);
  return form;
}
function deleteDate(form,name) {
  $(form)[name].value = '';
  fireSearchEvent();
}
function dateChanged(input) {
  changeHiddenValues(input.form,'type','eenmalig',true);
  fireSearchEvent();
}
var timeout;
function fireSearchEvent() {
  if(timeout) window.clearTimeout(timeout);
  timeout = _fireSearchEvent.delay(0.5);
};
function _fireSearchEvent() {
  formSearchElement.fire('value:changed');
};
function checkboxValueToText() {
  var form          = $(arguments[0]),
      name          = arguments[1] || null,
      names         = $w('leeftijd segment activiteit soort tijdsduur arrangement dagen'),
      checkboxName,
      element;
  
  names.each(function(n) {
    if(name && name != n) return;
    
    checkboxName = 'search_'+n;
    
    if((element = $('selected_'+n)) && form[checkboxName] ) {
      var html = form.getInputs('checkbox', checkboxName).findAll(function(el) {
        if(el.checked)  return el;
      }).collect(function(s) {
        return s.title;
      }).join('<br>');
    }
    element.update(html);
  });
}
function changeView() {
  var form = $(arguments[0]),
      value = arguments[1] || 0;
  
  form.list.value = value;
  return formAction(form,"/nl/stel-zelf-samen.lp");
}
function doNavigateTo() {  
  var page = arguments[0] || 0,
      form = $(document.frm_search);
      form.current_page.value = page;
  
  getContent({
    element : 'ajaxContent',
    page    : 'activiteiten',
    q       : form.serialize(true)
  });
  //document.frm_search.submit();
}
function formAction() {
  var frm     = arguments[0],
      action  = arguments[1] || "";
      
  if(!(frm = $(frm))) return false;
  
  frm.action   = action;
  frm.onsubmit = function() {
    return true;
  };
  frm.submit();
  return false;
}
function comparePasswordsAndSend( form ) {
  if(!$(form)) return false;
  
  if(form.validate()) {
    var pass1 = form.password.value,
        pass2 = form.password2.value;
        
    if(pass1 == pass2) {
      document[form.name].submit();
    }else{
      alert("Wachtwoorden zijn niet gelijk");
    } 
  }
  return false;
}