(function () {
    
    /**
     * Элемент панели инструментов
     *
     * @param root
     * @param opt

     * @field cls       css класс
     * @field title     надпись
     * @field value     значение
     * @field left      позиция
     * @field layer     html-элемент
     *
     * @event   click
     *
     */
    PICSA.Button = function (root, opt) {
        var me = this;
        Observable(me);
        $.extend(me, opt);
        me.state = 'full';
        me.btn_hover = false;
        me.menu_hover = false;

        if(me.type=='button'){
            me.layer = $('<div class="btn '+ me.cls+'" style="left: '+ me.left +'px;">' +
                             '<div class="btn-w">' +
                                 '<div unselectable="on" class="unselectable btn-icon">' +
                                     '<span>' + me.title + '</span>' +
                                     (me.value ? (' <em>' + me.value + '</em>') : '') +
                                 '</div>' +
                             '</div>' +
                         '</div>').appendTo(root);

            me.layer.find('.btn-icon')
                .click(function(){
                        me.notify("click", me.cls);
                        return false;
                })
                .mouseover(function(){
                        me.btn_hover = true;
                        me.notify("btn-mouseover");
                })
                .mouseout(function(){
                        me.btn_hover = false;
                        me.notify("btn-mouseout");
                })
                .mousedown(function(){
                        me.notify("mousedown");
                        me.down();

                        me.layer.one("mouseup", function(){
                            me.notify("mouseup");
                            me.up();
                        });

                        me.layer.mouseleave(function(){
                            me.up();
                        })
                        .mouseenter(function(){
                            me.down();
                        });

                        $(document).mouseup(function(){
                            me.up();
                            $(document).unbind('mouseup');
                            me.layer.unbind('mouseleave').unbind('mouseenter');
                        });
                })
            me.layer.mouseover(function(){
                    me.menu_hover = true;
                    me.notify("menu-mouseover");
                })
                .mouseout(function(){
                    me.menu_hover = false;
                    me.notify("menu-mouseout");
                });
        } else {
            me.layer = $('<div unselectable="on" class="unselectable btn space" style="left: '+ me.left +'px;">' +
                             '<div class="btn-w">' +
                                 '<div style="width:' + me.size + 'px"></div>' +
                             '</div>' +
                         '</div>').appendTo(root);
        }
        
        return me;
    }

    PICSA.Button.prototype = {
        show: function(mode){
            if (mode=='compact') {
                this.state = 'compact';
                this.layer.addClass('compact');
            } else if(mode=='full'){
                this.state = 'full';
                this.layer.removeClass('compact');               
            }
            this.layer.removeClass('hidden');
        },
        hide: function(){
            this.layer.addClass('hidden');
        },
        press: function(){
            if(!this.layer.hasClass("btn-pressed")) {
                this.layer.addClass("btn-pressed");
            }
        },
        release: function(){
            if(this.layer.hasClass("btn-pressed")) {
                this.layer.removeClass("btn-pressed");
            }
        },
        showMenu: function(){
            if(!this.layer.hasClass("btn-menu")) {
                $('#toolbar .buttons .btn-menu').removeClass("btn-menu");
                this.layer.addClass("btn-menu");
            }
        },
        hideMenu: function(){
            if(this.layer.hasClass("btn-menu")) {
                this.layer.removeClass("btn-menu");
            }
        },
        isPressed: function(){
            return this.layer.hasClass("btn-pressed");
        },
        isMenu: function(){
            return this.layer.hasClass("btn-menu");
        },
        down: function(){
            if(!this.layer.hasClass("btn-click")) {
                this.layer.addClass("btn-click");
            }
        },
        up: function(){
            if(this.layer.hasClass("btn-click")) {
                this.layer.removeClass("btn-click");
            }
        },
        isDown: function(){
            return this.layer.hasClass("btn-click");
        },
        sizes: function(){
            var fwidth = this.layer.width();
            var cwidth;

            this.show('compact');
            cwidth = this.layer.width();
            this.show('full');

            return {
                cwidth: cwidth,
                fwidth: fwidth
            };
        },
        setPosition: function(left){
            this.left = left;
            this.layer.css({'left': left+'px'});
        },
        setSize: function(size){
            this.size = size;
            this.layer.find('span div').css({'width': size});
        },
        setValue: function(value){
            var me = this;
            var intvalue = parseInt(value*100);

            me.value = value;
            me.layer.find('.btn-icon em').html(intvalue + '%');
        }
    };

})();