//extend the plugin
(function($){

	//define the new for the plugin ans how to call it	
	$.fn.contactable = function(options) {
		//set default options  
		var defaults = {
		    title: 'Title',
			namesq: 'Name',
			emailsq: 'Email',
			mobilesq : 'Mobile No',
			commentsq : 'Tour Details',
			packagesq : 'Tour Details',
			recievedMsg : 'Thankyou for your message',
			notRecievedMsg : 'Sorry but your message could not be sent, try again later',
			disclaimer: '',
			hideOnSubmit: true
		};

		//call in the default otions
		var options = $.extend(defaults, options);
		//act upon the element that is passed into the design    
		return this.each(function(options) {
			//construct the form
			$(this).html('<div id="contactable"></div><form  id="contactForm"  name="contactForm" method="post" action="contactForm.asp" onsubmit="return validation()"><div id="loading"></div><div id="callback"></div><div class="holder"><p><select name="title" class="mendatry_txt2" id="title"><option value="Mr.">Mr.</option><option value="Ms.">Ms.</option><option value="Mrs.">Mrs.</option></select></p><p><label for="name">Name <span class="red"> * </span></label><br /><input id="namesq" class="contact" name="namesq" /></p><p><label for="email">E-Mail <span class="red"> * </span></label><br /><input id="emailsq" class="contact" name="emailsq" /></p><p><label for="mobile">Mobile No. <span class="red"> * </span></label><br /><input id="mobilesq" class="contact" name="mobilesq" /></p><p><label for="comment">Tour Details</label><br /><textarea id="commentsq" name="commentsq" class="comment" rows="4" cols="30" ></textarea></p><p><select name="packagesq" class="mendatry_txt2" id="slectpackage"><option>Select Package</option><option value="Kerla">Kerla</option><option value="Kashmir">Kashmir</option><option value="Goa">Goa</option><option value="Port Blair">Port Blair</option><option value="Dubai">Dubai</option></select></p><p><input class="submit" type="submit" name="submitsq" value="Send"/></p><p class="disclaimer">'+defaults.disclaimer+'</p></div></form>');
			//show / hide function
			$('div#contactable').toggle(function() {
				$('#overlay').css({display: 'block'});
				$(this).animate({"marginLeft": "-=5px"}, "fast"); 
				$('#contactForm').animate({"marginLeft": "-=0px"}, "fast");
				$(this).animate({"marginLeft": "+=257px"}, "slow"); 
				$('#contactForm').animate({"marginLeft": "+=390px"}, "slow"); 
			}, 
			function() {
				$('#contactForm').animate({"marginLeft": "-=390px"}, "slow");
				$(this).animate({"marginLeft": "-=257px"}, "slow").animate({"marginLeft": "+=5px"}, "fast"); 
				$('#overlay').css({display: 'none'});
			});
			
			//validate the form 
			$("#contactForm").validate({
				//set the rules for the fild names
				rules: {
					name: {
						required: true,
						minlength: 2
					},
					email: {
						required: true,
						email: true
					},
					comment: {
						required: true
					}
				},
				//set messages to appear inline
					messages: {
						name: "",
						email: "",
						comment: ""
					},			

				submitHandler: function() {
					$('.holder').hide();
					$('#loading').show();
					$.post('mail.php',{subject:defaults.subject, name:$('#name').val(), email:$('#email').val(), comment:$('#comment').val()},
					function(data){
						$('#loading').css({display:'none'}); 
						if( data == 'success') {
							$('#callback').show().append(defaults.recievedMsg);
							if(defaults.hideOnSubmit == true) {
								//hide the tab after successful submition if requested
								$('#contactForm').animate({dummy:1}, 2000).animate({"marginLeft": "-=300px"}, "slow");
								$('div#contactable').animate({dummy:1}, 2000).animate({"marginLeft": "-=300px"}, "slow").animate({"marginLeft": "+=5px"}, "fast"); 
								$('#overlay').css({display: 'none'});	
							}
						} else {
							$('#callback').show().append(defaults.notRecievedMsg);
						}
					});		
				}
			});
		});
	};
})(jQuery);