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

    var color = ['#fd2928','#fff601','#70d82d','#51d3ed'];
    var urls = ['no-of-attacks.xml', 'no-of-attacks-per-type.xml'];

    $.ajaxSetup({
        type: "GET",
        url: urls[0],
        dataType: "xml",
        success: function(xml) {
            var time = new Array();
            var names = new Array();
            var serie = new Array();

            $(xml).find('seriesNames').children().each(function() {
                names.push($(this).text());
            });

            for (i=0;i<names.length;i++) {
                serie[i] = new Array();
            }

            $(xml).find('seriesValues').each(function() {
                time.push(($(this).attr('time').substring(8,10)+'/'+$(this).attr('time').substring(5,7)));
                var i = 0;
                $(this).children().each(function(){
                    serie[i++].push(parseFloat($(this).text()));
                });
                    
            });

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'lisa_container',
                    defaultSeriesType: 'line',
                    backgroundColor: '#221c1c',
                    borderWidth: 0,
                    borderRadius: 0,
                    spacingTop: 10,
                    spacingRight: 2,
                    spacingBottom: 5,
                    spacingLeft: 1,
                    margin: [10, 5, 60, 38],
                },
                title: {
                    text: '',
                },
                xAxis: {
                    categories: time,
                    tickmarkPlacement: 'on',
                    labels: {
                        step: 4,
                        rotation: 0,
                        style: {
                            color: '#ffffff',
                            fontSize: '10px'
                        },
                        y: 20
                    }
                },
                yAxis: {
                    min: 0,
                    labels: {
                        style: {
                            color: '#ffffff',
                            fontSize: '10px'
                        },
                        x: -10,
                        y: 4
                    },
                    lineColor: '#ffffff',
                    lineWidth: 1,
                    gridLineColor: '#130f0e',
                    alternateGridColor: '#2d2425',
                    tickColor: '#ffffff',
                    tickWidth: 1,
                    minorTickInterval: 'auto',
                    minorTickColor: '#ffffff',
                    minorTickWidth: 1,
                    minorGridLineWidth: 0,
                    title: {
                        text: ''
                    }
                },
                legend: {
                    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 + '<br/>'+ 
                                'Antal: ' + this.y.toFixed(2) + ' (medelvärde)<br/>'+ 
                                'Datum: ' + this.x +'';
                    }
                },
                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
                                }
                            }
                        }
                    }
                },
                credits: {
                    enabled: false
                }
            });

            for(i=0;i<names.length;i++) {
                chart.addSeries({name: names[i], data: serie[i], color: color[i]});
            }
        },
        error: function(){ 
            $('#lisa_container').text('Grafen kunde inte laddas. Försök igen senare.');
        }
    });
    
    $("select").change(function () {
        var choice = parseInt($("select option:selected").val());
        $.ajax({url: urls[choice]});
    }).change();

});