var popup = {
	html : new HtmlRequest(),
	dd : new DragDrop(),
	
	
	make : function(path, e, customCallback){
		var that = this;
		this.html.makeRequest('popup/' + path + (path.indexOf('?') != -1 ? '&' : '?') + 'inline=1', 0, function(content){
			that.build(content, e, customCallback);
		});
		
		return true;
	},
	
	// removes the popup
	destroy : function(d){
		if (d){
			document.body.removeChild(d);
		}
		// hide fadeLayer
		if (this.fadeLayer)
			this.fadeLayer.style.display = 'none';
	},

	
	build : function(content, e, customCallback){
		// get desired position for popup
		if (e && e.clientX && e.clientY)
			e = [e.clientX, e.clientY];
		else if (!e || !e[0] || !e[1])
			e = [200,200];
		
		// make the container
		var d = this.makeContainer();
		
		// fill container
		d.innerHTML = content;
		
		// add close X
		var x = base2.DOM.bind(d.appendChild(document.createElement('img')));
		x.setAttribute('popup_event', 'click|close');
		x.setAttribute('src', 'images/site/misc/closeX.png');
		x.classList.add('closeX');
		
		// make draggable
		this.dd.addElements(d);
		
		// show fadeLayer
		if (this.fadeLayer)
			this.fadeLayer.style.display = 'block';

		// add to page
		document.body.appendChild(d);
		
		
		// position container (must be done after adding to page)
		var	vp = domProperties.viewportDim(),
				el = domProperties.elementDim(d);
		
		// make sure its not overlapping the edge of the page
		e[0] = e[0] - Math.max(0, (el.x + e[0] + 10 - vp.x));
		e[1] = e[1] - Math.max(0, (el.y + e[1] + 10 - vp.y));
		
		d.style.left = e[0] + 'px';
		d.style.top = e[1] + 'px';
		
		
		// add events
		this.addEvents(d);
		
		// apply callback function
		if (customCallback)
			customCallback(d);
		else
			this.callback(d);
		
		// display
		d.style.visibility = 'visible';
	},
	
	makeContainer : function(){
		var d = document.createElement('div'),
		style = {
			'visibility' : 'hidden',
			'overflow' : 'auto',
			'zIndex' : 9999,
			'position' : 'absolute',
			'top' : '-1000px',
			'left' : '0px'
		};
		for (var i in style)
			d.style[i] = style[i];
			
		d.className = 'popup';
		base2.DOM.bind(d);
		return d;
	},
	
	callback : function(d){
		var that = this;
		// hijack form here
		d.querySelector('form').addEventListener('submit', function(e){
			if (!formCheck.check(this, 0, [0,10]))
				return killEvent(e);
			else if (miscInfo.authUserId || !form.classList.has('require-auth')){
				return !actions.submitForm(this, function(data){
					if (data.response.type == 'pos'){
						that.destroy(d);
					} 
				}) || killEvent(e);
			}
		}, 1);
	},
	
	// adds events to elements that have the 'popup_event' attribute. Events are listed in the switch statement- just 'close' to start with
	addEvents : function(d){
		var els = d.getElementsByTagName('*'), i, il, events, event, f, that = this;
		for (i = 0, il = els.length; i< il; i++){
			if (event = els[i].getAttribute('popup_event')){
				event = event.split(';');
				for (var j = 0; j < event.length; j++){
					event[j] = event[j].split('|');
					switch(event[j][1]){
						case 'close':
							f = function(){
								that.destroy(d);
							};
						break;
					}
					if (f)
						addEvent(els[i], event[j][0], f);
				}
			}
		}
	}

};