var thumbTemplate;
 var detailsTemplate;
 var view;
 var store;

 
//Ext.onReady(function(){

	 function initTemplates()
	 {
		thumbTemplate = new Ext.XTemplate(
			'<br><br>',
			'<tpl for=".">',
				'<div class="thumb" id="{pic_url}"><center><img src="{thumb_url}" align="middle"></center></div><br><br>',
			'</tpl>'
		);
		thumbTemplate.compile();
		
		detailsTemplate = new Ext.XTemplate(
			'<br><center><img src="{pic_url}"></center>'
		);
		detailsTemplate.compile();
	}
	
	function showDetails()
	{
		var selNode = view.getSelectedNodes();
		var detailEl = Ext.getCmp('img-big-view').body;
		if(selNode && selNode.length > 0){
			selNode = selNode[0];
			var data = selNode.id;
			detailEl.hide();
			detailsTemplate.overwrite(detailEl, {pic_url: data});
			detailEl.slideIn('l', {stopFx:true,duration:.5});
		}
	}
	
    function ShowImages(picsData)
    {

		initTemplates();

		// create the data store
		store = new Ext.data.SimpleStore({
			fields: ['thumb_url','pic_url'],
			listeners: {
				'load': {fn:function(){ view.select(0); }, scope:this, single:true}
			}			
		});
		
		
		view = new Ext.DataView({
			tpl: thumbTemplate,
			singleSelect: true,
			overClass:'x-view-over',
			itemSelector: 'div.thumb',
			store: store,
			listeners: {
				'selectionchange': {fn:showDetails, scope:this, buffer:100}
			}
		});
			
		store.loadData(picsData);
		
        // tabs for the center
        var big_image = new Ext.Panel({
            id			: 'img-big-view',
			header		: false,
            region      : 'center',
            split       : true,
            width       : 550,
			split		: true,
			html		:  '<br><center><img src="' + picsData[0][1] + '"></center>'
        }); 
		
        // Panel for the east
        var nav = new Ext.Panel({
            id			: 'img-nav-panel',
            region      : 'east',
			autoScroll	: true,
            split       : true,
            width       : 150,
			items		: view
        }); 

        var win = new Ext.Window({
            title    : 'Images Window',
			id		 : 'images-dlg',
            closable : true,
            width    : 700,
            height   : 450,
            //border : false,
            plain    : true,
            layout   : 'border',
            items    : [nav, big_image],
			modal	 : true
        });

		
        win.show();
    }
//});