define([
    "jquery",
	"css!./image.togglebutton.css"
],
function(
    jq
){

    "use strict";

    /**
     * @constructor
     */

    return function(options, context, metadata){
        var button,
            backgroundPositions = {},
            ButtonState = {
                Default : "btn_state_default",
                Hover : "btn_state_hover",
                Pressed : "btn_state_pressed"
            },
            ButtonToggleState = {
                On : "btn_state_on",
                Off : "btn_state_off"
            },
            currentToggleState = ButtonToggleState.On,
            currentState = ButtonState.Default;

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

        function createButton(){
            button = jq(document.createElement("div"))
                .attr({
                    "id" : options.name,
                    "class" : currentState
                })
                .css({
                    "width": options.width + "px",
                    "height": options.height + "px",
                    "padding": "0",
                    "border": "none",
                    "background": "none",
                    "background-image": "url(\"" + options.fileNameURL + "\")",
                    "background-position": backgroundPositions[currentToggleState][currentState]
                })
                .addClass(options.name)
                .on("touchmove", function(e) {
                    e.preventDefault ? e.preventDefault() : true;
                });

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

        function hasState( buttonState ){
            return buttonState === currentState;
        }

        function hasToggleState( toggleState ){
            return toggleState === currentToggleState;
        }

        function changeState ( buttonState, toggleState ){
            if( !toggleState ){
                toggleState = currentToggleState;
            }

            if( !buttonState ){
                buttonState = currentState;
            }

            currentState = buttonState;
            currentToggleState = toggleState;

            button.css({
                "background-position": backgroundPositions[toggleState][buttonState]
            });
        }

        function onBlur() {
            var buttonState = ButtonState.Default,
                toggleState = currentToggleState;

            changeState(buttonState, toggleState);
        }

        function onFocus() {
            var buttonState = ButtonState.Hover,
                toggleState = currentToggleState;

            changeState(buttonState, toggleState);
        }

        return{
            build : function(){
                createButton();
                return{
                    getElement : function(){
                        return button.get(0)
                    },
                    onMouseOver : function(){
                        if( !hasState( ButtonState.Pressed ) ) {
                            changeState( ButtonState.Hover, currentToggleState );
                        }
                    },
                    onMouseLeave : function(){
                        changeState( ButtonState.Default, currentToggleState );
                    },
                    onMouseDown : function(){
                        changeState( ButtonState.Pressed, currentToggleState );
                    },
                    onMouseUp : function(){
                        if( hasToggleState(ButtonToggleState.On)){
                            changeState( ButtonState.Default, ButtonToggleState.Off );
                        }else{
                            changeState( ButtonState.Default, ButtonToggleState.On );
                        }
                    },
                    onExitPage : function(){
                        changeState( ButtonState.Default, ButtonToggleState.On );
                    },
                    focusButton: function () {
                        onFocus();
                    },
                    blurButton: function () {
                        onBlur();
                    }
                }
            }
        }  
    }
});
