(function($) {
    $.fn.extend({
        styledcheckbox: function(opts) {
            var $select, selectEl, containerID, $container, optionBoxID, $optionBox, opt, containerOffset,
                defaults = {
                    selectedCssClass: "StyledSelectedCheckbox",
                    checkboxCssClass: "StyledCheckbox",
                    focussedCssClass: "StyledFocussedRadio"
                };
            opts = $.extend(defaults, opts);
            if (this.length == 0 || this.get(0).tagName.toLowerCase() != "input") {
                return this;
            }
            selectEl = this[0];
            $select = $(selectEl);

            // Add container
            containerID = selectEl.id + "Container";
            $select.before("<div id=\"" + containerID + "\" class=\"" + selectEl.className + " " +
                (selectEl.checked ? opts.selectedCssClass : opts.checkboxCssClass) +
                "\"></div>");
            $container = $("#" + containerID);
            //$container.css("width", $container.width() - 3);

            // Bind events
            var focusProxyID = selectEl.id + "FocusProxy";
            $select.before("<input type='text' id='" + focusProxyID + "' style='width: 0px; height: 0px; border: 1px solid #fff; font-size: 0px; line-height: 0px; margin: 0px; padding: 0px; color: #fff; float: left;'></input>");
            var $focusProxy = $("#" + focusProxyID);
            $container.bind("click", function(e) {
                $focusProxy.get(0).focus();
                containerClicked(e);
            });
            bindFocusEventSet();
            $focusProxy.bind("focus", function(e) {
                $container.addClass(opts.focussedCssClass);
            });
            $focusProxy.bind("blur", function(e) {
                $container.removeClass(opts.focussedCssClass);
            });

            // Hide original
            $select.hide();
            
            function bindFocusEventSet() {
                $focusProxy.bind("keydown.focusEventSet", function(e) {
                    var keynum;
                    if (!e) {
                        e = window.event;
                    }
                    keynum = e.keyCode ? e.keyCode : e.which;

                    if (keynum == 13 || keynum == 32) {
                        // ENTER or SPACEBAR pressed
                        $container.triggerHandler("click");
                        return false;
                    }
                });
            }

            function containerClicked(e) {
                selectEl.checked = !selectEl.checked;
                if (selectEl.checked) {
                    $container.removeClass(opts.checkboxCssClass);
                    $container.addClass(opts.selectedCssClass);
                }
                else {
                    $container.removeClass(opts.selectedCssClass);
                    $container.addClass(opts.checkboxCssClass);
                }
            }
        }
    });
})(jQuery);