/*
    SECC Agency Listings and Details Decoupled Ajax Client
    Data is fed from restful API endpoint from within a legacy Classic ASP site: www.utmb.edu/secc-pledge
    HTML Markup: <section id="seccAgenciesContent"></section>
    Author (API and Ajax Client): Mike Cooper <mgcooper@utmb.edu>
    Last update: 9/26/2018
*/



(function ($) {

    // HTML endcoding and decoding - string replace for safety
    // see: -https://stackoverflow.com/questions/1219860/html-encoding-lost-when-attribute-read-from-input-field/7124052#7124052
    function htmlEscape(str) {
        return str
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    // I needed the opposite function today, so adding here too:
    function htmlUnescape(str) {
        return str
            .replace(/&quot;/g, '"')
            .replace(/&#39;/g, "'")
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>')
            .replace(/&amp;/g, '&')
            .replace(/&#8217;/g, "'");
    }

    // All Agencies
    function loadAllAgencies() {

        var $content = $('#seccAgenciesContent');
        $content.find("header").remove();
        $content.find("ul").remove();

        var list = $('<ul class="all-agencies"></ul>');
        $.getJSON('/secc-pledge/api/agencies/default.asp', function (data) {
            $.each(data, function (key, val) {
                var groupCode = val['GroupCode'];
                var federation = val['Federation'];
                var link = $('<a>',
                    {
                        id: groupCode,
                        text: htmlUnescape(federation),
                        href: '/secc-pledge/api/agencies/listings?id=' + groupCode
                    });
                var li = $('<li id="item_' + groupCode + '"></li>').append(link);
                list.append(li);
            });

            // header
            var header = $('<header></header>');
            var headline = $('<h2></h2>').append('All Agency Listings ' + '<span class="subtitle">Local and statewide participating agencies</span>');
            var instructions = $('<p></p>').append('Click on the categories below to see lists of the participating agencies and information about them.');
            header.append(headline);
            header.append(instructions);

            $content.append(header);
            $content.append(list);
        });
    }

    // Agency Listings
    function loadAgencyListings(currentGroupCode, currentAgencyName) {

        var $content = $('#seccAgenciesContent');
        $content.find("header").remove();
        $content.find("ul").remove();

        var list = $('<ul class="agency-listings"></ul>');
        $.getJSON('/secc-pledge/api/agencies/listings/?id=' + currentGroupCode, function (data) {
            $.each(data, function (key, val) {

                var fiscalYear = val['FiscalYear'];
                var groupCode = val['GroupCode'];
                var charityCode = val['CharityCode'];
                var charityName = val['CharityName'];
                var website = val['Website'];
                var overheadHundreths = val['OverheadHundreths'];
                var statement = val['Statement'];

                // item (article) container
                var item = $('<article>',
                    {
                        id: charityCode
                    });

                // Title
                var titleTxt = '<span class="charity-code">' + charityCode + '</span> ' + charityName;
                var title = $('<h3></h3>').append('<i></i>').append(titleTxt);
                item.append(title);

                // Website link
                var link = $('<a>',
                    {
                        text: website,
                        href: 'http://' + website,
                        target: '_blank'
                    });
                item.append(link);

                // Descript and Overhundreths
                var details = ' ' + statement + ' - ' + overheadHundreths + '%';
                item.append(details);

                var li = $('<li></li>').append(item);
                list.append(li);
            });

            // header
            var header = $('<header></header>');
            var headline = $('<h2></h2>').append('Listings by Agency ' + '<span class="subtitle">Currently viewing: ' + currentAgencyName + '</span>');
            //var instructions = $('<p></p>').append('Click on the categories below to see lists of the participating agencies and information about them.');
            header.append(headline);
            //header.append(instructions);

            // back to agencies link
            var backBtn = $('<div class="back-btn-container clearfix"></div>');
            var backLink = $('<a>',
                {
                    class: 'btn btn-success back-to-agencies',
                    text: 'Back to Agency List',
                    href: '/secc-pledge/api/agencies/'
                });
            backBtn.append(backLink);

            $content.append(header);
            $content.append(backBtn);
            $content.append(list);
        });
    }


    // Agency Click (Get Listings)
    $(document.body).on('click', 'ul.all-agencies li a', function (event) {
        event.preventDefault();
        console.log('You clicked: ' + $(this).text());
        loadAgencyListings($(this).attr('id'), $(this).text());
    });


    // Agency Click
    $(document.body).on('click', '.back-to-agencies', function (event) {
        event.preventDefault();

        console.log('You clicked: ' + $(this).text());
        loadAllAgencies();
        $('.back-btn-container').remove();
    });


    // Do it when ready...
    $(document).ready(function () {
        loadAllAgencies();
    });


})(jQuery);