/* - unitheme.js - */
/**
 * YAML Tabs - jQuery plugin for accessible, unobtrusive tabs Build to
 * seemlessly work with the CCS-Framework YAML (yaml.de) not depending on
 * YAML though
 * @requires jQuery v1.0.3
 *
 * http://blog.ginader.de/dev/yamltabs/index.php
 *
 * Copyright (c) 2007 Dirk Ginader (ginader.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Version: 1.1.1
 *
 * History:
 * * 1.0 initial release
 * * 1.1 added a lot of Accessibility enhancements
 * * * rewrite to use "fn.extend" structure
 * * * added check for existing ids on the content containers to use to proper
 * * * anchors in the tabs
 * * 1.1.1 changed the headline markup. thanks to Mike Davies for the hint.
 */

(function (jq) {

    jq.fn.extend({

        getUniqueId: function (p){
            return p + (new Date()).getTime();
        },

        accessibleTabs: function (config) {
            var defaults = {
                /* Classname to apply to the div that is wrapped around the
                   original markup */
                wrapperClass: 'content',

                /* Classname to apply to the LI of the selected tab */
                currentClass: 'current',

                /* Tag or valid query selector of the elements to transform
                   the tab-navigation from (originals are removed) */
                tabhead: 'h4',

                /* Tag or valid query selector of the elements to be treated
                   as the tab-body */
                tabbody: '.tabbody',

                /* Can be "fadeIn", "slideDown", "show" */
                fx: 'show',

                /* Speed (string|number): "slow", "normal", or "fast") or the
                   number of milliseconds to run the animation */
                fxspeed: 'normal',

                /* Text to indicate for screenreaders which tab is the
                   current one */
                currentInfoText: 'current tab: ',

                /* Definition where to insert the info text.
                   Can be either "prepend" or "append" */
                currentInfoPosition: 'prepend',

                /* Class to apply to the span wrapping the currentInfoText */
                currentInfoClass: 'current-info',

                /* Click event callback */
                callback: false
            };

            var options = jq.extend(defaults, config);
            var o = this;

            return this.each(function () {
                var el = jq(this);
                var list = '';

                var contentAnchor = o.getUniqueId('accessibletabscontent');
                var tabsAnchor = o.getUniqueId('accessibletabs');
                jq(el).wrapInner('<div class="' + options.wrapperClass +
                        '"></div>');

                jq(el).find(options.tabhead).each(function (i) {
                    var id = '';

                    if(i === 0){
                        id = ' id="' + tabsAnchor + '"';
                    }

                    list += '<li><a' + id + ' href="#' + contentAnchor + '">' +
                            jq(this).html() + '</a></li>';
                    jq(this).remove();
                });

                jq(el).prepend('<ul>' + list + '</ul>');
                jq(el).find(options.tabbody).hide();
                jq(el).find(options.tabbody + ':first').
                        show().
                        before('<' + options.tabhead +
                                '><a tabindex="0" class="' +
                                'accessibletabsanchor" name="' +
                                contentAnchor + '" id="' + contentAnchor +
                                '">' +
                                jq(el).find(">ul>li:first").text() +
                                '</a></' + options.tabhead + '>');
                jq(el).find(">ul>li:first").
                        addClass(options.currentClass).
                        find('a')[options.currentInfoPosition](
                                '<span class="' + options.currentInfoClass +
                                '">' + options.currentInfoText + '</span>');

                jq(el).find('>ul>li>a').each(function (i) {
                    jq(this).click(function (event) {
                        event.preventDefault();
                        jq(el).find('>ul>li.current').
                                removeClass(options.currentClass).
                                find("span." + options.currentInfoClass).
                                remove();
                        jq(this).blur();
                        jq(el).find(options.tabbody + ':visible').
                                hide();
                        var tbody = jq(el).find(options.tabbody).eq(i);
                        if (typeof options.callback == 'function') {
                            options.callback(jq(this), jq(tbody));
                        }
                        jq(tbody)[options.fx](options.fxspeed);
                        jq('#' + contentAnchor).
                                text(jq(this).text()).
                                focus();
                        jq(this)[options.currentInfoPosition](
                            '<span class="' + options.currentInfoClass +
                            '">' + options.currentInfoText + '</span>').
                            parent().
                            addClass(options.currentClass);
                    });
                });
            });
        }
    });
})(jQuery);

