// http://amcharts.com/docs/v.1/bundle/settings/line_area


Ext.namespace("Ext.cgss");

Ext.cgss.json_to_xml = function(obj){
  txt = "";
  for (a in obj){
    if (Ext.isObject(obj[a])){
      txt += String.format("<{0}>{1}</{0}>", a, Ext.cgss.json_to_xml(obj[a]));
    } else {
      txt += String.format("<{0}>{1}</{0}>", a, obj[a]);
    }
  }
  return txt;
};

Ext.cgss.LineChart = Ext.extend(Ext.Panel, {
  
  chart_render: this.chart_render,
  
  constructor: function ( config ){
    //*
    var id = config.id || "panel_chart_line_" + Ext.id();
    var div_id = "div_" + id;
    
    get_source = function ( config ) {
    
    	if ( !Ext.isDefined( config.store.data ) ){
    		return { data: "", settings: "" };
    	}
      var graficos = [];
      var settings = [];
      var series = []; // Este es el campo que se utilizaria para el eje x
      var titulo_series = [];
      var store = [];
      //valido todo
      if(config.graphs!=null){
        graficos = config.graphs;
      }
      if(config.settings!=null){
        settings = config.settings;
       }
      if(config.series!=null){
        series = config.series; // Este es el campo que se utilizaria para el eje x
      }
      if(config.legend_series!=null){
        titulo_series = config.legend_series;
      }
      if(config.store!=null){
        store = config.store;
      }
      
      var arr_series = [];
      
      var arr_graphs = {};
      
      var txt_cabecera_grafico = "";
      
      // json_to_xml(settings);
      
      Ext.each(graficos, function(el, i){
        txt_cabecera_grafico = "";
        arr_graphs[el.field] = [];  
        //realizo las validaciones para que funcione en ie
        if ( typeof(el.title)=='object' && el.title!=null ){
          txt_cabecera_grafico += String.format( "title='{0}' ", el.title );
        }
        if ( typeof(el.color)=='object' && el.color!=null){
          txt_cabecera_grafico += String.format( "color='{0}' ", el.color );
        }
        if (typeof(el.axis)=='object' && el.axis!=null ){
          txt_cabecera_grafico += String.format( "axis='{0}' ", el.axis );
        }
        if (typeof(el.color_hover)=='object' && el.color_hover!=null ){
          txt_cabecera_grafico += String.format( "color_hover='{0}' ", el.color_hover );
        }
        if (typeof(el.line_alpha)=='object' && el.line_alpha!=null ){
          txt_cabecera_grafico += String.format( "line_alpha='{0}' ", el.line_alpha );
         }
        if (typeof(el.line_width)=='object' && el.line_width!=null ){
          txt_cabecera_grafico += String.format( "line_width='{0}' ", el.line_width );
         }
        if (typeof(el.fill_alpha)=='object' && el.fill_alpha!=null ){
          txt_cabecera_grafico += String.format( "fill_alpha='{0}' ", el.fill_alpha );
         }
        if (typeof(el.fill_color)=='object' && el.fill_color!=null ){
          txt_cabecera_grafico += String.format( "fill_color='{0}' ", el.fill_color );
          }
        if (typeof(el.balloon_color)=='object' && el.balloon_color!=null ){
          txt_cabecera_grafico += String.format( "balloon_color='{0}' ", el.balloon_color );
          }
        if (typeof(el.ballonon_alpha)=='object' && el.balloon_alpha!=null ){
          txt_cabecera_grafico += String.format( "balloon_alpha='{0}' ", el.balloon_alpha );
        }
        if (typeof(el.balloon_text_color)=='object' && el.balloon_text_color!=null ){
          txt_cabecera_grafico += String.format( "balloon_text_color='{0}' ", el.balloon_text_color );
          }
        if (typeof(el.bulllet)=='object' && el.bullet!=null ){
          txt_cabecera_grafico += String.format( "bullet='{0}' ", el.bullet );
        }
        if (typeof(el.bullet_size)=='object' && el.bullet_size!=null ){
          txt_cabecera_grafico += String.format( "bullet_size='{0}' ", el.bullet_size );
        }
        if (typeof(el.bullet_color)=='object' && el.bullet_color!=null){
          txt_cabecera_grafico += String.format( "bullet_color='{0}' ", el.bullet_color ); 
        } 
        if (typeof(el.bullet_alpha)=='object' && el.bullet_alpha!=null ){
          txt_cabecera_grafico += String.format( "bullet_alpha='{0}' ", el.bullet_alpha );
        }
        if (typeof(el.hidden)=='object' && el.hidden!=null ){
          txt_cabecera_grafico += String.format( "hidden='{0}' ", el.hidden );
        }
        if (typeof(el.selected)=='object' && el.selected!=null){
          txt_cabecera_grafico += String.format( "selected='{0}' ", el.selected );
        }
        if (typeof(el.balloon_text)=='object' && el.balloon_text!=null ){
          txt_cabecera_grafico += String.format( "balloon_text='{0}' ", el.balloon_text );
        }
        if (typeof(el.color)=='object' && el.data_labels!=null ){
          txt_cabecera_grafico += String.format( "data_labels='{0}' ", el.data_labels );
        }
        if (typeof(el.data_labels_text_color)=='object' && el.data_labels_text_color!=null ){
          txt_cabecera_grafico += String.format( "data_labels_text_color='{0}' ", el.data_labels_text_color );
        }
        if (typeof(el.data_labels_text_size)=='object' && el.data_labels_text_size!=null ){
          txt_cabecera_grafico += String.format( "data_labels_text_size='{0}' ", el.data_labels_text_size );
        }
        if (typeof(el.data_labels_position)=='object' && el.data_labels_position!=null ){
          txt_cabecera_grafico += String.format( "data_labels_position='{0}' ", el.data_labels_position );
        }
        if (typeof(el.vertical_lines)=='object' && el.vertical_lines!=null ){
          txt_cabecera_grafico += String.format( "vertical_lines='{0}' ", el.vertical_lines );
        }
        if (typeof(el.visible_in_legend)=='object' && el.visible_in_legend!=null ){
          txt_cabecera_grafico += String.format( "visible_in_legend='{0}' ", el.visible_in_legend );
        }
        if (typeof(el.unit)=='object' && el.unit!=null ){
          txt_cabecera_grafico += String.format( "unit='{0}' ", el.unit );  
        }
        
        arr_graphs[el.field].push( String.format( "<graph gid='{0}' {1}>", i+1, txt_cabecera_grafico ) );  
        
      });
      
      var datos = [];
      if(store.data!=null){
          if ( Ext.isArray( store.data ) ) {
            datos = store.data;            
          }else{
            datos = store.data.items;
          }
       }
      
      Ext.each( datos, function ( el, i ) { 
        
        if (!Ext.isDefined( el.data )) {
          el.data = el;
        }
        
        arr_series.push(String.format("<value xid='{0}'>{1}</value>", i, el.data[series]));
        
        Ext.each(graficos, function(g_el, g_i){
          arr_graphs[g_el.field].push(
            String.format("<value xid='{0}'>{1}</value>", i, el.data[g_el.field])
          );    
        });
      } );
      
      
      Ext.each(graficos, function(el, i){          
        arr_graphs[el.field].push("</graph>");          
      });
      
      txt_series = "<series>" + arr_series.join("") + "</series>";
      
      
      var txt_graficos = "<graphs> ";
      
      Ext.each(graficos, function(el, i){
        txt_graficos += arr_graphs[el.field].join("");
      });
      
      txt_graficos += "</graphs> ";
      
      var txt_completo = txt_series + txt_graficos;
      
      txt_completo = "<chart>" + txt_completo + "</chart>";
      
      var txt_settings = "<settings>" + Ext.cgss.json_to_xml(settings) + "</settings>";
      
      
      return {
        data: txt_completo
        , settings: txt_settings
      };
      
    }; 
    
    
    chart_render = function ( config, donde ) {
      
      var txt_data = get_source( config );
      
      var path = config.path || "amchart/";
      
      this.chart_o = new SWFObject(path + "amline.swf",
                                   "amline_" + Ext.id(),
                                   "100%",
                                   "100%",
                                   "#FFFFFF"
                                  );
      
      this.chart_o.addVariable("path", path);
      
      this.chart_o.addVariable("chart_data", txt_data.data);
      
      this.chart_o.addVariable("chart_settings", txt_data.settings);
      
      this.chart_o.write(donde);
      
    };
    
    this.chart_render = chart_render;
      
    var id_btn_ampliar = "btn_ampliar_" + Ext.id();
    
    if(config.title==null){
        config.title="";
    }
    var ancho=600;
    var alto=400;
    
    if(config.window_height!=null && config.window_width!=null){
        ancho=config.window_width;
        alto=config.window_height;
    }
    
    var window_magnifier = new Ext.Window({
      html: String.format("<div id='{0}' style='height:100%; width: 100%'</div>", "window_" + div_id)
      , height: alto  
      , width: ancho
      , closeAction: "hide"
      , animateTarget: id_btn_ampliar
      , title: config.title
    });
    
    window_magnifier.on("show", function(){
      chart_render(config, "window_" + div_id);
    });
    
    window_magnifier.on("resize", function(){
      chart_render(config, "window_" + div_id);
    });
    
    this.window_magnifier = window_magnifier;
    
    
    var btn_ampliar = new Ext.Button({
      id: id_btn_ampliar,
      text: "Ampliar"//, 
      //icon: config.icon_btn_magnifie || "resources/images/magnifier.png"  
    });
    
    btn_ampliar.on("click", function(){
      window_magnifier.show();
    });
    
    this.btn_ampliar = btn_ampliar;
    
    var bbar = new Ext.Toolbar({
      items: [
        "->"
        , btn_ampliar
      ]  
    });
    
    var conf = {
      html: String.format("<div id='{0}' style='height:100%; width: 100%'></div>", div_id)
      , bbar: bbar
      , settings: {
        decimals_separator: "."
        , thousands_separator: ","
        , digits_after_decimal: 2
      }  
    }
        
    config = Ext.apply(conf, config || {});
    
    Ext.cgss.LineChart.superclass.constructor.call(this, config);
    
    config.store.on("load", function (str) {
    	chart_render( config, div_id );
    } );

    this.on("render", function(){
      setTimeout(function(){
        chart_render(config, div_id);
      },10);
    });
    
    this.on("afterrender", function(){
    });
    
    this.on("resize", function(){
      setTimeout(function(){
        chart_render(config, div_id);
      },10);
    }, this);
  }
  
});