define([
    "jquery",
	"css!./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",
                Inactive : "btn_state_inactive"
            },
            ButtonToggleState = {
                Interactive : "btn_state_interactive",
                Presentation : "btn_state_presentation",
                Film : "btn_state_film"
            },
            currentToggleState = ButtonToggleState.Interactive,
            currentState = ButtonState.Default;

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

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

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

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

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

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

            if( !buttonState ){
                buttonState = currentState;
            }

            currentState = buttonState;
            currentToggleState = toggleState;

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

        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(e){
                        changeState( ButtonState.Pressed, currentToggleState );
                    },
                    onMouseUp : function(e){
                        changeState( ButtonState.Default, currentToggleState );
                    },
                    changeToggleState : function( newToggleState ){
                        changeState( currentState, newToggleState );
                    }
                }
            }
        }  
    }
});
