if(typeof Ooievaar == "undefined" || ! Ooievaar){
	var Ooievaar = {};
}
if(typeof JF == "undefined" || ! JF){
	var JF = {};
}

Ooievaar.Site = function(){
	this.init();
}

Ooievaar.Site.prototype = {
	
	// shortcuts to YAHOO objects
	event: YAHOO.util.Event,
	dom: YAHOO.util.Dom,
	
	categoryDropDown: null,
	
	init: function(){
		this.setupCategoryDropDown();
		this.setupIconToolTips();
	},
	
	setupCategoryDropDown: function(){
		this.categoryDropDown = new Ooievaar.DropDown('categoryDropDown', { closeButton: true });
		this.stadsdeelDropDown = new Ooievaar.DropDown('stadsdeelDropDown', { closeButton: true });
//		this.eventDropDown = new Ooievaar.DropDown('eventDropDown', { closeButton: true });
		
		if(document.getElementById('filterDoelgroep'))
			new Ooievaar.DropDown('filterDoelgroep', { noColorChange: true });
		if(document.getElementById('filterWijk'))
			new Ooievaar.DropDown('filterWijk', { noColorChange: true });
	},
	
	setupIconToolTips: function(){
		var icons = YAHOO.util.Dom.getElementsByClassName('showToolTip', 'img');
		for(var i=0; i<icons.length; i++){
			var icon = icons[i];
			var toolTipText = icon.alt;
			icon.alt = '';
			if(toolTipText && toolTipText.length){
				var toolTipId = "iconToolTip_" + i;
				myTooltip = new YAHOO.widget.Tooltip(toolTipId, { 
				    context: icon, 
				    text: toolTipText,
				    showDelay: 500
				});
			}
		}
	}
}

Ooievaar.DropDown = function(elementName, $options){
	this.init(elementName, $options);
}

Ooievaar.DropDown.collection = new Array();

Ooievaar.DropDown.prototype = {
	
	// shortcuts to YAHOO objects
	event: YAHOO.util.Event,
	dom: YAHOO.util.Dom,
	
	button: null,
	yuiOverlay: null, // yui overlay element
	
	init: function(elementName, $options){
		
		Ooievaar.DropDown.collection.push(this);
		
		this.options = $options?$options:{};
		
		this.button = document.getElementById(elementName);
		this.button.style.cursor = 'pointer';
		var lists = this.dom.getElementsByClassName('dropdownList', 'div', this.button);
		if(lists.length){
			var element = lists[0];
			
			if(this.options.closeButton){
				var closeButton = this.addCloseButton(element);
			}
						
			this.yuiOverlay = new YAHOO.widget.Overlay(element, 
				{ 
					visible: false,
					context: [this.button, 'tl', 'bl'],
					zIndex: 9999 
				}
			);
			this.yuiOverlay.render();
			
			this.event.on(this.button, 'click', this.showDropDown, this.yuiOverlay);
			this.event.on(closeButton, 'click', this.hideDropDown, this.yuiOverlay);
			if(! this.options.noColorChange){
			}
		} else {
			alert('no list found in DropDown element');
		}
		
	},
	
	addCloseButton: function(element){
		
		// insert a close link in the container
		var first = element.firstChild;
		var closeLink = document.createElement('a');
		this.dom.addClass(closeLink, 'closeButton');
		closeLink.href = "#";
		var closeImage = document.createElement('img');
		//TODO make link dynamic
		closeImage.src = '/images/icon_close.gif';
		closeImage.style.marginRight = '0.5em';
		closeImage.alt = 'sluit';
		closeLink.appendChild(closeImage);
		var container = document.createElement('div');
		container.style.position = 'relative';
		container.appendChild(closeLink);
		element.insertBefore(container, first);
		return closeLink;
	},
	
	showDropDown: function(event, dropdown){

		// clicks on the dropdown list also end up here so check if we need to follow a link
		var target = YAHOO.util.Event.getTarget(event);
		var isList = false;
		while(target){
			if(target.nodeName.toUpperCase() == 'DIV'){
				if(YAHOO.util.Dom.hasClass(target, 'dropdownList')){
					isList = true;
					break;
				}
				if(YAHOO.util.Dom.hasClass(target, 'dropdown')){
					break
				}
			}
			target = target.parentNode;
		}
		
		if(! isList){
			// event handler for click, this = button
			YAHOO.util.Event.stopEvent(event);
			dropdown.align();
			if(dropdown.cfg.getProperty('visible')){
				dropdown.hide();
				YAHOO.util.Event.removeListener(document, 'click');
			} else {
				for(var i=0; i<Ooievaar.DropDown.collection.length; i++)
					Ooievaar.DropDown.collection[i].yuiOverlay.hide();
					
				dropdown.show();
				YAHOO.util.Event.addListener(document, 'click', function(){ dropdown.hide(); });
			}
		}
	},
	
	hideDropDown: function(event, dropdown){
		// event handler for close button click, this = button
		YAHOO.util.Event.stopEvent(event);
		dropdown.hide();
	}
}

YAHOO.util.Event.onDOMReady(function(){ var site = new Ooievaar.Site()});