// create namespace
Ext.namespace('MFA');

MFA.app = function() {
    var container, startNavi, mainNavi, pages = {}, popups ={}, hostPart;
    var activeBgImg = 0, bgImgs = [], defaultImg;
    var activePageIdx = 0, isTheme = false, isDialog = false, isStart = false, activePopupPageIdx;
    var pageHeader, pageText, infoMore, dialogPopup, socialBox, socialLinks, moreInfoBox, startVideoLink, childrenVideoLink, startVideoContainer, mask, hasFlash;
    var popLayer, noHistory = false; initPage = 1, scrollPane = false, scrollPopPane = false;
    var imgSwitcher, currentSwitch = false, switch1, switch2;

    var fadeImg = function(img, duration, cb)
    {
        duration = duration || 1;
        var nextBgIdx = activeBgImg ? 0 : 1;
        //console.trace();
        var nextBg = Ext.get(bgImgs[nextBgIdx]);
        nextBg.hide();
        nextBg.dom.src = "";
        nextBg.dom.src = img;
        //nextBg.show().hide();
        var bg = Ext.get(bgImgs[activeBgImg]);
        if(nextBg.dom.src == bg.dom.src)
            return;
        activeBgImg = nextBgIdx;
        var fn = function(){
            bg.fadeOut({duration:duration});
            nextBg.fadeIn({duration:duration, callback: cb, scope: this});
        }
        fn.defer(400);
    };

    var getLinkParams = function(link)
    {
        var res = {};

        var query = link.href.match(/\?(.+)/);
        res.page = link.href.replace(hostPart , "").replace(/(#.*)*/g, '').replace(/index\.php/, '');

        if(query && query[1])
            res.page = res.page.replace(query[0], '');

        res.page = res.page.replace(/^\/*/, '');

        if(res.page && res.page != '' && res.page.indexOf('/') == -1)
        {
            if(query && query[1])
            {
                var params = query[1].split('&');
                for(var i = 0, len = params.length; i < len; i++)
                {
                    var parts = params[i].split('=');
                    res[parts[0]] = parts[1];
                }
            }
            return res;
        }
        return false;
    }

    var getEls = function()
    {
        Ext.fly('infoClose').setVisible(true);
        mask = Ext.get('mask');
        container = Ext.getBody().first();
        startNavi = Ext.get('start-nav');
        childrenVideoLink = Ext.get('childrenPopup');
        startVideoLink = Ext.get('startVideo');
        startVideoContainer = Ext.get('videoBox');
        if(!hasFlash)
            startVideoContainer.setDisplayed(false);
        mainNavi = Ext.select('.menu > ul > li');
        pageHeader = Ext.get('page-headline');
        pageText = Ext.get('pane');
        infoMore = Ext.get('infoMore');
        dialogPopup = Ext.get('dialogPopup');
        socialLinks = Ext.select('.socialBook a');
        socialBox = Ext.get('socialBook');
        moreInfoBox = Ext.get('moreInfoBox');
        bgImgs = Ext.query('#bgDiv img');
        popLayer = Ext.get('popLayer');
        defaultImg = bgImgs[0];
        activePageIdx = MFA.pageIdx;
        pages[activePageIdx] = MFA.page;
        imgSwitcher = container.insertFirst({
            id:'imgSwitcher',
            style:'display:none;',
            cls: 'png',
            children:[{id: 'switch1'}, {id: 'switch2'}]
        });
        switch1 = Ext.get('switch1');
        switch2 = Ext.get('switch2');
    };

    var showPopup = function(pageIdx)
    {
        mask.fadeIn({ endOpacity: .5, duration: 0.35});
        if(!popups[pageIdx])
        {
            Ext.Ajax.request({
                url: 'index.php',
                params: {page: pageIdx, site: 'popup'},
                success: function(response){
                    var p = Ext.decode(response.responseText);
                    if(p)
                    {
                        popups[pageIdx] = p;
                        applyPopup(pageIdx);
                    }
                },
                scope: this
            })
        }
        else
        {
            applyPopup(pageIdx);
        }
        activePopupPageIdx = pageIdx;
    };

    var applyPopup = function(pageIdx)
    {
        popLayer.child('h1').update(popups[pageIdx].TITLE);
        popLayer.child('#panePop').update(popups[pageIdx].COPY);
        popLayer.setDisplayed(true);
        startVideoContainer.setDisplayed(false);
        if(activePageIdx == 1)
            startVideoLink.setDisplayed(true);
        if(!scrollPopPane)
        {
            scrollPopPane = new Ext.ux.ScrollPane('panePop', {scrollbarWidth:9});
        }
        else
        {
            scrollPopPane.init();
        }
        if(pageIdx == 'dialog' || pageIdx == 'suggest')
        {
            popups[pageIdx].trackvars.et_pagename = pages[activePageIdx].TITLE + ' (' + popups[pageIdx].trackvars.et_pagename + ')';
            popups[pageIdx].trackvars.et_areas = pages[activePageIdx].trackvars.et_areas;
            popups[pageIdx].trackvars.et_ilevel = 3;
            track(popups[pageIdx]);
            //delete(popups[pageIdx]);
        }else{
            track(popups[pageIdx]);
        }
        if(pageIdx == 'suggest')
        {
            popLayer.child('input[name=deeplink_url]').dom.value = MFA.tokens[activePageIdx - 1];
        }
    }

    var setMainNav = function()
    {
        mainNavi.removeClass('sel');
        if(isTheme)
            Ext.fly(mainNavi.elements[1]).addClass('sel');
        else if(isStart)
            Ext.fly(mainNavi.elements[0]).addClass('sel');
        else
        {
            if(activePageIdx == MFA.imgs.length)
                Ext.fly(mainNavi.elements[3]).addClass('sel');
            else
                Ext.fly(mainNavi.elements[2]).addClass('sel');
        }
    }

    var switchPage = function(pageIdx)
    {
        //mask.setDisplayed(false);
        activePageIdx = parseInt(pageIdx);
        moreInfoBox.setDisplayed(false);
        isTheme = (activePageIdx > 1 && (activePageIdx < MFA.imgs.length - 1)) || false;;
        isStart = activePageIdx == 1;
        setMainNav();
        var img = '06_media/themen/' + MFA.imgs[activePageIdx-1];
        fadeImg(img);
        if(!pages[activePageIdx])
        {
            Ext.Ajax.request({
                url: 'index.php/' + MFA.tokens[activePageIdx-1],
                success: function(response){
                    var p = Ext.decode(response.responseText);
                    if(p)
                    {
                        pages[activePageIdx] = p;
                        applyPage();
                    }
                },
                scope: this
            })
        }
        else
        {
            applyPage()
        }
    };

    var applyPage = function()
    {
        noHistory = true;
        Ext.History.add('/' + pages[activePageIdx].SWFADRTITLE, true);
        var fn = function() {
            noHistory = false;
        }.createDelegate(this);
        fn.defer(200);
        //var isTheme = activePageIdx > 1 && activePageIdx < (MFA.imgs.length - 1);
        isStart = activePageIdx == 1;
        isDialog = activePageIdx == MFA.imgs.length;
        startNavi.setDisplayed(isStart);

        applyMetas();

        pageHeader.update(pages[activePageIdx].HL);
        pageHeader.prev().setDisplayed(isTheme).first().dom.href = '/' + (activePageIdx == 2 ? MFA.tokens[MFA.tokens.length-3] : MFA.tokens[activePageIdx - 2]);
        pageHeader.next().setDisplayed(isTheme).first().dom.href = '/' + (activePageIdx == MFA.tokens.length-2 ? MFA.tokens[1] : MFA.tokens[activePageIdx]);
        pageHeader.parent().setStyle({
            color: !isTheme ? '#E20074' : '#' + pages[activePageIdx].COLOR,
            paddingLeft: isTheme ? '0' : '30px',
            paddingRight: isTheme ? '0' : '30px',
            width: isTheme ? '377px' : '321px'
        });
        pageHeader.prev().child('img').dom.src = 'images/pfeile_navi/pfeil_links_' + pages[activePageIdx].COLOR + '.gif';
        pageHeader.next().child('img').dom.src = 'images/pfeile_navi/pfeil_rechts_' + pages[activePageIdx].COLOR + '.gif';
        //pageHeader.parent().select('.theme-link').setStyle({color: !isTheme ? '#E20074' : '#' + pages[activePageIdx].COLOR});
        pageText.update(pages[activePageIdx].MAINTEXT);
        pageText[(activePageIdx == MFA.imgs.length) ? 'addClass' : 'removeClass']('dialog');
        for(var i = 0, len = socialLinks.elements.length; i < len; i++)
        {
            var ln = socialLinks.elements[i].href;
            if(i < len-1)
                socialLinks.elements[i].href = ln.replace(/(.*?\/#\/).*?(&.*?)/, '$1' + pages[activePageIdx].SWFADRTITLE + '$2');
            else
                socialLinks.elements[i].href = '/' + pages[activePageIdx].SWFADRTITLE + '?site=popup&page=' + activePageIdx + '&subpage=suggest&url=' + pages[activePageIdx].SWFADRTITLE;
        }
        socialBox.setDisplayed(!isStart);
        //infoMore.setDisplayed(isTheme);
        isDialog = activePageIdx == MFA.imgs.length;
        dialogPopup.setDisplayed(isDialog);

            if(hasFlash)
            {
                startVideoContainer.setDisplayed(isStart);
            }
        var showLink = !hasFlash && isStart;
        startVideoLink.setDisplayed(showLink);
        childrenVideoLink.setDisplayed(activePageIdx == 4)
        applyInfoLinks();
        if(!scrollPane)
        {
            scrollPane = new Ext.ux.ScrollPane(pageText, {scrollbarWidth:9});
        }
        else
        {
            scrollPane.init();
        }
        imgSwitcher.setDisplayed(false);
        currentSwitch = false;
        if(pages[activePageIdx].FADEIMG1 && pages[activePageIdx].FADEIMG2)
        {
            currentSwitch = 1;
            var fn = function()
            {
                if(pages[activePageIdx].FADEIMG1 && pages[activePageIdx].FADEIMG2)
                {
                    switch1.setLeft(0).setVisible(true);
                    switch2.setLeft(0).setVisible(false);
                    fadeImg('06_media/themen/' + pages[activePageIdx].FADEIMG1, 1, function(){imgSwitcher.setDisplayed(true);})
                }
            }
            fn.defer(3000, this);
        }
        track(pages[activePageIdx]);
    }

    var applyInfoLinks = function()
    {
        var styles = [
            '.infoLinks ul a, .infoMore a{color:#' + pages[activePageIdx].COLOR + ' !important;background-image: url(images/pfeile_links/pfeil_' + pages[activePageIdx].COLOR + '.gif) !important;}',
            '.infoLinks ul a:hover, .infoMore a:hover{color: white !important; background-image:url(images/pfeile_links/pfeil_ffffff.gif) !important;}',
            '.naviTitle h2{background-image: url(images/headlines/headline_' + pages[activePageIdx].COLOR + '.gif) !important;height:24px;width:311px;}',
            '.holder .jScrollPaneDrag{background-image: url(images/scroller/scroll_drag_middle_' + pages[activePageIdx].COLOR + '.gif);}'
        ];
        if(isStart){
            styles.push('.naviTitle h1{background-image:url(images/headlines/headline_start.gif) !important;height:80px;width:300px;margin: ' + (Ext.isIE6 ? '0' : '20') + 'px 0 10px 0;}')
        }

        Ext.select('.naviTitle h2').update('');
        Ext.select('.naviTitle h1').update('');
        Ext.util.CSS.removeStyleSheet('lnkSt')
        Ext.util.CSS.createStyleSheet(styles.join(''), 'lnkSt');

        if(pages[activePageIdx].MOREINFO && pages[activePageIdx].MOREINFO.length){
            infoMore.setDisplayed(true);
            var html = [
                '<h2>  Weiterführende Links </h2>',
                '<ul>'
            ];
            for(var i = 0, len = pages[activePageIdx].MOREINFO.length; i < len; i++)
                html.push('<li>' + pages[activePageIdx].MOREINFO[i] + '</li>');
            html.push('</ul>');
            moreInfoBox.child('.infoLinks').update(html.join(''));
        }
        else
        {
            infoMore.setDisplayed(false);
        }
    }

    var applyMetas = function()
    {
        if(isStart){
            document.title = 'millionen fangen an: Die Nachhaltigkeitsoffensive der Deutschen Telekom';
            //Ext.select('title').update();
            Ext.select('meta[name=description]').elements[0].setAttribute('content', 'Die Webseite zur Telekom Nachhaltigkeitsoffensive. Große Veränderungen fangen klein an.');
        }
        else{
            var desc = '';
            var rx = /<h3>(.*)<\/h3>/.exec(pages[activePageIdx].HL);
            //Ext.select('title').update(pages[activePageIdx].TITLE + ': ' + rx[1]);
            document.title = pages[activePageIdx].TITLE + ': ' + rx[1];
            var descParts = pages[activePageIdx].MAINTEXT.split('.');
            for(var i = 0; i < 3; i++)
            {
                desc += descParts[i].replace(/<\/?[^>]+>/gi, '') + ". ";
            }
            Ext.select('meta[name=description]').elements[0].setAttribute('content', desc);
        }
    }

    var track = function(page)
    {
        var trackVars = page.trackvars;
        for(var name in trackVars)
            window[name] = trackVars[name];
        et_eC('BYVuD3');
    }

    var initPageNav = function()
    {
        container.on({
            'click':  {
                fn: function(event, el){
                    if(event.getTarget('#videoBox'))
                    {
                        startVideoContainer.setDisplayed(false);
                        startVideoLink.setDisplayed(true);
                        event.stopEvent();
                    }
                    else if(hasFlash && event.getTarget('#startVideo'))
                    {
                        startVideoContainer.setDisplayed(true);
                        startVideoLink.setDisplayed(false);
                        event.stopEvent();
                    }
                    else if(event.getTarget('#infoMore'))
                    {
                        pages[activePageIdx].trackvars.et_ilevel = 3;
                        pages[activePageIdx].trackvars.et_pagename += ' (Mehr Informationen)';
                        track(pages[activePageIdx]);
                        moreInfoBox.setDisplayed(true);
                        event.stopEvent();
                    }
                    else if(event.getTarget('#infoClose'))
                    {
                        pages[activePageIdx].trackvars.et_ilevel = 2;
                        pages[activePageIdx].trackvars.et_pagename = pages[activePageIdx].trackvars.et_pagename.replace(' \(Mehr Informationen\)', '');
                        track(pages[activePageIdx]);
                        moreInfoBox.setDisplayed(false);
                        event.stopEvent();
                    }
                    else if(event.getTarget('.infoClose'))
                    {
                        if(activePopupPageIdx == 'suggest' || activePopupPageIdx == 'contact'){
                            delete(popups[activePopupPageIdx]);
                        }
                        mask.fadeOut({duration: 0.35})
                        popLayer.setDisplayed(false);
                        event.stopEvent();
                    }
                    else
                    {
                        var params = getLinkParams(el);
                        if(params){
                            event.stopEvent();
                            if(params['site'] && params['site'] == 'popup'){
                                showPopup(params['subpage']);
                            }else if(params['page'])
                            {
                                var idx = MFA.tokens.indexOf(params['page']);
                                switchPage(idx + 1);
                            }
                        }else{
                            if(event.getTarget('#socialBook')){
                                var social = el.title.replace('Bookmark bei: ', '');
                                pages[activePageIdx].trackvars.et_pagename = pages[activePageIdx].TITLE + ' (Social: ' + social + ')';
                                pages[activePageIdx].trackvars.et_pagename = 3;
                                track(pages[activePageIdx]);
                                pages[activePageIdx].trackvars.et_pagename = 2;
                                pages[activePageIdx].trackvars.et_pagename = pages[activePageIdx].TITLE;
                            }
                        }
                    }
                },
                scope: this,
                delegate: 'a'
            }
        });
        popLayer.on({
            'click': {
                fn: function(event, el){
                    event.stopEvent();
                    Ext.Ajax.request({
                        form: event.getTarget('form'),
                        success: function(response){
                            var res = Ext.decode(response.responseText);
                            if(res.success){
                                popLayer.child('#panePop').update('Vielen Dank');
                                var page = popups[activePopupPageIdx];
                                if(activePopupPageIdx == 'suggest')
                                    page.trackvars.et_pagename = pages[activePageIdx].TITLE + ' (Seite empfohlen)';
                                else{
                                    page.trackvars.et_pagename = pages[activePageIdx].TITLE + ' (Frage gestellt)';
                                }
                                page.trackvars.et_ilevel = 4;
                                track(page)
                            }
                            else{
                                var error = '<div class="error">Bitte überprüfen Sie Ihre Eingaben.</div>';
                                popLayer.child('#panePop').update(popups[activePopupPageIdx].COPY + error)
                            }
                            scrollPopPane.init();
                            scrollPopPane.scrollTo(scrollPopPane.contentHeight - scrollPopPane.paneHeight);
                        },
                        scope: this
                    })
                },
                scope: this,
                delegate: 'input[type=submit]'
            }
        });
        imgSwitcher.on({
            'click':{
                fn: function(ev, el)
                {
                    if(el.id == 'imgSwitcher')
                    {
                        if(currentSwitch == 1)
                        {
                            var nextImg = '06_media/themen/' + pages[activePageIdx].FADEIMG2;
                            switch1.animate({left:{by: 155}}, 0.5, function(obj){
                                obj.setVisible(false).setLeft(0);
                                switch2.setLeft(0).setVisible(true);
                            });
                        }
                        else// if(el.id == 'imgSwitcher' && currentSwitch == 2)
                        {
                            var nextImg = '06_media/themen/' + pages[activePageIdx].FADEIMG1;
                            switch2.animate({left:{by: -155}}, 0.5, function(obj){
                                obj.setVisible(false).setLeft(0);
                                switch1.setLeft(0).setVisible(true);
                            });
                        }

                        var cb = function()
                        {
                            if(currentSwitch == 1)
                            {
                                //imgSwitcher.setLeft(45);
                                currentSwitch = 2;
                            }else{
                                 //imgSwitcher.setLeft(200);
                                currentSwitch = 1;
                            }
                        }
                        fadeImg(nextImg, 1, cb);
                    }
                },
                scope: this
            }
        });
    };

    var initFlash = function()
    {
       var flashvars = {
            xmlfile: "03_xml/fileinfo.xml"
        };
        var params = {
            menu: "false",
            scale: "noScale",
            allowFullscreen: "true",
            allowScriptAccess: "always",
            bgcolor: "#000000"
        };
        var attributes = {
            id:"videoplayer"
        };
        swfobject.embedSWF("05_swf/videoplayer.swf", "altContent", "100%", "100%", "9.0.0", "05_swf/expressInstall.swf", flashvars, params, attributes);

    };

    var initHistory = function()
    {
        Ext.History.init();
        Ext.History.on('change', function(token){
            //console.log(this)
            if(!noHistory){
                var idx = initPage;
                if(token)
                    idx = MFA.tokens.indexOf(token.replace(/^\//, ''));
                if(idx > -1 && (idx + 1) != activePageIdx)
                    switchPage(idx + 1);
            }
        }, this);
        var hash;
        if(hash = Ext.History.getToken())
        {
            var idx = MFA.tokens.indexOf(hash.replace(/^\//, ''));
            if(idx > -1)
                switchPage(idx + 1);
            else
                applyPage();
        }
        noHistory = true;
        //Ext.History.add('');
        Ext.History.add('/' + MFA.tokens[activePageIdx-1], true);
        var fn = function() {
            this.noHistory = false;
        }.createDelegate(this);
        fn.defer(200);
    }

    return {
        init: function()
        {
            var version = swfobject.getFlashPlayerVersion();
            hasFlash = version.major != 0;
            if(hasFlash && !MFA.isBot){
                Ext.fly('pageBg').setStyle('right', '0');
                Ext.fly('footer').setDisplayed(false);
                if(hash = Ext.History.getToken())
                {
                    var idx = MFA.tokens.indexOf(hash.replace(/^\//, ''));
                    if(idx > -1)
                        flashvars.deeplink = MFA.tokens[idx];
                }
                showswf();
                return;
            }
            var path = document.location.pathname == '/' ? '' : document.location.pathname;
            hostPart = document.location.href.replace(path + document.location.search + document.location.hash, "");
            getEls();
            //moreInfoBox.setDisplayed(false);
            if(Ext.isIE6)
                DD_belatedPNG.fix('.png');//Ext.getBody().select('.png').pngFix().removeClass('png');
            initPageNav();
            if(hasFlash)
                initFlash();
            isTheme = activePageIdx > 1 && (activePageIdx < MFA.imgs.length - 2);
            isDialog = activePageIdx == MFA.imgs.length;
            isStart = activePageIdx == 1;
            initPage = activePageIdx - 1;
            initHistory();
            infoMore.setDisplayed(isTheme);
            dialogPopup.setDisplayed(isDialog);
            startVideoContainer.setDisplayed(hasFlash && isStart);
            startVideoLink.setDisplayed(!hasFlash && isStart)

        }
    }
}();

Ext.onReady(MFA.app.init);