/**
* Nalco Widget Javascript
*
* Purpose - Build all widgets on the given page
*
* @created: 3/10/09
* @modified: 4/22/09
* @author: Cummings Group
**/

$(document).ready(function()    {
    var widgets = $("body").find("div.widget_tabbed");
    if (widgets.length > 0) initWidgets(widgets);

// If a thumbnail is present, alter the height of the link to make sure its correct 
$('div#widget_ctn').find('div div ul li a img').parent().css('min-height', '40px'); 
}); 

function initWidgets(widgets) {
    $(widgets).each(function(i){
        $(widgets[i]).attr('id', 'widg' + i);
        createWidget(widgets[i], i);
    });
    // give the widget container a height - this avoids weird text wrapping as the tabs of the widgets are clicked
    $(document).find('div#widget_ctn').css('height', '1000px');
}

// widget is a reference to the <div class="widget"> container
function createWidget(widget, widg_id) {
    // create the <ul> containing the tabs
    $(widget).prepend('<ul></ul>');
    
    // prepare the tabs from the span's inner html                           
    $(widget).find("span").each(function(i)    {
        temp = $(this).html();
        // throw the tabs into the newly-created list at the top of the widget
        $(widget).find("ul:first").append("<li>" + temp + "</li>");
        $(this).empty();
        $(widget).remove("span");
    });
    
    //display the first tab's content
    $(widget).find("ul:first").css("display", "block");
    
    widget_width = $(widget).width();
    // determine the number of tabs
    num_tabs = $(widget).find("ul:first").children().size();
    option_width = (widget_width / num_tabs) - 1;
    
    // Assign IDs to the divs containing the tab's content        
    $(widget).find("div").each(function(i)    {
        $(this).attr("id", "div_" + i + "" + widg_id);                                              
    });
    
    // prepare the tabs
    $(widget).find("ul:first li").each(function(i)    {
        // set the tab width
        $(this).css("width", '100px');
        // set the href attribute of the child anchor. This attribute is used as an identifier for the tab's content in the JS version and a named anchor in the non-JS version
        $(this).find('a').attr('href', '#div_' + i + '' + widg_id)        
        
        if (i==0) $(this).addClass('on');
        else $(widget).find('#div_' + i + '' + widg_id).css('display', 'none');
    });
        
    // When a tab is clicked, fire changeTabs()
    $(widget).find("ul:first li a").bind('click', changeTabs);    
    
}
    
function changeTabs(e)    {
    e.preventDefault();
    // get the id of the <div> wrapper for the widget
    var whichWidget = $(this).parent().parent().parent().get(0);
    // the tab that was just clicked
    var whichTab = $(this).parent().get(0);
    // the tab content that needs to be displayed
    var show_this = $(this).attr('href');
    // Hide all tab content                                                      
    $(whichWidget).find('div').css("display", "none");
    $(whichWidget).find('ul li').removeClass('on');
        
    $(whichTab).addClass('on');
    
    $(whichWidget).find(show_this).fadeIn("normal");
}