function Init_CustomControls() {

    /*=======================
    =   Checkbox            =
    =======================*/
    $("input[type=checkbox]").not(".custom_control").each(function () {

        var checkbox = $(this);
        checkbox.addClass("custom_control");

        // Add in our new span that holds our custom image
        var custom_control = $('<span class="checkbox"></span>').insertBefore(checkbox).click(function () {
            // Trigger the underlying controls click and change events
            checkbox.click();
            checkbox.change();
        });

        // Set the initial checked state
        if ($(this).is(':checked')) { custom_control.addClass('checked'); };

        // When the underlying control is changed we need to add/remove the checked class
        $(this).change(function () {

            if (checkbox.is(':checked')) {
                custom_control.addClass('checked');
            }
            else {
                custom_control.removeClass('checked');
            }

        });
    });

    /*=======================
    =   Radio               =
    =======================*/
    $("input[type=radio]").not(".custom_control").each(function () {

        var radiobutton = $(this);
        radiobutton.addClass("custom_control");

        // Add in our new span that holds our custom image
        var custom_control = $('<span class="radiobutton"></span>').insertBefore(radiobutton).click(function () {
            // Trigger the underlying controls click and change events
            radiobutton.click();
            radiobutton.change();
        });

        // Set the initial checked state
        if ($(this).is(':checked')) { custom_control.addClass('checked'); };

        // When the underlying control is changed we need to add/remove the checked class
        $(this).change(function () {

            if (radiobutton.is(':checked')) {
                // trigger all the change events for radio buttons in this group (same name)
                $("input[name='" + $(this).attr('name') + "']").not($(this)).change();

                custom_control.addClass('checked');
            }
            else {
                custom_control.removeClass('checked');
            }

        });
    });

    /*=======================
    =   Textbox             =
    =======================*/
    $("input[type=text]").not(".custom_control").not(".textbox_search").each(function () {
        create_textbox($(this));
    });
    $("input[type=password]").not(".custom_control").each(function () {
        create_textbox($(this));
    });

    function create_textbox(control) {
        control.addClass("custom_control");
        var width = control.width();
        var readonly = "";

        try {
            if (control.attr('readonly') == true) { readonly = " readonly"; }
            if (control.attr('readonly').toString() == "readonly") { readonly = " readonly"; }
        } catch (e) { }


        if (width <= 0) {
            control.wrap('<div id="' + control.attr("id").toString() + '_container" class="textbox_container' + readonly + '">');
            control.width(width - 10);
        }
        else {
            control.wrap('<div id="' + control.attr("id").toString() + '_container" class="textbox_container' + readonly + '" style="width:' + width.toString() + 'px">');
            control.width(width - 10);
        }

        $('<span class="textbox_left">&nbsp;</span>').insertBefore(control);
    }

    /*=======================
    =   Dropdown            =
    =======================*/
    $("select").not(".custom_control").not("#ddlSearchRadius").each(function () {

        var dropdown = $(this);
        var width = dropdown.width();
        var id = $(this).attr("id");
        dropdown.addClass("custom_control");

        // if we haven't been able to get the width (due to items being hidden) then try and get it from the css
        if (width <= 0) {
            try {
                width = parseInt(dropdown.css('width').toString().replace('px', ''));
                width = width - 5;
            }
            catch (e) { }
        }

        // Add in our new elements
        var dropdown_container = $('<div class="dropdown_container"></div>').insertBefore(dropdown);
        var dropdown_value = $('<div class="dropdown"></div>').appendTo(dropdown_container);
        var dropdown_list;

        // Append the dropdown list to the container, or if there is a placeholder set then append it to that
        // we need to do this incase of overflow hidden on containers chopping off some of the list
        if ($("#" + id + "_list_placeholder").length > 0) {
            dropdown_list = $('<ol class="dropdown_list"></ol>').appendTo($("#" + id + "_list_placeholder"));
        }
        else {
            dropdown_list = $('<ol class="dropdown_list"></ol>').appendTo(dropdown_container);
        }
        dropdown_list.attr("id", $(this).attr("id") + "_list");

        // if we have managed to get a width then set it here
        if (width > 0) {
            dropdown_container.width(width);
            dropdown_value.width(width - 10);
            dropdown_list.width(width + 4);
        }

        // set the initial value of the dropdown
        dropdown_value.text(dropdown.children(":selected").text());


        // build the list items
        dropdown.children().each(function () {

            var item = $('<li id="' + $(this).val() + '">' + $(this).text() + '</li>').appendTo(dropdown_list);
            item.click(function () {
                dropdown.val(item.attr('id'));
                dropdown_value.text(item.text());

                // trigger the change event on the dropdown
                dropdown.change();
            });

            item.hover(
            function () {
                item.addClass("hover");
            },
            function () {
                item.removeClass("hover");
            });
        });

        dropdown_container.click(function () {
            dropdown_list.slideToggle();

            if (dropdown_list.is(":visible")) {
                $(this).addClass("dropdown_selected");
            }

            // hide any other dropdowns
            $(".dropdown_list").not(dropdown_list).slideUp("100", function () {
                $(".dropdown_list").not(dropdown_list).parent().removeClass("dropdown_selected");
            });
        });

    });

    // hide dropdowns if user clicks somewhere else
    $(document).click(function (event) {
        if ($(event.target).closest(".dropdown_container").get(0) == null) {
            $(".dropdown_list").slideUp("100", function () {
                $(".dropdown_container").removeClass("dropdown_selected");
            });
        }
    });

}