/**
 * Copyright(c) 2006-2009, feyaSoft Inc. All Right Reserved.
 */
Ext.ns("feyaSoft.openSource");

feyaSoft.openSource.AboutMySS = function(){

    // up tab panel
    this.upPanel = new Ext.Panel({
        region: 'center',
        layout:'fit',
        autoScroll:true,
        border: false,
        autoLoad: {url: 'html/openSource/mySpreadSheet.html', scripts: true}
    });

    /////////////////////////////////////////////////////////////////////
    // load data image now - data view
    this.dataStore = new Ext.data.JsonStore({
        url: 'utilImages/listImages',
        baseParams: {myBelong: 'mySpreadSheet'},
        remoteSort: true,
        fields: [] // initialized from json metadata
    });
    this.dataStore.load();

    // for tpl
     var tpl = new Ext.XTemplate(
	'<tpl for=".">',
            '<div class="thumb-wrap" id="{id}">',
		    '<div class="thumb"><a href="{[this.getpath(values.imagepath)]}.jpg" rel="lightbox" title="{name}"><img style="width:250px;height:125px;" src="{[this.getpath(values.imagepath)]}" title="{name}"></a></div>',
		    '<span class="x-editable">{name}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>', {
        getpath: function(imagepath){
            if(!imagepath){
                imagepath = Ext.BLANK_IMAGE_URL;
            }
            return imagepath;
        }
    });

    this.mySSView = new Ext.DataView({
        style:'padding:20px',
        singleSelect:true,
        store: this.dataStore,
        tpl: tpl,
        autoHeight:true,
        singleSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'No pages to display',
        prepareData: function(data){
            data.name = Ext.util.Format.ellipsis(data.name, 50);
            return data;
        }
    });

    // down tab panel
    this.downTabPanel = new Ext.TabPanel({
        region: 'south',
        tabPosition: 'bottom',
        activeTab: 0,
        deferredRender: false,
        layoutOnTabChange:true,
        height: 210,
        split:true,
        resizeTabs:true,
        tabWidth:250,
        minTabWidth: 120,
        plugins: new Ext.ux.TabCloseMenu(),

        items:[{
            title: 'Featured Spreadsheets',
            iconCls: 'application',
            closable: false,
            autoScroll:true,
            layout: 'border',
            border: false,
            items: [{
                region: 'center',
                cls:'feyasoft-images-view',
                autoScroll:true,
                border: false,
                items: [this.mySSView]
            }]
        }]
    });

   /************************************************************
    * Define AboutUsPanel now in here
    *   display the calendar informaiton
    ************************************************************/
    feyaSoft.openSource.AboutMySS.superclass.constructor.call(this, {
        region: 'center',
        layout: 'border',
        border: false,
        items: [this.upPanel, this.downTabPanel]
    });
};


/************************************************************
 * Main Panel will extends Ext.TabPanel
 *   define public function in here...
 ************************************************************/
Ext.extend(feyaSoft.openSource.AboutMySS, Ext.Panel, {

});