var FBF = window.FBF || {};

FBF.NavMenu = function() {
    var advisersBg, animating = false, bgNew, bgOld, element, fx, fxDuration = .3, p, sliderHeight = 64, timer;

    function build() {
        bgOld = new Element('div', { id: 'bgOld' }).addClassName('hover-bg');
        bgNew = new Element('div', { id: 'bgNew' }).addClassName('hover-bg');

        element.insert({ top: bgOld });
        element.insert({ top: bgNew });

        bgNew.setStyle({
            left: '0px',
            height: sliderHeight + 'px',
            opacity: 0
        });

        bgOld.setStyle({
            left: '0px',
            height: sliderHeight + 'px',
            opacity: 0
        });

        element.on("mouseover", "a:not(.selected a)", onMouseOver);
        element.on("mouseout", "a:not(.selected a)", onMouseOut);
    }

    function onMouseOver(e, el) {
        var fx = [];
        var parentLi = el.up('li');

        var elOffset = parentLi.positionedOffset();
        var elWidth = el.measure('padding-box-width');

        if (bgNew.getOpacity() != 0) {
            fx.push(new S2.FX.Morph(bgOld, {
                style: 'opacity: 0'
            }));
        }

        fx.push(new S2.FX.Morph(bgNew, {
            style: 'opacity: 1'
        }));

        p = new S2.FX.Parallel(fx, {
            after: function() {
                bgOld.setStyle({
                    left: elOffset.left + 'px',
                    opacity: 1,
                    width: elWidth + 'px'
                });

                if (parentLi.hasClassName('consumer')) {
                    bgOld.addClassName('consumer');
                } else if (bgOld.hasClassName('consumer')) {
                    bgOld.removeClassName('consumer');
                }
            } .bind(this),
            before: function() {
                if (parentLi.hasClassName('consumer')) {
                    bgNew.addClassName('consumer');
                } else if (bgNew.hasClassName('consumer')) {
                    bgNew.removeClassName('consumer');
                }

                bgNew.setStyle({
                    left: elOffset.left + 'px',
                    opacity: 0,
                    width: elWidth + 'px'
                });
            } .bind(this),
            duration: fxDuration
        });

        p.play();
    }

    function onMouseOut(e, el) {
        p.cancel();


        if (!e.relatedTarget.descendantOf(element.down('ul')) ||
            e.relatedTarget.up('li').hasClassName('selected')
        ) {
            var elOffset = el.up('li').positionedOffset();
            var elWidth = el.measure('padding-box-width');
            bgNew.morph('opacity: 0', {
                duration: fxDuration
            });
            if (bgOld.getOpacity() != 0) {
                bgOld.morph('opacity: 0', {
                    duration: fxDuration
                });
            }
        }
    }

    return {
        initialize: function(el) {
            element = $(el);
            build();
        }
    }
} ();

FBF.ExactRangeSwitch = function() {

    var element;

    function build() {
        $('ctl00_Sidebar_ctlSearchMedia_radSearchType_0-date').addClassName('closed');
        $('ctl00_Sidebar_ctlSearchMedia_radSearchType_1-date').addClassName('closed');

        element.select('input[type=radio]').each(function(el) {
            var bg = new Element('span').addClassName('bg').setStyle({
                opacity: 0
            });

            var li = el.up('li');
            li.insert(bg);

            if (el.checked) {
                $(el.id + '-date').removeClassName('closed');
                bg.setStyle({
                    opacity: 1
                });
                li.addClassName('selected');
            }

            el.hide();
            li.id = el.id + '-replaced';
        });

        element.addClassName('replaced');
        element.on('click', 'li', onClick);
    }

    function onClick(e, el) {
        if (!el.hasClassName('selected')) {
            var fx = [];
            var elBg = el.down('.bg');

            if (current = element.down('li.selected')) {
                var currentBg = current.down('.bg');
                fx.push(new S2.FX.Morph(currentBg, {
                    style: 'opacity: 0'
                }));
            }

            fx.push(new S2.FX.Morph(elBg, {
                style: 'opacity: 1'
            }));

            var p = new S2.FX.Parallel(fx, {
                after: function() {
                    if (current) {
                        current.down('input').checked = false;
                        $(current.down('input').id + '-date').addClassName('closed');
                    }

                    el.down('input').checked = true;
                    el.addClassName('selected');
                    $(el.down('input').id + '-date').removeClassName('closed');
                },
                before: function() {
                    if (current) {
                        currentBg.setStyle({
                            opacity: 1
                        });
                        current.removeClassName('selected');
                    }

                    elBg.setStyle({
                        opacity: 0
                    });
                },
                duration: 0.125
            });

            p.play();
        }
    }

    return {
        initialize: function(el) {
            element = $(el);
            build();
        }
    }

} ();

