$(function() {
	
	$('body').addClass('js-on');
		
	$('#logo')
		.hover(
			function() {
				$(this).stop().animate({opacity: .7});
			},
			function() {
				$(this).stop().animate({opacity: 1});
			}
		
		)
				
	var floatHeader = $('#float-header-wrap');
	var contactButton = $('#contact-btn');
	
	contactButton
		.addClass('slider-btn')
		.click(
			function() {
				if (contactButton.hasClass('off')) {
					contactButton.addClass('on').removeClass('off');
					floatHeader.animate({top:0}, 1000);		
					return false;				
				} else {
					contactButton.removeClass('on').addClass('off');
					floatHeader.animate({top: "-414px"}, 1000);
					return false;
				}

			}
		);			
		
	$('#close-btn')
		.click(function() {
				floatHeader.animate({top: "-414px"}, 1000);
				contactButton.addClass('off').removeClass('on');
				return false;	
			}
		);
			
	$('#float-header-wrap input[name|=return]').attr("value","/site/success");
	$('#float-header-wrap input[name|=RET]').attr("value","/site/success");
	
	$('#contact-form').prepend('<div id="msg">').append('<div id="hidden-div">');
	
	$('#msg').animate({opacity:0}, 0).append('<div id="display">').find('#display').animate({opacity:0}, 0);
			
    var options = { 
		target:        '#hidden-div',
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
        clearForm: true,        // clear all form fields after successful submit 
        resetForm: true        // reset the form after successful submit

        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

    // bind form using 'ajaxForm' 
    $('#contact').ajaxForm(options);	
	
})

// pre-submit callback 
function showRequest() { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 

    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
	
	$('#contact')
		.animate({opacity:0}, 200, function() {
			$(this).hide();
			$('#msg')
				.append('<img src="http://gatewaycleveland.com/assets/images/ajax-loader-1.gif" class="loader"/>')
				.animate({opacity:1}, 200);
		});
	
    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 

} 

// post-submit callback 
function showResponse(rtn)  { 
		
	if(rtn=="success")
   	{
		$('#msg').find('img').animate({opacity:0}, 200).remove();
		$('#msg').find('#display').html('<h2 class="headline">Thank You!</h2><p>Your message has been received.</p>').animate({opacity:1}, 200);

     }else{
        //there was an error, so grab the UL in the content ID, 
        //inside the hidden DIV, and put it into the Message Notification
		$('#msg').find('img').animate({opacity:0}, 200).remove();
      	$('#msg').find('#display').html( '<h2 class="error">Message not sent</h2><p>Errors were detected in your submission. Please review and correct the following errors.</p><ul id="formErrors">' + $("#hidden-div #content ul").html() + '</ul><a href="#" id="closeError" class="contactSubmit">ok</a>').animate({opacity:1}, 200);
		$("#hidden-div").empty();
     	
		$('#closeError').click(function() {
			
			$('#display').animate({opacity:0}, 200).empty();
			$('#contact').show().animate({opacity:1}, 200);
			
			return false;
			
		})
	}
	
}