var chart;
$(document).ready(function() {

    var color = ['#d7cf01', '#d79800','#fff601','#ffb400', '#51d3ed'];
    var urls = ['megatron-all-entries.xml', 'megatron-matched-entries.xml', 'megatron-processed-lines-sum.xml'];
    var suffix = [' filtrerat',' matchat',''];
    var chart_type = ['column','column','line'];
    
    var time = new Array();
    var names = new Array();
    var serie = new Array();

    function parseXML(xml) {

        names.push(new Array());
        serie.push(new Array());

        $(xml).find('seriesNames').children().each(function(){
            names[names.length-1].push($(this).text());
        });
        
        for (i=0;i<names[names.length-1].length;i++) {    
            serie[names.length-1].push(new Array());
        }

        $(xml).find('seriesValues').each(function(){
            if (names.length == 1) {
                time.push($(this).attr('time'));
            }
            var i = 0;
            $(this).children().each(function(){
                serie[names.length-1][i++].push(parseFloat($(this).text()));
            });
        });
    }

    function drawChart() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'malrec_container',
                defaultSeriesType: 'column',
                backgroundColor: '#221c1c',
                borderWidth: 0,
                borderRadius: 0,
                margin: [10, 60, 28, 50],
                alignTicks: false
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: time,
                labels: {
                    rotation: 0,
                    style: {
                        color: '#ffffff',
                        fontSize: '10px'
                    },
                }
            },
            yAxis: [
              {
                    min: 0,
                    labels: {
                        style: {
                            color: '#ffffff',
                            fontSize: '10px'
                        },
                    },
                    lineColor: '#ffffff',
                    lineWidth: 1,
                    gridLineColor: '#130f0e',
                    alternateGridColor: '#2d2425',
                    tickColor: '#ffffff',
                    tickWidth: 1,
                    minorTickInterval: 'auto',
                    minorTickColor: '#ffffff',
                    minorTickWidth: 1,
                    minorGridLineWidth: 0,
                    title: {
                        text: ''
                    }
              },
              {
                min: 0,
                labels: {
                    style: {
                        color: '#ffffff',
                        fontSize: '10px'
                    },
                },
                lineColor: '#51d3ed',
                lineWidth: 1,
                //gridLineColor: '#130f0e',
                gridLineWidth: 0,
                //alternateGridColor: '#2d2425',
                tickColor: '#ffffff',
                tickWidth: 1,
                minorTickInterval: 'auto',
                minorTickColor: '#ffffff',
                minorTickWidth: 1,
                minorGridLineWidth: 0,
                title: {
                    text: ''
                    },
                opposite: true
              }
            ],
            legend: {
                enabled: false,   
                style: {
                    bottom: '2px',
        			left: '3px',
                    padding: '2px'
                },
                itemStyle: {
                   color: '#d7d7d7',
                   fontSize: '10px'
                },
                backgroundColor: '#221c1c',
                reversed: false,
                borderWidth: 0,
                itemHoverStyle: {
                    color: '#ffffff'
                },
                itemHiddenStyle: {
                    color: '#6a6a6a'
                },
                symbolWidth: 10,
                symbolPadding: 10,
                x: -10,
                shadow: false
            },
            tooltip: {
                borderRadius: 1,
                borderWidth: 1,
                style: {
                    fontSize: '10px'
                },
                formatter: function() {
                    return this.series.name + ' ' + 
                            this.x + ' <br />' +
                            this.y;
                }
            },
            plotOptions: {
                series: {
                    //animation: false,   
                    shadow: true,
                    stickyTracking: false,
                    lineWidth: 3,
                    states: {
                        hover: {
                            enabled: true,
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: false,
                        //fillColor: '#221c1c',
                        lineWidth: 3,
                        lineColor: null,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                },
                column: {
                    pointPadding: 0,
                    pointWidth: 20,
                    groupPadding: 0.35,
                    borderWidth: 0, 
                    shadow: true
                }
            },
            series: (function() {
                    var data = [], i;
                    for (i=0;i<names.length;i++) {
                        for (j=0;j<names[i].length;j++) {
                            data.push({name: names[i][j] + suffix[i], data: serie[i][j], yAxis: (chart_type[i] == "line")?1:0 , type: chart_type[i], color: color[(names.length-1)*i+j]});
                        }
                    }

                    // Post filtering
                    
                    data.splice(2,1);
                    data.splice(4,1);

                    var tmp = data[1]; 
                    data[1] = data[2];
                    data[2] = tmp;    

                    return data;
                })(),
            credits: {
                enabled: false
            }
        });

    }
   
    $.ajaxSetup({
        async: false,
        type: "GET",
        dataType: "xml",
        error: function(){
            $('#malrec_container').text('Grafen kunde inte laddas. Försök igen senare.');
        }
    });

    // First parse XMLs, then draw

    $.ajax({
        url: urls[0],
        success: function(xml) {
            parseXML(xml);
        }
    });    

    $.ajax({
        url: urls[1],
        success: function(xml) {
            parseXML(xml);
        }
    });    

    $.ajax({
        url: urls[2],
        success: function(xml) {
            parseXML(xml);
            drawChart();
        }
    });
});