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

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

        var backgroundPositions = {};

        function initBackgroundPositions( tileImageWidth, tileImageHeight ) {

            var buttonOrder = [
                    "PLAY",
                    "STOP",
                    "PAUSE"
                ],
                buttonPosX = -1 * tileImageWidth,
                buttonPosY = - 1 * tileImageHeight,
                currentButtonName,
                stateIndex;

            backgroundPositions = {};
            jq.each( buttonOrder, function ( orderIndex, buttonName ) {
                stateIndex = 0;
                jq.each( ButtonState, function ( key, buttonState ) {
                    currentButtonName = buttonName + "_" + buttonState;
                    backgroundPositions[currentButtonName.toUpperCase()] = ( orderIndex * buttonPosX ) + "px " + ( stateIndex * buttonPosY ) + "px";
                    stateIndex++;
                } );
            } );
        }

        function getButtonImagePosition( buttonMode, state ) {
            return backgroundPositions[buttonMode + "_" + state.toUpperCase()];
        }

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

            initBackgroundPositions(options.width, options.height);

            function changeState(buttonState) {

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

                var enabled = buttonState !== ButtonState.Inactive;

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

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

                imageButton.removeClass(currentState);
                currentState = buttonState;
                imageButton.addClass(buttonState);
                imageButton.css({
                    "background-position": getButtonImagePosition(options.mode, 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": getButtonImagePosition(options.mode, buttonState),
                    "cursor": enabled ? "pointer" : "default"
                });

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

            return {
                getHotspotElement : function(){
                    return imageButton.get(0);
                },
                changeImage : function( width, height, filename ){
                    imageButton.css({
                        "width": width + "px",
                        "height": height + "px",
                        "background-image": "url(\"" + filename + "\")",
                        "background-position": getButtonImagePosition( options.mode, currentState )
                    });
                },
                hasState : function( buttonState ){
                    return buttonState === currentState;
                },
                changeState: function( buttonState ){
                    changeState(buttonState);
                },
                focusButton: function () {
                    onFocus();
                },
                blurButton: function () {
                    onBlur();
                }
            };
        }

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