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

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

        var backgroundPositions = {};

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

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

        function createTextContent() {

            if (jq.trim(options.text.content) === "") {
                    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,
                currentToggleState = ButtonToggleState.On,
                textContent = createTextContent(),
                imageButton = jq(document.createElement("div"))
                    .attr({
                        "title" : options.caption,
                        "class" : currentState,
                        "id" : options.id
                    })
                    .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")
                    .addClass("ttsButtonSoundOnOff")
                    .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[ ButtonToggleState.On ][ ButtonState.Hover ] = "0 " + (-height) + "px";
                    backgroundPositions[ ButtonToggleState.On ][ ButtonState.Pressed ] = "0 " + (-2 * height) + "px";
                    backgroundPositions[ ButtonToggleState.On ][ ButtonState.Inactive ] = "0 " + (-3 * height) + "px";
                    backgroundPositions[ ButtonToggleState.Off ][ ButtonState.Default ] = "-" + width + "px 0";
                    backgroundPositions[ ButtonToggleState.Off ][ ButtonState.Hover ] = "-" + width + "px " + (-height) + "px";
                    backgroundPositions[ ButtonToggleState.Off ][ ButtonState.Pressed ] = "-" + width + "px " + (-2 * height) + "px";
                    backgroundPositions[ ButtonToggleState.Off ][ ButtonState.Inactive ] = "-" + width + "px " + (-3 * height) + "px";

                    jq(imageButton).css({
                        "width": width + "px",
                        "height": height + "px",
                        "background-image": "url(\"" + filename + "\")",
                        "background-position": backgroundPositions[ currentToggleState ][ currentState ]
                    });
                },
                hasState : function( buttonState ){
                    return buttonState === currentState;
                },
                hasToggleState : function( buttonToggleState ){
                    return buttonToggleState === currentToggleState;
                },
                changeState : function( buttonState, toggleState ){

                    if( !toggleState ){
                        toggleState = currentToggleState;
                    }

                    if( !buttonState ){
                        buttonState = currentState;
                    }

                    var enabled = buttonState !== ButtonState.Inactive,
                        oldClassName = getClassName( currentToggleState, currentState ),
                        newClassName = getClassName( toggleState, buttonState );

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

        function getClassName( toggleState, buttonState ){
            return toggleState + "_" + buttonState;
        }

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