// JavaScript Document

document.observe('dom:loaded', function(){
	$$('.css-select-box').each(function(e){
		
		//Dropdown function
		e.ddFX = function(){
			e.childElements().each(function(i){
				if (i.hasClassName('css-sb-dropdown'))
				{
					//Position the dropdown correctly
					i.clonePosition(e, {setWidth: false, setHeight: false, offsetTop: e.getHeight()});
					
					//Show dropdown
					i.show();
					//i.makePositioned();
					
					//Fix width
					if (e.getWidth() > i.getWidth())
					{
						i.style.width = e.getWidth()+'px';
					}
					
					//Stop observing mouse-click event on select box
					e.stopObserving('click', e.bindDdFX);
					
					e.bindHideFX = e.hideFX.bindAsEventListener(e);
					//Observe mouse-click event on document (slight delay to avoid conflicts)
					setTimeout(function(){document.observe('click', e.bindHideFX)},10);
				}
			});
		};
		
		//Hide dropdown function
		e.hideFX = function(){
			e.childElements().each(function(i){
				if (i.hasClassName('css-sb-dropdown'))
				{
					//Stop observing mouse-click event on the document
					document.stopObserving('click', e.bindHideFX);
					//Hide dropdown
					i.hide();
					//Bind and observe mouse-click event on select box
					e.bindDdFX = e.ddFX.bindAsEventListener(e);
					e.observe('click', e.bindDdFX);
				}
			});
		}
		
		//Make positioned
		//e.makePositioned();
		
		//Bind and observe mouse-click event on select box
		e.bindDdFX = e.ddFX.bindAsEventListener(e);
		e.observe('click', e.bindDdFX);
		
		//Enable hover effects for dropdown
		e.descendants().each(function(i){
			i.observe('mouseover', function(){ i.addClassName('hover'); });
			i.observe('mouseout', function(){ i.removeClassName('hover'); });
		});
		
	});
});