var HLWindow = function(att){

	//att.id
	//att.height: the height of the window
	//att.width: the width of the window
	//att.top : the top of the window
	//att.left: the left of the window, if empty the att.left will be set top the middle.
		HL.StrEmpty(att.left)? att.left = (document.viewport.getWidth() - att.width)/2 : ''
	//att.title : when not null the title will be set on top of the window.
	//att.border: shows the inner border if true. true by default
		att.border == 0? att.border = false : att.border = true;
	//att.html: the content that needs to be shown in the border
	//att.closable : when true the close button will be shown in the window : default is false
		att.closable == 1? att.closable = true : att.closable = false;


	//when a window is opened, the background is set to black
	this.PopupBack = new Element("DIV", {id: att.id + 'PopupBack'});
	Element.addClassName(this.PopupBack, 'PopupBack');
	document.body.insert(this.PopupBack);
	this.PopupBack.style.height = Element.getHeight($("Container")) + 40 + 'px';
	
	//create window
	this.Window = new Element("DIV", {id:att.id});
	Element.addClassName(this.Window, "Window");
	Element.setStyle(this.Window, "width:" + att.width + "px; height:" + att.height + "px; top:" + att.top + "px; left:" + att.left + "px;")
	document.body.insert(this.Window);
	
	//create table border for the window
	var str = '<table cellspacing="0" cellpadding="0">';
		str += '<tr>';
			str += '<td>';
				str += '<img src="/media/window/tl.png" />';
			str += '</td>';
			str += '<td style="width:' + att.width + 'px; background-image: url(/media/window/t.png);">';
				str += '';
			str += '</td>';
			str += '<td>';
				str += '<img src="/media/window/tr.png" />';
			str += '</td>';
		str += '</tr>';
		
		str += '<tr>';
			str += '<td style="height:' + att.height + 'px; background-image: url(/media/window/l.png);">';
			str += '</td>';
			str += '<td style="background-image: url(/media/window/middle.png); background-color:#e8f1f8; background-repeat:repeat-x;">';
				if(!HL.StrEmpty(att.title)){
					str += '<div class="Window-Title">';
						str += att.title
					str += '</div>';
				}
				if(!HL.StrEmpty(att.closable)){
					str += '<div style="width: ' + att.width + 'px; text-align:right; margin-top:-18px;" id="' + att.id + 'Close">';
						//str += '<a href="javascript:void(0)" onClick="alert(w)">';
						//	str += '<span class="button-icon-logout">&nbsp;</span>';
						//str += '</a>';
					str += '</div>';
				}
				
				str += '<div class="Window-Border-' + att.border + '" style="height:' + Number(att.height-25) + 'px;">';
					str += att.html;
				str += '</div>';
			str += '</td>';
			str += '<td style="height:' + att.height + 'px; background-image: url(/media/window/r.png);">';
			str += '</td>';
		str += '</tr>';
		
		str += '<tr>';
			str += '<td>';
				str += '<img src="/media/window/bl.png" />';
			str += '</td>';
			str += '<td style="width:' + att.width + 'px; background-image: url(/media/window/b.png);">';
				str += '';
			str += '</td>';
			str += '<td>';
				str += '<img src="/media/window/br.png" />';
			str += '</td>';
		str += '</tr>';
	str += '</table>';
	

	this.Window.innerHTML = str;
	
	//make the close button
	if(!HL.StrEmpty(att.closable)){
		this.CloseButton = new Element("SPAN", {id:att.id + 'close'});
		Element.addClassName(this.CloseButton, "button-icon-logout");
		$(att.id + "Close").insert(this.CloseButton);
		
		this.CloseButton.onclick = (function(obj) { 
      		return function () {
		  		obj.Close()
			}
	  	})(this)

		
	}
	

	this.Close = function(){
		Element.remove(this.Window);
		Element.remove(this.PopupBack);
	}

	return{
		Test: function(){
			alert(this.Window)	
		}
		
		
			
	};
}