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

    "use strict";

    /**
     * @constructor
     */

    return function(options, context, metadata){
        var button,
            backgroundPositions = {},
            ButtonState = {
                Default : "icon_state_default",
                Active : "icon_state_toggled"
            },
            currentState = ButtonState.Default;

        backgroundPositions[ ButtonState.Default ] = "0 0";
        backgroundPositions[ ButtonState.Active ] = "0 " + (-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],
            });
        }

        return{
            build : function(){
                createButton();
                return{
                    getElement : function(){
                        return button.get(0)
                    },
                    getState : function(){
                        return currentState;
                    },
                    onMouseUp : function(){
                        if( hasState( ButtonState.Default ) ) {
                            changeState( ButtonState.Active );
                        }else{
                            changeState( ButtonState.Default )
                        }
                    },
                    toggleIcon: function () {
                        if ( hasState( ButtonState.Default ) ) {
                            changeState( ButtonState.Active );
                        } else {
                            changeState( ButtonState.Default )
                        }
                    },
                    hideIcon : function(){
                        button.hide();
                    },
                    showIcon : function(){
                        button.show();
                    },
                    setLeftPosition : function(xValue){
                        button
                            .css({
                                "left" : xValue + "px"
                            })
                    }
                }
            }
        }  
    }
});
