var TableToCharts = new Class({ Implements: Options, 
  
  // Some Default Options
  options: {
    colors: ['304b5e', '012640', '3d7097', '7fbff0', '67798f', '254f88'],
    typeOfChart: 'donut3D',
    width: 464,
    height: 310
  },
  
  /**
   * Initializes the Object and sets some default options
   *
   * @param {Object} options
   */
  initialize: function(options) {
    var that = this;
    
    this.setOptions(options);
    var chartData = this.extractDataFromTable();
    var xml = this.buildXMLCode(chartData);
    
    // now we can delete the table and insert a div at that position
    var count = 0;
    $$('.fusionchart').each(function(table) {
      var divID = 'fusionChart_' + count;
      
      var chartDiv = new Element('div', { 'id': divID, 'text': 'JAHA!' });
      chartDiv.inject(table, 'after');      
      
      table.destroy();
      
      // and then render it
      // TODO switchcase which swf to use
      var chart = new FusionCharts("/FusionCharts/Doughnut3D.swf", "ChartId", that.options.width, that.options.height, "0", "0");
      chart.setDataXML(xml);		   
      chart.render(divID);
      
      count++;
    });
    
    
    
  },
  
  
  /**
   *
   *
   */
  extractDataFromTable: function() {
    // data looks like this: <set value='243' label='USA' color='A53838' isSliced='1' />
    
    var that = this;
    var data = '';
    var colors = that.options.colors;
    
    // extract data from the table
    $$('.fusionchart tr').each(function(tr) {
      var tds = tr.getChildren();
      var value = tds[0].get('text').clean();
      var label = tds[1].get('text').clean();
      var color = tds[2].get('text').clean();
      var active = tds[3].get('text').clean();
      
      if (color == '') { 
        color = colors.getRandom(); 
        colors.erase(color);
      }
            
      data += "<set value='" + value + "' label='" + label + "' color='" + color + "' " ;
      if (active != '') {
        data += " isSliced='1' ";
      }
      data += ' />';
      
    });
        
    return data;
  },
  
  
  buildXMLCode: function(chartData) {
    var that = this;
//    var title = $$('.fusionchart th')[0].get('text');
    
    // TODO more chart-types
    if (that.options.typeOfChart == 'donut3D') {
      data = "<chart bgColor='E4EAEF' caption='' bgAlpha='100' bgAngle='45' pieYScale='70' " 
           + "startingAngle='175' borderThickness='0' smartLineColor='4e4e4e' smartLineThickness='1' numberSuffix='%25'>";
    }
    

    data += chartData;
    data += "<styles><definition><style name='CaptionFont' type='FONT' face='Arial' size='11' color='4e4e4e' bold='1' />"
          + "<style name='LabelFont' type='FONT' color='4e4e4e' bold='1' /></definition>"
          + "<application><apply toObject='DATALABELS' styles='LabelFont' /><apply toObject='CAPTION' styles='CaptionFont' />"
          + "</application></styles></chart>";

    return data;
  }


});






window.addEvent('domready', function() {  
  
  if ($$('.fusionchart').length > 0) {
    
    var ttc = new TableToCharts({'height': 240});
  }
  
});