// Create namespace
if ( ! window.nl.hq ) {
	window.nl.hq = {} ;
} ;

/*  DropDownBox Class */
nl.hq.DropDownBox = function( element, index, listener ){
	this.element = element ;
	this.index = index ;
	this.listener = listener ;
	this.unfolded = false ;
	this.items = new Array() ;
	this.selectmultiple = true;
	this.defaultItem = null ;
	this.initialize() ;
}
nl.hq.DropDownBox.prototype = {
	initialize: function(){
			this.titlebar = ( nl.xd.dom.DOM.getByClassName( 'title' , 'div' , this.element ) )[ 0 ] ;
			this.optionholder = ( nl.xd.dom.DOM.getByClassName( 'optionholder' , 'div' , this.element ) )[ 0 ] ;
			
			var selectsingle  = ( nl.xd.dom.DOM.getByClassName( 'selectsingle' , 'div' , this.element ) ) ;
			if( selectsingle.length > 0 ){
				this.selectmultiple = false ;	
			}
			
			if( this.unfolded ){
				this.show() ;	
			} else {
				this.hide() ;
			}
			this.buildItems() ;	
			this.setEvents() ;
			this.update() ;
	} ,
	buildItems: function(){
		var self = this ;
		var options_arr = nl.xd.dom.DOM.getByClassName( 'option' , 'div' , this.element ) ;
		for( var i=0; i<options_arr.length; i++ ){
			this.items.push( new nl.hq.DropDownBoxItem( options_arr[ i ], i , self ) ) ;
		}
		if( this.items.length > 8 ){
			this.optionholder.style.height = ( 8 * 26 ) + 'px' ;
		}
		for( var i=0; i<options_arr.length; i++ ){
			this.items[ i ].checkValue() ;
		}			
	} ,
	setEvents: function(){
		var self = this ;
		nl.xd.event.Event.addListener( this.titlebar , 'mousedown' , function() { self.onClickTitle();  } ) ;
		nl.xd.event.Event.addListener( this.titlebar , 'mouseover' , function() { self.onRollOverTitle(); } ) ;
		nl.xd.event.Event.addListener( this.titlebar , 'mouseout' , function() { self.onRollOutTitle();  } ) ;
		nl.xd.event.Event.addListener( this.optionholder , 'mouseover' , function() { self.stopDelayedHide();  } ) ;
		nl.xd.event.Event.addListener( this.optionholder , 'mouseout' , function() { self.startDelayedHide();  } ) ;
	} ,
	onSelectItem: function( item ){
		if( !this.selectmultiple ){
			if( this.selecteditem ){
				this.selecteditem.setStatus( false ) ;
			}
			this.selecteditem = item ;
		}
		this.update() ;
	} ,
	update: function(){
		var label = nl.xd.dom.DOM.getByTagName( 'label' , this.element )[ 0 ] ;
		var _for = label.attributes[ 'for'].nodeValue ;
		var input = nl.xd.dom.DOM.get( _for , this.element ) ;
		input.value =  this.getValues() ;
		label.innerHTML = this.getTitles() ;		
	} ,
	onRollOverTitle: function(){
		nl.xd.dom.DOM.addClass( this.titlebar , 'title_over' )	;		
		this.stopDelayedHide() ;
	} ,
	onRollOutTitle: function(){
		nl.xd.dom.DOM.removeClass( this.titlebar , 'title_over' ) ;
		this.startDelayedHide() ;
	} ,
	onClickTitle: function(){
		this.toggle() ;
		this.stopDelayedHide() ;
	} ,
	toggle: function(){
		this.unfolded = !this.unfolded ;
		if( this.unfolded ){
			this.show() ;	
		} else {
			this.hide() ;
		}
	} ,
	getTitles: function(){
		var str = '' ;
		var selectedtitles = new Array() ;
		for( var i=0; i<this.items.length; i++ ){
			if( this.items[ i ].selected ){
				selectedtitles.push( this.items[ i ].getTitle() ) ;
			}
		}
		if( selectedtitles.length > 1 ){
			// return selectedtitles.join( ',' ) ;
			return 'Meerdere...' ;
		} else if( selectedtitles.length == 1 ){
			return selectedtitles[ 0 ] ;
		} else {
			if( this.selectmultiple ){
				return this.items[ 0 ].getTitle() ;
			} else {
				if( this.defaultItem ){
					return this.defaultItem.getTitle() ;
				} else {
					return this.items[ 0 ].getTitle() ;
				}
			}
		}
	} ,
	getValues: function(){
		var str = '' ;
		var selectedvalues = new Array() ;
		for( var i=0; i<this.items.length; i++ ){
			if( this.items[ i ].selected ){
				selectedvalues.push( this.items[ i ].getValue() ) ;
			}
		}
		return selectedvalues.join( '_' ) ;
	} ,
	show: function(){
		this.unfolded = true ;
		nl.xd.dom.DOM.addClass( this.titlebar , 'title_active' )	;	
		nl.xd.dom.DOM.removeClass( this.optionholder , 'displaynone' )	;
	} ,
	hide: function(){
		this.unfolded = false ;
		nl.xd.dom.DOM.removeClass( this.titlebar , 'title_active' )	;	
		nl.xd.dom.DOM.addClass( this.optionholder , 'displaynone' )	;
	} ,
	startDelayedHide: function(){
		var self = this ;
		this.timer = setTimeout( function(){ self.hide(); } , 200 ) ;
	} ,
	stopDelayedHide: function(){
		clearTimeout( this.timer ) ;
	} ,
	deselectAll: function(){
		for( var i=1; i<this.items.length; i++ ){
			this.items[ i ].setStatus( false ) ;
		}
		if( this.defaultItem ){
			this.onSelectItem( this.defaultItem ) ;	
			this.defaultItem.setSelected() ;
		}
		this.update() ;
	} ,
	setDefault: function( item ){
		this.defaultItem = item ;	
	}
}

