/*================================
	Homepage panel functions
==================================*/
var hoveredFeatureLink;
var hoveredShortcutLink;
var joinFeatureTimer;
var shortcutParent;
var shortcutTimer;

$J(document).ready(function () {

    //Community panel
    //========================================================================================================================================
    $J('.communitiesSummaryPanel .inlineExpandLink').click(function () {

        if ($J('.communitiesSummaryPanel .expandableContent')[0].offsetHeight <= 0) {
            expandHeight = $J('.communitiesSummaryPanel .expandableContent p').height();
            $J('.communitiesSummaryPanel .expandableContent').animate({ height: expandHeight + 'px' }, 400);

            $J(this).html('Hide');
        } else {
            $J('.communitiesSummaryPanel .expandableContent').animate({ height: 0 + 'px' }, 400);
            $J(this).html('Tell me more about communities');
        }
        $J(this).blur();
        return false;
    });


    //Join Blk Panel
    //========================================================================================================================================
    $J('.joinBlackmoresPanel .featuresPanel .featureContent .contentItem').css({ 'opacity': 0 });
    $J('.joinBlackmoresPanel .featuresPanel .featureContent .contentItem.selected').css('opacity', 1);

    $J('.joinBlackmoresPanel .featuresPanel li').hover(
        function () {
            hoveredFeatureLink = $J(this);
            joinFeatureTimer = setTimeout(function () {
                clearTimeout(joinFeatureTimer);

                temp = hoveredFeatureLink[0].offsetTop + 4;
                $J('.joinBlackmoresPanel .featuresPanel .featureArrow').css('top', temp + 'px');
                $J(hoveredFeatureLink).addClass('selected');

                for (i = 0; i < $J('.joinBlackmoresPanel .featuresPanel li').length; i++) {

                    if ($J('.joinBlackmoresPanel .featuresPanel li')[i] == $J(hoveredFeatureLink)[0]) {
                        //Active Content                                                    
                        temp = $J('.joinBlackmoresPanel .featuresPanel .featureContent .contentItem')[i];
                        $J(temp).addClass('selected');
                        $J(temp).stop().fadeTo('fast', 0.999);

                    } else {
                        //Inactive content
                        temp = $J('.joinBlackmoresPanel .featuresPanel .featureContent .contentItem')[i];
                        $J(temp).stop().fadeTo('fast', 0.0, function () { $J(this).removeClass('selected'); });
                        temp = $J('.joinBlackmoresPanel .featuresPanel li')[i];
                        $J(temp).removeClass('selected');
                    }

                }

            }, 200);
        }, function () {
            clearTimeout(joinFeatureTimer);
        }
    );


    //Shortcuts Panel
    //========================================================================================================================================
    $J('.joinBlackmoresPanel .shortcutContent .featureContent .contentItem').css({ 'opacity': 0 });
    $J('.joinBlackmoresPanel .shortcutContent .featureContent .contentItem.selected').css('opacity', 1);

    $J('.joinBlackmoresPanel .pullOutShortcuts li').hover(
        function () {
            hoveredShortcutLink = $J(this);
            shortcutParent = $J(this).parent().parent()[0];

            shortcutTimer = setTimeout(function () {
                clearTimeout(shortcutTimer);

                temp = hoveredShortcutLink[0].offsetTop + 4;
                $J('.shortcutArrow', shortcutParent).css('top', temp + 'px');
                $J(hoveredShortcutLink).addClass('selected');

                for (i = 0; i < $J('li', shortcutParent).length; i++) {

                    if ($J('li', shortcutParent)[i] == $J(hoveredShortcutLink)[0]) {
                        //Active Content                                                    
                        temp = $J('.featureContent .contentItem', shortcutParent)[i];
                        $J(temp).addClass('selected');
                        $J(temp).stop().fadeTo('fast', 1.0);

                    } else {
                        //Inactive content
                        temp = $J('.featureContent .contentItem', shortcutParent)[i];
                        $J(temp).stop().fadeTo('fast', 0.0, function () { $J(this).removeClass('selected'); });
                        temp = $J('li', shortcutParent)[i];
                        $J(temp).removeClass('selected');
                    }

                }

            }, 200);
        }, function () {
            clearTimeout(shortcutTimer);
        }
    );

    $J('.joinBlackmoresPanel .linksOnly li').hover(function () {
        $J(this).addClass('selected');
    }, function () {
        $J(this).removeClass('selected');
    });

    $J('.joinBlackmoresPanel .communityShortcuts').click(function () {
        $J('.joinBlackmoresPanel .shortcutLink').removeClass('selected');
        $J(this).addClass('selected');
        $J('.joinBlackmoresPanel .shortcutContent .shortcutsSlide').animate({ left: '20px' }, 500);
        $J(this).blur();
        return false;
    });

    $J('.joinBlackmoresPanel .bookmarkShortcuts').click(function () {
        $J('.joinBlackmoresPanel .shortcutLink').removeClass('selected');
        $J(this).addClass('selected');
        $J('.joinBlackmoresPanel .shortcutContent .shortcutsSlide').animate({ left: '-596px' }, 500);
        $J(this).blur();
        return false;
    });

    $J('.joinBlackmoresPanel .groupShortcuts').click(function () {
        $J('.joinBlackmoresPanel .shortcutLink').removeClass('selected');
        $J(this).addClass('selected');
        $J('.joinBlackmoresPanel .shortcutContent .shortcutsSlide').animate({ left: '-1212px' }, 500);
        $J(this).blur();
        return false;
    });




    $J('.joinBlackmoresPanel .productShortcuts').click(function () {
        $J('.joinBlackmoresPanel .shortcutLink').removeClass('selected');
        $J(this).addClass('selected');
        $J('.joinBlackmoresPanel .shortcutContent .shortcutsSlide').animate({ left: '-1828px' }, 500);
        $J(this).blur();
        return false;
    });


    //Interactions panels
    //========================================================================================================================================
    // = $J('.interactionsPanel .sectionTabs a')[0];
    var hoveredInteraction;
    var interactionButton = $J('.interactionsPanel .sectionTabs a');
    var interactionContent = $J('.interactionsPanel .interactionGroup');
    var activeInteractionContent = $J(interactionContent)[2];
    var activeInteraction = $J(interactionButton)[2];
    var interactionTimer;
    var oldActive;

    var defaultInteraction = $J(interactionContent)[0];
    $J(defaultInteraction).stop().css({ opacity: '0', zIndex: '99' });

    //Initial active
    $J(activeInteractionContent).stop().css({ color: '#000', opacity: '0', zIndex: '100' }).show().fadeTo(400, 1.0);
    
    $J('span.background', activeInteraction).fadeTo('slow', 1.0);
    //$J(activeInteraction).css({ color: '#000', zIndex: '100' });

    //Hover action
    $J('.interactionsPanel .sectionTabs a').hover(function () {
        if ($J(this)[0] != $J(activeInteraction)[0]) {
            hoveredInteraction = $J(this);
            $J(this).css('color', '#000');

            clearTimeout(interactionTimer);

            interactionTimer = setTimeout(function () {
                clearTimeout(interactionTimer);

                //Fade out current active stuff
                $J('span.background', activeInteraction).stop().fadeTo(400, 0.0);
                $J(activeInteraction).css('color', '#008C9A');

                for (i = 0; i < $J(interactionContent).length; i++) {
                    temp = $J(interactionButton)[i];
                    if ($J(temp)[0] == $J(activeInteraction)[0]) {
                        oldActive = $J(interactionContent)[i];
                        $J(oldActive).stop().css('z-index', '99').fadeTo(400, 0.0, function () { $J(this).hide(); });
                    }
                }

                //Fade in current active stuff 
                activeInteraction = $J(hoveredInteraction);
                $J('span.background', activeInteraction).stop().fadeTo(400, 1.0);

                for (i = 0; i < $J(interactionContent).length; i++) {
                    temp = $J(interactionButton)[i];
                    if ($J(temp)[0] == $J(activeInteraction)[0]) {
                        activeInteractionContent = $J(interactionContent)[i];
                        $J(activeInteractionContent).stop().css({ opacity: '0', zIndex: '100' }).show().fadeTo(400, 1.0);
                    }
                }
            }, 200);
        }

    }, function () {
        if ($J(this)[0] != $J(activeInteraction)[0]) {
            $J(this).css('color', '#008C9A');
        }

        clearTimeout(interactionTimer);
    });

    $J('.interactionsPanel .sectionTabs a').click(function () {
        //$J(this).blur();
        //return false;
    })


    //Learning Centre Preview
    //=========================//
    var learningPreview = $J('.interactionLearning .leftCol')[0];
    var newPreview = $J('.defaultInfo', learningPreview)[0];
    var oldPreview;

    $J('.topLinks a', learningPreview).click(function () {
        //Sort link states
        $J('.topLinks a', learningPreview).removeClass('selected');
        $J(this).addClass('selected');

        //Move arrow
        if ($J(this).hasClass('elearnLink')) tempLeft = $J(this)[0].offsetLeft - 20 + 20;
        else tempLeft = $J(this)[0].offsetLeft - 20 + 15;
        $J('.topLinks .previewArrow', learningPreview).css('left', tempLeft + 'px');

        //Switch previews
        oldPreview = newPreview;

        if ($J(this).hasClass('tvLink')) newPreview = $J('.tvInfo', learningPreview)[0];
        else if ($J(this).hasClass('podcastLink')) newPreview = $J('.podcastInfo', learningPreview)[0];
        else if ($J(this).hasClass('articleLink')) newPreview = $J('.articleInfo', learningPreview)[0];
        else if ($J(this).hasClass('elearnLink')) newPreview = $J('.elearnInfo', learningPreview)[0];

        if (oldPreview != newPreview) {
            $J(oldPreview).stop().css('z-index', '69').fadeTo(400, 0.0, function () { $J(this).hide(); });
            $J(newPreview).stop().css({ opacity: '0', zIndex: '70' }).show().fadeTo(400, 1.0);
        }

        $J(this).blur();
        return false;
    });

    //Community interaction hover
    //=============================//
    var communitySet = $J('.interactionCommunity')[0];
    var commPanelSet = $J('.previewPanel', communitySet);
    var commLinkSet = $J('.communityLinks a', communitySet);
    var focusRing = $J('.focusRing', communitySet)[0];
    var newCommPreview = $J(commPanelSet)[0];
    var oldCommPreview;

    $J('.communityLinks a', communitySet).click(function () {
        var tempLeft = $J(this)[0].offsetLeft + 56 - 4;
        var tempTop = $J(this)[0].offsetTop + 77 - 4;

        //Deal with link and focus        
        $J(focusRing).css({ left: tempLeft + 'px', top: tempTop + 'px' });
        $J(commLinkSet).removeClass('selected');
        $J(this).addClass('selected');

        //Deal with the panels
        oldCommPreview = newCommPreview;

        for (i = 0; i < $J(commLinkSet).length; i++) {
            if ($J(commLinkSet)[i] == $J(this)[0]) newCommPreview = $J(commPanelSet)[i + 1];
        }

        if (oldCommPreview != newCommPreview) {
            $J(oldCommPreview).stop().css('z-index', '49').fadeTo(400, 0.0, function () { $J(this).hide(); });
            $J(newCommPreview).stop().css({ opacity: '0', zIndex: '50' }).show().fadeTo(400, 1.0);
        }

        $J(this).blur();
        return false;

    });

});