// dom parent: in which dom element to draw the button
// int id: id of the dom element
// func onclick: callback function when button clicked
// str className : className of the general button
// str classNameText : className for the button's text
//********************************************************

var Tab = Class.create( {
            initialize: function( param )
            {
                // Init
                this.numTab = param.numTab ? param.numTab : 1;
                this.id = param.id ? param.id : "";
                this.parent = param.parent ? param.parent : false;
                this.value = param.value ? param.value : "";
                this.title = param.title ? param.title : false;
                this.className = param.className ? param.className : false;
                this.callbackOnClick = param.onClick ? param.onClick : false;
                this.contextToSave = param.contextToSave ? param.contextToSave : false;

                // Create tab elements
                this.divContainer = $( document.createElement( "div" ) );
                if( this.className )
                    this.divContainer.addClass( this.className );
                if( this.title )
                    this.divContainer.attr( {id:this.id, title:this.title, name:this.numTab} );
                else
                    this.divContainer.attr( {id:this.id, name:this.numTab} );

                this.divContainer.html( this.value );

                if( this.parent )
                    this.parent.append( this.divContainer );

                // Define button events
                if( this.contextToSave )
                    this.divContainer.bind( 'click', [this, this.contextToSave], this.onClickEvent );
                else
                    this.divContainer.bind( 'click', this, this.onClickEvent );


            },

            // Getter / Setter ********************************************************
            getContainer: function()
            {
                return this.divContainer;
            },

            setValue : function( value )
            {
                this.value = value;
                this.divText.html( this.value );
            },

            setCallbackOnClick : function( value )
            {
                this.callbackOnClick = value;
            },

            // Actions ********************************************************
            active : function()
            {
                this.divContainer.addClass( "activated" );
            },

            inactive : function()
            {
                this.divContainer.removeClass( "activated" );
            },

            remove : function()
            {
                this.divContainer.remove();

            },

            // Events ********************************************************
            onClickEvent : function( event )
            {
                var clickedTab = event.data;
                if( (undefined == event.detail || 1 == event.detail) && clickedTab.callbackOnClick )
                    clickedTab.callbackOnClick( event );
            }

        } );