/*
*  Create product tabs
*
*  Author: Malcolm Elsworth (electricputty.co.uk)
*  Date: 20-01-09
*  Version: 1.1
*  Dependacies:
*                jquery-1.2.6.min.js
*               jquery-dom.js
*
*/
 
 
// Create closed namespace for jQuery code.
(function($) {
 
        $(document).ready(function() {
 
                var $blocks = new Array();
 
                $('div.detailContainer').each(function(i){
 
                        var $this = $(this);
                        var $id = 'block_' + i;
 
                        var $heading = $this.find('h3:first');
                        var $label = $heading.text();
 
                        // Attach a unique id to each block;
                        $this.attr('id', $id);
                        $this.attr('rel', $label);
 
                        // Hide all headings
                        $heading.hide();
 
                        // Hide all but the first block
                        if(i>0) $this.hide();
 
                        $blocks.push($this);
 
                });
 
 
                // Check that we have any blocks before we continue
                if($blocks.length > 0) {
 
                        // Build the table which we will append our tabs to
                        var $theTable =
                                $.TABLE({ id:"tabs", border:0, cellPadding:0, cellSpacing:0},
                                        $.TBODY({},
                                                $.TR({ id:"tab-row"},"")
                                        )
                                );
 
 
                        // Add this table to the page
                        $blocks[0].before($theTable);
 
 
                        // Get a refernce to the TR element into which we will append our tabs
                        var $theRow = $("#tab-row");
 
 
                        // Loop through our array, make the individual tabs and append them to the table row
                        $.each($blocks,function(i,obj) {
 
                                var $theClass;
                                if(i==0) $theClass = "left active";
                                if(i==$blocks.length-1) $theClass = "right";
 
                                var $theTab = $.TD({ Class:$theClass },$.A({ href:"#", rel:i },obj.attr('rel')));
 
                                $theRow.append($theTab);
                        });
 
 
                        // Add the onclick event to each tab
                        $('#tab-row a').click(function(){
                                var $index = $(this).attr("rel");
                                var $parent = $(this).parent();
 
                                // Hide all blocks + remove the 'active' class
                                $('div.detailContainer').each(function(){ $(this).hide(); });
                                $('#tab-row td').each(function(){ $(this).removeClass('active'); });
 
                                // Show the desired block and highlight the active tab
                                $blocks[$index].show();
                                $parent.addClass('active');
 
                                // Gets rid of dotted line around the active tab which kinda spoils the nice clean look of the tabs
                                $(this).attr('style','outline:none;');
                                $(this).attr('style','-moz-outline-style:none;');
 
                                return false;
                        });
                }
 
 
        });
})(jQuery);