jQuery.fn.CRselectBox = function(opts){
	var _self = this;
	
	var _parent = _self.parent();
    var name = _self.attr("name");
	var id = _self.attr("id");
    
	var wrapHtml = '<div class="CRselectBox" id="'+id+'_CRbox"></div>';
	var $wrapHtml = $(wrapHtml).appendTo(_parent);
	var selectedOptionValue = _self.find("option:selected").attr("value");
	var selectedOptionTxt = _self.find("option:selected").text();
	
	var inputHtml = '<input type="hidden" value="'+selectedOptionValue+'" name="'+name+'" id="'+id+'"/>';
	$(inputHtml).appendTo($wrapHtml);
	var inputTxtHtml = '<input type="hidden" value="'+selectedOptionTxt+'" name="'+name+'_CRtext" id="'+id+'_CRtext"/>';
	$(inputTxtHtml).appendTo($wrapHtml);
	var aHtml = '<a class="CRselectValue" href="#">'+selectedOptionTxt+'</a>';
	$(aHtml).appendTo($wrapHtml);
	var ulHtml = '<ul class="CRselectBoxOptions" id="'+id+'_CRlist"></ul>';
	var $ulHtml = $(ulHtml).appendTo($wrapHtml);
	var liHtml = "";
	_self.find("option").each(function(){
        var text = $(this).text();
        var value = text;
        if ($(this).attr("value") != null) {
            value = $(this).attr("value");
        }
		if($(this).attr("selected")){
			liHtml += '<li class="CRselectBoxItem"><a href="#" class="selected" rel="'+value+'">'+text+'</a></li>';
		}else{
			liHtml += '<li class="CRselectBoxItem"><a href="#" rel="'+value+'">'+text+'</a></li>';
		}
	});
	$(liHtml).appendTo($ulHtml);
	
	$( $wrapHtml, _parent).hover(function(){
		$(this).addClass("CRselectBoxHover");
	},function(){
		$(this).removeClass("CRselectBoxHover");
	});
	$(".CRselectValue",$wrapHtml).click(function(){
        $(".CRselectBoxOptions").hide();
		$(this).blur();	
		$(".CRselectBoxOptions",$wrapHtml).show();
		return false;
	});
	$(".CRselectBoxItem a",$wrapHtml).click(function(){
		$(this).blur();
		var value = $(this).attr("rel");
		var txt = $(this).text();
		$("#"+id).val(value);
		$("#"+id+"_CRtext").val(txt);
		$(".CRselectValue",$wrapHtml).text(txt);
		$(".CRselectBoxItem a",$wrapHtml).removeClass("selected");
		$(this).addClass("selected");
		$(".CRselectBoxOptions",$wrapHtml).hide();
        
        if (opts.change) {
            opts.change.call();
        }
		return false;
	});
	$(document).click(function(event){
		if( $(event.target).attr("class") != "CRselectBox" ){
			$(".CRselectBoxOptions",$wrapHtml).hide();
		}
	});
	_self.remove();
	return _self;
}

function CRselectBox_AppendOptions(opts, list)
{
    for(i=0;i<list.length;i++) {
        $('<li class="CRselectBoxItem"><a href="#" rel="' + list[i].key + '">' + list[i].value + '</a></li>').appendTo("#"+opts.id+"_CRlist");
    }
    
    var $wrapHtml = $('#'+opts.id+'_CRbox');
    $(".CRselectBoxItem a", $wrapHtml).click(function(){
		$(this).blur();
		var value = $(this).attr("rel");
		var txt = $(this).text();
		$("#"+opts.id).val(value);
		$("#"+opts.id+"_CRtext").val(txt);
		$(".CRselectValue",$wrapHtml).text(txt);
		$(".CRselectBoxItem a",$wrapHtml).removeClass("selected");
		$(this).addClass("selected");
		$(".CRselectBoxOptions",$wrapHtml).hide();
        
        if (opts.change) {
            opts.change.call();
        }
		return false;
	});
}

function CRselectBox_RemoveOptions(opts)
{
    var $wrapHtml = $('#'+opts.id+'_CRbox');
    var firstOption = '#' + opts.id + '_CRlist li:eq(0)';
    var value = $(firstOption).attr("rel");
    var txt = $(firstOption).text();
    $(firstOption).addClass("selected");
    
    $("#"+opts.id).val(value);
    $("#"+opts.id+"_CRtext").val(txt);
    $(".CRselectValue",$wrapHtml).text(txt);
    
    $('#' + opts.id + '_CRlist li:gt(0)').remove();
}