Ext.ns('Ext.ux.clv2')

var fooData;
var widthTitle=235;
var widthAuthor=160;
  var grid;
/*********************************************
PRIVATE FUNCS
/*********************************************/
	function showWin() {

        var store = new Ext.data.SimpleStore({
                    fields: [
                    {name: "title"},
                    {name: "author"},
                    {name: "type"},
                    {name: "revised", type: "date", dateFormat: "n/j/Y"},
                    {name: "rating"},
                    {name:"id"}
                ]
                });
        var data = [
             ["Learning Object Title1", "Firstname Lastname", "XHTML", "12/25/2008","Gold","1"],["Learning Object Title2", "Firstname Lastname", "XHTML", "12/26/2008","Gold","2"],
             ["Learning Object Title3", "Firstname Lastname", "XHTML", "12/27/2008","Gold","3"],["Learning Object Title4", "Firstname Lastname", "XHTML", "12/28/2008","Gold","4"],
             ["Learning Object Title5", "Firstname Lastname", "XHTML", "12/28/2008","Gold","5"],
             ["Learning Object Title3", "Firstname Lastname", "XHTML", "12/27/2008","Gold","3"],["Learning Object Title4", "Firstname Lastname", "XHTML", "12/28/2008","Gold","4"]
        ];

        store.loadData(data);
        
        var nav = new Ext.Panel({
            autoLoad:{url: 'statistics.spr', params: 'linkName=newContentHeader'},
            height:75,
            rowspan:1,
            colspan:3,
            width:648,
            border: false,
           
            header: false,
            layout: 'fit'
        });


        var previewPanel = new Ext.Panel({
            id: "previewPanel",
            height:342,
            border: false,
            rowspan:1,
            colspan:3,
            cls:'previewcontent',
            header: false,
            html: "<h1>Hola</h1>",
            layout: 'fit'
        });

        function linkCell(val) {
            return "<a href='#' style='margin-left:15px'>" + val + "</a>";
        }


        var colums = [
                {id:"title", header: "<span style='margin-left:15px'>Title</span>", width:widthTitle, sortable: true, dataIndex: "title", renderer: linkCell},
                {header: "Author", width:widthAuthor, sortable: true, dataIndex: "author"},
                {header: "Type", width: 112, sortable: true, dataIndex: "type"},
                {header: "Revised", width: 85, sortable: true, dataIndex: "revised", renderer: Ext.util.Format.dateRenderer('n/j/Y')},
                {header: "Rating", width: 91, sortable: true, dataIndex: "rating"},
                {header: "Id", width: 91, sortable: true, dataIndex: "id", hidden : true}
        ];



        grid = new Ext.grid.GridPanel({
            id:'mostpopular-grid',
            store: store,
            columns: colums,
            rowspan:1,
            colspan:3,
            autoExpandColumn: "title",
            stripeRows: true,
            height:20,
            width:648        
        });


        var win = new Ext.Window({
        /*title: 'Most Popular',*/
            id:'new-content-window',
			closeAction:'close',
			closable:false,
            cls:'clv2-window mostpopular',
            width:681,
            minWidth: 660,
            height:621,
            border:false,
            bodyBorder: false,
            plain:true,
            layout: 'table',
            layoutConfig: {
                columns: 3
            },
            listeners:{
                resize: function(window, width, height) {
                    grid.setWidth(Number(width) - 12 ); //12px is grid's scroll width
                    previewPanel.setWidth(Number(width) - 12);
                    previewPanel.setHeight(Number(height) - 12);
                    widthPa = win.width * 0.35;
                    widthAuthor = win.width * 0.23;
                    nav.setWidth(Number(width)-12);
                    this.showSpotlight();
                }
            },
			hideSpotlight : hideSpotlight,
			showSpotlight : showSpotlight,
			addTitleBarItems: addExtTitleBarItems,
		    setElementAction: setExtElementAction,
            items: [nav, grid, previewPanel]
        });
        win.on('beforeclose', win.hideSpotlight, win);
        win.on('beforehide', win.hideSpotlight, win);
        win.on('beforeshow', win.showSpotlight, win);
        win.on('collapse', win.showSpotlight, win);
        win.on('move', win.showSpotlight, win);
        
        var relativePos = findPos(document.getElementById('loginPanel'));
        win.setPosition(relativePos[0] + 316, relativePos[1]);
        win.show();
        //win.createHeaderItems();
        win.addTitleBarItems({title:'New Content',close:'close window'});
    }