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_buttons", name: args.tabLabel}).update(span);
		var li = new Element('li', {className: "tab_control"}).update(a);
		/* 35713 COG SEP 21 tab  alignment fixed */
		if (Prototype.Browser.IE) {
		if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
			Prototype.BrowserFeatures['Version'] = new Number(RegExp.$1);
		    }
		}
		if (Prototype.Browser.IE && Prototype.BrowserFeatures['Version'] == 8) { 
			span.addClassName('tab_title');
			a.addClassName('tab_buttons');
			li.addClassName('tab_control');
		
		 }
		/* 35713 COG SEP 21 tab  alignment fixed */
		//let's tag the first tab since it needs a diff bg image
		if($(args.tabContainerNode).select('li').length === 0){
			li.addClassName('tab_first');
		}
        
        $(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);
        }
		
		var content_block;
        if(content_block = contentDiv.select(".content_block")[0]){
			content_block.addClassName('tab_'+args.tabLabel.replace(' ', '_'));
			//temp HACK to get a proper height for scrollable areas
			var contentBlockOffset = content_block.positionedOffset().top;
			var addlOffset = (contentBlockOffset >= 128)? 30: (contentBlockOffset >= 78)? 55 : 18;
			var maxH = content_block.up().getHeight() - content_block.positionedOffset().top - addlOffset;
            
            //temp HACK to adjust height of nonshaded_description_content_block (scrollable area on details tab)
			var thisIsANonShadedDetailsTab = content_block.hasClassName('nonshaded_description_content_block');
			if ( thisIsANonShadedDetailsTab ){ 
			    maxH += addlOffset; 
			    var thisIsQV = $('quickview-inner-container') ? content_block.descendantOf('quickview-inner-container') : false;
			    if ( thisIsQV ){ maxH += ( Prototype.Browser.IE ) ? 83 : 7; }
			    else	       { maxH += ( Prototype.Browser.IE ) ? 112 : 36;}
			    if (Prototype.Browser.IE){ content_block.setStyle({minHeight: maxH + 'px'});}
			}
						
			content_block.addClassName('h_'+content_block.positionedOffset().top);
			content_block.setStyle({maxHeight: maxH + 'px'});
		}
			
        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();
    }
});