/**
 * Created by Owen Gannon (https://github.com/gannono2) for The Irish Times on 11/02/2016.
 *
 * This plugin is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
 * http://creativecommons.org/licenses/by-sa/4.0/
 */

(function($){

    var templateRoot = "/cstatic/static/general-election/templates/";
    var jsonEndpoint = "/cstatic/static/general-election/json/issue-tracker.json";

    var partyLookup = [
        {name: "Anti-Austerity Alliance-People Before Profit", code: "AAA"},
        {name: "Fianna Fáil", code: "FF"},
        {name: "Fine Gael", code: "FG"},
        {name: "Green Party", code: "GP"},
        {name: "Labour", code: "LP"},
        {name: "Renua Ireland", code: "RI"},
        {name: "Sinn Féin", code: "SF"},
        {name: "Social Democrats", code: "SD"}
    ];

    var data = {};

    $.fn.extend({

        initIssueTracker: function(callback){

            var ts = new Date().getTime();
            $.getJSON(jsonEndpoint + "?ts=" + ts, function(json){

                if(json['Skeleton template'] !== undefined){
                    delete json['Skeleton template'];
                }

                // Restructure the data for the templates...
                var parties = [];
                var issues = [];
                var intros = [];

                // Get the list of parties
                var keys = Object.keys(json);
                for(var i = 0; i < keys.length; i++){

                    // Separate out the party and issue introductions
                    if(keys[i] === "Party Intros") {
                        intros["parties"] = json[keys[i]];
                        continue;
                    }

                    if(keys[i] === "Issue Intros"){
                        continue;
                    }

                    // Separate out the parties
                    var partyName = keys[i];
                    var partyPoints = [];
                    for(var j = 0; j < json[partyName].length; j++){
                        partyPoints[json[partyName][j]["issue"]] = json[partyName][j];
                    }

                    var party = {};
                    party.points = partyPoints;

                    for(var k = 0; k < partyLookup.length; k++){
                        if(partyName === partyLookup[k].name){
                            party.name = partyName;
                            party.code = partyLookup[k].code;
                        }
                    }

                    parties.push(party);
                }

                // Separate out the issues
                for(var x = 0; x < keys.length; x++){
                    if(keys[x] === "Issue Intros"){
                        var list = json[keys[x]];
                        for(var y = 0; y < list.length; y++){
                            var issue = list[y];
                            issues.push({
                                name: issue.issue,
                                shortlink: issue.issueShortlink,
                                summary: issue.issueSummary,
                                normalisedName: $.fn.camelCase(issue.issue)
                            });
                        }
                    }
                }

                // Sort alphabetically (no party bias)
                parties.sort(function(a, b){
                    if(a.name < b.name) return -1;
                    if(a.name > b.name) return 1;
                    return 0;
                });

                data = {
                    parties: parties,
                    issues: issues,
                    intros: intros
                };

                return callback();

            }).fail(function(){ return { err: true }; });

        },

        showAllIssues: function(){
            var $this = $(this);
            var html = new EJS({url: templateRoot + 'issue-tracker-all-issues.ejs'}).render({data: data});
            $this.fadeOut(200, function(){
                document.getElementById("nav-issues").scrollIntoView();
                $this.empty().append(html).fadeIn(200);
            });
        },

        showAllParties: function(){
            var $this = $(this);
            var html = new EJS({url: templateRoot + 'issue-tracker-all-parties.ejs'}).render({data: data});
            $this.fadeOut(200, function(){
                document.getElementById("nav-issues").scrollIntoView();
                $this.empty().append(html).fadeIn(200);
            });
        },

        showIssue: function(issue){
            var $this = $(this);
            var html = new EJS({url: templateRoot + 'issue-tracker-issue.ejs'}).render({data: data, issue: issue});
            $this.fadeOut(200, function(){
                document.getElementById("nav-issues").scrollIntoView();
                $this.empty().append(html).fadeIn(200);
            });
        },

        showParty: function(party){
            var $this = $(this);
            var html = new EJS({url: templateRoot + 'issue-tracker-party.ejs'}).render({data: data, party: party});
            $this.fadeOut(200, function(){
                document.getElementById("nav-issues").scrollIntoView();
                $this.empty().append(html).fadeIn(200, function(){
                    // Hiding the panel content. If JS is inactive, content will be displayed
                    $( '.panel-content' ).hide();
                    // Preparing the DOM
                    // -- Update the markup of accordion container
                    $( '.accordion' ).attr({
                        role: 'tablist',
                        multiselectable: 'true'
                    });
                    // -- Adding ID, aria-labelled-by, role and aria-labelledby attributes to panel content
                    $( '.panel-content' ).attr( 'id', function( IDcount ) {
                        return 'panel-' + IDcount;
                    });
                    $( '.panel-content' ).attr( 'aria-labelledby', function( IDcount ) {
                        return 'control-panel-' + IDcount;
                    });
                    $( '.panel-content' ).attr( 'aria-hidden' , 'true' );
                    // ---- Only for accordion, add role tabpanel
                    $( '.accordion .panel-content' ).attr( 'role' , 'tabpanel' );
                    // -- Wrapping panel title content with a <a href="">
                    $( '.panel-title' ).each(function(i){
                        // ---- Need to identify the target, easy it's the immediate brother
                        $target = $(this).next( '.panel-content' )[0].id;
                        // ---- Creating the link with aria and link it to the panel content
                        $link = $( '<a>', {
                            'href': '#' + $target,
                            'aria-expanded': 'false',
                            'aria-controls': $target,
                            'id' : 'control-' + $target
                        });
                        // ---- Output the link
                        $(this).wrapInner($link);
                    });
                    // Optional : include an icon. Better in JS because without JS it have non-sense.
                    $( '.panel-title a' ).append('<i class="fa fa-angle-down ge-icon ge-icon--collapse"></i>');
                    // Now we can play with it
                    $( '.panel-title a' ).click(function() {
                        if ($(this).attr( 'aria-expanded' ) == 'false'){ //If aria expanded is false then it's not opened and we want it opened !
                            // -- Only for accordion effect (2 options) : comment or uncomment the one you want
                            // ---- Option 1 : close only opened panel in the same accordion
                            //      search through the current Accordion container for opened panel and close it, remove class and change aria expanded value
                            $(this).parents( '.accordion' ).find( '[aria-expanded=true]' ).attr( 'aria-expanded' , false ).removeClass( 'active' ).parent().next( '.panel-content' ).slideUp(200).attr( 'aria-hidden' , 'true');
                            // Option 2 : close all opened panels in all accordion container
                            //$('.accordion .panel-title > a').attr('aria-expanded', false).removeClass('active').parent().next('.panel-content').slideUp(200);
                            // Finally we open the panel, set class active for styling purpose on a and aria-expanded to "true"
                            $(this).attr( 'aria-expanded' , true ).addClass( 'active' ).parent().next( '.panel-content' ).slideDown(200).attr( 'aria-hidden' , 'false');
                        } else { // The current panel is opened and we want to close it
                            $(this).attr( 'aria-expanded' , false ).removeClass( 'active' ).parent().next( '.panel-content' ).slideUp(200).attr( 'aria-hidden' , 'true');;
                        }

                        return false;
                    });
                });
            });
        },

        camelCase: function(str){
            return str
                .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
                .replace(/\s|\//g, '')
                .replace(/^(.)/, function($1) { return $1.toLowerCase(); });
        }

    });

})(jQuery);