(function ($) {
    $.fn.makeButton = function (options) {
        var ie = $.browser.msie || false;
        var ie9 = ($.browser.msie && (parseInt($.browser.version) == 9)) || false;
        var tagName;

        if ($("head link[href*='skanska_buttons.css']").length == 0) {
            // append common styles
            if (ie && !ie9) {
                document.createStyleSheet("/content/static/css/skanska_buttons.css");
            } else {
                var linkElm = "<link href=\"/content/static/css/skanska_buttons.css\" rel=\"stylesheet\" />";
                $("head").append(linkElm);
            }
        }

        // append css for IE8-
        if (ie && !ie9 && ($("head link[href*='skanska_buttons_ie.css']").length == 0)) {
            document.createStyleSheet("/content/static/css/skanska_buttons_ie.css");
        }

        // append stylesheet for IE9
        if (ie9) {
            if ($("head link[href*='skanska_buttons_ie9.css']").length == 0) {
                var linkElm = "<link href=\"/content/static/css/skanska_buttons_ie9.css\" rel=\"stylesheet\" id=\"SkanskaButtonsIE9\" />";
                $("head").append(linkElm);
            }
        }

        return this.each(function () {
            var attrs, settings, defaults, elm = $(this);

            tagName = $().jquery >= "1.6" ? elm.prop("tagName").toLowerCase() : elm.attr("tagName").toLowerCase();

            // default settings
            defaults = {
                color: "dark-blue",
                height: "single",
                icon: null,
                iconColor: "gray"
            }

            // extend settings (data attributes > options > defaults)
            attrs = elm.data("skanska-button");
            attrs = $.extend({}, options, attrs);
            settings = $.extend({}, defaults, attrs);

            // add for all browsers
            elm.addClass("sb-common sb-" + settings.color);

            // has icon, add inner span
            if (settings.icon) {
                if (tagName == "a") {
                    elm.html("<span>" + elm.html() + "</span>");
                    elm.addClass("sb-has-icon");
                    $("span", elm).addClass("sb-icon sb-icon-" + settings.icon + "-" + settings.iconColor);
                }
            }

            // ie8 and below, add inner spans
            if (ie && !ie9) {
                if (tagName == "a") {
                    elm.html("<span class=\"sb-ie-i1\"><span class=\"sb-ie-i2\"><span class=\"sb-ie-i3\">" + elm.html() + "</span></span></span>");

                    if (settings.width == "100%") {
                        var p1 = parseInt($(".sb-ie-i1", elm).css("padding-left"));
                        var p2 = parseInt($(".sb-ie-i2", elm).css("padding-right"));
                        var w = elm.parent().width() - (p1 + p2) - (parseInt(elm.parent().css("padding-right")) + parseInt(elm.parent().css("padding-left"))) - 10;
                        $(".sb-ie-i3", elm).css("width", w + "px")
                    } else {
                        $(".sb-ie-i3", elm).css("width", parseInt(settings.width) - 28);
                    }
                    if (settings.height == "double") {
                        elm.addClass("sb-double");
                    }
                } else if (tagName == "input") {
                    elm.wrap("<span class=\"sb-form-button sb-" + settings.color + "\"><span></span></span>");
                    elm.parents(".sb-form-button").bind("mouseover", function (e) {
                        $(this).addClass("hover");
                    }).bind("mouseout", function (e) {
                        $(this).removeClass("hover");
                    });
                }
            }

            // set width if specified
            if (settings.width && (!ie || ie9)) {
                elm.css("width", settings.width);
            }

            // set visibility
            elm.css("visibility", "visible");
        });
    }
})(jQuery);