(function() {
    'use strict';

    // config references
    var visConfig = {
        target : 'vis',
        legendTarget : 'legend',
        updateVars : {}
    };
    // var to use for a toggle
    var fade;

    // data for legend
    visConfig.legendData = [
            {   
                author: 'Guru Nanak',
                colour: 'FDBB30', // #FDBB30
                type: 'gurus'
            },
            {   
                author: 'Guru Angad',
                colour: '7AC143', // #A4CD39
                type: 'gurus'
            },
            {   
                author: 'Guru Amar Das',
                colour: 'EC008C', // #EC008C
                type: 'gurus'
            },
            {   
                author: 'Guru Ram Das',
                colour: 'EE3124', // #EE3124
                type: 'gurus'
            },
            {
                author: 'Guru Arjun Dev',
                colour: '00B0DD', // #00B0DD
                type: 'gurus'
            },
            {   
                author: 'Guru Tegh Bahadur',
                colour: 'A4CD39', // #7AC143
                type: 'gurus'
            },
            // {   
            //     author: 'Guru Gobind Singh',
            //     colour: '17479E', // #17479E
            //     type: 'gurus'
            // },
            {   
                author: 'Bhagat',
                colour: 'F47521', // #F47521
                type: 'gurus'
            },
            {   
                author: 'Bhatt',
                colour: '17479E', // #17479E
                type: 'gurus'
            },
            {   
                author: 'Sikhs',
                colour: '0066B3', // #0066B3
                type: 'gurus'
            }
        ];

    var data;

    var colour = d3.scale.ordinal()
        .domain(visConfig.legendData.map(function(d) { return d.author; }))
        .range(visConfig.legendData.map(function(d) { return d.colour; }));


    d3.json('sggs_angs.json', function(error, json) {

        if (error) return console.warn(error);
        data = json;

        // console.log(data);
        // render chart
        bars(data);
        legend();
    });


    function bars(d) {

        var w = 800, // width
            h = 400, // height
            barHeight = 44;

        var svg = d3.select('#' + visConfig.target)
            .append('svg');

        var g = svg.selectAll('g')
            .data(data)
            .enter()
            .append('g')
            .attr({
            transform: function (d, i) {
                var n = 143, // rowLength
                    n2 = n*2,
                    n3 = n*3,
                    n4 = n*4,
                    n5 = n*5,
                    n6 = n*6,
                    n7 = n*7,
                    n8 = n*8,
                    n9 = n*9,
                    n10 = n*10,
                    gap = 7, 
                    p = 7; // padding

                if (i < n) {
                    return 'translate(' + (i*gap + p) + ',0)';
                } else if (i >= n && i < n2) {
                    return 'translate(' + ((i-n)*gap + p) + ',50)';
                } else if (i >= n2 && i < n3) {
                    return 'translate(' + ((i-n2)*gap + p) + ',100)';
                } else if (i >= n3 && i < n4) {
                    return 'translate(' + ((i-n3)*gap + p) + ',150)';
                } else if (i >= n4 && i < n5) {
                    return 'translate(' + ((i-n4)*gap + p) + ',200)';
                } else if (i >= n5 && i < n6) {
                    return 'translate(' + ((i-n5)*gap + p) + ',250)';
                } else if (i >= n6 && i < n7) {
                    return 'translate(' + ((i-n6)*gap + p) + ',300)';
                } else if (i >= n7 && i < n8) {
                    return 'translate(' + ((i-n7)*gap + p) + ',350)';
                } else if (i >= n8 && i < n9) {
                    return 'translate(' + ((i-n8)*gap + p) + ',400)';
                } else if (i >= n9 && i < n10) {
                    return 'translate(' + ((i-n9)*gap + p) + ',450)';
                } else {
                    return 'translate(' + ((i-n10)*gap + p) + ',500)';
                }
            },
            class: function (d,i) { return 'ref-' + i; }
        });

        g.selectAll('line')
            .data(function(d) { return d.author; })
            .enter()
            .append('line')
            .attr({
                // x1: function(d,i,j) { 
                //     return j *10 +10; 
                // },
                y1: function(d,i, j) {
                    
                    if(data[j].author.length === 1) return barHeight;

                    else if(data[j].author.length === 2 && i === 0) return barHeight;
                    else if(data[j].author.length === 2 && i === 1) return barHeight/2;

                    else if(data[j].author.length === 3 && i === 0) return barHeight;
                    else if(data[j].author.length === 3 && i === 1) return barHeight/3 * 2;
                    else if(data[j].author.length === 3 && i === 2) return barHeight/3;

                    else if(data[j].author.length === 4 && i === 0) return barHeight;
                    else if(data[j].author.length === 4 && i === 1) return barHeight/4 * 3;
                    else if(data[j].author.length === 4 && i === 2) return barHeight/4 * 2;
                    else if(data[j].author.length === 4 && i === 3) return barHeight/4;
                },
                // x2: function(d,i,j) { return j *10 +10; },
                x1: 0,
                // y1: 0,
                x2: 0,
                y2: function(d,i,j) {
                    
                    if(data[j].author.length === 1) return 0;

                    else if(data[j].author.length === 2 && i === 0) return barHeight/2;
                    else if(data[j].author.length === 2 && i === 1) return 0;

                    else if(data[j].author.length === 3 && i === 0) return barHeight/3 * 2;
                    else if(data[j].author.length === 3 && i === 1) return barHeight/3;
                    else if(data[j].author.length === 3 && i === 2) return 0;

                    else if(data[j].author.length === 4 && i === 0) return barHeight/4 * 3;
                    else if(data[j].author.length === 4 && i === 1) return barHeight/4 * 2;
                    else if(data[j].author.length === 4 && i === 2) return barHeight/4;
                    else if(data[j].author.length === 4 && i === 3) return 0;
                },
                id: function(d,i,j) { return 'ref-' + (j+1) + '-' + (i+1) ; },
                class: function(d) { 
                    return 'bar col-' + colour(d); // create a colour author
                }
            })
            .style({
                'stroke-width': 3,
                stroke: function(d,i) { 
                    return '#' + colour(d); // create a colour author
                }
            })
            .on('mouseover', function(d,i,j) {
                    // console.log(data[j].name);
                    d3.select('#info').text(data[j].author[i] + ' | ang ' + data[j].ang);
            });
    }


    
    function legend() {

        var legendSvg = d3.select('#' + visConfig.legendTarget)
            .append('svg');
            
        var r = 7, 
            opacity = 0.1;

        var circles = legendSvg.selectAll('circle')
            .data( visConfig.legendData )
            .enter()
            .append('circle')
            .attr({
                r: r,
                cy: 26,
                cx: function (d, i) {
                    return 10 + (i*40) + r;
                },
                fill: 'transparent',
                'stroke-width': 2,
                stroke: function(d) {
                    return '#' + d.colour;
                },
                id: function (d, i) { return 'bt-' + i; }
            })
            .on('mouseover', function(d) {
                d3.select('#info').text('Filter: ' + d.author);
            })
            .on('click', function(d) {
                fade = !fade;
                // fade the pressed legend
                d3.selectAll('circle').style('opacity', 1);
                d3.select(this).style('opacity', opacity);
                // fade out all but the selected
                d3.selectAll('.bar').style('opacity', opacity);
                d3.selectAll('.col-' + colour(d.author)).style('opacity', 1);

                if (fade) {
                    d3.select(this).style('opacity', opacity);
                    d3.selectAll('.col-' + colour(d.author)).style('opacity', 1);
                } else {
                    d3.select(this).style('opacity', 1);
                    d3.selectAll('.bar').style('opacity', 1);
                }

            });
    } 

})();