/**
 * @class Ext.grid.TableGrid
 * @extends Ext.grid.Grid
 * A Grid which creates itself from an existing HTML table element.
 * @constructor
 * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created - 
 * The table MUST have some type of size defined for the grid to fill. The container will be 
 * automatically set to position relative if it isn't already.
 * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
 * properties: fields and columns which allow for customizing data fields and columns for this grid.
 * @history
 * 2007-03-01 Original version by Nige "Animal" White
 * 2007-03-10 jvs Slightly refactored to reuse existing classes
 */
Ext.grid.TableGrid = function(table, config) {
  config = config || {};
  Ext.apply(this, config);
  var cf = config.fields || [], ch = config.columns || [];
  table = Ext.get(table);

  var ct = table.insertSibling();

  var fields = [], cols = [];
  var headers = table.query("thead th");
  for (var i = 0, h; h = headers[i]; i++) {
    var text = h.innerHTML;
    var name = 'tcol-'+i;
	fields.push(Ext.applyIf(cf[i] || {}, {
      name: name,
      mapping: 'td:nth('+(i+1)+')/@innerHTML'
    }));

    cols.push(Ext.applyIf(ch[i] || {}, {
      'header': text,
      'dataIndex': name,
      'width': h.offsetWidth,
      'tooltip': h.title,
      'sortable': true
    }));
  }

  var ds  = new Ext.data.Store({
    reader: new Ext.data.XmlReader({
      record:'tbody tr'
    }, fields)
  });

  ds.loadData(table.dom);

  var cm = new Ext.grid.ColumnModel(cols);
  
  if (config.width || config.height) {
    ct.setSize(config.width || 'auto', config.height || 'auto');
  } else {
    ct.setWidth(table.getWidth());
  }

  if (config.remove !== false) {
    table.remove();
  }

  Ext.applyIf(this, {
    'ds': ds,
    'cm': cm,
    'sm': new Ext.grid.RowSelectionModel(),
    autoHeight: true,
    autoWidth: true
  });
  Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
};

Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);


/**
 * 渡された数値に以下の作業を行う。
 * ●3桁ごとにカンマで区切る
 * ●addYenがtrueであれば価格に¥マークを付ける
 * @author maruuo
 */
function convertToMoney(val, addYen){
	val = String(val);	// 文字列に変換しないとカンマが付かない
    for(i = 0; i < val.length/3; i++){
        val = val.replace(/^([+-]?\d+)(\d\d\d)/,"$1,$2");
    }
	/*
	var len = val.length;
	if ( len < 7) {
		val = ('   ' + val).substr(-7);	
	}
	*/
	if (addYen) {
		val = '&yen;' + val;
	}
	return val;
}

function japanMoneyRenderer(value, metadata, record, rowIndex, colIndex, store) {
	return '<div align="right">' + convertToMoney(value, false) + '円</div>';
}

function differencialRenderer(value, metadata, record, rowIndex, colIndex, store) {
	var diff = 0;
	if (store != undefined && store.getAt(0) != undefined) {
		var price = record.get('price');
		var minPirce = store.getAt(0).get('price');
		diff = price - minPirce;
	}
	return '<div class="difference">' + convertToMoney(diff, false)  + '円</div>';
}

function addButtonRenderer(value, metadata, record, rowIndex, colIndex, store) {
	return '<button onclick="addShoppingList('+ rowIndex + ')">リストに追加</button>';
}