if(!mapness){
	var mapness = {};
}

if(!mapness.ui){
	mapness.ui = {};
}

mapness.ui.modal = {
	content : '',
	modal : null,
	settings : {
		height	:	300,
		width	:	300,
		addOverlay	:	true,
		draggable	:	false
	},
	
	addOverlay : function(){
		$("body").append(
			$([
				this.modalOverlay = $('<div id="modalBackgroundOverlayMV" />')[0]
			])
		)
		
	},
	
	addContainer : function(){
		var fixedHeight = this.settings.height;
		var fixedWidth = this.settings.width;
		
		$("body").append(
			$([
				this.modal = $('<div id="colorboxMV" />')[0] 
			])
		);
		
		$(this.modal).css({
			display: 'block',
			paddingBottom: '42px', 
			paddingRight: '42px', 
			height: fixedHeight+'px',
			width: fixedWidth+'px'
		}); 
		
		$(this.modal).append(
			$([
				this.modalWrap = $('<div id="modalWrapMV" />')[0]
			])
		);
		
		$(this.modalWrap).append(
			$([
				$('<div><div id="borderTopLeftMV"></div><div id="borderTopCenterMV"></div><div id="borderTopRightMV"></div></div>')[0],
				this.bml = $('<div id="borderMiddleLeftMV" />')[0],
				this.modalContent = $('<div id="modalContentMV" />')[0],
				this.bmr = $('<div id="borderMiddleRightMV" />')[0],
				$('<div><div id="borderBottomLeftMV"></div><div id="borderBottomCenterMV"></div><div id="borderBottomRightMV"></div></div>')[0]
			])
		);
		this.btc = $("#borderTopCenterMV")[0];
		
		$(this.btc).css({
			width: fixedWidth+'px'
		});
		
		$(this.bml).css({
			height: fixedHeight + 'px'
		});
		
		$(this.modalContent).css({
			height: fixedHeight+'px',
			width: fixedWidth+'px'
		});
		
		$(this.bmr).css({
			height: fixedHeight + 'px'
		});
		
		this.bbc = $("#borderBottomCenterMV")[0];
		
		$(this.bbc).css({
			width: fixedWidth+'px'
		})
		
		$(this.modalContent).append(
			$([
				this.modalClose = $('<a id="modalCloseMV" href="javascript:;"></a>')[0]
			])
		);
	},
	
	addContent : function(){
		$(this.modalContent).append(this.content);
	},
	
	center : function(){
		var fixedHeight = this.settings.height;
		var fixedWidth = this.settings.width;
		var winHeight = document.documentElement.clientHeight;
		var posTop = winHeight/2 - fixedHeight/2 + $(window).scrollTop();
		var posLeft = document.documentElement.clientWidth/2 - fixedWidth/2 + $(window).scrollLeft();
		//keeps the box from expanding to an inaccessible area offscreen.
		if(fixedHeight > winHeight){posTop -=(fixedHeight - winHeight);}
		if(posTop < 0){posTop = 0;} 
		if(posLeft < 0){posLeft = 0;}
		$(this.modal).css({
			top:posTop, 
			left:posLeft
		})
	},
	
	addListeners : function(){
		var that = this;
		$(this.modalClose).click(mapness.ui.modal.destroy);
		if (this.settings.draggable){
			$(this.modal).draggable({
				handle: '#borderTopCenterMV'
			});
		}
	},
	
	destroy : function(fade){
		if(!fade){
			$(mapness.ui.modal.modal).remove();	
			$(mapness.ui.modal.modalOverlay).remove();		
		}else{
			$(mapness.ui.modal.modal).fadeOut(500, function(){
				$(this).remove();
			});
			if(mapness.ui.modal.settings.addOverlay){
				$(mapness.ui.modal.modalOverlay).fadeOut(700, function(){
					$(this).remove();
				});
			}
		}
		mapness.ui.modal.modal = null;
		mapness.ui.modal.content = '';	
	},
	
	init : function(content, settings){
		if(mapness.ui.modal.modal !== null){
			this.destroy();
		}
		
		this.content = content;
		this.settings = $(this.settings).extend({}, this.settings, settings);
		
		
		if (this.settings.addOverlay) {
			this.addOverlay();
		}
		
		this.addContainer();
	
		this.addContent();
	
		this.center();
		
		this.addListeners();
	
	},
	
	displayImage : function(imageUrl, caption){
		mapness.ui.modal.init('<div class="image-loading"><img src="/images/ajax-loader2.gif"></div>', {width: 300, height: 300, addOverlay: false, draggable: true});
		var imageDOM = document.createElement('img');
		imageDOM.src = imageUrl;
		imageDOM.onload = function(){
			mapness.ui.modal.init('<div class="modal-lightbox"><div class="modal-image"><img src="'+imageUrl+'"></div><div class="modal-caption">'+caption+'</div></div>', {width: imageDOM.width, height: (imageDOM.height+40), addOverlay: true, draggable: true});
		};
	}

}

