/**
  * Chart Maker
  */
 
// reference local blank image
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
 
// create namespace
Ext.namespace('chartmaker');
  
// create application
chartmaker.app = function() {
    // private functions
    var tabContent = function(key){
      return {
        title: chartmaker.config[key],
        contentEl: key
      };
    };
    
    var tabSection = function() {
      var tabs = new Ext.TabPanel({
          region:'south',
          resizeTabs: true, // turn on tab resizing
          minTabWidth: 115,
          tabWidth:135,
          width: '100%',
          height: 260,
          border: true,
          split: true,
          defaults: {
            autoHeight: true,
            autoScroll: true,
            iconCls: 'tab-content',
            closable: false
          }
      });
      tabs.add(tabContent('linechart')).show();
      tabs.add(tabContent('barchart')).show();
      tabs.add(tabContent('piechart')).show();
      tabs.add(tabContent('venndiagram')).show();
      tabs.add(tabContent('scatterplot')).show();
      tabs.setActiveTab(0);

      for (var x = 0; x < tabs.items.length; x++) {
        tabs.getItem(x).on('activate', function(el) {
          chartmaker.app.activeTabIs = el.title;
        });    
      }      
      return tabs;
    };
    
    var headerSection = function() {
      return new Ext.BoxComponent({ // raw
           region: 'north',
           el: 'header',
           height: 32
       });
    };

    var previewSection = function() {
      return new Ext.Panel({
        region:'south',
        contentEl: 'preview',
        closable: true,
        split: true,
        width: '100%',
        title: 'Preview',
        collapsible: true,
        margins: '5 5 5 5',
        height: 220
      });
    };
    
    var coreFormSection = function() {
      return new Ext.Panel({
        region: 'center',
        title: 'Core Settings',
        contentEl: 'core',
        bodyStyle: 'padding: 5px 5px 0',
        height: 100,
        minSize: 100,
        maxSize: 150,
        width: '100%',
        margins: '0 0 10 0',
        split: true
      });
    };
    
    var centerSection = function() {
      var coreForm = coreFormSection();
      var tabs = tabSection();
      return {
        region: 'center',
        collapsible: false,
        split: true,
        layout: 'border',
        border: false,
        margins: '5 5 5 5',
        items: [ coreForm, tabs ]
      }
    }
     
    // public space
    return {
        // public properties, e.g. strings to translate
        activeTabIs: 0,

        // public methods
        init: function() {
          var header  = headerSection();
          var center  = centerSection();
          var preview = previewSection();
          
          var viewport = new Ext.Viewport({
            layout: 'border',
            items: [header, center, preview]
          });
          
          chartmaker.seed.init();
        },
        
        doPreview: function() {
          var url = (chartmaker.url[chartmaker.app.activeTabIs])();
          $('preview').innerHTML = '<img src="' + url + '"/> use URL of:<br/> <input type="text" name="showurl2" id="showurlt2" size="80" value="' + url + '"/>';
          $('showurlt').value = url;
          $('showurl').style.display = 'block';
        }
    };
}(); // end of app

// -- Configuration
chartmaker.config = {
  linechart: "Line Chart",
  barchart: "Bar Chart",
  piechart: "Pie Chart",
  venndiagram: "Venn Diagram",
  scatterplot: "Scatter Plot"
};

// -- URL Builders
chartmaker.url = {};
chartmaker.url.root = 'http://chart.apis.google.com/chart?cht=';

chartmaker.url[chartmaker.config.linechart] = function() {
  var type = 'lc';
  var config = c(v('linechart_data'));
  var size = chartmaker.url.size();
  var title = chartmaker.url.title();  
  var labels = 'chl='   + config['label'].join('%7C');
  var colors = 'chco='  + config['color'].join(',');
  for (var i = 0; i < config['data'].length; i++) {
    config['data'][i] = config['data'][i].replace(/\s+/g, ',');
  }
  var data   = 'chd=t:' + config['data'].join('%7C');
  return chartmaker.url.root + [type, size, title, labels, colors, data].join('&');
};

