package au.com.uptick.smartgwtviz.client;

import com.allen_sauer.gwt.log.client.Log;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.visualizations.corechart.PieChart;
import com.google.gwt.visualization.client.visualizations.corechart.PieChart.PieOptions;
import com.smartgwt.client.widgets.HTMLFlow;
import com.smartgwt.client.widgets.layout.VLayout;

public class ContextArea extends VLayout {
  
  private static final String CONTEXT_AREA_WIDTH = "*";
  private static String html = "<div id=\"chart_nested_div\" style=\"position: absolute; z-index: 1000000\"> </div>\n"; 

  private HTMLFlow htmlFlow; 

  private PieChart pie;
	
  public ContextArea() {
    super();
    
    Log.debug("init Context Area()...");

    this.setWidth(CONTEXT_AREA_WIDTH);
    this.setBackgroundColor("#EEEEEE");
    
    htmlFlow = new HTMLFlow(html); 
    this.addMember(htmlFlow);    

    loadVisualizationApi();       
  }	
  
  public void loadVisualizationApi() {
    
    Log.debug("loadVisualizationApi()");
    
    // Create a callback to be called when the visualization API has been loaded.
    Runnable onLoadCallback = new Runnable() {
      public void run() {
        
        Log.debug("onLoadCallback()");

        // pie = new PieChart(createTable(), createOptions());
        // RootPanel.get("chart_sibling_div").add(pie);
        // RootPanel.get("chart_nested_div").add(pie);
        
        drawChart();
      }
    };

    // Load the visualization api, passing the onLoadCallback to be called when loading is complete.
    VisualizationUtils.loadVisualizationApi("1.1", onLoadCallback, PieChart.PACKAGE);
  }  
  
  private native void drawChart() /*-{
  
    // Create our data table.
    var dataTable = new $wnd.google.visualization.DataTable();
    
    dataTable.addColumn('string', 'Task');
    dataTable.addColumn('number', 'Hours per Day');
    dataTable.addRows(5);
    dataTable.setValue(0, 0, "Work");
    dataTable.setValue(0, 1, 11);
    dataTable.setValue(1, 0, "Eat");
    dataTable.setValue(1, 1, 2);
    dataTable.setValue(2, 0, "Commute");
    dataTable.setValue(2, 1, 2);
    dataTable.setValue(3, 0, "Watch TV");
    dataTable.setValue(3, 1, 2);
    dataTable.setValue(4, 0, "Sleep");
    dataTable.setValue(4, 1, 7);
    
    // Instantiate and draw our chart, passing in some options.
    // var chart = new $wnd.google.visualization.PieChart($doc.getElementById('chart_sibling_div'));
    var chart = new $wnd.google.visualization.PieChart($doc.getElementById('chart_nested_div'));
    chart.draw(dataTable, {width: 400, height: 240});

  }-*/;  
  
  private AbstractDataTable createTable() {
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Task");
    data.addColumn(ColumnType.NUMBER, "Hours per Day");
    data.addRows(5);
    data.setValue(0, 0, "Work");
    data.setValue(0, 1, 11);
    data.setValue(1, 0, "Eat");
    data.setValue(1, 1, 2);
    data.setValue(2, 0, "Commute");
    data.setValue(2, 1, 2);
    data.setValue(3, 0, "Watch TV");
    data.setValue(3, 1, 2);
    data.setValue(4, 0, "Sleep");
    data.setValue(4, 1, 7);
    return data;
  }
  
  private PieOptions createOptions() {
    PieOptions options = PieChart.createPieOptions();
    options.setWidth(400);
    options.setHeight(240);
    options.set3D(true);
    options.setTitle("My Daily Activities");
    return options;
  }
}
