Ext.namespace('vc.gallery');

vc.gallery.Panel = new Ext.Panel({
  id: 'vc_gallery',
  title: 'Billeder',
  frame: true,
  unstyled: false,
  border: false,
  autoScroll: true,
  layout:'table',
  layoutConfig: {
    columns:4,
    tableAttrs: {
      cellspacing: 5
    }    
  },
  // applied to child components
  defaults: {
    frame:true,
    width:220,
    height: 220
  }
})

vc.gallery.Store = new Ext.data.JsonStore({
  url: 'php/gallery_index.php',
  autoLoad: {
    scope:vc.gallery.Panel
  },
  root: 'data',
  id:'galleryindexstore',
  idProperty: 'id',
  fields:[
  'id','Year'
  ],
  listeners:{
    load: {
      fn: function(store, record, operation){
        var pnl = operation.scope;
        store.each(function(record){
          pnl.add({
            title:'Viborg Classic '+record.get('Year'),
            data:{
              url:record.get('id')-1,
              year:record.get('Year')
            },
            tpl: new Ext.XTemplate(
              '<ul>',
              '<tpl for=".">',
              '<li>',
              '<a href="http://galleri.viborgclassic.dk/#{url}.0" target="_blank"><img src="images/{year}.JPG"></a>',
              '</li>',
              '</tpl>',
              '</ul>'
              )
          })
        })
        pnl.doLayout();
      }
    }
  }
})