/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
  var lookup=[];

  // Custom rendering Template for the View
  var resultTpl = new Ext.XTemplate(
    '<tpl for=".">',
    	'<div class="search-item" id="{barcode}">',
    	'<span>',
        '<table class=mediaop_field>',
          '<tr>',
	          '<td><font size="1">{barcode}</font></td>',
          '</tr>',
          '<tr>',
            '<td><font size="2" color="#0000FF"><b>{title}</b></font></td>',
          '</tr>',
          '<tr>',            
            '<td><font color="#000000" size="1">Author:</font><font color="#000000" size="2"> {author}</font></td>',
          '</tr>',
        '</table>',	
      '</span>',
    '</div>',
   '</tpl>'
  );

	var detailTpl = new createDetailTpl().Tpl; 	

  var store = new Ext.data.Store({
    url: 'media-search/media-search.php',
    reader: new Ext.data.XmlReader({
      // records will have an "Item" tag
      record: 'row',
      id:     'barcode',
      totalRecords: 'totalCount'
    }, [
      // set up the fields mapping into the xml doc
      // The first needs mapping, the others are very basic
       {name: 'barcode', mapping: 'barcode'}
      ,{name: 'author',  mapping: 'author'}
      ,{name: 'title',   mapping: 'title'}
      ,{name: 'publisher',   mapping: 'publisher'}
      ,{name: 'place',   mapping: 'place'}
      ,{name: 'volume',   mapping: 'volume'}
      ,{name: 'edition',   mapping: 'edition'}
      ,{name: 'year',   mapping: 'year'}
      ,{name: 'no_in_set',   mapping: 'no_in_set'}
      ,{name: 'img_url',   mapping: 'img_url'}
      ,{name: 'thumb_url',   mapping: 'thumb_url'}       
    ])
    ,fields: [
			'barcode','author','title'
		 ]
    ,baseParams: {limit:20}
    ,listeners: {
      //'load': {fn:function(){ view.select(0);}}
    }
  });

	var view=new Ext.DataView({
    tpl: resultTpl
   ,store: store
   ,singleSelect: true
   ,overClass:'x-view-over'
   ,itemSelector: 'div.search-item'
   ,listeners: {
   		selectionchange: {
      	fn: function(data,nodes) {
      		var detailEl = Ext.getCmp('img-detail-panel').body;
					if(nodes && nodes.length > 0) {
					  detailTpl.overwrite(detailEl, lookup[nodes[0].id]);
						detailEl.slideIn('l', {stopFx:true,duration:.2});
					}
        }
      }
    }
    ,prepareData: function(data) { 
    	lookup[data.barcode]=data;
    	return data; 
     }
  });

 	var srch_field = new Ext.app.SearchField({
    store: store
   ,width:180  
  });

	var srch_filter=new Ext.Panel ({  	
		renderTo: 'search-filter',
    border:false,
    layout: 'table',
    layoutConfig: { columns: 1 },
    items:[
    	srch_field
    ,{
      xtype: 'checkboxgroup',
      bodyStyle: 'padding-right:5px;',
      bodyStyle: 'padding-left:5px;',
      columns: [70,60,60],
      items: [         	
        {boxLabel: 'Barcode', id: 'cb-barcode', checked: true}
       ,{boxLabel: 'Title',   id: 'cb-title',   checked: true}
       ,{boxLabel: 'Author',  id: 'cb-author'}
      ]      
    }
    ]   
	});

	var imgDetail= new Ext.Panel({
  	id: 'img-detail-panel'
   ,border: false
   ,applyTo: 'img-detail-panel'
   ,split: true
   ,height: 182
   ,width: 300
	});
	
  var panel = new Ext.Panel({
    applyTo: 'search-results',
    height:182,
    width:300,
    autoScroll:true,
    layout: 'border',
    border: false,
    defaults: {border: false },
    items:[{
      id: 'img-chooser-view',
      region: 'center',
      autoScroll: true, 
      items: view
    }]
  });
  store.load({params:{start:0, limit:20}});
});