var wrBox = Class.create({
     initialize: function(containerClass,hideitClass) {
	this.wrContainer = null;
	containerClass == null ? this.containerClass="wr_container": this.containerClass = containerClass ;
	hideitClass == undefined ? this.hideitClass="wr_hidden": this.hideitClass = hideitClass ;
	this.opacity = 0.8;
	this.h_height = "749px";
	this.h_width = "1440px";
	this.background_color = "#000000";
	this.hidden2El;
	this.closeimg = "/invent/prox/img/closelabel.gif";
     
     },
 
    		
     getbox: function(thumb,content,title) {

// create the container for the overlay. 
//  hidediv is the overlay element, w dynamically generated id. 
		var hidediv = new Element('div',{'class': this.hideitClass});
		//TODO -- no use putting it here - one object per thumbnail !
		this.hidedivId = hidediv.identify();
		logme(this.hidedivId);
		hidediv.hide();
		var wr_thumb_class = 'wr_thumb';
		var wr_close_img_class = 'wr_close_img';
		var wr_close_class = 'wr_close';
		var thumbdiv = '<img class="wr_thumb" src="'+thumb+'" />';
		//		var thumbdiv = new Element('img',{'class':wr_thumb_class,'src':thumb});
		var closediv = new Element('div',{'class':wr_close_class});
		var closeimgdiv = new Element('img',{'class':wr_close_img_class,'src':this.closeimg});
	
		closeimgdiv.setStyle({'float':'left'});

	 	 var container = new Element('div',{'class':this.containerClass});
	                       
	 	var conid = container.identify();
		//Alan's idea
		var ael = new Element('a',{'href':'javascript:'+this.getjs(this.hidedivId)});
		var aelhide = new Element('a',{'href':'javascript:'+this.getjsHide(this.hidedivId)});

		ael.insert(thumbdiv);
		
		container.insert(ael);
		aelhide.insert(closeimgdiv);
		
		
	//	aelhide.insert('<br/><span style="color:red;">close</span>');
		
		closediv.insert(aelhide);
		hidediv.insert(content);
	        container.insert(hidediv);


	this.hidden2El.insert(closediv);
		this.wrContainer = container;
		return container;
	},
	
/**
 * Create the javascript for the anchor to toggle overlay
 * 
 * @param id
 */
	
	getjs: function(id) {
		var js;
	

		// this js changes the class attribute
		// add testoverlay className to id (-- currently wr_hidden)
		// toggle id visible.
		

		
		js = "var bl = function() " +
		"{$$('#lbox').each(function(n){ n.remove()});" +
		"$$('#overlay1').each(function(n){ n.remove()});" +
		"var cn = $('" +id+"').cloneNode(true);" +
		"cn.show();" +	
		"var lb = new Element('div',{'id':'lbox','class':'lbox'});" +
		"var lbwrap = new Element('div',{'id':'lbox_wrapper'});" +
		"lbwrap.insert(cn);" +
		"lb.insert(lbwrap);" +
		"document.body.appendChild(lb);"  +
		"document.body.appendChild(new Element('div',{'class':'overlay'," +
		"'id':'overlay1','style':'display: none'}));" +
		"Effect.Appear('overlay1', { duration: 0.2,to: 0.8,queue:{position: 'front',scope: 'overlay'} });"+
	//	"Effect.Appear('rss_image', { duration: 0.5,to: 1,queue:{position: 'end',scope: 'overlay'} });" +
		"};" +
		"bl();void 0;";
				
		
		
		return js;
		
	},

	getjsHide: function(id) {
		var js;
	

		// this js changes the class attribute
		
		js = "Effect.Fade('overlay1', { duration: 0.5,to: 0 });" +
				"$('lbox').remove();" +
			//	"$('overlay1').remove();" +
				"void 0;";

		
		
		return js;
		
	},
	makeContentBox: function(title,desc,image,link,creator,creatorLink) {
	
	
	var out = '<div class="wr_image"><img class="rss_image" src="'
	+image+'" alt="image..."/>'
	+'</div>'+
	'<div class="wr_title">'
	+title+
    '</div> <div class="wr_desc">'
	+desc+ '</div><div class="wr_creator"> '+
	'<a href="'
	+link+
	'" class="wr_item_link" target="_blank" style="text-decoration: underline;' + 
	'color: red;">' +
	creator + 
	'</a>&nbsp;'+
        '<a href="'
	+link+
        '" class="wr_item_link" target="_blank" style="text-decoration: none;' +
        'color: red;">' +
	'<img src="http://esf.lesc.doc.ic.ac.uk/invent/prox/icon_external.png"/>'+
        '</a>'	
	'</div>';
	// <div class="wr_creator">'+
	//	'<span style="color: gray">></span>source: '+


	//	'" class="wr_item_link" target="_blank" style="text-decoration: underline;' + 
	//	'color: red;">more ...</a></div><div class="wr_creator">'+
	//	'<span style="color: gray">></span>source: '+

	//	'<a class="wr_creator_link" style="text-decoration: underline; color: red;" href="'
	//	+creatorLink+
	//	'">'
	//	creator+
	

	//	'</a></div>';
	var outdiv = new Element('div',{'class':'wr_hidden2'});
	this.hidden2El = outdiv;
	return outdiv.insert(out);
	
	
	
}
	
     });