/**
 * @author rduffy
 * 
 * Timex detail page tab construction functions. Relies on jquery, waits for page load.
 * The options here basically are a set of divs to be turned into tabs.
 * 
 */

var TimexUI = TimexUI || {};
TimexUI.TabOptions =  {   
      target:  "#bottom-1",
      id: "detailInformationTabs",
      tabs:    {
          tab1: {
              div: "#bottom-2 .bVOuterDiv",
              name: "Customer Reviews"
          },
          tab2: {
              div: "#bottom-3 .featuredAttributeContainer",
              name: "Product Details"
          }
      }  
}
jQuery(document).ready(function(){
    
(function($, options){
   
    var tabHolder = $(document.createElement("div"));
    var tabLinks = $(document.createElement("ul"));
    var firstTab = false;
    
    var createContainer = function(){
        /** Creates the holding container **/    
        tabHolder.addClass("tabHolder");
    }
   
    var createTabLinks = function(){
        /** Creates an empty tab list **/
        tabLinks.addClass("itemList tabLinks");
    }
   
   
    var createTab = function(div, name){
        /** Sucks in the tab div and destroys it's orig **/
        var srcDiv = $("#"+div);
        if(srcDiv.length > 0){
            srcDiv.remove().appendTo(tabHolder);
            srcDiv.addClass("tabContent");
            /** Now create the link **/
            var tabLink = $("<a href='#'>"+name+"</a>");
            tabLink.data("tab", srcDiv);
            var tabEl = $(document.createElement("li"));
            tabLink.appendTo(tabEl);
            tabEl.appendTo(tabLinks);
            if(!firstTab){
                firstTab = srcDiv;
                srcDiv.addClass("visibleTab");
                tabLink.addClass("activeTab");
            }
        }
    } 
    
    var setInitialStates = function(){
        /** Applies all the classNames and sets up the correct states **/
    }
   
    var attachEvents = function(){
        /** Attaches events to the tabs **/
        $("a", tabLinks).click(function(){
           var tab = $(this).data("tab");
           $(".tabContent", tabHolder).removeClass("visibleTab");
           $("a", tabLinks).removeClass("activeTab");
           tab.addClass("visibleTab");
           $(this).addClass("activeTab");
           return false;
        });
    }
    
    createContainer();
    createTabLinks();
    for(i in options.tabs){
        createTab(options.tabs[i].div, options.tabs[i].name);
    }
    var container = $("<div id='"+options.id+"'></div>");
    container.append(tabLinks).append(tabHolder).appendTo(options.target);
    // IE Flicker Fix
    container.hide().show();
    attachEvents();
    
})(jQuery, TimexUI.TabOptions)

});