/* 

	HTML5 Modal Contact Form
	Version:    1.0
	Created By: Tyler Colwell
	Website:    http://tyler.tc/
	
	Copyright © 2010 Tyler Colwell
	
*/

(function($){

	$.fn.html5ModalContact = function(options){
		
			/* Setup the options for the tooltip that can be
			   accessed from outside the plugin              */
			var defaults = {
				method: "post",
				action: "process_form.php",
			};
			
			// Extend options and apply defaults if they are not set
			var options = $.extend(defaults, options);
				
			/* Create a function that builds the form html
			   markup. Then, prepend the html to the body */
			getPopHTML = function() {
				
				var modal = '<div id="modal-form-bg"></div><div id="modal-form"><img src="images/close.png" id="close-modal-form" /><form action="' + options.action + '" method="' + options.method + '" name="html5-contact-box" id="html5-contact-box" ><div id="modal-form-right"><label for="subject">Subject*</label><select class="input_field" required="required" name="subject" id="subject"><option value="General">General</option><option value="Lettings">Lettings</option><option value="Investments">Investments</option><option value="Other Comments">Other Comments</option><option value="Property marketing">Property marketing</option></select><label for="message">Message*</label><textarea name="message" cols="50" rows="5" class="input_field" id="message" required="required"></textarea><br /><input name="contact" value="Send" id="contact" type="submit" /></div><label for="name">Name*</label><input name="name" type="text" class="input_field" id="name" size="26" required="required" placeholder="Your Name" /><label for="email">Email*</label><input name="email" type="text" size="26" class="input_field" id="email" required="required" placeholder="Your Email Address" /><label>Phone* <small style="font-size:10px;"></small></label><input name="phone" type="text" class="input_field" size="26" required="required" placeholder="Your Phone Number" /></form></div>'
							
				// Return the pop up markup
				return modal;
				
			}
			
			// Create a variable to hold the markup ( Needed For I.E 8 6 + 7 )
			var markup = getPopHTML();
			
			// Prepend the popup into the body of the page
			$('body').append( markup );
															
			// Get window width and height to make adjustments
			var windowWidth = document.documentElement.clientWidth;
			var windowHeight = document.documentElement.clientHeight;
			var modal_bg = $("#modal-form-bg");
			var modal_forground = $("#modal-form");
			
			// Set height for background element to create shadow
			modal_bg.css({"height": windowHeight});
						
			// Set the background shadow active - higher opactity = darker background shadow
			modal_bg.css({"opacity": "0.4"});
			
			// Fade in the background shadow
			modal_bg.fadeIn("slow");
			
			// Fade in the HTML form box
			modal_forground.fadeIn("slow");
			
			// Bind close action to close button
			$("#close-modal-form").bind("click", closeModal);
			
			// Function to remove the form from the screen
			function closeModal(){
						
				// Fade out the background shadow
				modal_bg.fadeOut("slow");
						
				// Fade out the modal itself
				modal_forground.fadeOut("slow");

				// Remove modal from source
				modal_bg.remove();
				modal_forground.remove();				
				
					
			} // End close Function
			
			// Detect form submit and send to processor
			$('#html5-contact-box').submit(function() {
				
				// Get form data to send to php script
				var data = $(this).serialize();
				
				// Send form data via Ajax
				$.ajax({
					type: options.method,
					url: options.action,
					data: data,
					// On success of sending dispay the message
					success: function(html) {
						$('#modal-form').html(html);
						// Bind close action to close button
						$("#close-modal-form").bind("click", closeModal);
					}
				});
				
				/* Always return false j Q u e r y
				                        . . . . .  */
				return false;
				
			});			
												
	}; // End Main Function

})(jQuery); // End Plugin