/*
  Bob Schalkwijk Photography
  http://www.bobschalkwijkphotography.com
  
  Please note that this is a mashup of various technologies.
  The derivation is based on the following licenses:
  
  http://www.bobschalkwijkphotography.com/credits/Ext-License.html
  http://docs.jquery.com/License (MIT)
  
  @author Dieter Wimberger (dieter at wimpi dot net)
*/
Ext.BLANK_IMAGE_URL = '/ext-resources/images/default/s.gif';

Ext.onReady(function(){
    //unset cookie
    $.cookie('portfolio_set',null);
    
    if($.cookie('bsp_language') == "es") {
      var sr_dv = "Vista Detallada";
      var sr_em_msg = "No hay conjuntos todavia.";
      var sr_dis_msg ='{0} - {1} de {2}';
      var sr_name = "Nombre";
      var sr_fotos = "#Fotos";
    } else {
      var sr_dv = "Detailed View";
      var sr_em_msg = "There are no sets yet.";
      var sr_dis_msg = '{0} - {1} of {2}';
      var sr_name = "Name";
      var sr_fotos = "#Photos";
    }
    //1. Data Store
    var config = [{name: 'setid'},{name: 'setname'},{name: 'description'},{name: 'size'}];
    var htproxy = new Ext.data.HttpProxy({url: 'photo-sets.php'});
    
    var xreader = new Ext.data.XmlReader(
        {
			totalRecords: 'results',
			record: 'set',
			id: 'setid'
		},
        config
    );
            
    var ds = new Ext.data.Store({
        proxy: htproxy,
        reader: xreader
    });
    

    //2. Renderers
    function renderSet(value, p, record) {
        return String.format('<h3>{0}</h3><p class="set-desc">{1}</p>', value, record.data['description']);
    }
     
    function renderSetPlain(value) {
        return String.format('<h3>{0}</h3>', value);
    }
    
    //3. Grid
    var cm = new Ext.grid.ColumnModel([{
           id: 'set-name', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: sr_name,
           dataIndex: 'setname',
           width: 390,
           renderer: renderSetPlain,
           sortable: true,
           css: 'white-space:normal;',
           align: 'left'
        },{
           id: 'set-size',
           header: sr_fotos,
           dataIndex: 'size',
           sortable: true,
           width: 50,
           align: 'left'
        }]);

    
    // create the editor grid
    var grid = new Ext.grid.Grid('archive-set-grid', {
        ds: ds,
        cm: cm,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
        enableColLock:false,
        loadMask: true
    });

    // make the grid resizable, do before render for better performance
    var rz = new Ext.Resizable('archive-set-grid', {
        wrap:true,
        minHeight:100,
        pinned:true,
        handles: 's'
    });
    rz.on('resize', grid.autoSize, grid);

    // render it
    grid.render();
    
    //add listener
    var selectSet = function(grid, rowID, e) {
      //alert("Selected " + rowID );
      var rec = grid.getSelectionModel().getSelected();
      $.cookie('portfolio_set',rec.data['setid']); // set cookie
      //alert($.cookie('portfolio_set'));
    };
    grid.on("rowclick", selectSet);
    
    var selectSetAndGo = function(grid, rowID, e) {
      var rec = grid.getSelectionModel().getSelected();
      $.cookie('portfolio_set',rec.data['setid']); // set cookie
      document.location="/browse/";
      
    };
    grid.on("rowdblclick", selectSetAndGo);


    var gridFoot = grid.getView().getFooterPanel(true);

    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: 25,
        displayInfo: true,
        displayMsg: sr_dis_msg,
        emptyMsg: sr_em_msg
    });
    // add the detailed view button
    paging.add('-', {
        pressed: false,
        enableToggle:true,
        text: sr_dv,
        cls: 'x-btn-text-icon details',
        toggleHandler: toggleDetails
    });

    // trigger the data store load
    ds.load({params:{start:0, limit:25, cache:100}});

    function toggleDetails(btn, pressed){
        //alert('toggleDetails');
        cm.getColumnById('set-name').renderer = pressed ? renderSet : renderSetPlain;
        grid.getView().refresh();
    }
});