var stDetails, stComments, dtView, tplDetails, tplComments
var panelDetails, panelComments, winComment
var pageSize = 6;

function loadGalleryDetails(id) {
  if (panelComments) panelComments.destroy();
  stDetails.load({params: {params: id}});
}

Ext.onReady(function () {
  var els = new Ext.ww.ExpandCollapse();
  tplDetails = new Ext.XTemplate(
    '<tpl for=".">',
      '<table border="0" cellpadding="0" cellspacing="0" width="95%"><tbody>',
        '<tr><td style="font-weight: bold; font-size: 18px;" colspan="3" height="30" id="pg_Item">{PGTitle}</td></tr>',
        '<tr><td width="125">Posted By</td><td width="5">:</td><td><span name="photoby" id="photoby">{sTakenBy}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{PGDateCreated}</td></tr>',
        '<tr><td width="125">School Name</td><td width="5">:</td><td>{m_SchoolName}</td></tr>',
        '<tr valign="top"><td width="125">Description</td><td width="5">:</td><td>{PGDescription}</td></tr>',
      '</tbody></table>',
    '</tpl>'
  );
  tplComments = new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="comment-item">',
        '<h3><span>{CoDateCreated:date("M j, Y")} - by {CoSubmitedBy}</span></h3>',
        '<p>{CoDescription}</p><br/>',
    '</div></tpl>'
  );

  stDetails = ww.dbStore.JSON(detailsKey, [
      'PGID', 'PGTitle', 'sTakenBy', 'PGDateCreated', 'm_SchoolName', 'PGDescription' 
  ]);
  
  stDetails.on('load', function () {
    var itemDisplay = (this.totalLength==0)?'none':'';
    Ext.fly('mainflash').dom.style.display = itemDisplay;
    Ext.fly('itemShow').dom.style.display = itemDisplay;
    Ext.fly('comment-panel').dom.style.display = itemDisplay;
    
    sPGID = (this.totalLength==0)?'':this.getAt(0).json.PGID;
    stComments = ww.dbStore.JSON(commentsKey, [
        'CoSubmitedBy', 'CoDescription', {name:'CoDateCreated', type:'date'}
    ], {params: sPGID, limit: pageSize});
    
    panelComments = new Ext.Panel({
      renderTo: 'comment-panel',
      autoHeight:true,
      autoWidth: true,
      border: false,
      items: new Ext.DataView({
        tpl: tplComments,
        store: stComments,
        loadingText: 'Loading. . .',
        emptyText: '<div>No comments to display<br>&nbsp;</div>',
        itemSelector: 'div.comment-item'
      }),
      bbar: new Ext.PagingToolbar({
        id: '_arcmttool', 
        cls: 'x-toolbar-blank',
        store: stComments,
        pageSize: pageSize,
        displayInfo: true,
        displayMsg: 'Comments {0} - {1} of {2}',
        emptyMsg: ''
      })
    });
    stComments.load();
    var _vprc = Ext.getCmp('_arcmttool');
    _vprc.loading.hide();
  });

  panelDetails = new Ext.Panel({
    renderTo: 'frmViewMain',
    autoHeight:true,
    autoWidth: true,
    border: false,
    items: new Ext.DataView({
      tpl: tplDetails,
      store: stDetails,
      loadingText: 'Loading. . .',
      emptyText: '<div>No article to display<br>&nbsp;</div>',
      itemSelector: 'div.pg_Item'
    })    
  });

  if (Ext.fly('db_RSSFeed')) Ext.fly('db_RSSFeed').dom.style.display = 'none';
  loadGalleryDetails(sPGID);

  ww_CommentLayout.init();
  var frmComment = ww_CommentLayout.getForm();
  winComment = ww_CommentLayout.getWindow(frmComment);

  Ext.fly('btnCommentSubmit').on('click', function () {
    if ((sPGID == '') || (sPGID == '0')) ww.msgbox.info('Nothing to comment.');
      else winComment.show();
    return false;
  });
});