/**
 * GBD Form Styling
 * checkbox, select
 */
$(document).ready(function() {
	
	/* checkbox */
	
	$("div.orderForm input:checkbox, table.address input:checkbox").each(function () {

		$(this).wrap("<div class='gbd_form_checkbox' />");
	});
	
	$("div.gbd_form_checkbox input:checked").parent().addClass("gbd_form_checkbox_checked");
	
	$("div.gbd_form_checkbox").click(function() {
		
		// checked the input
		$(this).children().attr("checked", ($(this).children().attr("checked") == false) ? true : false);
		
		// switch checked state
		($(this).children().attr("checked") == false) ? $(this).removeClass("gbd_form_checkbox_checked") : $(this).addClass("gbd_form_checkbox_checked");
	});

	/* select */
	
	$("div.orderForm select, div#shop_rechte_spalte select, table.address select, .history_pagination select").wrap("<div class='gbd_form_select' />");
	
	$(".gbd_form_select").append("<div class='gbd_form_selection'></div>").append("<div class='gbd_form_option_wrapper'></div>").wrap("<div class='gbd_form_positioner' />");
	$("div.gbd_form_option_wrapper").hide();

	// set width
	$(".gbd_form_select").each(function() {
		
		width = parseInt($(this).children("select").css("width"));
		width = (width > 0) ? width : 100;
		
		$(this).css("width", width);
		$(this).children("div.gbd_form_selection").css("width", width - $(this).children("select").css("padding-left"));
		$(this).children("div.gbd_form_option_wrapper").css("width", width);
	});

	// build dropdown
	$(".gbd_form_select select option").each(function() {

		selected = ($(this).parent().val() == $(this).val()) ? true : false;

		// optionen der klasse gbd_hidden_option werden nicht angezeigt.
		if(!$(this).hasClass("gbd_hidden_option") && !$(this).hasClass("gbd_option_title")) {
			
			// inject option into wrapper
			$(this).parent().parent().children("div.gbd_form_option_wrapper").append("<div class='option"+ ((selected) ? " selected" : "") + "' rel='" + $(this).val() + "'>" + $(this).html() + "</div>");
			
			if(selected)
				$(this).parent().parent().children(".gbd_form_selection").html($(this).html());
			
		} else if($(this).hasClass("gbd_option_title")) {

			// inject option into wrapper
			$(this).parent().parent().children("div.gbd_form_option_wrapper").append("<div class='gbd_option_title'><div class='line'></div><div class='label'>" + $(this).html() + "</div></div>");
		}
	});
	

	// open and autoclose dropdown
	$(".gbd_form_selection").click(function(event) {
		
		if($(this).parent().children(".gbd_form_option_wrapper").hasClass("gbd_form_option_wrapper_open")) {
			
			$(this).removeClass("gbd_form_selection_open");
			
		} else {
			
			$(this).addClass("gbd_form_selection_open");
			event.stopPropagation();
			
			// close any open select
			$("div.gbd_form_option_wrapper_open").removeClass("gbd_form_option_wrapper_open").hide();
			
			// and open the chosen one
			$(this).parent().children(".gbd_form_option_wrapper").toggle().addClass("gbd_form_option_wrapper_open");
			
			$("body").click(function() { 
				
				$(this).unbind("click"); 
				$("div.gbd_form_option_wrapper_open").removeClass("gbd_form_option_wrapper_open").hide();
				$("div.gbd_form_selection_open").removeClass("gbd_form_selection_open");
			});
		}
	});
	

	$(".gbd_form_option_wrapper div.option").click(function() {

		// save selected option and trigger registered onchange handler
		$(this).parent().parent().children("select").val($(this).attr("rel")).trigger("onchange");

		// mark new selection in custom dropdown
		$(this).parent().children().removeClass("selected");
		$(this).addClass("selected");
		
		$(this).parent().parent().children(".gbd_form_selection").html($(this).html());
		
		// close dropdown
		$(this).parent().hide();
	});

});