(function($) {
/* reminder: wanneer radio buttons toegevoegd worden kan het checkbox script aangeroepen met een aangepaste  configuration. maak hier wel een aparte method voor die deze configuratie doorgeeft.
checkbox kan hergebruikt worden doordat de nieuwe elementen nogsteeds uit gaan van de achterliggende "echte" invoer elementen (en dus ook rekening houden met de waardes dmv het change event.) */
	$.fn.customElements = function(opts){
		var parent = this;// not actually a parent but might be used in that manner for inner "methods / objects / w/e"
		this.customs = new Array();
		
		this.customCheckbox = function(element, options){
			var defaults = {
				checkbox: $(element),
				activeClass: 'active',
				baseHtml: '<span class="button checkbox">&nbsp;</span>',
				base: null
			}
			var opts = $.extend({}, defaults, options);
			
			var init = function(){
				var o = opts;
				o.base = $(o.baseHtml).insertAfter(o.checkbox);
				attachEvents();
				o.checkbox.hide();
				o.checkbox.change(); // initial state
			}
			
			var attachEvents = function(){
				var o = opts;
				o.checkbox.change(function(){
					if($(this).is(':checked') && !o.base.hasClass(o.activeClass)){
						o.base.addClass(o.activeClass);
					}
					else if(!$(this).is(':checked') && o.base.hasClass(o.activeClass)){
						o.base.removeClass(o.activeClass);
					}
				});
				o.base.click(function(){
					if(!$(this).hasClass(o.activeClass)){
						$(this).addClass(o.activeClass);
						o.checkbox.attr('checked', 'checked');
					}
					else{
						$(this).removeClass(o.activeClass);
						o.checkbox.removeAttr('checked');
					}
					o.checkbox.change();
				});
			}
			
			init();
		
		}
		
		this.customSelect = function(element, options){
			
			var defaults = {
				select: $(element),
				time: 1000
			}
			var fixedOpts = {
				baseHtml: '<div id="" class="cselect-container">\
					<span class="value hidden"></span>\
					<span class="valuename"></span>\
					<a href="javascript:;" class="button cselect">&nbsp;</a>\
					<div class="clear">&nbsp;</div>\
					<ul class="list">\
					</ul>\
				</div>',
				listItemHtml: '<li><span class="value hidden insertValue"></span><span class="valuename insertValueName"></span></li>',
				base: '' // filled during init
				
			}
			var opts = $.extend({}, defaults, options, fixedOpts);
			
			var init = function(){
			
				var o = opts;
				
				if($(o.select).next().filter('.cselect-container').length == 0){
					o.base = $(o.baseHtml).insertAfter(o.select);
					if(o.select.attr('id') != undefined && o.select.attr('id').length > 0) o.base.attr('id', o.select.attr('id')+'_custom');
					$(o.select).find('option').each(function(){
						var li = $(o.listItemHtml);
						
						li.find('.insertValue').html($(this).attr('value'));
						li.find('.insertValueName').html($(this).html());
						$(o.base).find('.list').append(li);
					});
				}else{
					o.base = $(o.select).next().filter('.cselect-container');
				}
				
				var id = 0;
				if(o.select.find('option:selected').length > 0){
					id = o.select.find('option').index(o.select.find('option:selected'));
				}
				select(id);
				attachEvents();
				o.select.hide();
			}
			
			var attachEvents = function(){
				var o = opts;
				o.select.change(function(){
					
					select(o.select.find('option').index(o.select.find('option:selected')));
				});
				
				o.base.find('.list li').click(function(e){

					e.stopPropagation();
					select(o.base.find('.list li').index($(this)));
					o.base.find('.button').click();
					o.select.change();
				});
				o.base.find('.button').click(function(e){

					e.stopPropagation();
					o.base.toggleClass('open');
					o.base.find('.list').slideToggle(o.time);
					
				});
				
				$(document).click(function(){
					o.base.removeClass('open');
					o.base.find('.list').slideUp(o.time);
				});
			}
			
			var select = function(index){
				var o = opts;
				
				if(o.select.hasClass('error')){ o.base.addClass('error'); }
				o.base.find('>.value').html(o.select.find('option').eq(index).attr('value'));
				o.base.find('>.valuename').html(o.base.find('ul li').eq(index).find('.valuename').html());
				$(o.base).find('.list li').removeClass('selected');
				$(o.base).find('.list li').eq(index).addClass('selected');
				o.select.find('option').removeAttr('selected');
				o.select.find('option').eq(index).attr('selected', 'selected');
				
			}
			init();
		}
		
		
		this.customize = function(childSelector, options){
			if($(parent).find(childSelector).size()>0){
				var objs = new Array();
				options = options || {};
				$(parent).find(childSelector).each(function(){
					switch($(this)[0].nodeName.toLowerCase()){
						case 'select':
							objs[objs.length] = parent.customSelect($(this) ,options);
						break;
						case 'input':
							switch($(this).eq(0).attr('type').toLowerCase()){
								case'checkbox':
									objs[objs.length] = parent.customCheckbox($(this) ,options);
								break;
							}
						break;
					}
				});
				
				return objs;
			}
		}
		var init = function(){
			for(i in opts){
					
				parent.customs[i] = parent.customize(opts[i].childSelector, opts[i].options);
				
			}
		}	
		init();
		return this;
	}
})( jQuery );


$(function(){



	if($('form.langf').size() > 0){
		var custom2 = $('form.langf').customElements({ 
			selects: {childSelector:'.custom-select', options: {time:200}}
		});
		//$('#language option').each(function(){// fix voor vlag 
		//	var i = $('#language option').index($(this));
		//	$('<span class="sprite vlag '+$(this).attr('class')+'">&nbsp;</span>').prependTo($('#language_custom ul li:eq('+i+') .valuename '));
		//});

		//$('#language_custom ul li.selected').click();// fix voor vlag 
		//$('#language_custom ul li.selected').click();// fix voor vlag 
		//$('#language_custom ul').stop(true, true).hide();// fix voor vlag 
		//$('#language').change(function(){
		//	window.location = $(this).val();
		//});
	}

	
	$('.cselect-container>span.valuename').click(function(e){ $(this).parent().find('.button').click();e.stopPropagation(); }); // attach full element click event to button event. this is omitterd from standard function since this is not required for it to work properly., might include it inside later.
	
	
});