jQuery(document).ready(function($) {

	$( '.jcarousel' ).jCarouselLite({
        btnNext : '.next',
        btnPrev : '.previous',
		auto: 5000,
		speed: 1500
    });

	$().offsetSlider();

// Offset (center) the slider initially, and then again when the browser is resized.

	$(window).resize(function() {
        $().offsetSlider();
    });

	$(function() {
		$('input:text[placeholder]').placeholderLabel();
	});
	
	
// Ajax Contact form 
//if submit button is clicked
$('#submit').click(function () {		
		
		//Get the data from all the fields
	var name = $('input[name=name]');
	var email = $('input[name=email]');
	var message = $('textarea[name=message]');

	//Simple validation to make sure user entered something
	//If error found, add hightlight class to the text field
	if (name.val()=='') {
		name.addClass('hightlight');
		return false;
	} else name.removeClass('hightlight');
	
	if (email.val()=='') {
		email.addClass('hightlight');
		return false;
	} else email.removeClass('hightlight');
	
	if (message.val()=='') {
		message.addClass('hightlight');
		return false;
	} else message.removeClass('hightlight');
	
	//organize the data properly
	var data = 'name=' + name.val() + '&email=' + email.val() + '&message='  + encodeURIComponent(message.val());
	
	//disabled all the text fields
	$('.text').attr('disabled','true');
	
	//show the loading sign
	$('.loading').show();
	
	//start the ajax
	$.ajax({
		//this is the php file that processes the data and send mail
		url: "contact.php",	
		
		//GET method is used
		type: "GET",

		//pass the data			
		data: data,		
		
		//Do not cache the page
		cache: false,
		
		//success
		success: function (html) {				
			//if process.php returned 1/true (send mail success)
			if (html==1) {					
				//hide the form
				$('.form').fadeOut('slow');					
				
				//show the success message
				$('.done').fadeIn('slow');
				
			//if process.php returned 0/false (send mail failed)
			} else alert('I‘m sorry! My site broke! Either my code sucks, or GoDaddy turned off my PHPMail feature :(');				
		}		
	});
	
	//cancel the submit button default behaviours
	return false;
});

});

//Get the total window width and substract 1082 (the width of the images) and divide by two. Use that value to offset the slider.

jQuery.fn.offsetSlider = function() {
    var windowWidth = jQuery(window).width();
    
    jQuery( '.jcarousel' ).css({
        padding : '0 0 0 ' + ( ( windowWidth - 1082 ) / 2 ) + 'px',
        overflow : 'visible',
        width : 'auto'
    });
    
    jQuery( '#slideshow #leftshield, #slideshow #rightshield' ).css({
        width: ( ( windowWidth - 1082 ) / 2 ) + 'px',
    });
}