define([
    "jquery",
    "./button.state"
],
function(
    jq,
    ButtonState
){

    /**
     * @constructor
     */
    return function( options ) {

        var backgroundPositions = {};
        backgroundPositions[ButtonState.Default] = "0 0";
        backgroundPositions[ButtonState.Hover] = "0 " + (-options.height) + "px";
        backgroundPositions[ButtonState.Pressed] = "0 " + (-2 * options.height) + "px";
        backgroundPositions[ButtonState.Inactive] = "0 " + (-3 * options.height) + "px";

        function createTextContent() {

            if ((options.text.content||"").trim() === "") {
                    return null;
            }

            var textContainer = jq(document.createElement("div"))
                .css({
                    "width": options.width + "px",
                    "padding-right": options.text.paddingRight + "px",
                    "padding-left": options.text.paddingLeft + "px",
                    "text-align": options.text.orientation
                });

            if (options.text.verticalAlignment === "middle") {
                textContainer.css({
                    "vertical-align": "middle",
                    "display": "table-cell"
                });
            }
            else {
                textContainer.css({
                    "position": "absolute",
                    "padding-top": options.text.paddingTop + "px",
                    "padding-bottom": options.text.paddingBottom + "px"
                });

                textContainer.css(options.text.verticalAlignment, "0");

                if (options.text.orientation === "right") {
                    textContainer.css(options.text.orientation, "0");
                }
            }

            textContainer.html(options.text.content);
            return textContainer;
        }

        function createButton() {

            var currentState = ButtonState.Default,
                textContent = createTextContent(),
                imageButton = jq(document.createElement("button"))
                    .attr({
                        "title": options.caption,
                        "class": currentState,
                        "role": "button",
                        "tab-index": "0"
                    })
                    .css({
                        "width": options.width + "px",
                        "height": options.height + "px",
                        "text-align": options.text.orientation,
                        "font-family": options.text.fontFamily,
                        "color": options.color,
                        "-webkit-tap-highlight-color": "rgba(0,0,0,0)",
                        "font-size": Math.min(Math.abs(options.text.fontSize), 100) + "px",
                        "cursor": "pointer",
                        "padding": "0",
                        "border": "none",
                        "background": "none"
                    })
                    .addClass("sc-navigation")
                    .on("touchmove", function (e) {
                        e.preventDefault ? e.preventDefault() : true;
                    });

            if (options.ariaLabel || options.caption) {
                imageButton.attr({
                    "aria-label": options.ariaLabel ? options.ariaLabel : options.caption
                })
            }

            if (options.text.verticalAlignment === "middle") {
                imageButton.css("display", "table");
            }

            if( textContent ) {
                imageButton.append(textContent);
            }

            function changeState(buttonState) {

                if (currentState === buttonState) {
                    return;
                }

                var enabled = buttonState !== ButtonState.Inactive;

                imageButton.removeClass(currentState);
                currentState = buttonState;
                imageButton.addClass(buttonState);
                imageButton.css({
                    "background-position": backgroundPositions[buttonState],
                    "cursor": enabled ? "pointer" : "default"
                });

                if (!enabled) {
                    imageButton.attr({
                        "aria-disabled": "true"
                    })
                } else {
                    imageButton.attr({
                        "aria-disabled": "false"
                    })
                }
            }

            function onBlur() {
                var buttonState = ButtonState.Default,
                    enabled = buttonState !== ButtonState.Inactive;

                imageButton.removeClass(currentState);
                currentState = buttonState;
                imageButton.addClass(buttonState);
                imageButton.css({
                    "background-position": backgroundPositions[buttonState],
                    "cursor": enabled ? "pointer" : "default"
                });

                imageButton.off("focusout");
                imageButton.trigger("blur");
            }

            function onFocus() {
                var buttonState = ButtonState.Hover,
                    enabled = buttonState !== ButtonState.Inactive;

                imageButton.removeClass(currentState);
                currentState = buttonState;
                imageButton.addClass(buttonState);
                imageButton.css({
                    "background-position": backgroundPositions[buttonState],
                    "cursor": enabled ? "pointer" : "default"
                });

                imageButton.trigger("focus");
                imageButton.on("focusout", onBlur);
            }

            return {
                getHotspotElement: function () {
                    return imageButton.get(0);
                },
                changeImage: function (width, height, filename) {

                    backgroundPositions[ButtonState.Hover] = "0 " + (-height) + "px";
                    backgroundPositions[ButtonState.Pressed] = "0 " + (-2 * height) + "px";
                    backgroundPositions[ButtonState.Inactive] = "0 " + (-3 * height) + "px";

                    imageButton.css({
                        "width": width + "px",
                        "height": height + "px",
                        "background-image": "url(\"" + filename + "\")",
                        "background-position": backgroundPositions[currentState]
                    });
                },
                hasState: function (buttonState) {
                    return buttonState === currentState;
                },
                changeState: function (buttonState) {
                    changeState(buttonState);
                },
                focusButton: function () {
                    onFocus();
                },
                blurButton: function () {
                    onBlur();
                }
            };
        }

        return {
            build: createButton
        };
    };
});
