function initApplication() {
    initNavigation();
    initCampaignSelects();
}

function initNavigation() {

    let redirect = {
        start: initStart,
        links: initLinks,
        page: initPage,
        marketing: initMarketingGuidelines,
        file: initFile,
        bannerlinks: initBannerLinks,
        bannerhtml: initBannerHtml,
        email: initEmail,
        text: initText,
    }
    
    $(window).on('hashchange', function(e) {
        
        let url = new URL( this.location.href );
        
        let [action_hash, action_id] = url.hash.split('-');
        
        let action = action_hash.replace('#', '');
        
        $('.page-container').hide();
        $('#nav-helper').show();
        $('.navbar-nav').removeClass('d-none');
        
        redirect[action](action_id);
        parameters.updateFields();
    });
    
    $('#email-html-copy').on('click', function(e) {
        let copier = $(this);
        
        copier.popover('show');
        navigator.clipboard.writeText($('#email-html').text());
        setTimeout(function() {
            copier.popover("hide");
        }, 750);
    });
    
    $('#c1').on('keyup', function(e) {
       parameters.c1 = $(this).val();
    });
    $('#c2').on('keyup', function(e) {
       parameters.c2 = $(this).val();
    });
    $('#c3').on('keyup', function(e) {
       parameters.c3 = $(this).val();
    });
    $('#numbers').on('change', function(e) {
        parameters.number = $(this).val();
    })
    
    $('#reset').on('click', function(e) {
        $('#c1, #c2, #c3').val('').trigger('keyup');
    });
}

function initCampaignSelects() {

    let options = [];
    
    options.push($('<option disabled selected="true">Select a Campaign</option>'));
    campaigns.campaigns.forEach(function(campaign) {
        options.push($('<option value="' + campaign.id + '">' + campaign.id + ' | ' + campaign.name + '</option>'));
    });
    
    $('#select-campaign-main, #select-campaign-secondary').empty();
    
    options.forEach(function(option) {
        $('#select-campaign-main, #select-campaign-secondary')
            .append(option.clone());
    });
    
    $('#select-campaign-main, #select-campaign-secondary').on('change', function(e) {
        campaigns.current_campaign = $(this).val();
        
        let select = ($(this).prop('id') == 'select-campaign-main') ? 'secondary' : 'main';
        
        $('#select-campaign-' + select).val($(this).val());
        
        window.location.hash = '#links';
        $(window).trigger('hashchange');
        
        if( campaigns.current.numbers ) {
            parameters.numbers = campaigns.current.numbers;
            parameters.number = campaigns.current.numbers[0];
        }
        
        updateCampaignNames();
        updateNavigationLinks();
    });
    
}

function initStart() {
    $('.page-container').hide();
    $('#nav-helper').hide();
    $('#start-page').show();
}

function initLinks() {
    $('#links-page').show();
    
    let links = [];
    
    campaigns.links.forEach(function(link) {
        let campaign_link = $($('#campaign-link').html());
            
        campaign_link.find('.link-name').text(link.name == 'Main Redirector' ? 'Landing Page Link' : link.name);
        campaign_link.find('a').first().attr('href', link.link).attr('data-original', link.link).text(link.link);
        
        links.push(campaign_link);
    });

    campaigns.numbers.forEach(function(number) {
        let campaign_link = $($('#campaign-link').html());

        campaign_link.find('.link-name').text('Number');
        campaign_link.find('a').first().attr('href', 'tel:' + number).text( number );

        links.push(campaign_link);
    });

    let optout_link = $($('#campaign-link').html());
    optout_link.find('.link-name').text('Optout Link');
    optout_link.find('a').first().attr('href', campaigns.current.optout).text(campaigns.current.optout);
    
    links.push(optout_link);
    
    $('#links-list').empty().append(links);
}

function initPage(id) {
    let page = pages.find(page => page.id == id);
    $('#information-content').html(page.content);
    $('#information-page').show();
}

function initFile(id) {
    let file = campaigns.file(id);
    $('#information-content').html(file.content);
    $('#information-page').show();
}