/*  DropDownBoxItem Class */
nl.hq.DropDownBoxItem = function( element, index, parent ){
	this.element = element ;
	this.index = index ;
	this.parent = parent ;
	this.selected = false ;
	this.isDefault = false ;
	this.initialize() ;
}
nl.hq.DropDownBoxItem.prototype = {
	initialize: function(){
		this.buildItem() ;
		this.setEvents() ;
		//this.checkValue() ;
	} ,
	buildItem: function(){
	} ,
	setEvents: function(){
		var self = this ;
		nl.xd.event.Event.addListener( this.element , 'click' , function() { self.onClick();  } ) ;
		nl.xd.event.Event.addListener( this.element , 'mouseover' , function() { self.onRollOver(); } ) ;
		nl.xd.event.Event.addListener( this.element , 'mouseout' , function() { self.onRollOut();  } ) ;
	} ,
	onClick: function(){
		if( this.index === 0 && this.parent.selectmultiple ){
			this.parent.deselectAll() ;
		} else {
			this.parent.items[ 0 ].setStatus( false ) ;
		}
		this.setSelected() ;
		this.parent.onSelectItem( this ) ;
	} ,
	onRollOver: function(){
		nl.xd.dom.DOM.addClass( this.element , 'rollover' )	;
		//this.parent.stopDelayedHide() ;
	} ,
	onRollOut: function(){
		nl.xd.dom.DOM.removeClass( this.element , 'rollover' )	;
		//this.parent.startDelayedHide() ;
	} ,
	setSelected: function(){
		this.selected = !this.selected ;
		this.setStatus( this.selected ) ;
	} ,
	setStatus: function( status ){
		this.selected = status ;
		
		var checkbox = nl.xd.dom.DOM.getByTagName( 'input' , this.element ) ;
		checkbox[0].checked = status ;
		
		if( status ){
			nl.xd.dom.DOM.removeClass( this.element , 'rollover' )	;
			nl.xd.dom.DOM.addClass( this.element , 'selected' )	;
		} else {
			nl.xd.dom.DOM.removeClass( this.element , 'selected' )	;
		}		
	} ,
	checkValue: function(){
		var checkbox = nl.xd.dom.DOM.getByTagName( 'input' , this.element ) ;
		if( checkbox[ 0 ].checked ){
			this.setSelected() ;
		}
		if( !this.parent.selectmultiple && this.selected ){
			this.parent.onSelectItem( this ) ;
		}
		if( nl.xd.dom.DOM.hasClass( this.element , 'default' ) ){
			this.isdefault = true ;
			this.parent.setDefault( this ) ;
		}
	} ,
	getTitle: function(){
		return ( nl.xd.dom.DOM.getByTagName( 'span' , this.element ) )[ 0 ].innerHTML ;
	} ,
	getValue: function(){
		var title = ( nl.xd.dom.DOM.getByTagName( 'input' , this.element ) )[ 0 ].name ;
		return title.substring( 9 , title.length );
	}

}

// nl.xd.event.Event.addListener( window , 'load' , function() { new Start() ; } ) ;