/*
 * jQuery Custom Dropdown
 * @author Arnas Risqianto <arnas@krusita.com> 
 * @copyright 2010
 * @version 1.0.0
 * 
 */

dropdown = function(selText, linkData) {


	/* ----------------------
	| VALIDATE link data
	---------------------- */
	
	if (!linkData || typeof linkData != 'object' || (typeof linkData == 'object' && linkData.length == 0)) {
		console.log('No links passed to dropdown() - cannot continue!');
		return false;
	}
	
	
	/* ----------------------
	| CONFIG
	---------------------- */	
	
	var fontFamily = 'Trebuchet MS, Verdana';
	var selectCSS = {
		width: 530,
		border: 'none',
		'margin-top': 10,
		'margin-left': 18,
		borderRadius: 8,
		MozBorderRadius: 8,
		webkitBorderRadius: 8,
		fontSize: 14,
		background: "url('/img/manager/form/dropdown_arrow.gif') no-repeat top right #fff",
		color: '#444',
		'margin-right': -10
	};
	var selectActiveCSS = {borderColor: '#c5c5c5'};
	var ulCSS = {
		border: 'none',
		padding: 0,	
		margin: '0 0 0 0',
		'margin-left': -30,
		width: 557
	};
	var lisCSS = {
		borderTop: 'solid 1px #cee7a8',
		padding: 0
	};
	var linksCSS = {
		padding: '2px 0 2px 6px',
		textDecoration: 'none',
		fontSize: 14,
		display: 'block',
		background: '#eee'
	};
	var linksHoverCSS = {
		background: '#fff'
	};
	var linksDisabledCSS = {
		color: '#999'
	}


	/* ----------------------
	| PREP - set up a marker element that will be used to ancnor our dropd-down so that, when we insert it, it goes there, not at end
	| of document as is default behaviour of appendChild. Give it a unique ID so that, if the page features more than one drop-down,
	| each is positioned after the right placeholder
	---------------------- */
	document.write("<div id='dropdownPlaceholder_"+$('.dropdown').length+"'></div>");
	
	
	/* ----------------------
	| BUILD drop-down
	---------------------- */
	
	var div = document.createElement('div');
	var selectedText = selText; //'-- Select Question Type --';
	
	function buildDropdown() {
		
		with($(div)) {
			css({
				position: 'relative',
				cursor: 'pointer'
			});
			css(selectCSS);
			addClass('dropdown');
			text(selectedText);
			var ul = document.createElement('ul');
			$(ul).css({
				borderTop: 'none',
				listStyle: 'none',
				position: 'absolute',
		        zIndex: 10,
		        width: '100%',
		        cursor: 'pointer'
	        });
	        $(ul).css(ulCSS);
	        $(ul).hide();
			append(ul);
			for(var f in linkData) {
				var li = document.createElement('li');
				$(li).css(lisCSS);
				var a = document.createElement('a');
				$(a).css(linksCSS);
				a.href = linkData[f].url && typeof linkData[f].url == 'string' ? linkData[f].url : 'javascript:void(0);';
				if (linkData[f].text && typeof linkData[f].text == 'string') a.appendChild(document.createTextNode(linkData[f].text));
				if (linkData[f].disabled) {
					$(a).css(linksDisabledCSS);
					$(a).addClass('disabled');
				} else if (linkData[f].click && typeof linkData[f].click == 'function') {
					$(a).click(linkData[f].click);
				}
				li.appendChild(a);
				ul.appendChild(li);
			}
		}
		$(div).add($(div).find('*')).css({fontFamily: fontFamily});
	};
	
	buildDropdown();

	/* ----------------------
	| INSERT drop-down into DOM at placeholder, then remove placeholder
	---------------------- */	
	
	with($('#dropdownPlaceholder_'+$('.dropdown').length)) {
		after(div);
		remove();
	}
	
	
	/* ----------------------
	| EVENTS - set up mouseover/out/click events for this drop-down (excluding specific onclick handlers for links, which
	| are bound above)
	---------------------- */
	
	$('.dropdown').mouseover(function() { $(this).css({backgroundPosition: 'right bottom'}); $(this).css(selectActiveCSS); });
	$('.dropdown').click(function(e) {
	    if($(e.relatedTarget).parents('.dropdown').length == 0) {
	    	$(this).children('ul').slideDown('fast');
    	}
	});
	$('.dropdown').children('ul').mouseout(function(e) {
	    if ($(e.relatedTarget).parents('.dropdown').length == 0 && !$(e.relatedTarget).is('.dropdown')) $(this).slideUp('fast');
	});
	$('.dropdown').mouseout(function(e) {
	    if (
	    	$(e.relatedTarget).parents('.dropdown').length == 0
	    	&&
	    	(
	    		!$(e.relatedTarget).is('.dropdown')
	    		||
	    		(
	    			$(e.relatedTarget).is('.dropdown')
	    			&&
	    			$(e.relatedTarget).get(0) != $(this).get(0)
	    		)
	    	)
    	) {
	        $(this).css({backgroundPosition: 'right top'});
	        $(this).css(selectCSS);
	        $(this).children('ul').slideUp('fast');
	    }
	});
	$('.dropdown ul li a:not(.disabled)').mouseover(function() { $(this).css(linksHoverCSS); });
	$('.dropdown ul li a').mouseout(function() { 
		$(this).css(linksCSS); 
		});
	$('.dropdown ul li a').click(function(e) {
		var oldText = selectedText;
		selectedText = $(this).closest('li').text();
		$(div).replaceText(oldText, selectedText);
	});

};