/**
 * Author: M. Koopmans
 * Date: 23-6-2011
 * Version: 1.0
 */
 
/**
 *
 */
 var MKSelect = new MKSelect();
 
/**
 *
 */
function MKSelect()
{
	/**
	 *
	 */
	this.replaceSelect = function(selector)
	{
		//vars
		var name = $(selector).attr("name");
	
		//init
		var html = '        <div class="mk_select_container" id="' + name + '"><div class="mk_select">\
				<div class="corner corner_top_left"></div>\
				<div class="border border_top"></div>\
				<div class="corner corner_top_right"></div>\
				<div class="border border_left"></div>\
				<div class="options">\
					<div class="current" onclick="MKSelect.toggleOptions(\'#' + name + '\');">' + $(selector + " :selected").html() + '</div>\
					<a class="btn_toggle" onclick="MKSelect.toggleOptions(\'#' + name + '\');"><img src="/global/mk_select/images/dd_btn_toggle.png" /></a>\
					<div class="other">';
					
		$(selector + " OPTION").each(function(){ html += '<a onclick="javascript:MKSelect.selectOption(\'' + name + '\', \'' + $(this).val() + '\', \'' + $(this).html() + '\');">' + $(this).html() + '</a>'; })
		
		html += '            </div>\
				</div>\
				<div class="border border_right"></div>\
				<div class="corner corner_bottom_left"></div>\
				<div class="border border_bottom"></div>\
				<div class="corner corner_bottom_right"></div>\
			</div>\
			<input name="' + name + '" type="hidden" /></div>';
		
		$(selector).after(html);
		
		$("#" + name + " .mk_select").width(185);
		$("#" + name + " .mk_select .other a").width(175);
		
		$("#" + name).css("width", 185);
		
		$(selector).remove();
	}
	
	/**
	 *
	 */
	this.selectOption = function(name, value, label)
	{
		$("input[name=" + name + "]").val(value);
		
		$("#" + name + " .current").html(label);
		
		this.toggleOptions("#" + name);
		
		return false;
	}
	
	/**
	 *
	 */
	this.toggleOptions = function(selector)
	{		
		if($(selector + ' .other').css("display") == "none")
			$(selector).css("z-index", 60000);
		else
			$(selector).css("z-index", 1);
		
		$(selector + ' .other').toggle();
		
		return false;
	}
}

//automatic
$(document).ready(function(){ MKSelect.replaceSelect("SELECT[title='onderwerp']"); });