
function DropDown(id, changeEvent)
{
	this.__dropDown = $('#' + id);
	
	this.__changeEvent = changeEvent;
	
	this.__selectedItem = null;
	
	this.__top = null;
	this.__options = null;
	this.__selectedText = null;
	
	this.init();
}
DropDown.prototype = {
	constructor: DropDown,
	
	init: function()
	{
		// retrieve all needed elements.
		this.__top = this.__dropDown.find('.drop-down-top');
		this.__selectedText = this.__dropDown.find('.drop-down-selected-text');
		this.__options = this.__dropDown.find('.drop-down-options');
		
		var self = this;
		
		this.__top.click(
			function()
			{
				self.__options.slideToggle('fast');
				return false;
			}
		);
		
		// make the options default hidden
		this.__options.hide();
		
		// create a button for opening the options
		var button = $(document.createElement('div'));
		button.addClass('drop-down-button');
		this.__top.append(button);
		
		// create an event for hiding the options when the document is clicked
		$(document).click(
			function()
			{
				self.__options.slideUp('fast');
			}
		);
		
		// walk all option items for binding the selection functionality
		this.__options.find('li').each(
			function()
			{
				var item = $(this);
				
				// if this item is the active one, set it as the selected item
				if ( self.__selectedItem == null || item.hasClass('active') )
				{
					self.__selectedItem = item;
				}
				
				// call a new function for achieving closure
				self.__bindItemEvents(item);
			}
		);
	},
	
	__bindItemEvents: function(item)
	{
		var self = this;
		item.click(
			function()
			{
				// remove the active marker from the old selected item
				if ( self.__selectedItem )
				{
					self.__selectedItem.removeClass('active');
				}
				
				// put the current item als the selected item and place the active marker
				self.__selectedItem = item;
				self.__selectedItem.addClass('active');
				
				// retrieve the item text
				var itemText = item.text();
				
				// set the text of the current item als the selected text
				self.__selectedText.text(itemText);
				
				// hide the options
				self.__options.slideUp('fast');
				
				// if a changeEvent function is defined, call it with the item ID and text as parameters
				if ( self.__changeEvent instanceof Function )
				{
					var itemID = item.attr('id') ? item.attr('id').substring(DropDown.ITEM_ID_PREFIX.length) : null;
					self.__changeEvent(itemID, itemText);
				}
			}
		);
	}
}
DropDown.ITEM_ID_PREFIX = 'item_';