FBF.Expandy = function() {

    var element, contentSelector, options, toggleSelector;

    function build() {
        element.select(contentSelector).each(function(el) {
            el.addClassName('closed');

            var toggle = el.up('.expandy-wrapper').down(toggleSelector);
            toggle.addClassName('closed').update(options.closedText);
        });

        var first = element.down(contentSelector);
        first.removeClassName('opend');

        //        var firstToggle = first.up('.expandy-wrapper').down(toggleSelector);
        //        firstToggle.removeClassName('closed').update(options.openedText);

        element.on('click', 'a.toggle', onClick);
    }

    function onClick(e, el) {
        e.stop();

        if (el.hasClassName('closed')) {
            el.removeClassName('closed').update(options.openedText);
            el.up('.expandy-wrapper').down(contentSelector).removeClassName('closed');
        } else {
            el.addClassName('closed').update(options.closedText);
            el.up('.expandy-wrapper').down(contentSelector).addClassName('closed');
        }
    }

    return {
        initialize: function(el, _contentSelector, _toggleSelector, _options) {
            options = Object.extend({
                closedText: 'View',
                openedText: 'Close'
            }, _options || {});
            element = $(el);
            contentSelector = _contentSelector;
            toggleSelector = _toggleSelector;
            build();
        }
    }
} ();

FBF.TabbedPanels = Class.create({
    initialize: function(el) {
        this.element = $(el);
        this.panelsContainer = this.element.down('.panels');
        this.panels = this.element.select('.panel');
        this.tabs = this.element.down('.tabs');

        this.build();
    },
    build: function() {
        var h;

        this.panels.each(function(el) {
            layout = el.getLayout();
            h = layout.get('padding-box-height');

            el.setStyle({
                left: 0,
                opacity: 0,
                'position': 'absolute',
                top: 0,
                zIndex: 1
            });
        }, this);

        this.panelsContainer.setStyle({
            height: h + 'px',
            position: 'relative'
        });

        this.activeTab = this.tabs.down('li.active a');
        this.activePanel = $(this.activeTab.hash.substring(1));

        this.activePanel.setStyle({
            opacity: 1
        });

        this.onClickListener = this.onClick.bind(this);
        this.element.on('click', 'a', this.onClickListener);
    },
    onClick: function(e, el) {
        e.stop();

        if (!el.up('li.active')) {
            var targetPanel = $(el.hash.substring(1));

            this.tabs.down('li.active').removeClassName('active');
            this.activeTab = this.tabs.down('a[href=' + el.hash + ']');
            this.activeTab.up('li').addClassName('active');

            targetPanel.morph('opacity: 1', {
                after: function() {
                    this.prevPanel = this.activePanel;
                    this.prevPanel.setStyle({
                        opacity: 0,
                        zIndex: 1
                    });
                    this.activePanel = targetPanel;
                    this.activePanel.setStyle({
                        zIndex: 1
                    });
                } .bind(this),
                before: function() {
                    this.activePanel.setStyle({
                        zIndex: 2
                    });
                    targetPanel.setStyle({
                        zindex: 3
                    });
                } .bind(this),
                duration: .15
            });
        }
    }
});

FBF.AreaMap = function() {
    var element, imageMap, regions;

    function build() {
        imageMap.select('area').invoke('observe', 'mouseover', onMouseEnter);
        imageMap.select('area').invoke('observe', 'mouseout', onMouseLeave);
    }

    function onMouseEnter(e) {
        var element = $(e.target.id.split('-')[1]);

        element.appear({
            duration: 0.25,
            engine: 'javascript'
        });
    }

    function onMouseLeave(e) {
        var element = $(e.target.id.split('-')[1]);
        element.fade({
            duration: 0.15,
            engine: 'javascript'
        });
    }

    return {
        initialize: function(el) {
            element = $(el);
            imageMap = $('m_map');
            regions = $('regions');
            build();
        }
    }

} ();


function pagingLinkClicked(event) {
    var element = event.element();
    var ref = element.readAttribute('href');
    ref = ref.substr(1);
    showOnlyPage(ref);
}

