// WD select box
Wd = {};
Wd.Elements = {};

Wd.Elements.Select = Options.extend
({
 	options:
	{
		indexClass: null
	},
 
 	element: null,
	popup: null,
	selected: null,
 
	initialize: function(el, options)
	{
		this.setOptions(options);
		
		this.element = $(el);
		this.element.setStyle('display', 'none');
		
		this.handler = this.toggle.bind(this);
		
		this.display = new Element('div', { 'class' : 'display' });
		
		this.display.addEvent
		(
		 	'click', function(ev)
			{
				new Event(ev).stop();
				
				//
				// close others
				//

				if (Wd.Elements.currentSelect && (Wd.Elements.currentSelect != this))
				{
					Wd.Elements.currentSelect.toggle();
				}
				
				this.toggle();
				
			}.bind(this)
		);

		this.createPopup();
		
		this.container = new Element('div', { 'class' : 'wd-select' });
		this.container.appendChild(this.display);
		this.container.appendChild(this.popup);

		this.container.injectAfter(this.element);
	},
	
	createPopup: function()
	{
		this.popup = new Element
		(
		 	'ul',
			{
				'class': 'popup',
				'styles':
				{
					'display': 'none'
				}
			}
		);
		
		this.transition = new Fx.Style(this.popup, 'opacity', { wait: false, duration: 250 });

		this.element.getElements('option').each(this.addOption, this);
	},
	
	count: 0,
	
	addOption: function(option)
	{
    	var element = new Element('li');
		
		if (this.options.indexClass)
		{
			element.addClass(this.options.indexClass + this.count);
		}
		
		element.innerHTML = option.innerHTML;
		
		if (this.count++ % 2 == 0)
		{
			element.addClass('even');
		}
		
		if (option.disabled)
		{
			element.addClass('disabled');
		}
		else
		{
			element.addEvents
			({
				'click': this.onOptionClick.bind(this),
				'mouseout': this.onOptionLeave.bind(this),
				'mouseover': this.onOptionEnter.bind(this)
			});
		}
		
		if ($defined(option.getProperty('class')) && $chk(option.getProperty('class'))) 
		{
			element.addClass(option.getProperty('class'));
		}

		if (option.selected)
		{ 
			this.setSelected(element);
			this.display.innerHTML = option.innerHTML;
			this.fallback = element;
		}
		
		this.popup.appendChild(element);
	},
	
	onOptionClick: function(ev)
	{
		var ev = new Event(ev);
		
		ev.stop();
		
		var target = ev.target;
		var index = this.popup.getChildren().indexOf(target);
		var option = this.element.getChildren('option')[index]; 
		var value = option.value;
		
		if (this.selected && (target != this.selected))
		{
			this.selected.removeClass('selected');
		}
		
		this.selected = target;
		this.fallback = target;
		
		this.selected.addClass('selected');
		this.display.innerHTML = option.innerHTML;

		this.element.value = value;

		if (this.element.onchange)
		{
			this.element.onchange();
		}

		this.toggle();
	},
	
	setSelected: function(which)
	{
		if (this.selected)
		{
			if (this.selected != which)
			{
				this.selected.removeClass('selected');
			}
		}
		
		this.selected = which;
		
		if (this.selected)
		{
			this.selected.addClass('selected');
		}
	},

	onOptionLeave: function()
	{
		if (this.fallback)
		{
			this.setSelected(this.fallback);
		}
	},

	onOptionEnter: function(ev)
	{
		var ev = new Event(ev);
		
		this.setSelected(ev.target);
	},
	
	handler: null,
	
	toggle: function()
	{
		if (this.popup.getStyle('display') == 'none')
		{
			var coordinates = this.container.getCoordinates();

			var left = coordinates['left'];
			var top = coordinates['top'] + coordinates['height'];

			var width =
				coordinates['width']
				- this.popup.getStyle('border-left-width').toInt()
				- this.popup.getStyle('border-right-width').toInt()
				- this.popup.getStyle('padding-left').toInt()
				- this.popup.getStyle('padding-right').toInt();
			
//			console.info('width: %d', width);

			//
			// we add the 'selected' class which might have been removed
			// by the onOptionLeave
			//
			
			$(document.body).addEvent('click', this.handler);
			
			this.popup.setStyle('width', width);
			this.popup.setStyle('left', left);
			this.popup.setStyle('top', top);
			
			Wd.Elements.currentSelect = this;
			
			this.transition.set(0);
			
			this.popup.setStyle('display', 'block');
			
			this.transition.start(0.9);
		}
		else
		{
			Wd.Elements.currentSelect = null;
			
			this.popup.setStyle('display', 'none');
			
			$(document.body).removeEvent('click', this.handler);
		}
	}
});