TabbedContent = Class.create({
    initialize: function(args) {
        // node that tab tabContainer will be attached to
        this.descriptionContainerNode = args.descriptionContainerNode;
        this.productData = args.productData;
        this.context = args.context;
        this.callback = args.callback;
        
        this.tabContainerTemplate = "/templates/products/product_tabs.tmpl";
        
        // the <ul> which contains the list items used as tabs
        this.tabContainerID = 'product-tabs';
        this.contentContainerID = "tabs-content";
        this.contentClass = "tab";
        
        this.activeClassName = "selected";
        this.tabs = null;
        
        Object.extend(this, args || {});
        
        this.createContainer();
    },
    
    // use template file designated for this:
    // templates/products/product_tabs.tmpl
    createContainer: function() {
        var self = this;
        generic.templatefactory.get({path:this.tabContainerTemplate}).evaluateCallback({
            object: {},
            callback: function(html) {
                self.initContainer(html);
                self.callback(self);
            }
        });
    },
    
    initContainer: function(html) {
        if (this.descriptionContainerNode) {
            this.descriptionContainerNode.update(html);
        }

        this.tabs = new Control.Tabs($(this.descriptionContainerNode), { 
            setClassOnContainer: true,
            activeClassName: this.activeClassName            
        });
    },
    
    createTab: function (args) {        
        if ( !args.contentContainerNode ) args.contentContainerNode = $(this.contentContainerID);
        if ( !args.contentClass ) args.contentClass = this.contentClass;
        // Note: args.tabID and args.tabLabel are required!
        //
        var span = new Element('span', {className: "tab_title"}).update(args.tabLabel);
        var a = new Element('a', {href: "#"+ args.tabID, className: "tab_button"}).update(span);
        var li = new Element('li', {className: "tab_control"}).update(a);
        
        $(args.tabContainerNode).insert(li);
        
        var contentDiv = new Element('div', {
            "class" : args.contentClass,
            "id"    : args.tabID
        });
        
        contentDiv.update(args.content);
        
        $(args.contentContainerNode).insert(contentDiv);
        
        this.tabs.addTab(a);
        
        this.setActiveTab(args.tabID);
        
        var descriptionNode = contentDiv.select(".description_node")[0];

        if (descriptionNode) {
            descriptionNode.insert(args.tabDesc);
        }
        
        return contentDiv;
    },
    
    getTabContainer: function(tabID) {
        
        var containerNode = $(this.wrapperContainerID).down('#' + tabID);
        return containerNode;
    },
        
    updateTab: function(tabID,html) {
        
        var containerNode = $(this.wrapperContainerID).down('#' + tabID);
        if ( containerNode ) {
            containerNode.update ( html );
        }
    },
    
    setActiveTab: function(tabID) {
        this.tabs.setActiveTab(tabID);
    },
    
    first: function() {
        this.tabs.first();
    },
    
    fixTabHeight: function(tabID) {
        // Note - this will only work on an active tab...
        var containerNode = $(this.wrapperContainerID).down('#' + tabID);
        containerNode.fixContentHeight();
    }
});