//<div class="search-pager">
//<span class="prev">Previous Page</span>&nbsp;<a class="next" title="Next Page" href="">Next Page</a>&nbsp;

//</div>

//<A class="first_page" title="First page of results" href="page1">First page of results</A>

function setUpPagers() {
    $$('div.kdpage').each(function(item) {
        var allPages = $$('div.kdpage');
        var pager = new Element('div').addClassName('search-pager');
        var spanspan = new Element('span');
        var lastId = allPages.last().identify();
        var title = item.identify();
        var firstButton;
        var prevButton;
        var nextButton;
        var lastButton;

        var isFirst = (item === allPages.first());
        var isLast = (item === allPages.last());

        if (isFirst) {
            firstButton = new Element('span').addClassName('first_page').update('First page of results').writeAttribute('title', 'First page of results');
            prevButton = new Element('span').addClassName('prev').update('Previous Page').writeAttribute('title', 'Previous Page');
        } else {
            firstButton = new Element('a').addClassName('first_page').writeAttribute('href', '#page1').update('First page of results').writeAttribute('title', 'First page of results');
            firstButton.observe('click', pagingLinkClicked);

            var prevPage;
            if (title == 'page2')
                prevPage = "#page1";
            if (title == 'page3')
                prevPage = "#page2";

            prevButton = new Element('a').addClassName('prev').writeAttribute('href', prevPage).update('Previous Page').writeAttribute('title', 'Previous Page');
            prevButton.observe('click', pagingLinkClicked);
        }

        if (isLast) {
            nextButton = new Element('span').addClassName('next').update('Next Page').writeAttribute('title', 'Next Page');
            lastButton = new Element('span').addClassName('last_page').update('Last page of results').writeAttribute('title', 'Last page of results');
        } else {
            lastButton = new Element('a').addClassName('last_page').writeAttribute('href', '#' + lastId).update('Last page of results').writeAttribute('title', 'Last page of results');
            lastButton.observe('click', pagingLinkClicked);

            var nextPage;
            if (title == 'page1')
                nextPage = "#page2";
            if (title == 'page2')
                nextPage = "#page3";

            nextButton = new Element('a').addClassName('next').writeAttribute('href', nextPage).update('Next Page').writeAttribute('title', 'Next Page');
            nextButton.observe('click', pagingLinkClicked);
        }
        spanspan.insert(firstButton);
        spanspan.insert(prevButton);
        spanspan.insert(nextButton);
        spanspan.insert(lastButton);
        pager.insert(spanspan);
        item.insert(pager);
    });
}
function showOnlyPage(pagename) {

    $$('div.kdpage').each(function(item) {
        item.hide();
    });
    if ($(pagename)) {
        $(pagename).show();
    }
}

function captchaTbKeyPress(event) {
    var e = event || window.event;
    if (e.keyCode == 13) {
        var formDiv = $('sk_form');
        var btn = formDiv.select('.button')[0];
        if (btn) {
            $(btn.click());
            e.preventDefault();
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            return false;
        }
    }
}

function ga_link_clicked(event) {
    var element = event.element();
    var ref = element.readAttribute('href');
    var externalStart = 'http://';
    var externalStart2 = 'https://';
    var skandia_domain = 'http://www.skandia.co.uk/';
    var skandia_domain2 = 'http://www2.skandia.co.uk/';
    var documents = '/Documents/';
    var specialLink = 'http://www.skandia.co.uk/funds/fundinfo/index.htm';

    if (ref.substr(0, specialLink.length) === specialLink) {
        _gaq.push(['_trackPageview', '/outgoing/' + ref]);
        return;
    }

    if (ref.substr(0, externalStart.length) === externalStart) {
        if (ref.substr(0, skandia_domain.length) === skandia_domain)
            return;
        if (ref.substr(0, skandia_domain2.length) === skandia_domain2)
            return;

        _gaq.push(['_trackPageview', '/outgoing/' + ref]);
        return;
    }

    if (ref.substr(0, externalStart2.length) === externalStart2) {
        _gaq.push(['_trackPageview', '/outgoing/' + ref]);
        return;
    }

    if (ref.substr(0, documents.length) === documents) {
        _gaq.push(['_trackPageview', '/documents/' + ref]);
        return;
    }


}

