/*
  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';

//Thumbnail Box
var thumbnailCT;
var thumbnailTpl;
var lastThumb;

if($.cookie('bsp_language') == "es") {
  var sr_searching = "Buscando...";
  var sr_tpr = "Derechos patrimoniales";
} else {
  var sr_searching = "Searching...";
  var sr_tpr = "Third party rights";
}

function createThumbnailBox(data){
  return new String(thumbnailTpl.applyTemplate(data.data));
}//createThumbnailBox

var addthumb = function (data) {
  if(lastThumb) {
    lastThumb.remove();
  }
  var m = Ext.DomHelper.append(
  		thumbnailCT, 
  		{html:createThumbnailBox(data)},
      	true
  );
  //thumbnailCT.alignTo(document, 'tr-tr');
  m.fadeIn('tr');
  lastThumb = m;
};

function displayThumbnail(data){
  if(!thumbnailCT){
    thumbnailCT = Ext.DomHelper.insertFirst($('#maincontent')[0], {id:'thumbnail-div'}, true);
  }
  //thumbnailCT.alignTo(document, 'tr-tr');
  
  if(lastThumb) {
    lastThumb.fadeOut({callback: addthumb(data)});    
  } else {
    addthumb(data);
  }
}//displayThumbnail

Ext.onReady(function(){
    Ext.QuickTips.init();
    
    var config = [{name: 'pid'},
            {name: 'rn'},
            {name: 'title'},
            {name: 'caption'},  
            {name: 'tpr'},
            {name: 'country'}];
    var htproxy = new Ext.data.HttpProxy({
        	url: 'photo-search.php'
        });
    var xreader = new Ext.data.XmlReader(
    	{
            totalRecords: 'results',
            record: 'photo',
            id: 'pid'
        },
        config
   );    
            
    var ds = new Ext.data.Store({
        proxy: htproxy,
        reader: xreader
    });
    
        
    // Custom rendering Template
    var resultTpl = new Ext.Template(
        '<div class="search-item">',
            '<h3><span>{rn}</span>{title}</h3>',
        '</div>'
    );
    
    
    var search = new Ext.form.ComboBox({
        store: ds,
        displayField:'title',
        typeAhead: false,
        loadingText: sr_searching,
        width: 350,
        pageSize:10,
        hideTrigger:true,
        tpl: resultTpl,
        minLength: 3,
        queryDelay: 500,
        onSelect: function(record){ // override default onSelect to do redirect
            displayThumbnail(record);
        }
    });
    // apply it to the exsting input element
    search.applyTo('search');
    thumbnailTpl = new Ext.Template(
     '<div class="thumbnail x-box-gray">' +
     '  <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>' +
     '  <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">' + 
     '    <img class="thumb-flag" src="/images/flags/{country}.png" align="left">{tpr:this.tprFormat}' +
     '    <span class="thumb-record">[{rn}]</span>' +
     '    <div class="thumb-title">' + 
     '      {caption}' +
     '    </div>' +  //title
     '    <img class="thumb-image" src="/archive/photos/{rn}.jpg">' + 
     '  </div></div></div>' + 
     '  <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>' +
     '</div>' 
   );
   thumbnailTpl.tprFormat = function(value) {
     //console.log("===>" + value);
     if(value == 1) {
       return '<img class="thumb-tpr" title="' + sr_tpr + '" src="/images/third_party.png" align="left">' 
     } else {
       return  '';
     }
   };
   thumbnailTpl.compile();
});