function initBannerLinks() {
    
    let tags = [];
    let links = [];
    
    campaigns.banners.forEach(function(banner) {
        let tag = $($('#banner-image-tag').html());
        let link = $($('#banner-image-tag').html());
        
        tag.find('code').text(banner.link.image)
        link.find('code').attr('data-original', banner.link.anchor).text(banner.link.anchor)
        
        tags.push(tag);
        links.push(link);
    });
    
    $('#banner-image-tags').find('tbody').empty().append(tags);
    $('#banner-image-links').find('tbody').empty().append(links);
    
    $('#banner-links-page').show();
}

function initBannerHtml() {
    
    let banners = [];
    
    campaigns.banners.forEach(function(banner) {
        let html = $($('#banner-html').html());
        html.find('source').prop('src', $(banner.link.image).prop('src'));
        html.find('code').attr('data-original', banner.link.anchor).text(banner.link.anchor)
        html.find('img').prop('src', 'assets/banners/' + banner.campaign_id + '/' + banner.id + '.' + banner.extension);
        html.find('img').on( 'error', function() {
            $(this).attr( 'src', 'assets/images/blank.png' );
        });
        html.find('.image-description').text(banner.description)
        html.find('.image-width').text(banner.image.width)
        html.find('.image-height').text(banner.image.height)
        
        banners.push(html);
    });
    
    $('#banner-html-list').empty().append(banners);
    
    $('#banner-html-page').show();
}

function initMarketingGuidelines() {
    $('#email-guidelines-page').show();
}

function initEmail(id) {
    let email = campaigns.email(id);
    
    $('#email-html').attr('data-original', email.body).text(email.body)

    $('#email-subjects').text(email.subjects.filter(Boolean).join("\r\n"));
    $('#email-from-lines').text(email.from_lines.filter(Boolean).join("\r\n"));
    
    $('#email-preview').prop('href', email.preview_path);
    
    if( email.images ) {
        $('#email-download-images').prop('href', email.image_path);
        $('#email-download-images').show()
    } else {
        $('#email-download-images').prop('href', '');
        $('#email-download-images').hide();
    }
    
    $('#email-page').show();
}

function initText(id) {
    let text = campaigns.text(id);
    
    $('#text-display').html(text.text);
    $('#text-html').find('code').text(text.text);
    
    $('#text-page').show();
}

function updateNavigationLinks() {
    
    let menu = {
        pages: {
            container: $('#page-menu'),
            list: $('#page-menu-list'),
        },
        banners: {
            container: $('#banner-menu'),
            list: $('#banner-menu-list'),
        },
        emails: {
            container: $('#email-menu'),
            list: $('#email-menu-list'),
        },
        texts: {
            container: $('#text-menu'),
            list: $('#text-menu-list'),
        }
    }
    
    menu.pages.list.empty();
    pages.forEach(function(page) {
        menu.pages.list.append($('<a href="#page-' + page.id + '" class="dropdown-item">' + page.name + '</a>'));
    });
    
    campaigns.current.files.forEach(function(file) {
        menu.pages.list.append($('<a href="#file-' + file.id + '" class="dropdown-item">' + file.name + '</a>'))
    })
    
    menu.emails.list.empty();
    menu.emails.list.append($('<a href="#marketing" class="dropdown-item">Email Marketing Guidlines</a>'))
    campaigns.emails.forEach(function(email) {
        menu.emails.list.append($('<a href="#email-' + email.id + '" class="dropdown-item">' + email.description + '</a>'));
    });
    
    menu.texts.list.empty();
    campaigns.texts.forEach(function(text) {
        menu.texts.list.append($('<a href="#text-' + text.id + '" class="dropdown-item">' + text.description + '</a>'));
    });
    
    (campaigns.banners.length == 0 ) ? menu.banners.container.hide() : menu.banners.container.show();
    (campaigns.emails.length == 0 ) ? menu.emails.container.hide() : menu.emails.container.show();
    (campaigns.texts.length == 0 ) ? menu.texts.container.hide() : menu.texts.container.show();
    
}

function updateCampaignNames() {
    $('.campaign-name').text(campaigns.campaign_name)
}