//Constructor a new modal window. Takes an options object
function modalWindow(options){
	
	//If no options or HTML element provided, do nothing
	if(isNullOrEmpty(options) || isNullOrEmpty(options.id)){
		return;
	}

	//If a previous modal exists based on the same HTML element remove it so we can replace it
	jQuery(options.id + '-screen, ' + options.id + '-container').remove();

	this.id = options.id; //HTML ID of th element to turn into a modal
	this.title = options.title; //Title of the modal
	this.subtitle = options.subtitle; //Optional subtitle of the modal
	this.icon = options.icon; //Icon for the modal title. Takes an image filename (i.e. "icon.png")
	this.width = ifNotEmpty(options.width, '700px'); //Optional width of the modal. Defaults to 700px
	this.closeButton = options.closeButton != null && options.closeButton == false ? false : true;
	this.zindex = ifNotEmpty(options.zindex, '100');

	var obj = this;
	
	//Build the modal skeleton. Wraps the element in a container and adds a screen to mask page content
	this.initModal = function(){
		var html = '<div class="modalScreen no-display" id="' + this.id.substr(1) + '-screen"></div>' +
			'<div class="modalContainer no-display" id="' + this.id.substr(1) + '-container">' +
			'<div class="modalWindow">';
		
		if(this.closeButton){
			html += '<a href="javascript:void(0)" class="modalClose">' + 
			'<i class="material-icons notranslate">close</i>' + 
			'</a>';
		}
		
		if(this.icon){
			html += '<i class="material-icons notranslate modalIcon">' + this.icon + '</i>' + 
				'<div class="modalTitle" ';
		} else{
			html += '<div class="modalTitle noicon" ';
		}
		
		html += 'tabindex="0"></div>' +
			'<hr class="blue" />' +
			'<div class="modalContent"></div>' +
			'</div>' + //end window
			'</div>'; //end container;

		//Add the container and screen to the page
		jQuery('body').prepend(html);
		
		//Add the HTML element to the container
		jQuery(this.id + '-container .modalContent').append(jQuery(this.id));
		
		
		this.buildTitle();
		this.resize(this.width);

		//Event handler for the X button
		jQuery(this.id + '-container .modalClose').click(function(e){			
			obj.closeModal();
		});
		
		/*
		//Closes the modal when user clicks outside of it
		jQuery(this.id + '-container .modalWindow').click(function(e){
			e.stopPropagation();
		});
		
		jQuery(this.id + '-screen,' + this.id + '-container').click(function(){
			obj.closeModal();
		}); */
		
		//Close the modal on esc key
		jQuery(window).keyup(function(e){
			if(e.keyCode == 27){
				obj.closeModal();
			}
		});
	};	
	
	//Displays the modal
	this.openModal = function(){
		jQuery(this.id + '-screen').fadeIn();		
		jQuery(this.id + '-container').fadeIn();
		jQuery(this.id).show();
		jQuery('html,body').scrollTop(0);		
		jQuery(this.id + '-container .modalTitle').focus();
	};

	//Hides the modal
	this.closeModal = function(){		
		jQuery(this.id + '-screen').fadeOut();
		jQuery(this.id + '-container').fadeOut();
		jQuery(this.id).hide();
	};

	//Updates the modal width
	this.resize = function(newWidth){
		this.width = newWidth;
		jQuery(this.id + '-container .modalWindow').css('width', this.width);
	};

	//Updates the modal zindex
	this.setZindex = function(newZindex){
		this.zindex = newZindex;
		jQuery(this.id + '-screen').css('z-index', this.zindex - 1);
		jQuery(this.id + '-container.modalContainer').css('z-index', this.zindex);
	};

	//Populate the title/subtitle
	this.setTitle = function(title, subtitle){
		this.title = title;
		this.subtitle = subtitle;
		this.buildTitle();
	};

	//Builds the title/subtitle html
	this.buildTitle = function(){
		html = '<div>' + this.title + '</div>';

		if(this.subtitle){
			html += '<div>' + this.subtitle + '</div>';
		}
		jQuery(this.id).parent().parent().find('.modalTitle').html(html);
	};

	this.initModal();
}