/*
 *
 *     TriFolio release III
 *     
 *    Designed by MJJ Smeets
 *
 *  Tri-M Software & Webdesign
 *
 */

var FolioPanel = null;

function runTriFolio(table) {
    if (Ext.get("trifolio_panel") != null) {
        Ext.getCmp("trifolio_panel").destroy();
    }
    renderview = "images/segon.jpg";
    var renderpage = "ContentP";
    if (table.indexOf("tridata") != -1) {
        renderview = "images/screenshots/Tri-OS-01.jpg";
        renderpage = "ContentS";
    }
    if (table != null) {
            var store = new Ext.data.JsonStore({
                url: table,
                root: 'images',
                fields: [
                    'name', 'url', 'img', 'full', 'page'
                ]
            });
            store.load();

            var tpl = new Ext.XTemplate(
                '<tpl for=".">',
                    '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><a href="#" onmouseover="Ext.get(\'previewimg\').dom.src = \'{full}\';Ext.get(\'statustxt\').dom.innerHTML = \'{page}\';" onclick="window.open(\'{url}\')"><img width="100%" src="{img}" title="{name}" alt="{name}" /></a></div>',
                    '<span class="x-editable">{shortName}</span></div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            );

            FolioPanel = new Ext.Panel({
                id:"trifolio_panel",
                width:622,
                height:362,
                frame:true,
                layout:'border',
                items:[{
                    xtype:"panel",
                    id:"datapanel",
                    autoScroll:true,
                    region: 'west',
                    split: true,
                    frame: true,
                    collapsible: true,
                    width: 200,
                    height:353,
                    items:new Ext.DataView({
                        store: store,
                        tpl: tpl,
                        autoHeight:true,
                        multiSelect: true,
                        overClass:'x-view-over',
                        itemSelector:'div.thumb-wrap',
                        emptyText: 'Geen afbeeldingen in portfolio',
                        loadingText: 'Bezig laden'
                    })
                },{
                    xtype:"panel",
                    id:"contentpanel",
                    region: 'center',
                    split: true,
                    frame: true,
                    collapsible: true,
                    width: 450,
                    height:353,
                    items:[
                        {
                            xtype:"panel",
                            width:435,
                            height:265,
                            frame:true,
                            html:"<img id='previewimg' width='100%' height='100%' src='"+renderview+"' alt='screenshot van webpagina' />"
                        },{
                            xtype:"panel",
                            width:435,
                            height:75,
                            html:"<b id='statustxt' style='font-family:Lucida Console;font-size:12px;color:#666666;'>XHTML pagina gestyled met CSS<br />Laden van de paginas gaat heel vloeiend, door middel van speciaal custom designed Javascript.</b>"
                        }
                    ]
                }]                
            });
            FolioPanel.render(renderpage);
    }
}