function ShowDiv(j) {
		var show = "";
		if (j==0) show="none";
		if (j==1) show="block";
		var divs = document.getElementsByTagName('div');
		for (var i = 0; i < divs.length; i++) {         	// start loop 
			if (divs[i].id=='thumb' || divs[i].id=='thumb'){
				divs[i].style.display = show;
			}
		}
	}
	
	
var ProjectChooser = function(config){

    // create the dialog from scratch
    var dlg = new Ext.LayoutDialog(config.id || Ext.id(), {
		autoCreate : true,
		autoScroll : false,
		closable: true,
		collapsible: false,
		draggable : false,
		constraintoviewport: false,
        //fixedcenter:true,
		modal : false,
		resizable : false,
		shadow:true,
		shim: true,
		syncHeightBeforeShow: false,
		title : null,
	                        
        north:{initialSize: 100, minSize: 100, maxSize: 100, autoScroll:false},
        center:{autoScroll:true}
	});

	dlg.getEl().addClass('ychooser-dlg');
	dlg.addKeyListener(27, dlg.hide, dlg);
    //dlg.setDefaultButton(dlg.addButton('Cancel', dlg.hide, dlg));

	dlg.on('show', this.load, this);
	this.dlg = dlg;
	var layout = dlg.getLayout();
	
	layout.beginUpdate();
	var hd = layout.add('north',  new Ext.ContentPanel('north', {autoCreate : true}));
	var vp = layout.add('center',  new Ext.ContentPanel(Ext.id(), {autoCreate : true, cls:'ychooser-view', fitToFrame:true}));
    layout.endUpdate();
	
    function createBox(t, s){
        return [	'<table height="100px" border="0" cellpadding="0" cellspacing="0" style="padding-left12px;">',
					'<tr>',
					'<td><img src="../_img/nav/spacer.gif" width="20"></td>',
					'<td><img src="../_img/nav/ajax_lastest_title.png" style="padding-right:28px;"></td>',
					'<td><img src="../_img/nav/icon_viewby.png" style="padding-top:20px;"></td>',
					'<td><img style="padding-top:20px;cursor:pointer" onclick="ShowDiv(1);" onMouseOver=MM_swapImage("ImageG","","../_img/nav/icon_gallery_on.png",1) onMouseOut=MM_swapImgRestore() src="../_img/nav/icon_gallery_off.png" id="ImageG"></td>',
					'<td><img style="padding-top:20px;cursor:pointer" onclick="ShowDiv(0);"onMouseOver=MM_swapImage("ImageL","","../_img/nav/icon_listing_on.png",1) onMouseOut=MM_swapImgRestore() src="../_img/nav/icon_listing_off.png" id="ImageL"></td>',
					'</tr>',
					'</table>'
				].join('');
    }
	
	var m = Ext.DomHelper.append('north', {html:createBox('', '')}, true);
  	//m.slideIn('t').pause(1).ghost("t", {remove:false});

	

	var bodyEl = vp.getEl();
	var viewBody = bodyEl.createChild({tag:'div', cls:'ychooser-view'});
	vp.resizeEl = viewBody;
	this.prjTemplate = new Ext.Template(
		'<div id="{name}"></div>' +
		'<div class="thumb-wrap" id="{id}">' +
		'<table width="460" border="0" cellpadding="4" cellspacing="4">' +
		'<tr valign="top">' +
			'<td><img src="../_img/nav/spacer.gif" width="8"></td>' +
			'<td><div id="thumb"><img src="{projectimage}" title="{projecttitle}" width="127" height="86" vspace="8"></div></td>' +
			'<td width="*">' +
				'<div class="thumb-title">{projecttitle}</div>' +
				'<div style="padding-left:5px;color:white;">{shortbody}</div>' +
			'</td>' +
			'<td>&nbsp;</td>' +
		'</tr>' +
		'</table></div>'
	);
	this.prjTemplate.compile();	
	
    
    // initialize the View		
	this.view = new Ext.JsonView(viewBody, this.prjTemplate, {
		singleSelect: true,
		jsonRoot: 'projects',
		emptyText : '<div style="padding:10px;">No projects match the specified filter</div>'
	});
    this.view.on('click', this.doCallback, this);
    this.view.on('loadexception', this.onLoadException, this);
    this.view.on('beforeselect', function(view){
        return view.getCount() > 0;
    });

    Ext.apply(this, config, {
        width: this.width, height: this.height
    });
    
    // cache data by image name for easy lookup
    var lookup = {};
    this.view.prepareData = function(data){
    	lookup[data.id] = data;
    	return data;
    };
    this.lookup = lookup;
	dlg.resizeTo(this.width, this.height);
    dlg.moveTo(this.left, this.top);
	this.loaded = false;
};

ProjectChooser.prototype = {
	show : function(el, callback){
	    this.dlg.show(el);
		this.callback = callback;
	},
	
	load : function(){
		if(!this.loaded){
			this.view.load({url: this.url, params:this.params, callback:this.onLoad.createDelegate(this)});
		}
	},
	
	onLoadException : function(v,o){
	    this.view.getEl().update('<div style="padding:10px;">Error loading projects.</div>'); 
	},
	
	
	onLoad : function(){
		this.loaded = true;
		this.view.select(0);
	},
	
	doCallback : function(){
        var selNode = this.view.getSelectedNodes()[0];
		var callback = this.callback;
		var lookup = this.lookup;
		this.dlg.hide(function(){
            if(selNode && callback){
				var data = lookup[selNode.id];
				callback(data);
			}
		});
	}
};