Ext.namespace("Itransition.ux");
Itransition.ux.AnnualChangeWin = function(div) {
    //default service date format
    this.serviceDateFormat = 'm/d/Y';
    //default date format
    this.dateFormat = 'm/d/Y';
    
    this.divElement = div;
    this.store = null;
    this.grid = null;

    this.store = new Ext.data.SimpleStore({
        fields: [{
            name: 'Description',
            mapping: 'Description',
            sortType: 'asText'
        },{
            name: 'Value',
            mapping: 'Value',
            sortType: 'asText'
        }],
        data: [{"Description":"U.S. Stocks","Value":-5.03,"AAMPercent":30},{"Description":"Foreign Stocks","Value":-8.61,"AAMPercent":30},{"Description":"Reits","Value":-7.95,"AAMPercent":5},{"Description":"Precious Metals","Value":-11.40,"AAMPercent":5},{"Description":"High Yield Bonds","Value":-0.73,"AAMPercent":10},{"Description":"High Grade Bonds","Value":1.04,"AAMPercent":10},{"Description":"Inflation Adjusted Treasuries (TIPS)","Value":1.27,"AAMPercent":10}]
    });
    
    this.grid = new Ext.grid.GridPanel({
        title: '',
        iconCls:'icon-grid',
        width: 260,
        height: 205,
        renderTo: this.divElement,
        stripeRows : true,
        trackMouseOver: false,
        enableColumnMove: false,
        enableColumnResize: false,
        loadMask: {msg: 'loading...'},
        ds: this.store,
        cm: new Ext.grid.ColumnModel([{
            header: 'Name',
            dataIndex: 'Description',
            width: 180,
            resizable: false,
            menuDisabled: true,
            sortable: true
        },{
            header: 'YTD %Chg',
            dataIndex: 'Value',
            width: 70,
            renderer: function(value, metaData, record, rowIndex, colIndex, store){
                var v = Math.round(value*100)/100;
                var formattedValue = '';
                if (v == Math.floor(v)){
                    formattedValue = (v + '.00%');
                }
                else if (v == Math.round(value*10)/10){
                    formattedValue = (v + '0%');
                }
                else{
                    formattedValue = (v + '%');
                }
                if(value >= 0){ 
                    return '<span style="color:green;">' + formattedValue + '</span>&nbsp;<img src="http://www.chartcrafters.com/Charts/includes/images/arrow_up.gif" alt="Up"/>'; }
                else if(value < 0){ 
                    return '<span style="color:red;">' + formattedValue + '</span>&nbsp;<img src="http://www.chartcrafters.com/Charts/includes/images/arrow_down.gif" alt="Down"/>'; } 
                return value;
            },
            align: 'right',
            resizable: false,
            menuDisabled: true,
            sortable: true
        }])
    });

    //Component initialization
    this.grid.render();
};

Ext.BLANK_IMAGE_URL = 'http://www.chartcrafters.com/Charts/includes/images/default/s.gif';
var annualChangeGrid;
Ext.onReady(function(){
    if (annualChangeGrid == undefined) {
        annualChangeGrid = new Itransition.ux.AnnualChangeWin('annual-change-grid');
    }
});