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

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

        var buttonColors = {};
        buttonColors[ ButtonState.Default ] = options.colors.default;
        buttonColors[ ButtonState.Hover ] = options.colors.hover;
        buttonColors[ ButtonState.Pressed ] = options.colors.pressed;
        buttonColors[ ButtonState.Inactive ] = options.colors.inactive;

        function createSvgPath(){
            return  '<svg id="' + options.id + '" width="' + options.width + 'px" height="' + (options.height * 4) + 'px" viewBox="0 0 44 176" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color: transparent;">' +
                '<title>icn_repeat.tts-a</title>' +
                '<defs></defs>' +
                '<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">' +
                '<g>' +
                '<g class="NavigationButton" transform="translate(0.000000, 0.000000)" fill="' + options.colors.default.bg + '">' +
                '<rect x="0" y="0" width="44" height="44"></rect>' +
                '<path class="NavigationButtonIcon" fill="' + options.colors.default.icon + '" d="M11.32,16.5386667 L16.8573333,22.076 L16.8573333,17.8573333 L30.572,17.8573333 L30.572,23 L34,23 L34,17.8573333 L34,14.4293333 L30.572,14.4293333 L16.8573333,14.4293333 L16.8573333,11 L11.32,16.5386667 Z M10,23 L10,28.144 L10,31.572 L13.428,31.572 L27.1426667,31.572 L27.1426667,35 L32.68,29.4613333 L27.1426667,23.9253333 L27.1426667,28.144 L13.428,28.144 L13.428,23 L10,23 Z"></path>' +
                '</g>' +
                '</g>' +
                '</g>' +
                '</svg>';
        }

        function createButton(){

            var currentState = ButtonState.Default,
                svgButton = jq(document.createElement("div")),
                svg = svgButton.html( createSvgPath() )
                    .contents()
                    .addClass("sc-navigation")
                    .css({
                        "pointer-events" : "none"
                    })
                    .on("touchmove", function(e) {
                        e.preventDefault ? e.preventDefault() : true;
                    })
                    .get(0);

            var svgWrapper = jq(document.createElement("div"))
                .attr({
                    "title" : options.caption,
                    "class" : currentState
                })
                .css({
                        "cursor": "pointer",
                    "width": options.width + "px",
                    "height": options.height + "px",
                    "overflow": "hidden"
                })
                .append(svg);

            return {
                getHotspotElement : function(){
                    return svgWrapper.get(0);
                },
                hasState : function( buttonState ){
                    return buttonState === currentState;
                },
                changeState : function( buttonState ){

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

                    var colors = buttonColors[buttonState],
                        jqSvg = jq(svg);

                    svgWrapper.removeClass( currentState );
                    currentState = buttonState;
                    svgWrapper.addClass( buttonState );

                    jqSvg.find("[class=NavigationButton]").attr( "fill", colors.bg );
                    jqSvg.find("[class=NavigationButtonIcon]").attr( "fill", colors.icon );
                    jqSvg.css({
                        "cursor" : buttonState !== ButtonState.Inactive ? "pointer" : "default"
                    });
                }
            };
        }

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