// WDR: Pulled the tab logic into its own class.
// This "may" be appropriate to put in global.js or another general location...
TabbedContent = Class.create({
    
    initialize: function(args) {

		// These id's are generated within the tab context.
    	// mainContainerID is a div that holds the whole thing.
    	// tabContainerID is a UL that holds only the clickable tabs across the top.
    	// contentContainerID is the div that holds each tab's content div.
    	this.mainContainerID = "tabs_container";
    	this.tabContainerID = "tabs";
    	this.contentContainerID = "tabs-content";
    	this.tabsPrefix = '';

		// I'm using wrapperContainerID instead of the containerSelector + tabsContainerSelector.
		// This must already exist on the page, and will be filled in with the tabs.
    	this.wrapperContainerID = "product-details";
    	
    	this.contentClass = ""; //"tab-content";
    	this.contentStyle = "";
    	this.activeClassName = "qs_current";
    	this.tabs = null;
    	
        Object.extend(this, args || {});
		
		this.createContainer();
    },
    
    createContainer: function() {
    	var html = '<div id="'+this.mainContainerID+'">' +
    	                '<div id="tab-label-container">' +
    					    '<ul id="'+this.tabContainerID+'" class="tabs clearfix"></ul>' +
                        '</div>' +
    					'<div id="tab-content-container">' +
    						'<div class="dotted-y-l tab-content" id="'+this.contentContainerID+'">' +
        					'</div>' +
    					'</div>' +
					'</div>' +
					'';
		
		this.initContainer(html);
    },
    
    initContainer: function(html) {
        var tabsContainerNode = $(this.wrapperContainerID);
        if ( tabsContainerNode ) {
        	tabsContainerNode.update(html);
        }

        this.tabs = new Control.Tabs ( this.tabContainerID, { 
        							   setClassOnContainer: true, 
        							   activeClassName: this.activeClassName,
        							   afterChange: function(containerNode) {
                        					containerNode.fire('tab:afterChange');
                                        }
        							   } );
        
    },
    
	createTab: function (args) {
		// Check optional args.
		// In most cases, you won't need tabContainerID or contentContainerID here,
		// but you may want a tab-specific style
		if ( !args.tabContainerID ) args.tabContainerID = this.tabContainerID;
		if ( !args.contentContainerID ) args.contentContainerID = this.contentContainerID;
		if ( !args.contentClass ) args.contentClass = this.contentClass;
		if ( !args.contentStyle ) args.contentStyle = this.contentStyle;
		if ( !args.tabsPrefix ) args.tabsPrefix = this.tabsPrefix;
		
		if ( !args.tabLabelClass ) args.tabLabelClass = "";
		
		// Note: args.tabID and args.tabLabel are required!
		
        var lnk = new Element('a', {href: '#' + args.tabsPrefix+args.tabID}).update(args.tabLabel);
        var li = new Element('li', {"class" : args.tabLabelClass}).update(lnk);
        
        $(this.wrapperContainerID).down('#' + args.tabContainerID).insert(li);
        
        
        var contentContainer = new Element('div', {
                "class" : args.contentClass,
                "id"    : args.tabsPrefix+args.tabID,
                "style" : args.contentStyle 
                });
        var contentDiv = new Element('div', {
                "id"    : args.tabsPrefix+args.tabID+"_content",
                "class" : "scroll_content"
                });
                
        contentDiv.update(args.content);
        
        contentContainer.insert(contentDiv, args.tabsPrefix+args.tabID);
        
        $(this.wrapperContainerID).down('#' + args.contentContainerID).insert(contentContainer);
        
        
        this.createScrollBars(args.tabsPrefix+args.tabID);
        this.tabs.addTab(lnk);
        this.setActiveTab(args.tabsPrefix+args.tabID);
        
        return contentContainer;
    },
    
    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);
    },
    
    fixTabHeight: function(tabID) {
    	// Note - this will only work on an active tab...
        var containerNode = $(this.wrapperContainerID).down('#' + tabID);
        containerNode.fixContentHeight();
    },
    
    createScrollBars: function(tabID) {
        if (SlideArea) {
            var scrollBar = new Element('div', {
                "id"    : tabID+"_track",
                "class" : "scroll_track"
                }).insert(new Element('div', {
                "id"    : tabID+"_thumb",
                "class" : "scroll_thumb"
            }));
            
            $(tabID).insert(scrollBar);

            var sa = null;
            var qsScrollInit = function(text_elem) {
                if ($(tabID + "_content") && $(tabID + "_track") && $(tabID + "_thumb")) {
                   /* site-specific constants */
                    SlideArea.DEFAULT_ANIM_DISTANCE = 10;
                    SlideArea.DEFAULT_ANIM_DELAY = 1;
                    SlideArea.DEFAULT_JUMP_ANIM_DISTANCE = 20;
                    SlideArea.DEFAULT_JUMP_ANIM_DELAY = 1;
                    
                    sa = new Object();
                    sa.setSlideArrowOff = function() {};
                    sa.setSlideArrowOver = function() {};
                    sa.slideMinus = function() {};
                    sa.slidePlus = function() {};
                    sa.slideStop = function() {};
                    sa.jumpMinus = function() {};
                    sa.jumpPlus = function() {};
                    /* onload scroll area init function */
                    sa = new SlideArea(
                       "sa",
                       tabID+"_content",
                       "y", 
                       160,
                       null, 
                       tabID+"_track", 
                       tabID+"_thumb"
                    );
                    
                    sa.reset();
                    
                    var showbar = $(tabID + "_content").getDimensions().height > 160;
                    
                    if (showbar) {
                        $(tabID+"_track").style.visibility = 'visible';
                        $(tabID+"_thumb").style.visibility = 'visible';
                    } else {
                        $(tabID+"_track").style.visibility = 'hidden';        
                    } 
                }
            }
            
            $(this.wrapperContainerID).down("#tabs-content").observe('tab:afterChange', function(evt) {
				qsScrollInit(tabID);
			});
			
			qsScrollInit(tabID);
        }
    }
    
    //TODO: We should derive this class from the Control.Tabs class rather than wrapping
    // the instance.  Then we can override the setActiveTab() method and call fixTabHeight()
    // whenever a tab is activated.
    
});