/**
 * Chart Options
 */
var chartOptions = {
  
  /**
   * Area Chart
   */
  "areaChart": {
    "chart": {
      "type": "areaspline",
      "backgroundColor": null
    },
    "plotOptions": {
      "areaspline": {
        "colorByPoint": false,
        "marker": {
          "enabled": false,
          "symbol": "circle"
        }
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "title": {
      "text": null
    },
    "xAxis": {
      "labels": {
        "rotation": -90,
        "align": "right"
      },
    },
    "yAxis": {
      "title": {"text": null},
      "allowDecimals": false,
      "labels": {
        "formatter": function() {
          return this.value;
        }
      }
    },
  },

  /**
   * Bar Chart
   */
  "barChart": {
    "chart": {
      "type": "bar",
      "backgroundColor": null
    },
    "plotOptions": {
      "bar": {
        "colorByPoint": false,
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": false
    },
    "title": {
      "text": null
    },
    "xAxis": {
    },
    "yAxis": {
      "title": {"text": null},
      "allowDecimals": false,
      "labels": {
        "formatter": function() {
          return this.value;
        }
      }
    },
  },

  /**
   * Column Chart
   */
  "columnChart": {
    "chart": {
      "type": "column",
      "backgroundColor": null
    },
    "plotOptions": {
      "column": {
        "colorByPoint": false,
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "title": {
      "text": null
    },
    "xAxis": {
      "labels": {
        "rotation": -90,
        "align": "right"
      },
    },
    "yAxis": {
      "title": {"text": null},
      "allowDecimals": false,
      "labels": {
        "formatter": function() {
          return this.value;
        }
      }
    },
  },

  /**
   * Fever Chart
   */
  "feverChart": {
    "chart": {
      "type": "column",
      "alignTicks": false
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": false
    },
    "title": {
      "text": null,
      "margin": 30
    },
    "xAxis": {
      "labels": {
        "rotation": -90,
        "align": "right"
      },
    },
    "yAxis": [{
      "title": {"text": "Platz"},
      "reversed": true,
      "showFirstLabel": true,
      "allowDecimals": false,
      "startOnTick": false,
      "endOnTick": false,
      "tickInterval": 5,
      "minorTickInterval": 1,
      "min": 0.9
    },{
      "gridLineWidth": 0,
      "startOnTick": false,
      "endOnTick": false,
      "min": 1,
      "title": {"text": null},
      "labels": {
        "enabled": false
      }
    }],
    "series": [{
      "index": 1,
      "name": "Gesamtplatzierung",
      "type": "spline",
      "yAxis": 0,
      "lineWidth": 2, 
      "marker": {
        "enabled": false
      }
    },
    {
      "index": 0,
      "name": "Spieltagsplatzierung",
      "type": "column",
      "yAxis": 1,
      "color": "#BCDDE5",
    }],
    "tooltip": {
      "formatter": function() {
        if (this.points[1] != undefined) {
          var dayRank = ((this.points[0] != undefined) && (this.points[0].y != null)) ? Math.floor(this.points[1].series.yAxis.max - this.points[0].y + 1) : "-";
          var overallRank = ((this.points[1] != undefined) && (this.points[1].y != null)) ? this.points[1].y : "-";        
        } else {
          var dayRank = "-";
          var overallRank = ((this.points[0] != undefined) && (this.points[0].y != null)) ? this.points[0].y : "-";                
        }
        
        var s = '<span style="font-size:10px;">'+ this.x +'</span><br/>' +
          '<span style="color:#BCDDE5;">Spieltagsplatzierung: <b>'+ dayRank +'</b></span><br/>' +
          '<span style="color:#2f7ed8;">Gesamtplatzierung: <b>'+ overallRank +'</b></span>';
        
        return s;
      },
      "shared": true
    }
  },

  /**
   * Fever Date Chart
   */
  "feverDateChart": {
    "chart": {
      "type": "spline",
      "backgroundColor": null
    },
    "plotOptions": {
      "spline": {
        "colorByPoint": false,
        "marker": {
          "enabled": false,
          "symbol": "circle"
        }
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": false
    },
    "title": {
      "text": ""
    },
    "xAxis": {
      "type": "datetime",
      "labels": {
        "rotation": -90,
        "align": "right"
      }
    },
    "yAxis": {
      "title": {"text": "Platz"},
      "showFirstLabel": true,
      "allowDecimals": false,
      "startOnTick": false,
      "endOnTick": false,
      "reversed": true,
      "min": 0.1,
      "tickInterval": 5,
      "minorTickInterval": 1
    },
  },

  /**
   * Line Chart
   */
  "lineChart": {
    "chart": {
      "type": "spline",
      "backgroundColor": null
    },
    "plotOptions": {
      "spline": {
        "colorByPoint": false,
        "marker": {
          "enabled": false,
          "symbol": "circle"
        }
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "title": {
      "text": null
    },
    "xAxis": {
      "labels": {
        "rotation": -90,
        "align": "right"
      }
    },
    "yAxis": {
      "title": {"text": null},
      "allowDecimals": false,
      "min": 0,
      "labels": {
        "formatter": function() {
          return this.value;
        }
      }
    },
  },

  /**
   * Pie Chart
   */
  "pieChart": {
    "chart": {
      "type": "pie",
      "height": 300,
      "backgroundColor": null
    },
    "plotOptions": {
      "pie": {
        "size": "70%",
        "dataLabels": {
          "distance": -1,
          "formatter": function() {
            return (this.y != 0) ? '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %' : null;
          }
        }
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "title": {
      "text": null
    },
  },

  /**
   * Rank Chart
   */
  "rankChart": {
    "chart": {
      "type": "spline",
      "backgroundColor": null
    },
    "plotOptions": {
      "spline": {
        "colorByPoint": false,
        "marker": {
          "enabled": false,
          "symbol": "circle"
        }
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "title": {
      "text": null
    },
    "xAxis": {
      "labels": {
        "rotation": -90,
        "align": "right"
      }
    },
    "yAxis": {
      "title": {"text": "Platz"},
      "showFirstLabel": true,
      "allowDecimals": false,
      "startOnTick": false,
      "endOnTick": false,
      "reversed": true,
      "min": 0.1,
      "tickInterval": 5,
      "minorTickInterval": 1
    },
  },

  /**
   * Stacked Area Chart
   */
  "stackedAreaChart": {
    "chart": {
      "type": "area",
      "backgroundColor": null
    },
    "plotOptions": {
      "area": {
        "stacking": "normal",
        "marker": {
          "enabled": false,
          "symbol": "circle"
        }
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "title": {
      "text": null
    },
    "xAxis": {
      "labels": {
        "rotation": -90,
        "align": "right"
      }
    },
    "yAxis": {
      "title": {"text": null},
      "allowDecimals": false,
      "labels": {
        "formatter": function() {
          return this.value;
        }
      }
    },
    "tooltip": {
      "formatter": function() {
        var s = '<span style="font-size:10px;">'+ this.x +'</span><br/>' +
          '<span style="color:' + this.series.color + '">' + this.series.name + ': <b>'+ this.y +'</b></span><br/>' +
          '<span>Gesamt: <b>'+ this.point.stackTotal +'</b></span>';
        
        return s;
      },
      "shared": false
    }
  },

  /**
   * Stacked Column Chart
   */
  "stackedColumnChart": {
    "chart": {
      "type": "column",
      "backgroundColor": null
    },
    "plotOptions": {
      "column": {
        "stacking": "normal"
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "title": {
      "text": null
    },
    "xAxis": {
      "labels": {
        "rotation": -90,
        "align": "right"
      }
    },
    "yAxis": {
      "title": {"text": null},
      "allowDecimals": false,
      "labels": {
        "formatter": function() {
          return this.value;
        }
      }
    },
    "tooltip": {
      "formatter": function() {
        var s = '<span style="font-size:10px;">'+ this.x +'</span><br/>' +
          '<span style="color:' + this.series.color + '">' + this.series.name + ': <b>'+ this.y +'</b></span><br/>' +
          '<span>Gesamt: <b>'+ this.point.stackTotal +'</b></span>';
        
        return s;
      },
      "shared": false
    }
  },

};

/**
 * Loads a chart and displays it inside the given container. 
 * 
 * @param {String} container
 * @param {String} name
 * @param {String} type
 * @param {Object} opt
 */
function loadChart(container, name, type, opt) {
  showSpinner($(container).parent(), "small");
  opt.name = name;
  opt.type = type;
  
  $.ajax({
    type: "POST",
    cache: false,
    dataType: "json",
    url: "/tippspiel/stats/load",
    data: opt,
    success: function(data) {
      var options = chartOptions[data.type];
      
      if (data.series) {options.series = data.series;}
      if (data.title) {options.title = data.title;}
      if (data.colors) {options.colors = data.colors;}
      if (data.categories) {options.xAxis.categories = data.categories;}
      if (data.yAxisTitle) {options.yAxis.title.text = data.yAxisTitle;}
      if (data.allowDecimals) {options.yAxis.allowDecimals = true;}
      if (data.colorByPoint) {options.plotOptions[options.chart.type].colorByPoint = 1;}
      if (data.stacking) {options.plotOptions[options.chart.type].stacking = data.stacking;}
      if (data.max) {options.yAxis.max = data.max;}
      if (data.height) {options.chart.height = data.height;}
      if (opt.height) {options.chart.height = opt.height;}
      
      if (data.overallSeries) {options.series[0].data = data.overallSeries;}
      if (data.daySeries) {options.series[1].data = data.daySeries;}
      if (data.feverMax) {
        options.yAxis[0].max = data.feverMax;
        options.yAxis[1].max = data.feverMax + 0.1;
      }
      
      if (data.seriesDates) {
        for (i = 0; i < data.seriesDates.length; i++) {
          var dates = data.seriesDates[i];
          var seriesData = Array();
          
          for (j = 0; j < dates.length; j++) {
            var d = Array(Date.UTC(dates[j].year, dates[j].month, dates[j].day), dates[j].value);
            seriesData.push(d);
          }
          
          options.series[i].data = seriesData;
        }
        
      }
      
      $(container).highcharts(options);
    },
    complete: function() {
      hideSpinner($(container).parent());
    }
  });
  
}