var $fb;
	
	function submitFB() {

		var name = $('#name').val();
		var contact = $('#contact').val();
		var source = $('#source').selectedValues().join(' , ');
		var othersource = $('#othersource').val();
		var visitsuccess = $('#visitsuccess').selectedValues().join(' , ');
		var easysearch = $('#easysearch').selectedValues().join(' , ');
		var lessthan = $('input[name="lessthan"]:checked').val();
		var bestop = $('#bestop').selectedValues().join(' , ');
		var feature = $('#feature').val();
		var workmodel = $('#workmodel').val();
		var seemore = $('#seemore').val();
		var improve = $('#improve').val();
		var awareness = $('#awareness').val();
		var experience = $('#experience').selectedValues().join(' , ');
		var recommend = $('input[name="recommend"]:checked').val();

		var subjectVal = "braillecards.org has received a feedback!";
		var messageVal =
		"\n\n" + $('#nameQ').html() + "\n\t" + name + 
		"\n\n" + $('#contactQ').html() + "\n\t" + contact + 
		"\n\n" + $('#sourceQ').html() + "\n\t" + source + "\n\t" + othersource + 
		"\n\n" + $('#visitsuccessQ').html() + "\n\t" + visitsuccess + 
		"\n\n" + $('#easysearchQ').html() + "\n\t" + easysearch + 
		"\n\n" + $('#lessthanQ').html() + "\n\t" + lessthan +
		"\n\n" + $('#bestopQ').html() + "\n\t" + bestop + 
		"\n\n" + $('#featureQ').html() + "\n\t" + feature + 
		"\n\n" + $('#workmodelQ').html() + "\n\t" + workmodel + 
		"\n\n" + $('#seemoreQ').html() + "\n\t" + seemore + 
		"\n\n" + $('#improveQ').html() + "\n\t" + improve + 
		"\n\n" + $('#awarenessQ').html() + "\n\t" + awareness + 
		"\n\n" + $('#experienceQ').html() + "\n\t" + experience + 
		"\n\n" + $('#recommendQ').html() + "\n\t" + recommend;

		$.ajax({
			type: "GET",
			url: "contact.php", 
			data: {to: 'eshabraille@gmail.com', subject: subjectVal, message: messageVal}, 
			cache: false, 
			async: false, 
			success: function(m){
						alert("Thanks for your invaluable feedback. We really appreciate it and will do our best to incorporate your suggestions.");
						$fb.dialog('close');
					}
		});

		return false;
	}

	function buildFB() {

		$fb = $('<div style="overflow:auto;"></div>')
			.html('<span class="content">We would love to hear from you! <br/><br/>' +
		  'Please take a minute to fill up this form.. we take feedback very seriously!! <br/><br/></span>' +
			'<table width="550px" class="content" border="0">' +
			  '<tr valign="top">' +
				'<td id="nameQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">1. Your Name</td>' +
				'<td>' +
				  '<input type="text" size="23" id="name"></input>' +
				'</td>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '</tr><tr valign="top">' + 
				'<td id="contactQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">2. Any contact information</td>' +
				'<td>' +
				  '<textarea rows="2" cols="20" id="contact" size="30"></textarea>' +
				'</td>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '</tr><tr valign="top">' + 
				'<td id="sourceQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">3. How did you come to our website?</td>' +
				'<td>' +
				  '<select id="source" style="font-size:0.9em;width:163px">' +
					'<option value="" selected>Select One</option>' +
					'<option value="Generally browsing">Generally browsing</option>' +
					'<option value="Research on blindness">Research on blindness</option>' +
					'<option value="Research on Braille">Research on Braille</option>' +
					'<option value="Research on disability">Research on disability</option>' +
					'<option value="Unrelated Search">Unrelated Search</option>' +
					'<option value="Friend recommended">Friend recommended</option>' +
					'<option value="Forwarded Link">Forwarded Link</option>' +
					'<option value="Other">Other</option>' +
				  '</select>' +
				'</td>' +
			 '</tr>' +
			 '<tr valign="top">' +
				'<td style="font-size:0.9em;background-color:#FFFCCC;width:400px;" align="right">Other (please tell us more)</td>' +
				'<td>' +
				  '<input type="text" size="23" id="othersource"></input>' +
				'</td>' +
			 '</tr>' +
			 '</tr><tr><td height="3px"></td></tr>' +
			 '<tr valign="top">' +
				'<td id="visitsuccessQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">4. Was your objective met by this visit?</td>' +
				'<td>' +
				'<select id="visitsuccess" style="font-size:0.9em;width:163px">' +
				  '<option value="" selected>Select One</option>' +
				  '<option value="Not at all"> Not at all </option>' +
				  '<option value="Not to a great degree"> Not to a great degree </option>' +
				  '<option value="Almost"> Almost </option>' +
				  '<option value="Just about"> Just about </option>' +
				  '<option value="Yes, a little pretty much"> Yes, a little pretty much </option>' +
				  '<option value="Yes, completely!"> Yes, completely! </option>' +
				 '</select>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="easysearchQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">5. Is the information on the website easy to search?<br/></td>' +
				'<td>' +
				'<select id="easysearch" style="font-size:0.9em;width:163px">' +
				  '<option value="" selected>Select One</option>' +
				  '<option value="Yes"> Yes </option>' +
				  '<option value="To some extent"> To some extent </option>' +
				  '<option value="Not really"> Not really </option>' +
				  '<option value="Just about"> Just about </option>' +
				  '<option value="No"> No </option>' +
				 '</select>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="lessthanQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">6. Were you able to get the information you wanted in under 30 seconds?</td>' +
				'<td style="font-size:0.9em;width:163px">' +
				  '<input type="radio" name="lessthan" value="Yes"> Yes </input>' +
				  '&nbsp;&nbsp;&nbsp;' +
				  '<input type="radio" name="lessthan" value="No"> No </input>' +
				'</td>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="bestopQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">7. What, according to you, is the most sustainable operation of Esha?</td>' +
				'<td>' +
				'<select id="bestop" style="font-size:0.9em;width:163px">' +
				  '<option value="" selected>Select One</option>' +
				  '<option value="Braille enabled visiting cards"> Braille enabled visiting cards </option>' +
				  '<option value="Accessibility Audits"> Accessibility Audits </option>' +
				  '<option value="Theater Workshops"> Theater Workshops </option>' +
				  '<option value="None of These"> None of These </option>' +
				'</select>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="featureQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">8. What did you like best about the website?</td>' +
				'<td>' +
				  '<textarea rows="2" cols="20" id="feature"></textarea>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="workmodelQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">9. What did you like best about our work model?</td>' +
				'<td>' +
				  '<textarea rows="2" cols="20" id="workmodel"></textarea>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="seemoreQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">10. What else would you like to see on this website?</td>' +
				'<td>' +
				  '<textarea rows="2" cols="20" id="seemore"></textarea>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="improveQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">11. How can we improve operations of Esha?</td>' +
				'<td>' +
				  '<textarea rows="2" cols="20" id="improve"></textarea>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="awarenessQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">12. What can we do to spread awareness about Esha\'s operations?</td>' +
				'<td>' +
				  '<textarea rows="2" cols="20" id="awareness"></textarea>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="experienceQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">13. If you have used Esha for a service, how was your experience? </td>' +
				'<td>' +
				  '<select id="experience" style="font-size:0.9em;width:163px">' +
					'<option value="" selected>Select One</option>' +
					'<option value="Very Impressive">Very Impressive</option>' +
					'<option value="Satisfactory">Satisfactory</option>' +
					'<option value="Neutral">Neutral</option>' +
					'<option value="Not satisfactory">Not satisfactory</option>' +
					'<option value="Very unpleasant">Very unpleasant</option>' +
				  '</select>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr valign="top">' +
				'<td id="recommendQ" style="font-size:0.9em;background-color:#FFFCCC;width:400px;">14. Would you recommend Esha to other people looking for a similar service?</td>' +
				'<td style="font-size:0.9em;width:163px">' +
				  '<input type="radio" name="recommend" value="Yes"> Yes </input>' +
				  '&nbsp;&nbsp;&nbsp;' +
				  '<input type="radio" name="recommend" value="No"> No </input>' +
				'</td>' +
			  '</tr>' +
			  '</tr><tr><td height="3px"></td></tr>' +
			  '<tr><td colspan="2" align="center"><button onclick="submitFB();">Submit</button></td></tr>' +
			'</table>')
			.dialog({ 
				autoOpen : false,
				title : 'Feedback Form'});

		$fb.dialog('option', 'height', 600);
		$fb.dialog('option', 'width', 600);
		//$fb.dialog('option', 'maxHeight', 600);
		$fb.dialog('option', 'position', 'top');
		$fb.dialog('option', 'modal', true);

		$fb.dialog('open');
	}