window.cmu = window.cmu || {};

(function (ns) {

    ns.tabBox = function (spec, my) {
        var that = {};

        spec = spec || {};
        spec.content = spec.content || '.content';

        // ------------------------------------------------------------------
        // Shared properties
        // ------------------------------------------------------------------

        my = my || {};
        my.logger = gj.logging.getLogger('cmu.tabBox');
        my.tabs = [];
        my.tabIndex = 0;

        // ------------------------------------------------------------------
        // Private properties
        // ------------------------------------------------------------------

        var $viewNode = spec.viewNode;
        var $tabRoot;
        var $contentRoot = $viewNode.find(spec.content);
        var $contentItems = $contentRoot.children();
        // my.logger.debug($contentItems);

        // ------------------------------------------------------------------
        // Private methods
        // ------------------------------------------------------------------

        var init = function () {
            var $item, $heading;
            var headings = [];

            for (var i = 0; i < $contentItems.length; i++) {
                $item = $contentItems.eq(i);
                $heading = $item.children('h3');
                headings.push(
                    $heading ? {text: $heading.text(), className: $heading.attr('class')} : null
                );

                // Allow selecting tabs using a CSS class: useful for testing
                if ($item.hasClass('selected')) {
                    my.tabIndex = $item.index();
                }
            }

            drawTabs(headings);
            draw();

            $viewNode.addClass('enabled');
        };

        var tabClickHandler = function (e) {
            // my.logger.debug(this, e.type);
            my.tabIndex = $(this).index();
            draw();
        };

        var drawTabs = function (headings) {
            my.logger.debug('Drawing tabs with headings: ', headings);
            $tabRoot = $('<ul/>').addClass('navigation');

            for (var i = 0; i < headings.length; i++) {
                $tabRoot.append(
                    $('<li/>')
                        .append($('<a/>')
                            .attr('href', 'javascript:;')
                            .text(headings[i].text || '?')
                        )
                        .addClass(headings[i].className)
                        .click(tabClickHandler)
                );
            }
            $tabRoot.insertBefore($contentRoot);
        };

        var draw = function () {
            // Select the right tab
            $tabRoot.find('li').each(function (i, elm) {
                $(elm)[i === my.tabIndex ? 'addClass': 'removeClass']('active');
            });

            // Show the proper content
            $contentItems.each(function (i, elm) {
                $(elm)[i === my.tabIndex ? 'show': 'hide']();
            });
        };

        // ------------------------------------------------------------------
        // Public methods
        // ------------------------------------------------------------------

        // ------------------------------------------------------------------
        // Event handlers
        // ------------------------------------------------------------------

        // ------------------------------------------------------------------
        // Constructor
        // ------------------------------------------------------------------

        init();

        return that;
    };

})(window.cmu);