jq(document).ready(function(){
    /*
     * Initializes the accessible tab structure and produces the tab markup
     * needed for the representation. The border and slanted sides of the 
     * tabs ... - it's all pure HTML with CSS.
     */

    // check if tabs present, otherwise quit
    if (jq('.tabs').length == 0) return;
    
    // initialize variables
    var headStyle = null; // custom css for tab head text
    var height = 28; // the height of the tab in pixels, default: 28px
    
    /* 
     * If there is an element with id="tabheadsettings", assign its content
     * to the headStyle variable and delete the element.
     */
    if (jq('.tabs > #tabheadsettings').length > 0) {
        headStyle = jq('.tabs > #tabheadsettings').text();
        jq('.tabs > #tabheadsettings').remove();
    }

    /* 
     * If there is an element with id="tabsettings", split its content and
     * at ':' and parse the second part as integer. If successful, assign
     * the value to the height variable and delete the DOM element.
     */
    if (jq('.tabs > #tabsettings').length > 0) {
        var newHeight = parseInt(jq('.tabs > #tabsettings').
                text().split(':')[1], 10);
        if (newHeight) {
            height = newHeight;
        }
        jq('.tabs > #tabsettings').remove();
    }
    
    // Compute (negative) right margin of tabs, so that the tabs overlap
    var tabDistance = -Math.round(height * 1.57);

    /* 
     * Compute the width of the spacers, that are put before and after
     * the tabs inscription.
     */
    var spaceWidth = Math.round(height - (height * (2.0 - 1.57)));

    // Call the acessibleTabs jQuery plugin
    jq('.tabs').accessibleTabs(
            {tabhead: 'h1.tabhead',
             wrapperClass: 'tabcontent',
             currentInfoText: 'current',
             tabbody: '.tabbody',
             fx: 'fadeIn'});

    /*
     * Add CSS classes and addidional HTML elements to obtain the desired
     * appearance. 
     */
    jq('.tabs > ul').addClass('tabmenu');
    if (headStyle) {
        jq('.tabs > ul > li > a').wrapInner('<em style="'+headStyle+'" />');
    } else {
        jq('.tabs > ul > li > a').wrapInner('<em />');
    }
    jq('.tabs > ul > li > a:not(:first)').prepend('<b class="spacebefore"/>');
    jq('.tabs > ul > li > a').append('<b class="spaceafter"/>');

    // IE 6 requires some special attention!
    if(jq.browser.msie && jq.browser.version.substring(0, 1) <= '6') {
        msie6 = 1; 
    } else { 
        msie6 = 0; 
    }
    var before = '';
    var after = '';

    // produce and insert <b> tags for slanted sides
    for (i=1; i <= height - msie6*2; i++) {
        var btag = '<b style="height:' + (height - i) + 
                'px; margin-top: '+ i +'px"/>';
        before = btag + before;
        after = after + btag;
    }
    var tabcount = jq('.tabs > ul > li').length;
    jq('.tabs > ul > li > a:not(:first)').prepend(before);
    jq('.tabs > ul > li > a').append(after);
    jq('.tabs > ul > li > a').each(function (i) {
        jq(this).find('b').css('z-index', 300 + tabcount - i);
    });

    /* 
     * Set height of, space between (overlapping) and the space for the 
     * tabs inscriptions.
     */
    jq('.tabs > ul.tabmenu').css('height', (height+1)+'px');
    jq('.tabs > ul.tabmenu > li').css('height', height+'px');
    jq('.tabs > ul.tabmenu > li').css('margin-right', tabDistance);
    jq('.tabs > ul.tabmenu > li > a > em').css('height', height+'px');
    jq('.tabs > ul.tabmenu > li > a > em').css('line-height', height+'px');
    jq('.tabs > ul.tabmenu > li > a > b.spaceafter').
            css('height', height+'px').css('width', spaceWidth+'px');
    jq('.tabs > ul.tabmenu > li > a > b.spacebefore').
            css('height', height+'px').css('width', spaceWidth+'px');

});