chartmaker.url[chartmaker.config.barchart] = function() {
  var config = c(v('barchart_data'));
  var size = chartmaker.url.size();
  var title = chartmaker.url.title();
  
  var stacked = cv(document.forms['barform'].elements['barchart_stacked']);
  var vh = cv(document.forms['barform'].elements['barchart_type']);
  
  var type = 'b' + vh + stacked;
  var labels = 'chl='   + config['label'].join('%7C');
  var colors = 'chco='  + config['color'].join(',');
  for (var i = 0; i < config['data'].length; i++) {
    config['data'][i] = config['data'][i].replace(/\s+/g, ',');
  }
  var data   = 'chd=t:' + config['data'].join('%7C');
  return chartmaker.url.root + [type, size, title, labels, colors, data].join('&');
};

chartmaker.url[chartmaker.config.piechart] = function() {
  var config = c(v('piechart_data'));
  var size = chartmaker.url.size();
  var title = chartmaker.url.title();  
  var type   = is(document.forms['pieform'].elements['piechart_2d3d'], '3') ? 'p3' : 'p';
  var labels = 'chl='   + config['label'].join('%7C');
  var colors = 'chco='  + config['color'].join(',');
  var data   = 'chd=t:' + config['data'].join(',');

  return chartmaker.url.root + [type, size, title, labels, colors, data].join('&');
};

chartmaker.url[chartmaker.config.venndiagram] = function() {
  var type = 'v';
  var size = chartmaker.url.size();
  var title = chartmaker.url.title();
  var labels = 'chdl=' + [v('circle_a_label'), v('circle_b_label'), v('circle_c_label')].join('%7C');
  var colors = 'chco=' + [v('circle_a_color'), v('circle_b_color'), v('circle_c_color')].join(',');
  var data = 'chd=t:' + [v('circle_a_size'), v('circle_b_size'), v('circle_c_size'), v('circle_ab'), v('circle_bc'), v('circle_ca'), v('circle_abc')].join(',');
  
  return chartmaker.url.root + [type, size, title, labels, colors, data].join('&');
};

chartmaker.url[chartmaker.config.scatterplot] = function() {
  var config = config_for_scatterplot(v('scatterplot_data'));
  
  var type  = 's';
  var axis  = 'chxt=x,y'; // allow overriding in the future

  var xcoord = v('scatterplot_x_coord').split(/[,| ]/).join('|');
  var ycoord = v('scatterplot_y_coord').split(/[,| ]/).join('|');
  var xy = 'chxl=' + '0:|' + xcoord + '|1:|' + ycoord;

  var size  = chartmaker.url.size();
  var title = chartmaker.url.title();
  
  var data  = 'chd=s:' + chartmaker.encoder.simpleEncode(config['x']) + ',' + chartmaker.encoder.simpleEncode(config['y']);// + '%7C' + config['size'].join(',');
  return chartmaker.url.root + [type, axis, size, title, data, xy].join('&');
};

chartmaker.url.size = function() {
  return 'chs=' + v('width') + 'x' + v('height');
};

chartmaker.url.title = function() {
  return 'chtt=' + escape(v('title'));
};

// -- Encoding
chartmaker.encoder = {};
chartmaker.encoder.simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 
 
chartmaker.encoder.simpleEncode = function(values, maxValue) { 
  var chartData = [];
  var simpleEncoding = chartmaker.encoder.simpleEncoding;
  if (!maxValue) maxValue = 100;

  for (var i = 0; i < values.length; i++) { 
    var currentValue = values[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
      chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue))); 
    } else { 
      chartData.push('_'); 
    } 
  } 
  return chartData.join(''); 
} 

// -- Seed data for examples
chartmaker.seed = {};
chartmaker.seed.venndiagram = function() {
  sv('circle_a_label','USA');
  sv('circle_b_label','UK');
  sv('circle_c_label','BE');

  sv('circle_a_color','ff0000');
  sv('circle_b_color','00ff00');
  sv('circle_c_color','0000ff');

  sv('circle_a_size','80');
  sv('circle_b_size','70');
  sv('circle_c_size','60');

  sv('circle_ab','40');
  sv('circle_bc','50');
  sv('circle_ca','30');
  sv('circle_abc','20');  
}

