var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'JSONData.asp'
        }),
        reader: new Ext.data.JsonReader({
            root: 'data',
            totalProperty: 'totalCount',
            id: 'id'
        }, [
            'id', 'item_number', 'shape', 'carat_weight', 'cut', 'color', 'clarity', 'polish', 'symmetry',
            'lw_ratio', 'depth', 'ttable', 'fluorescence', 'markedup_price', 'report', 'culet', 'girdle', 
			'measurement_l', 'measurement_w','measurement_d', 'items_amount', 'selling_price', 'certificate','selected' 
        ]),
        remoteSort: true
    });
    ds.setDefaultSort('item_number', 'asc');

function updateList(diamond_id)
{
		var o = {url : "updateList.asp?diamond_id="+diamond_id,
                success: successDelegate,
                timeout: 3000
            };
    Ext.Ajax.request(o);
}

function successDelegate(str)
{
//	alert("success "+str.params);
}

Ext.onReady(function(){

    Ext.QuickTips.init();
    var xg = Ext.grid;
    var expander = new xg.RowExpander({
        tpl : new Ext.Template(
			'<table border="0"><tr>',
            	'<td width="120"><b>Polish:</b> {polish}</td>',
				'<td width="120"><b>Symmetry:</b> {symmetry}</td>',
				'<td width="120"><b>Girdle:</b> {girdle}</td>',
			'</tr><tr>',
				'<td><b>Depth:</b> {depth}%</td>',
				'<td><b>Table:</b> {ttable}%</td>',
				'<td><b>L/W Ratio:</b> {lw_ratio}</td>',
			'</tr><tr>',
            	'<td><b>Culet:</b> {culet}</td>',
				'<td><b>Fluorescence:</b> {fluorescence}</td>',
				'<td><b>Report:</b> {report}</td>',
			'</tr><tr>',
				'<td colspan="3"><b>Measurements:</b> {measurement_l} x {measurement_w} x {measurement_d}</td>',
			'</tr></table>'
        )
    });
	function renderSelected(value, p, r){
		/*
		var str = '';
		if(value=="1") str = 'checked="checked"';
		
        return String.format('<center><input type="checkbox" '+str+' onClick="updateList(\''+r.data['id']+'\');" /></center>');
		*/
		
		return String.format('<center><a href="/adddiamonditem.asp?idProduct='+r.data['id']+'">Add to cart</a></center>');
    }
	
	function renderCert(value, p, r){
		if(value!='/' && value!=undefined && value!='')
			return String.format('<center><a href="/jewelscart2000/jewelsadmin/certificates/'+value+'" target="_blank">'+r.data['report']+'</a></center>');
		else 
			return '';
	}
	
	function renderNumber(v){
            v = (Math.round((v-0)*100))/100;
            v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
            v = String(v);
            var ps = v.split('.');
            var whole = ps[0];
            var sub = ps[1] ? '.'+ ps[1] : '.00';
            var r = /(\d+)(\d{3})/;
            while (r.test(whole)) {
                whole = whole.replace(r, '$1' + ',' + '$2');
            }
            v = whole + sub;
            if(v.charAt(0) == '-'){
                return '-' + v.substr(1);
            }
            return "" +  v;
	}
	
	function renderPercent(v){
		return ""+v+"%";
	}
	
    var grid1 = new xg.GridPanel({
        store: ds,
        cm: new xg.ColumnModel([
            expander,
			{header: "Item number", width: 80, sortable: true, dataIndex: 'item_number'},
            {id:'id',header: "Shape", width: 70, sortable: true, dataIndex: 'shape'},
            {header: "Carat", width: 50, sortable: true, dataIndex: 'carat_weight',renderer: renderNumber},
            {header: "Cut", width: 70, sortable: true, dataIndex: 'cut'},
            {header: "Color", width: 50, sortable: true, dataIndex: 'color'},
			{header: "Clarity", width: 50, sortable: true, dataIndex: 'clarity'},
			{header: "Price", width: 70, sortable: true, dataIndex: 'markedup_price',renderer: Ext.util.Format.usMoney},
			{header: "Polish", width: 50, sortable: true, dataIndex: 'polish', hidden: true},
			{header: "Symmetry", width: 70, sortable: true, dataIndex: 'symmetry', hidden: true},
			{header: "L/W Ratio", width: 70, sortable: true, dataIndex: 'lw_ratio', hidden: true},
			{header: "Depth", width: 50, sortable: true, dataIndex: 'depth', hidden: true, renderer: renderPercent},
			{header: "Table", width: 50, sortable: true, dataIndex: 'ttable', hidden: true, renderer: renderPercent},
			{header: "Fluorescence", width: 80, sortable: true, dataIndex: 'fluorescence', hidden: true},
			{header: "Culet", width: 50, sortable: true, dataIndex: 'culet', hidden: true},
			{header: "Girdle", width: 50, sortable: true, dataIndex: 'girdle', hidden: true},
			{header: "Measurement L", width: 90, sortable: true, dataIndex: 'measurement_l', hidden: true},
			{header: "Measurement W", width: 90, sortable: true, dataIndex: 'measurement_w', hidden: true},
			{header: "Measurement D", width: 90, sortable: true, dataIndex: 'measurement_d', hidden: true},
			{header: "Cert", width: 60, sortable: false, dataIndex: 'certificate', renderer:renderCert, align:'center'},
			{header: "Diamond in list", width: 90, sortable: false, dataIndex: 'selected',renderer:renderSelected,align:'center'}
        ]),
		trackMouseOver:true,
		sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
		loadMask: true,
        viewConfig: {
            forceFit:false,
			enableRowBody:true,
            showPreview:false
        },
        width: 643,
        height: 300,
        plugins: expander,
        collapsible: false,
        animCollapse: false,
        title: 'Search Results',
        renderTo: document.getElementById('search_res'),
		bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: ds,
            displayInfo: true,
            displayMsg: 'Displaying diamonds {0} - {1} of {2}',
            emptyMsg: "No diamonds to display"
        })
    });
});
document.getElementById('loading_block').style.display = 'none';