define([
    "jquery",
	"css!./button.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"
            },
            currentState = ButtonState.Default;

        backgroundPositions[ ButtonState.Default ] = "0 0";
        backgroundPositions[ ButtonState.Hover ] = "0 " + (-options.height) + "px";
        backgroundPositions[ ButtonState.Pressed ] = "0 " + (-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",
                    "background-image": "url(\"" + options.fileNameURL + "\")",
                    "background-position": backgroundPositions[currentState],
                })
                .addClass(options.name);
        }

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

        function changeState ( buttonState ){
            if( currentState === buttonState ){
                return;
            }
            currentState = buttonState;
            button.css({
                "background-position": backgroundPositions[buttonState],
            });
        }

        function lockNavigation() {
            if (context.stage.isInAuthoringMode() || (typeof(context.stage.trigger) === "undefined")) {
                return;
            }
            context.stage.trigger.lock( metadata.getId() );
        }

        function unlockNavigation() {
            if (context.stage.isInAuthoringMode() || (typeof(context.stage.trigger) === "undefined")) {
                return;
            }
            context.stage.trigger.unlock( metadata.getId() );
        }

        return{
            build : function(){
                createButton();
                return{
                    getElement : function(){
                        return button.get(0)
                    },
                    onMouseOver : function(){
                        if( !hasState( ButtonState.Pressed ) ) {
                            changeState( ButtonState.Hover );
                        }
                    },
                    onMouseLeave : function(){
                        changeState( ButtonState.Default );
                    },
                    onMouseDown : function(e){
                        lockNavigation();
                        e.preventDefault();
                        e.stopPropagation();
                        changeState( ButtonState.Pressed );
                    },
                    onMouseUp : function(e){
                        unlockNavigation();
                        e.preventDefault();
                        e.stopPropagation();
                        changeState( ButtonState.Default );
                    } 
                }
            }
        }  
    }
});
