<?php
/**
 Template Name: Contact Page
**/

get_header(); ?>

<!-- form validation scripts -->
<script src="<?php bloginfo('template_url'); ?>/js/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
	// initialize form validation
	jQuery(document).ready(function() {
		$j("#CommentForm").validate({
			submitHandler: function(form) {
				// form is valid, submit it
				ajaxContact(form);
				return false;
			}
		});
	});
</script>



	<?php
	if(have_posts()) :
		while(have_posts()) :
			the_post();
			?>
			<!-- Page Content -->
			<div class="contentArea">
				<!-- Title / Page Headline -->
				<div class="full-page">
					<h1 class="headline"><strong><?php the_title(); ?></strong><?php
						if (get_theme_var("contactSubTitle") != '') {
							echo ' &nbsp;//&nbsp; '. get_theme_var("contactSubTitle");
						}
					?></h1>
				</div>

				<div class="hr"></div>

				<!-- Breadcrumbs -->
				<div class="full-page">
					<p class="breadcrumbs">
						<?php show_breadcrumbs(); ?>
					</p>
				</div>

				<!-- End of Content -->
				<div class="clear"></div>
			</div>

			<div class="contentArea">


				<div class="half-page">
					<!-- Contact form -->
					<?php echo stripslashes(get_theme_var("contactContent")); ?>

					<div id="Note"></div>
					<form class="cmxform" id="CommentForm" method="post" action="">
						<fieldset>
							<legend>Contact Form</legend>
							<div>
								<label for="ContactName" class="overlabel">Name</label>
								<input id="ContactName" name="ContactName" class="textInput required" />
							</div>
							<div>
								<label for="ContactEmail" class="overlabel">E-Mail</label>
								<input id="ContactEmail" name="ContactEmail" class="textInput required email" />
							</div>
							<div>
								<label for="ContactPhone" class="overlabel">Phone</label>
								<input id="ContactPhone" name="ContactPhone" class="textInput digits" value="" />
							</div>
							<div>
								<label for="ContactComment" class="overlabel">Comments</label>
								<textarea id="ContactComment" name="ContactComment" class="textInput required" rows="10" cols="4"></textarea>
							</div>
							<div>
								<button type="submit" class="btn"><span>Send</span></button>
								<input class="" type="hidden" name="to" value="<?php theme_var("contactEmail");?>" />
								<input class="" type="hidden" name="subject" value="<?php theme_var("contactEmailSubject");?>" />
								<label id="loader" style="display:none;"><img src="<?php echo bloginfo('template_url'); ?>/images/ajax-loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
							</div>
						</fieldset>
					</form>

				</div>

				<div class="half-page">
					<?php the_content('More Information...'); ?>
				</div>

				<!-- End of Content -->
				<div class="clear"></div>
			</div>

			<!-- End of Content -->
			<div class="clear"></div>
			<?php

		endwhile;
	endif;
	?>

<script type="text/javascript">

	// Contact form submit function
	function ajaxContact(theForm) {
		var $ = jQuery;

        $('#loader').fadeIn();

        var formData = $(theForm).serialize(),
			note = $('#Note');

        $.ajax({
            type: "POST",
            url: "<?php echo bloginfo('template_url'); ?>/contact-send.php",
            data: formData,
            success: function(response) {
				if ( note.height() ) {
					note.fadeIn('fast', function() { $(this).hide(); });
				} else {
					note.hide();
				}

				$('#LoadingGraphic').fadeOut('fast', function() {
					//$(this).remove();
					if (response === 'success') {
						$(theForm).animate({opacity: 0},'fast');
					}

					// Message Sent? Show the 'Thank You' message and hide the form
					result = '';
					c = '';
					if (response === 'success') {
						result = '<?php
							if (get_theme_var("contactThankYouMessage") != '') {
								echo stripslashes(get_theme_var("contactThankYouMessage"));
							} else {
								echo "Your message has been sent. Thank you!";
							}?>';
						c = 'success';
					} else {
						result = response;
						c = 'error';
					}

					note.removeClass('success').removeClass('error').text('');
					var i = setInterval(function() {
						if ( !note.is(':visible') ) {
							note.html(result).addClass(c).slideDown('fast');
							clearInterval(i);
						}
					}, 40);
				}); // end loading image fadeOut
            }
        });

        return false;
    }

</script>


<?php get_footer(); ?>