if (google != undefined && google.load != undefined) {
  google.load("visualization", "1", { packages: ["corechart"] });
}

var FlowChart = (function () {
  var drawChart = function (jsonResult) {
    if (settings.useFakes) {
      $("#flow-chart").html("<img src='/images/fakes/flow-chart.png' />");
      return;
    }
    
    var data = new google.visualization.DataTable();

    data.addColumn('string', '');
    data.addColumn('number', 'Cfs');

    for (var i = 0; i < jsonResult.Data.Items.length; i++) {
      data.addRow(['', jsonResult.Data.Items[i].Cfs]);
    }

    var options = {
      width: 381, height: 200,
      title: jsonResult.Data.Gauge.SiteName
    };

    var chart = new google.visualization.LineChart(document.getElementById('flow-chart'));
    chart.draw(data, options);
  };

  var clear = function () {
    $("#flow-header").html("");
    $("#flow-dates").html("");
    $("#flow-chart").html("");
  };

  var handleError = function (jsonResult) {
    clear();
    if (jsonResult.ErrorMessage.MessageGeneral != undefined)
      $("#flow-chart").html("<p class='error'>" + jsonResult.ErrorMessage.MessageGeneral + "</p>");
    if (jsonResult.ErrorMessage.MessageSpecific != undefined)
      $("#flow-chart").append("<p class='error'>" + jsonResult.ErrorMessage.MessageSpecific + "</p>");
  };

  var writeFooter = function (jsonResult) {
    var dates = [];
    var lastDateTime;
    for (var i = 0; i < jsonResult.Data.Items.length; i++) {
      var date = new Date(parseInt(jsonResult.Data.Items[i].DateTime.replace("/Date(", "").replace(")/", "")));
      var dateString = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear().toString().substr(2, 2);
      if (dates.length == 0 || dateString != dates[dates.length - 1]) {
        dates.push(dateString);
      }
      if (i == jsonResult.Data.Items.length - 1)
        lastDateTime = date;
    }
    var html = "";
    var width;
    var basicWidth = 248 / dates.length;
    var lastWidth = basicWidth * (lastDateTime.getHours() / 24);
    var standardWidth = (248 - lastWidth) / (dates.length - 1);

    for (var j = 0; j < dates.length; j++) {
      width = standardWidth;
      if (j == dates.length - 1)
        width = lastWidth;
      html += "<li style='width: " + width + "px'>" + dates[j] + "</li>";
    }
    $("#flow-dates").html("<ul>" + html + "</ul>");
  };

  var writeHeader = function (jsonResult) {
    $("#flow-header").html("<h3>" + Resources.Flow_HeaderMessage + "</h3>" +
      "<a href='javascript:void(0);' class='legal set-marker' latitude='" + jsonResult.Data.Gauge.Latitude + "' longitude='" +
      jsonResult.Data.Gauge.Longitude +
      "' markerType='MarkerType.StreamGauge'>" + Resources.Global_MarkStation + "</a>");
  };

  return {
    render: function (jsonResult) {
      $("#flow-default-message").hide();
      if (jsonResult.Data == undefined) {
        handleError(jsonResult);
      }
      else {
        writeHeader(jsonResult);
        drawChart(jsonResult);
        writeFooter(jsonResult);
      }
    },
    clear: function () {
      clear();
    }
  };
})();

var TideChart = (function () {
  var drawChart = function (jsonResult) {
    if (settings.useFakes) {
      $("#tide-chart").html("<img src='/images/fakes/tide-chart.png' />");
      return;
    }

    var data = new google.visualization.DataTable();

    data.addColumn('string', '');
    data.addColumn('number', 'Height');

    for (var i = 0; i < jsonResult.ChartData.length; i++) {
      data.addRow(['', jsonResult.ChartData[i]]);
    }

    var options = {
      width: 381, height: 140,
      title: jsonResult.Station.StationName
    };

    var chart = new google.visualization.LineChart(document.getElementById('tide-chart'));
    chart.draw(data, options);
  };

  var writeHeader = function (jsonResult) {
    $("#tide-header").html("<h3>" + Resources.Tides_OutlookMessage + "</h3>" +
      "<a href='javascript:void(0);' class='legal set-marker' latitude='" + jsonResult.Station.Latitude + "' longitude='" +
      (jsonResult.Station.Longitude < 180 ? (-1 * jsonResult.Station.Longitude) : jsonResult.Station.Longitude) +
      "' markerType='MarkerType.TideGauge'>" + Resources.Global_MarkStation + "</a>");
  };

  var writeFooter = function (jsonResult) {
    var dates = [];
    for (var i = 0; i < jsonResult.Predictions.length; i++) {
      var date = new Date(parseInt(jsonResult.Predictions[i].PredictionDateTime.replace("/Date(", "").replace(")/", "")));
      var dateString = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
      if (dates.length == 0 || dateString != dates[dates.length - 1]) {
        dates.push(dateString);
      }
    }
    var html = "";
    for (var j = 1; j < 4; j++) {
      html += "<li>" + dates[j] + "</li>";
    }
    $("#tide-dates").html("<ul>" + html + "</ul>");
  };

  var clear = function () {
    $("#tide-header").html("");
    $("#tide-dates").html("");
    $("#tide-chart").html("");
  };

  var handleError = function (jsonResult) {
    clear();
    if (jsonResult.MessageGeneral != undefined)
      $("#tide-chart").html("<p class='error'>" + jsonResult.MessageGeneral + "</p>");
    if (jsonResult.MessageSpecific != undefined)
      $("#tide-chart").append("<p class='error'>" + jsonResult.MessageSpecific + "</p>");
  };

  var render = function (jsonResult) {
    $("#tide-default-message").hide();
    if (jsonResult.ChartData == undefined) {
      handleError(jsonResult);
    }
    else {
      writeHeader(jsonResult);
      drawChart(jsonResult);
      writeFooter(jsonResult);
    }
  };

  return {
    render: render,
    clear: clear
  };
})();