var loaderPgms;
function openPopupPgms(){
	if(typeof(loaderPgms) =='undefined'){
		loaderPgms = new popupPgms({width:580,height:400});
	}
	loaderPgms.show();

};

var popupPgms = function(config){

	var dlg = new Ext.LayoutDialog(Ext.id(), {
		autoCreate : true,
		minWidth:500,
		minHeight:300,
		syncHeightBeforeShow: true,
		shadow:true,
        fixedcenter:true,
        center:{autoScroll:true}
	});
	dlg.setTitle('Images');
	dlg.getEl().addClass('ychooser-dlg');
	dlg.addKeyListener(27, dlg.hide, dlg);

    // add some buttons
    //dlg.setDefaultButton(dlg.addButton('Ok', dlg.hide, dlg));
    //dlg.on('show', this.sortImages, this);
	this.dlg = dlg;
	var layout = dlg.getLayout();

	this.tb = new Ext.Toolbar(this.dlg.body.createChild({tag:'div'}));
	this.sortSelect = Ext.DomHelper.append(this.dlg.body.dom, {
		tag:'select', children: [
			{tag: 'option', value:'level', selected: 'true', html:'Plans de niveau'},
			{tag: 'option', value:'front', html:'Plans de facade'},
			{tag: 'option', value:'flat', html:'Plans d\'appartement'}
		]
	}, true);
	this.sortSelect.on('change', this.sortImages, this, true);
	this.tb.add('Afficher :', this.sortSelect.dom);
	this.tb.addSeparator();
	this.tb.add(' Cliquez pour agrandir les vignettes');

	// add the panels to the layout
	layout.beginUpdate();
	var vp = layout.add('center', new Ext.ContentPanel(Ext.id(), {
		autoCreate : true,
		toolbar: this.tb,
		fitToFrame:true
	}));
	layout.endUpdate();

	var bodyEl = vp.getEl();
	bodyEl.appendChild(this.tb.getEl());
	this.viewBody = bodyEl.createChild({tag:'div', id:'listImgs',style:'overflow-x:none;'});


	Ext.apply(this, config, {width: 580, height: 400});
	dlg.resizeTo(config.width, config.height);
	this.sortImages();
	dlg.resizeTo(config.width+10, config.height+20);
};

popupPgms.prototype = {

	show : function(el){
	    this.dlg.show(el);
	},

	hide : function(){
	    this.dlg.hide();
	},

	sortImages : function(){
		Ext.get('listImgs').dom.innerHTML ='';
		els = Ext.Element.select('a.'+this.sortSelect.dom.value,true);
		els.each(this.insertImage,this);
	},

	insertImage: function(el, obj, index){
		newTitle = 'Cliquez pour agrandir';
		if(el.dom.title !=''){
			newTitle = el.dom.title;
		}
		Ext.DomHelper.append('listImgs',{tag: 'a', href:el.dom.href.replace('thumb_',''),onclick:"loaderPgms.hide();myLightbox.start(this);return false;",rel:'lightbox[type'+this.sortSelect.dom.value+']', title:newTitle, style:'display:block;float:left;background:#C3DAF9 none repeat scroll 0%;border:2px solid #6593CF;padding:3px;height:177px;margin:5px 0 0 5px;',children: [{tag: 'img', src: el.dom.href, width:'250px',height:'177px',alt:'Cliquez pour agrandir'}]},true).show(true);
	}

};