/*
Copyright (c) 2009 Ylab, www.ylab.nl
Turn html into a drop down list

<div class="dropdown">
	<div class="dropdown-value">Selected value</div>
	<ul class="dropdown-list">
		<li><a href="#1">Option 1</a></li>
		<li><a href="#2">Option 2</a></li>
		<li><a href="#3">Option 3</a></li>
	</ul>
</div><!--dropdown-->
*/
function dropdown(classGizmo, listTagName){
	//default parameters
	if(!classGizmo){
		classGizmo = 'dropdown';
	}
	if(!listTagName){
		listTagName = 'ul';
	}
	var classDropped = classGizmo + '-dropped';

	//hide the list part
	$('.' + classGizmo + ' ' + listTagName).hide();

	//listners for mouse-events
	//and add required css properties
	$('.' + classGizmo).hover(
		function(event){
			//mousover
			$(this).addClass(classDropped);
			//auto open after 1 sec
			if(!this.id){
				this.id = classGizmo + new Date().getMilliseconds();
			}
			this.timeoutId = window.setTimeout("$('#" + this.id + "').click();", 1000);
		},
		function(event){
			//mousout
			var obj = this;
			if(this.timeoutId){
				window.clearTimeout(this.timeoutId);
			}
			$(listTagName, this).slideUp('normal', function(){
				$(obj).removeClass(classDropped);
			});
		}
	).click(function(){
		//click
		$(listTagName, this).slideDown();
	}).css({
		position:'absolute',zIndex:1,cursor:'pointer',overflow:'visible'
	});
}

$(document).ready(function(){
	dropdown();
});