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";

        function createTextContent() {

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

            var textContainer = "";
            if (options.text.verticalAlignment === "middle") {
                textContainer = jq(document.createElement("div"))
                    .css({
                        "width": "auto",
                        "padding-right": options.text.paddingRight + "px",
                        "padding-left": options.text.paddingLeft + "px",
                        "vertical-align": "middle",
                        "display": "table-cell"
                    });
            }
            else {
                textContainer = jq(document.createElement("div"))
                    .css({
                        "position": "absolute",
                        "padding": options.text.paddingTop + "px " + options.text.paddingRight + "px " + options.text.paddingBottom + "px " + options.text.paddingLeft + "px"
                    });

                if (options.text.verticalAlignment === "bottom" || options.text.verticalAlignment === "top" ) {
                    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("div"))
                    .attr({
                        "title" : options.caption,
                        "class" : currentState
                    })
                    .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"
                    })
                    .addClass("sc-navigation")
                    .on("touchmove", function(e) {
                        e.preventDefault ? e.preventDefault() : true;
                    });

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


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

            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";

                    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 ){

                    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"
                    });
                }
            };
        }

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