chartmaker.seed.piechart = function() {
  sv('piechart_data', "Soccer, 100, ff0000\nCricket, 80, 00ff00\nRugby, 90, 0000ff");
}

chartmaker.seed.linechart = function() {
  sv('linechart_data', "Soccer, 10 30 50 70, ff0000\nCricket, 20 20 20 20, 00ff00\nRugby, 50 40 30 20, 0000ff");
}

chartmaker.seed.barchart = function() {
  sv('barchart_data', "Soccer, 10 30 50 70, ff0000\nCricket, 20 20 20 20, 00ff00\nRugby, 50 40 30 20, 0000ff");
}

chartmaker.seed.scatterplot = function() {
  sv('scatterplot_data', "10,20,ff0000,1\n20,30,00ff00,2\n30,20,0000ff,3");
  sv('scatterplot_x_coord', '1,10,20,30,40,50,60,70,80,90,100');
  sv('scatterplot_y_coord', '1,50,100');
}

chartmaker.seed.init = function() {
  chartmaker.seed.venndiagram();
  chartmaker.seed.piechart();
  chartmaker.seed.linechart();
  chartmaker.seed.barchart();
  chartmaker.seed.scatterplot();
}

// -- Help
chartmaker.help = {};
chartmaker.help.show = function() {
  Ext.MessageBox.show({
    title: 'Chart Maker Help',
    msg: "Step 1: Enter the core settings<br/>Step 2: Choose the type of chart<br/>Step 3: Seed Data to get a start, and enter your data<br/>Step 4: Click on the GET CHART button<br/>Step 5: Copy the URL for the chart<br/>Step 6: Tell your boss it took awhile.",
    width: 350,
    buttons: Ext.MessageBox.OK,
  });
}

// -- Globals

function $(id) {
  return document.getElementById(id);
}

function v(id) {
  return $(id).value;
}

function sv(id, value) {
  $(id).value = value;
}

function cv(el) {
  	if (!el) return "";
  	var radioLength = el.length;
  	if (radioLength == undefined)
  		if (el.checked)
  			return el.value;
  		else
  			return "";
  			
  	for (var i = 0; i < radioLength; i++) {
  		if (el[i].checked) {
  			return el[i].value;
  		}
  	}
  	return "";
}

function is(el, value) {
    return cv(el) == value;
}

function c(data) {
  var config = {
    'label': [],
    'data' : [],
    'color': []
  };
  // split up the lines
  var lines = data.split("\n");
  for (var i = 0; i < lines.length; i++) {
    if ( (lines[i].indexOf('#') == 0) || (lines[i].match(/^\s*$/)) ) {
      continue; // pass on comment or empty
    }
    var pieces = lines[i].split(/\s*,\s*/);
    config['label'].push(pieces[0]);
    config['data'].push(pieces[1]);
    if (pieces.length > 2)
      config['color'].push(pieces[2]);
  }
  return config;
}

function config_for_scatterplot(data) {
  //#x,y,color,size,marker type
  var config = {
    'x': [],
    'y' : [],
    'color': [],
    'size': [],
    'markertype': []
  };
  // split up the lines
  var lines = data.split("\n");
  for (var i = 0; i < lines.length; i++) {
    if ( (lines[i].indexOf('#') == 0) || (lines[i].match(/^\s*$/)) ) {
      continue; // pass on comment or empty
    }
    var pieces = lines[i].split(/\s*,\s*/);
    config['x'].push(pieces[0]);
    config['y'].push(pieces[1]);
    if (pieces.length > 2)
      config['color'].push(pieces[2]);
    if (pieces.length > 3)
        config['size'].push(pieces[3]);
    if (pieces.length > 4)
        config['markertype'].push(pieces[4]);
  }
  return config;
}