// ### Part of the [Rosy Framework](http://github.com/ff0000/rosy)
/* home.js */

// ## Local Namespace

// Home Page class

// Site-specifc namespace
var RuneScape = RuneScape || {};

// Page namespace
RuneScape.Module = RuneScape.Module || {};

// Home specific instance
RuneScape.Module.ItemDetailGraph = (function () {

 // Extends RuneScape.Page
 return RuneScape.Module.Graph.extend({

  vars : {
   threshold : 10, // changed to percent from fixed - Rob
   currentRange : 30,
   maxColumns : 13,
   width : 350,
   height : 165
  },

  setupGraph : function () {
   this.setupVisualizer();
   this.setupTabs();
   this.setupEvents();
  },

  setupVisualizer : function () {
   this.vars.table.visualize({
    width : this.vars.width,
    height : this.vars.height,
    type : "area",
    lineWeight : 2,
    lineBullets : true,
    // yLabelInterval : 1,
    xLabelInterval : 1,
    appendTitle : false,
    colors : ["#d27e23", "#15d7f3"],
    areaColors : ["#977b44", "#449790"],
    topValue : $.proxy(this.findTopValue, this),
    bottomValue : $.proxy(this.findBottomValue, this)
   });

   // Hide table
   this.vars.table.hide();
  },

  setupTabs : function () {
   var parent = $('<ol><li><a  class="Button Button29 active" data-range="30"><span><span><span class=""><b>30</b></span></span></span></a></li><li><a  class="Button Button29" data-range="90"><span><span><span class=""><b>90</b></span></span></span></a></li><li><a  class="Button Button29" data-range="180"><span><span><span class=""><b>180</b></span></span></span></a></li></ol>').addClass("graph-tabs");

   this.vars.graph.prepend(parent);
   this.vars.tabs = parent.find("[data-range]");

  },

  setupEvents : function () {
   var el;

   this.vars.tabs.bind("click", $.proxy(function (e) {
    el = $(e.currentTarget);

    if (el.hasClass("active")) {
     return;
    }

    this.vars.tabs.removeClass("active");
    el.addClass("active");

    this.resetVisualizer(el.data("range"));
   }, this));
  },

  createTable : function (json) {
   this.vars.json = json;

   var table = $('<table></table>'),
    thead = $('<thead><tr><td></td></tr></thead>').appendTo(table),
    tbody = $('<tbody></tbody>').appendTo(table);

   $.extend(this.vars, {
    table : table,
    thead : thead,
    tbody : tbody
   });

   this.resetRange(this.vars.currentRange);
   this.vars.graph.append(table);

   this.setupGraph();
  },

  prettyPrintDate : function (epoch) {
   
   
   
   
   
   
   
   
   
   
   
   
   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    date, day, month;

   date = new Date(epoch * 1);
   day = ("0" + date.getDate()).slice(-2);
   month = months[date.getMonth()];

   return [day, month].join(" - ");
  },

  getKeys : function (obj){
   var keys = [];
   for(var i in obj){
    if(obj.hasOwnProperty(i)){
     keys.push(i);
    }
   }
   return keys;
  },

  resetRange : function (range) {
   this.vars.currentRange = range;

   var json = this.vars.json,
    tbody = this.vars.tbody.empty(),
    daily = $('<tr><th scope="row">Daily Average</th></tr>').appendTo(tbody),
    
    
     average = $('<tr><th scope="row">' + range + '-day Average</th></tr>').appendTo(tbody),
    
    thTarget = this.vars.thead.find("tr").html('<td></td>'),
    key, x = 0, i = 0, j = 0, dailyLength = 0, dailyInterval = 1, th;

   var dailyKeys = this.getKeys(json.daily);
   dailyLength = Math.min(range, dailyKeys.length);

   if (dailyLength > this.vars.maxColumns) {
    dailyInterval = Math.round(dailyLength / this.vars.maxColumns);
   }

   for (var i = dailyKeys.length - dailyLength; i < dailyKeys.length; i++){
    if ((dailyLength - i) % dailyInterval === 0) {
     th = $('<th scope="col"></th>').appendTo(thTarget);

     if ((j % 2) === 0) {
      th.text(this.prettyPrintDate(dailyKeys[i]));
     }

     daily.append('<td>' + json.daily[dailyKeys[i]] + '</td>');
     average.append('<td>' + (json.average[dailyKeys[i]] || "") + '</td>');

     j++;
    }
   }

   this.vars.datas = this.vars.table.find("tbody td");
  },

  resetVisualizer : function (range) {
   this.resetRange(range);

   this.vars.table.siblings(".visualize").remove();
   this.setupVisualizer();
  },

  findTopValue : function () {
   var k, l, max = 0,
    datas = this.vars.datas,
    threshold = this.vars.threshold;

   for (k = 0, l = datas.length; k < l; k++) {
    if(datas[k].firstChild){
     max = Math.max(max, parseFloat(datas[k].firstChild.nodeValue));
    }
   }

   max *= 1 + threshold / 100;
   max = Math.ceil(max);

   return max;
  },

  findBottomValue : function () {
   var k, l,
    datas = this.vars.datas,
    threshold = this.vars.threshold,
    min = parseFloat(datas[0].firstChild.nodeValue)
   ;

   for (k = 0, l = datas.length; k < l; k++) {
    if(datas[k].firstChild){
     min = Math.min(min, parseFloat(datas[k].firstChild.nodeValue));
    }
   }

   min *= 1 - threshold / 100;
   min = (min > 0 ? Math.floor(min) : 0);

   return min;
  }

 });
}.call(RuneScape));