jQuery(document).ready(function(){
    jQuery.ajax({
        url      : '/wp-content/plugins/emustock/chart.php',
        type     : 'GET',
        dataType : 'text',
        contentType : 'application/xml',
        success  : function(data, status, response){
            var points = jQuery('point', data);
            var line = [];                   
            var wols = {};
            
            jQuery.each(points, function(i, item){
                var x = jQuery(item).attr('x');
                var y = jQuery(item).attr('y');
                
                var d = new Date(x).getTime();
                
                wols[d] = jQuery(item).find('attribute[name=wol]').eq(0).text();
                
                line.push([d,y]);
            });
            
            var data = [ { data: line } ];

             var options = {
                    series: {
                      lines: {
                        show: true 
                      },
                      points: { 
                        show: true
                      }, 
                    },
                    colors :   ['#b01016'],
                      
                    xaxis: {
                        mode: 'time',
                        timeformat : '%d.%m.%y'
                    },
                    grid: {
                        backgroundColor : { colors: ["#fff", "#eee"] },
                        borderColor     : '#bbb',
                        hoverable       : true
                    },
                  };

            var info = jQuery('#graphInfo');
            
            var oldDataPoint = [0,0];
            
            var highlight = function(series, datapoint, x, y){
                if(datapoint[0] != oldDataPoint[0] && datapoint[1] != oldDataPoint[1]){
                    var d = new Date(datapoint[0]);
                    var date = d.getDate() + '.' + (d.getMonth() + 1) + '.' + d.getFullYear();
                    
                    var content = '<p>Data: <strong>'+date+'</strong></p><p>Wartość: <strong>'+datapoint[1]+'</strong></p><p>Wolumen: <strong>'+wols[d.getTime()]+'</strong></p>'
                    
                    info.html(content).css({
                        left : x + 15,
                        top  : y + 15
                    });
                    info.show();
                    oldDataPoint = datapoint;
                }else{
                    info.css({
                        left : x + 15,
                        top  : y + 15
                    });
                }
            }
            
            jQuery.plot(jQuery('#graph'), data, options);
            
            jQuery("#graph").bind("plothover", function (event, pos, item) {
                if (item) {
                  highlight(item.series, item.datapoint, pos.pageX, pos.pageY);
                }
            }).bind('mouseleave', function(){
                info.hide();
            });
            
            

        }
    });
});