//----------------Start class pic popup---------------------
var popupPic = new Class({
	initialize : function(urlpic,idpic,titlepic){
		this.urlpic = urlpic;
		this.idpic = idpic;
		this.titlepic = titlepic;
	},
	buildAsset : function(){
		
		var urlpic = this.urlpic;
		var asseting = new Asset.image(urlpic,{id : this.idpic,
									title : 'bag picture no 1'
								});
		if(asseting){
			return asseting;
		}else{
			return false;
		}
	},
	addContainer : function(injector){
		var image = this.buildAsset();
		image.addClass('imagepopup');
		var el = new Element("div",{"class" : "popupcontainer",
										"styles" : {
											'opacity' : 0
										}
									});
		var eltop = new Element("div",{'class' : 'popuphead'}).injectInside(el);
		var elbody = new Element("div",{'class' : 'popupbody'}).injectAfter(eltop);
		var elfooter = new Element("div",{
					'class' : 'popupfooter'
					}).injectAfter(elbody);
		var elclosecontainer = new Element("div",{'class' : 'closecontainer'}).injectInside(eltop);
		var btnclose = new Element("div",{
					'class' : 'closepopup',
					'styles' : {
						'cursor' : 'pointer'
					},
					'events' : {
						'click' : function(){
							var fxdisappear = el.effect('opacity',{duration:500});
							fxdisappear.start(1,0).chain(function(){
								el.remove();
							});
						}
					}
				 }).injectInside(elclosecontainer);
		var title = new Element("h2").injectInside(elbody);
		title.setText(this.titlepic);
		if(image){
			image.injectInside(elbody);
		}else{
			return false;
		}
		el.injectInside(injector);
		var fxshowing = new Fx.Styles(el,{duration:500,wait:false});
		fxshowing.start({
			'opacity' : [0,1]
		});
		el.makeDraggable({
			handle : eltop
		});
	}
});
//----------------End class pic popup-----------------------