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

    var time = new Array();
    var possible_attacks = new Array();
    var malicious_attacks = new Array();
    var malware_offered = new Array();
    var malware_downloaded = new Array();

    $.ajax({
        type: "GET",
        url: "firstpage.xml",
        dataType: "xml",
        success: function(xml){
            $(xml).find('result').each(function(){
                time.push($(this).attr('time').substring(8,10)+'/'+$(this).attr('time').substring(5,7));
                possible_attacks.push(parseFloat($(this).find('possible-malicious-attack').text()));
                malicious_attacks.push(parseFloat($(this).find('malicious-attack').text()));
                malware_offered.push(parseFloat($(this).find('malware-offered').text()));
                malware_downloaded.push(parseFloat($(this).find('malware-downloaded').text()));
            });
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'hp_container',
                    defaultSeriesType: 'column',
                    backgroundColor: '#221c1c',
                    borderWidth: 0,
                    borderRadius: 0,
                    spacingTop: 10,

                    spacingRight: 2,
                    spacingBottom: 5,
                    spacingLeft: 1,
                    margin: [10, 5, 60, 38],
		        },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: time,
                    labels: {
                        style: {
                        color: '#ffffff',
                        fontSize: '10px'
                        }
                    }
                },
                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'
                    },
                    itemWidth: 150,
			        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.y +'';
                    }
                },
                plotOptions: {
                    series: {
                       pointPadding: 0,
                       pointWidth: 20,
                       groupPadding: 0.35,
                       borderWidth: 0, 
                       shadow: true
                    }
                },
                credits: {
                    enabled: false
                },
                series: [
                { name: 'Möjliga attacker', data: possible_attacks, color: '#70d82d' },
                { name: 'Attacker', data: malicious_attacks, color: '#fff601' }, 
                { name: 'Skadlig kod erbjuden', data: malware_offered, color: '#51d3ed' },  
                { name: 'Skadlig kod nerladdad', data: malware_downloaded, color: '#fd2928' }
                ]
            });
        },
        error: function(){ 
            $('#hp_container').text('Grafen kunde inte laddas. Försök igen senare.');                            
        }
    });

});