var tog_elm = [];
var prop;
window.addEvent('domready', function() {
	if($type($('toggle')) == 'element'){
		//alert($('toggle').getElements('h4').length);
		$('toggle').getElements('h4').each(function(el){
			tog_elm[tog_elm.length] = (el.get('title'));										
			el.setProperty('celement', el.get('title'));
			el.set('title', '');
			el.addEvent('click', function(elm){	
				if($type($(this.getProperty('celement'))) == 'element'){
					tog_elm.each(function(obj){
						$(obj).addClass('toggle_hide');
					});
						//				  alert
						//$(el).addClass('toggle_hide');
					//});
					prop = this.getProperty('celement');
					$(prop).removeClass('toggle_hide');
					//if(this.getProperty('celement') == 'klassementen_overzicht'){ 
						$('toggle_winbtm').getElements('a').each(function(el){
							if(!el.hasClass(prop)){
								el.addClass('toggle_hide');
							} else {
								el.removeClass('toggle_hide');
							}
						});
					//} else { 
					//	$('toggle_winbtm').getElements('a').removeClass('toggle_hide');
					//}
					//	$('toggle_winbtm').getElements('a.'+this.getProperty('celement')).removeClass('toggle_hide');
				}
				//alert('celement->'+el.getProperty('celement'));
				//alert('celement->'+this.getProperty('celement'));
			});
		})
	}
	if($type($('cal_seldis')) == 'element'){
		$('cal_seldis').addEvent('change', function(){									
			sel_el = $('cal_selcat');
			sel_el.disabled = !this.value || this.value == '' ? true : false;
			sel_el.options.length = 1;	
			//if($type(req))req.cancel();
			req = new Request.JSON({url: "/", onSuccess: function(r){
					if($type(r.categories))
					{
//						alert('events'+r.events.length+'categories'+r.categories.length);
						$('cal_selcat').disabled = !r.categories.length ? true : false;
						if(r.categories.length > 0)
						{
							r.categories.each(function(option) {
								var opt = document.createElement('option');
									opt.text = option.name;
									opt.value = option.value;
									add_option($('cal_selcat'), opt);
							} );
						}
					}
					// get_events
					//get_events(false);
					$('cal_events').set('html', (!$type(r.events) || r.events.length == 0 ? 'Er zijn geen evenementen.' : ''));
					if($type(r.events))
					{
						//$('cal_events').set('html', (r.events.length == 0 ? 'Er zijn geen evenementen.' : ''));
						if(r.events.length > 0)
						{
							r.events.each(function(option, i) {
								new Element('a', {'href': '/evenement/'+option.url+'.html', 'class' : (i==0 ? '' : ''), 'title': option.name}).adopt(
									new Element('span', {'class': 'span1'}).appendText(option.shortdate),
									new Element('span', {'class': 'span2'}).appendText(option.location),
									new Element('span', {'class': 'span3'}).appendText(option.nametrunc)
								).inject($('cal_events'));
								new Element('br').inject($('cal_events'));
							});
						}
					}
				}
			}).get({'disciplines': this.value});

		});
	}
	if($type($('cal_selcat')) == 'element'){
		$('cal_selcat').addEvent('change', function(){									
			get_events(this.value);
		});
	}
});

get_events = function(val){
	$('cal_events').set('html','<img src="/images/ajax-loader.gif" alt="Evenementen worden geladen..." />');
	req = new Request.JSON({url: "/", onSuccess: function(r){
			$('cal_events').set('html', (!$type(r.events) || r.events.length == 0 ? 'Er zijn geen evenementen.' : ''));
			if($type(r.events))
			{
				
				if(r.events.length > 0)
				{
					r.events.each(function(option, i) {
						new Element('a', {'href': '/evenement/'+option.url+'.html', 'class' : (i==0 ? '' : ''), 'title': option.name}).adopt(
							new Element('span', {'class': 'span1'}).appendText(option.shortdate),
							new Element('span', {'class': 'span2'}).appendText(option.location),
							new Element('span', {'class': 'span3'}).appendText(option.nametrunc)
						).inject($('cal_events'));
						new Element('br').inject($('cal_events'));
					});
				}
			}
		}
	}).get({'disciplines': $('cal_seldis').value, 'category': val});	
}

/*

<span class="span1">{$v.event_startdate|date_format:"%d-%m"}</span>
<span class="span2">{$v.event_location}</span>
<span class="span3">{$v.event_name_trunc}</span>
			
			*/