/**
 * Function for storing extra data in the class attribute so that we don't
 * invalidate HTML 4. Will no longer be needed with HTML5 as you can set
 * attributes on elements explicitly with <element data-someName="value">.
 * Note that they must be prefixed with 'data-'
 */
Element.addMethods({
    /**
     * Get value from the class attribute formatted with key+"-"+value.
     *
     * @param Element element The element that contains the class data.
     * @param string key The key for the data you want to look up.
     * @return mixed String value if value exists or null otherwise.
     */
    getClassData: function(element, key) {
        key = key + "-";
        var value = null;
        $w(element.className).each(function (className) {
            if (className.substr(0, key.length) === key) {
                value = className.replace(key, "");
            }
        });
        return value;
    },
    /**
     * Set value for the class attribute formatted with key+"-"+value.
     *
     * @param Element element The element that you want to set the data on.
     * @param string key The key for the data you want to store.
     * @param string value The value you wish to set the data to.
     * @return Element The passed in element.
     */
    setClassData: function(element, key, value) {
        var currentValue = element.getClassData(key);
        if (currentValue) {
            element.removeClassName(key + "-" + currentValue);
        }
        element.addClassName(key + "-" + value);
        return element;
    },
    _eoo: true
});

/**
 * Disable children in the subscription page tree
 *
 * Called by the onclick method of the email alert subscription checkboxes,
 * disables and unticks all checkboxes underneath it if checked, otherwise enables them
 *
 * @param Element element The checkbox that was changed
 */
function disableJavascriptTreeMenuChildren (element) {
    // get the UL node underneath this element
    var childUlNode = $('categoryChildrenOf' + element.value);
    if (childUlNode != null){
        var inputNodeList = childUlNode.select('input');
        for (var i = 0; i < inputNodeList.length; i++) {
            if (element.checked) {
                inputNodeList[i].checked = false;
                inputNodeList[i].disable();
            } else {
                inputNodeList[i].checked = false;
                inputNodeList[i].enable();
            }
        }
    }
}

/**
 * Event catcher for +/- toggle in the main OSS navigation
 *
 * @param Event event The onClick event that triggered the toggle
 */
function ossNavigationToggleEvent (event) {
    var block = event.element().up(1);
    ossNavigationToggle(block);
}

/**
 * Worker function that actually performs the toggle
 *
 * A separate function to ossNavigationToggleEvent so that we can call this directly
 * on page load
 *
 * @param Element button The span element that was clicked to trigger the toggle
 */
function ossNavigationToggle (block) {
    block.toggleClassName('collapsed');
    block.toggleClassName('expanded');
    block.select('div.boxContent')[0].toggle();
}

/**
 * Find all box elements for collapsing, insert +/- buttons, hook up events
 */
function ossNavigationLoad () {
    $$('.ossCollapsibleBox').each(function (box) {
        box.addClassName('expanded');

        var heading = box.select('h2').first();
        if (!heading) {
            heading = box.select('h3').first();
        }
        var button = new Element('span', {
            'class': 'collapseControl'
        });

        button.observe('click', ossNavigationToggleEvent);
        heading.insert({ top: button });

        // collapse the ones that aren't active
        if (!box.hasClassName('active')) {
            ossNavigationToggle(box);
        }
    });

    // make the product categories box open by default if none of these others do
    var boxes = $('ossProductCategories', 'ossBusinessCategories', 'ossConsumerCategories');
    for (var i = 0; i < boxes.length; i++) {
        if (boxes[i].hasClassName('expanded')) {
            return true;
        }
    }
    ossNavigationToggle($('ossProductCategories'));
}

/**
 * Action the show/hide transcript link on the videoHosted content type
 *
 * @param event event The click event on the anchor
 */
function ossVideoHostedToggleEvent (event) {
    var link = event.element();
    if ($('videoHostedFullContentVideo').visible()) {
        $('videoHostedFullContentVideo').hide();
        $('videoHostedFullContentTranscript').show();
        link.update('View embedded video');
    } else {
        $('videoHostedFullContentVideo').show();
        $('videoHostedFullContentTranscript').hide();
        link.update('View transcript');
    }
    event.stop();
}

/**
 * Load up the show/hide implementation for transcripts on the videoHosted 
 * content type. 
 *
 * This will create a link, attach the click event and insert it into the DOM.
 */
function ossVideoHostedLoad () {
    var video = $('videoHostedFullContentVideo');
    if (video) {
        $('videoHostedFullContentTranscript').hide();
    
        var link = new Element('a', {
            'href': '#'
        }).update('View transcript');
        link.observe('click', ossVideoHostedToggleEvent);
    
        video.insert({ 'before': link });
    }
}
document.observe('dom:loaded', ossVideoHostedLoad);

/** 
 * Connect up the click events to the anchors used for tabs
 */
function ossHomepageTabsLoad () {
    $$('#homepageTabsBox .tabs a').each(function (tab) {
        tab.observe('click', ossHomepageTabClickEvent);
    });
}

/**
 * Action a click on a tab
 *
 * @param event event The click event on the anchor that defines a tab
 */
function ossHomepageTabClickEvent (event) {
    var tab = event.element();
    $$('#homepageTabsBox .tabs a.active').each(function (activeTab) {
        activeTab.removeClassName('active');
        var activeId = activeTab.getClassData('tabId');
        $(activeId).removeClassName('active');
    });
    tab.addClassName('active');
    var activeId = tab.getClassData('tabId');
    $(activeId).addClassName('active');
    event.stop();
}