(function($)
{
    $.fn.extend(
	{
        jelectbox: function(options)
		{
            var defaults = {
                selectbox_id: 'myjelectbox',
				width: 'auto',
				height: 'auto',
				disabled_alert_message: ''
            };
            
            var options = $.extend(defaults, options);
            
            return this.each(function()
			{
                var o = options;
                var obj = $(this);
				var l_selected = '';
				
				l_selected = $('#'+o.selectbox_id+' option:selected').text();
                $('#'+o.selectbox_id).after('<div class="jelectbox_main" style="position:relative; width:'+o.width+';"><div style="float:left;"><span class="jelectbox_text">'+l_selected+'</span></div><div style="float:right;"><a></a></div><div style="clear:both;"></div><div class="jelectbox_options" style="position:absolute; display:none; width:'+o.width+'"><div class="jelectbox_ul_parent" style="height:'+o.height+'; overflow:auto; overflow-x:hidden;"><ul class="jelectbox_ul_selectbox"></ul></div> </div></div>');
                
 				$('#'+o.selectbox_id).css('display','none');
				
				$("#"+o.selectbox_id+" *").each(function (i)
				{ 
					var current = $(this); 
					clsg = '';
					if (i % 2 == 0)
					{
						clsg = ' class="g"';
					}
					$('.jelectbox_ul_selectbox',obj)
						.append('<li value="' + current.attr("value") + '"'+clsg+'>' + current.text() + '</li>');
				});
				
				$('.jelectbox_options', obj).width($('.jelectbox_options', obj).width()+2);
				
                $('.jelectbox_main a', obj).click(function()
				{
					if ($("#" + o.selectbox_id).get(0).disabled == false)
					{
						$('.jelectbox_options', obj).slideToggle();

						$('.jelectbox_main').css('z-index', 0);
						$('.jelectbox_main', obj).css('z-index', 999);

						if ($('.jelectbox_options', obj).css('height') != '1px')
						{
							$(this).removeClass('up');
						} 
						else
						{
							$(this).addClass('up');
						}
					} 
					else 
					{
						alert(o.disabled_alert_message);
					}
                });
				
                $('ul.jelectbox_ul_selectbox li',obj).click(function()
				{
					var current_value = $(this).attr("value");
                    $('.jelectbox_text',obj).html($(this).text());
					$("#"+o.selectbox_id+" option:selected").attr("selected",false);
                    $("#"+o.selectbox_id+" option[value='" + current_value + "']").attr("selected", "selected");
                    $('.jelectbox_main a',obj).click();
					var domEl = $("#"+o.selectbox_id).get(0);
      				$(this).queue(domEl.onchange);
                });
                
            });
        }
    });
})(jQuery);

var checkboxHeight = "13";
var radioHeight = "25";
var selectWidth = "190";

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; }</style>');

var Custom =
{
	init: function()
	{
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		
		for(a = 0; a < inputs.length; a++)
		{
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled")
			{
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true)
				{
					if(inputs[a].type == "checkbox")
					{
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
					else
					{
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				span[a].onmousedown = Custom.pushed;
				span[a].onmouseup = Custom.check;
				document.onmouseup = Custom.clear;
			}
		}
		inputs = document.getElementsByTagName("select");
		
		for(a = 0; a < inputs.length; a++)
		{
			if(inputs[a].className == "styled")
			{
				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				
				for(b = 0; b < option.length; b++)
				{
					if(option[b].selected == true)
					{
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose;
			}
		}
	},
	pushed: function()
	{
		return;
	},
	check: function()
	{
		element = this.nextSibling;
		
		if(element.checked == true && element.type == "checkbox")
		{
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		}
		else
		{
			if(element.type == "checkbox")
			{
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} 
			else
			{
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				
				for(a = 0; a < inputs.length; a++)
				{
					if(inputs[a].name == group && inputs[a] != this.nextSibling)
					{
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function()
	{
		inputs = document.getElementsByTagName("input");
		
		for(var b = 0; b < inputs.length; b++)
		{
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled")
			{
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} 
			else if(inputs[b].type == "checkbox" && inputs[b].className == "styled")
			{
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} 
			else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled")
			{
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} 
			else if(inputs[b].type == "radio" && inputs[b].className == "styled")
			{
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function()
	{
		option = this.getElementsByTagName("option");
		
		for(d = 0; d < option.length; d++)
		{
			if(option[d].selected == true)
			{
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
};
window.onload = Custom.init;

$( function()
{  			
	$('#selecteerCompetitie').jelectbox({selectbox_id:'competitie', width:'202px', height:'auto'}); 
	$('#selectPeriodeVanMaand').jelectbox({selectbox_id:'selectVanMaand', width:'100px', height:'auto'});
	$('#selectPeriodeVanJaar').jelectbox({selectbox_id:'selectVanJaar', width:'70px', height:'auto'});
	$('#selectPeriodeTotMaand').jelectbox({selectbox_id:'selectTotMaand', width:'100px', height:'auto'});
	$('#selectPeriodeTotJaar').jelectbox({selectbox_id:'selectTotJaar', width:'70px', height:'auto'});
	
	$('ul.jelectbox_ul_selectbox li', '#selectPeriodeVanJaar').click(function()
	{
		checkTot();
    });
    $('ul.jelectbox_ul_selectbox li', '#selectPeriodeTotJaar').click(function()
	{
		checkTot();
    });
    $('ul.jelectbox_ul_selectbox li', '#selectPeriodeVanMaand').click(function()
	{
		checkTot();
    });
    $('ul.jelectbox_ul_selectbox li', '#selectPeriodeTotMaand').click(function()
	{
		checkTot();
    });
});
			
function checkTot()
{
	var jaarVan = $('#selectVanJaar');
	var jaarTot = $('#selectTotJaar');
	
	if( jaarVan.attr( 'value' ) > jaarTot.attr( 'value' ) )
	{			
		var Val = jaarVan.attr( 'value' );
		
		jaarTot.attr( "value", Val );
		
		$('.jelectbox_text', '#selectPeriodeTotJaar').html( Val );
		$("#selectTotJaar option").removeAttr("selected");
        $("#selectTotJaar option[value='" + Val + "']").attr("selected", "selected");
	}
	else if( jaarVan.attr( 'value' ) == jaarTot.attr( 'value' ) )
	{
		var maandVan = $('#selectVanMaand');
		var maandTot = $('#selectTotMaand');
		
		if( parseInt( maandVan.attr( 'value' ) ) > parseInt( maandTot.attr( 'value' ) ) )
		{										
			var Val = parseInt( maandVan.attr( 'value' ) );
			
			maandTot.attr( "value", Val );
			
			$("#selectTotMaand option").removeAttr("selected");
        	$("#selectTotMaand option[value='" + Val + "']").attr("selected", "selected");
        	
        	$('.jelectbox_text', '#selectPeriodeTotMaand').html( 
				$("#selectTotMaand option:selected").html()
			);
		}
	}
	return false;
}