document.observe("dom:loaded", function() {
    var links = $$('a');
    if (links.length > 0) {
        links.each(function(el) {
            el.observe('click', ga_link_clicked);
        });
    }

    //add alt to pagers
    $$('.search-pager a').each(function(item) {
        item.writeAttribute('title', item.innerHTML);
    });
    // Animated main nav menu
    //new FBF.NavMenu.initialize('nav-container');
    // exact / range date toggle for the media centre search form
    if ($('media-centre-form')) {
        new FBF.ExactRangeSwitch.initialize('exact-range-toggle');
        $('ctl00_Sidebar_ctlSearchMedia_txtKeyword').observe('focus', function() {
            this.value = "";
        });
    }

    $('ctl00_header_SearchBox1_txtSearchQuery').observe('focus', function() {
        this.value = "";
    });

    // Exanding and collapsing panels on several pages, would be
    // nice to consolidate these if possible.
    if ($('awards')) {
        new FBF.Expandy.initialize('awards', 'div.year', 'a.toggle');
    }

    if ($('faqs')) {
        new FBF.Expandy.initialize('faqs', 'div.answer', 'a.toggle');
    }

    if ($('objectives')) {
        new FBF.Expandy.initialize('objectives', 'div.objective', 'a.toggle');
    }

    // tabbed tables on the guarenteed pensions fund page
    if (Element.hasClassName(document.body, 'guarenteed_pension_fund')) {
        var bonusRates = new FBF.TabbedPanels('bonus-rates');
        var discountRates = new FBF.TabbedPanels('discount-rates');
    }

    // Are there any tooltips on the page?
    var tooltips = $$('.hasTooltips');
    var inlineTooltips = $$('.hasInlineTooltips');

    if (tooltips.length > 0) {
        tooltips.each(function(el) {
            new Tooltip(el, { selector: 'span.help' });
        });
    }

    if (inlineTooltips.length > 0) {
        inlineTooltips.each(function(el) {
            new Tooltip(el, { selector: 'a.tip', inline: true });
        });
    }

    var modules = $$('.module');

    if (modules.length > 0) {
        modules.each(function(el) {
            new Tooltip(el, { selector: 'span.glossary-lookup' });
        });
    }

    // interactive map in a lightbox on the Old Mutual page
    if ($('old-mutual-map')) {
        new FBF.Lightbox.initialize('old-mutual-map', { lightboxHtml: '<div class="fg"></div><div class="bg"><div class="bd"></div><div class="ft"></div></div>' });
    }


    // Add zebra striping to default table styling
    $$('table.default-table').each(function(table) {
        var rows = table.select('tr');
        for (i = 0, len = rows.length; i < len; i = i + 2) {
            rows[i].addClassName('alt');
        }
    });

    if ($('area-map')) {
        new FBF.AreaMap.initialize('area-map');
    }
    $$('li.ordered-list').each(function(item) {
        item.innerHTML = '<span>' + item.innerHTML + '</span>';
    });
    if ($('consumer-carousel')) {
        var carousel = new ConsumerHomeCarousel('consumer-carousel');
    }
    if ($('adviser-carousel')) {
        var carousel = new AdviserHomeCarousel('adviser-carousel');

        var lfskDiv = $('.latest-from-skandia .module-fg')
    }
    if ($('sk_form')) {
        var tb = $('recaptcha_response_field');
        tb.observe('keypress', captchaTbKeyPress);
    }
    if ($('adv_verification_popup')) {
        new FBF.AdvPopup.initialize('adv_verification_popup', { lightboxHtml: '<div class="fg"></div>' });

        var maxHeight = 0;
        $$('.latest-from-skandia .module-fg').each(function(item) {
            maxHeight = Math.max(maxHeight, item.getHeight());
        });
        $$('.informer .module-fg').each(function(item) {
            maxHeight = Math.max(maxHeight, item.getHeight());
        });
        if (maxHeight != 0) {
            $$('.latest-from-skandia .module-fg').each(function(item) {
                item.setStyle({ height: maxHeight + 'px' });
            });
            $$('.informer .module-fg').each(function(item) {
                item.setStyle({ height: maxHeight + 'px' });
            });
        }
    }

    /*KD ARTICLE*/
    $$('.kd-art-toc li').each(function(item) {
        var aLink = item.down('a');
        if (aLink.innerHTML == '') {
            item.hide();
            $(aLink.readAttribute('href').substr(1)).remove();
        }
        else {
            aLink.observe('click', pagingLinkClicked);
        }
    });
    setUpPagers();
    showOnlyPage('page1');
});
