//===========Object Diagram====================================================
function Diagram() {
  this.yvalues_source = '.average_value';
  this.xvalues_source = '.average_month';
  this.diagram_table_source = '#average_diagram';
  this.values = new Array();
  this.dates = new Array();
  this.arsort = new Array();
  this.diagram_name_source = '#average_digram_name';
  this.diagram_name = '';
  this.diagram_container = 'diagram';
}
//-----------------------------------------------------------------------------
Diagram.prototype.getData = function() {
  var values = $(this.yvalues_source);
  var dates = $(this.xvalues_source);

  //prepare format of correct date string for xaxis
  for(var i = 0; i < values.length; i++) {
    this.dates[i] = dates[i].innerHTML + '-10';
  }
    
  //prepare array od data that will be passed to diagram builder
  var j = 0;
  for(i = 0; i < values.length; i++) {
    this.values[i] = new Array();
    this.values[i][0] = this.dates[i];
    this.values[i][1] = parseFloat(values[i].innerHTML);
    if(!isNaN(this.values[i][1])){
        this.arsort[j] = this.values[i][1];
        j++;
    }
  }
  this.arsort = this.arsort.sort();
  this.axmin =this.arsort[0];
  this.axmax =this.arsort[this.arsort.length-1];
  
  var r;
  if(Math.abs(this.axmax - this.axmin)>0.05){
    this.axmin = null; 
    this.axmax = null;
  }
  else {
    r = Math.abs(this.axmax);  
    this.axmin -= r*0.2; 
    this.axmax += r*0.2; 
  }
  
  if(this.values.length > 0){
    var datadif = false;
    var data0 = this.values[0][0];
    for(i = 0;i<this.values.length; i++) {
        if((data0 != this.values[i][0])){
            datadif = true;
            break;
        }
    }
   
    if (!datadif){
        var d = new Date(this.values[0][0]);
        var s = new Date(this.values[0][0]);
        d.setMonth(d.getMonth() - 2);
        s.setMonth(s.getMonth() + 2);
        this.axmin1 =d.getFullYear() + '-' + (d.getMonth() +1)+ '-' + 10;
        this.axmax1 =s.getFullYear() + '-' + (s.getMonth() +1)+ '-' + 10;
    }
    else{
        this.axmin1 =null;
        this.axmax1 =null; 
    }
  }
  
  this.diagram_name = $(this.diagram_name_source).text();
}
//-----------------------------------------------------------------------------
Diagram.prototype.clearTable = function() {
  $(this.diagram_table_source).hide();
}
//-----------------------------------------------------------------------------
Diagram.prototype.buildDiagram = function() {
  $.jqplot(this.diagram_container,  [this.values],
            {title: this.diagram_name,
              axesDefults: {                   
                tickOptions: {
                  formatString: '%.2f'
                }
              },
              cursor : {
                show: true,
                showTooltip: true  
              },
              highlighter: {
                show: true,
                showMarker: true,
                showTooltip: true,
                tooltipLocation: 'n',
                tooltipOffset: 2,
                tooltipAxes: 'xy',
                yvalues: 1,
                formatString: '<div style="text-align:center;">%s<br>%.2f%%</div>'
              },
              axes: {
                xaxis: {
                  min: this.axmin1,
                  max: this.axmax1,
                  renderer:$.jqplot.DateAxisRenderer,
                  tickOptions:{formatString:'%b-%Y'}
                },
                yaxis: {
                  min: this.axmin,
                  max: this.axmax,
                  autoscale: false,
                  tickOptions: {formatString: '%.2f'}
                }             
              }
            }
          );
}

//======================================================================

var diagram = new Diagram();

$(document).ready(function(){
    $('#diagram').show();
    diagram.getData();
    diagram.clearTable();
    diagram.buildDiagram();
});