Jx.Button.DesignerListTab = new Class({
    Family: 'Jx.Button.DesignerTab',
    Extends: Jx.Button.Tab,
    Implements: [Options,Events,Jx.ContentLoader],
    /**
     * Property: content
     * {HTMLElement} The content area that is displayed when the tab is active.
     */
    content: null,
    /**
     * Constructor: Jx.Button.Tab
     * Create a new instance of Jx.Button.Tab.  Any layout options passed are used
     * to create a <Jx.Layout> for the tab content area.
     *
     * Parameters:
     * options - {Object} an object containing options that are used
     * to control the appearance of the tab.  See <Jx.Button>,
     * <Jx.ContentLoader::loadContent> and <Jx.Layout::Jx.Layout> for
     * valid options.
     */

    /**
     * Custom Options
     */
	options: {
		name:	null,
		label:	null,
		width: 	150
	},
	
	
	doReloadList: function() {
		var tab = getClickedTab(activeDesign.options.id);
		tab.clicked();

		listDesigns(designListTab.content, false);
	},


	initialize : function( options) {
		this.parent($merge(options, {type:'Tab', toggle:true}));
		this.content = new Element('div', {'class':'tabContent'});
		new Jx.Layout(this.content, options);
		this.loadContent(this.content);
		var that = this;
		this.addEvent('down', function() { that.content.addClass('tabContentActive'); } );
		this.addEvent('up', function() { that.content.removeClass('tabContentActive'); } );

        var a = new Element('a', {
			'class': 'jxTabRefresh',
            events: {
                'click': (function() {
                	activeDesign=this;
					doConfirm('Close Design', 'Are sure you want to reload the list of designs?', {label: 'Yes', func: this.doReloadList, icon: iconYes}, {label: 'No', func: null, icon: iconNo});
                }).bind(this)
            }
        });
        
        a.adopt(new Element('img', {
            src: Jx.aPixel.src,
            alt: '',
            title: ''
        }));
        this.domObj.adopt(a);
    },


    /**
     * Method: clicked
     * triggered when the user clicks the button, processes the
     * actionPerformed event
     */
    clicked : function(evt) {
        if (this.options.enabled) {
            this.setActive(true);
        }
    },


	setName: function(name) {
		this.options.name = name;
	},

	getName: function() {
		return this.options.name;
	},


	setLabel: function(label) {
		this.options.label = label;
	},

	getLabel: function() {
		return this.options.label;
	}
});