// JavaScript Document



$(document).ready(function() {
	
	$(".tour").click(function () { 
		
		$('.tour').fadeOut(500).attr('src', 'images/big-imgs/IMG_7317.JPG').fadeIn(500).delay(5000).
				  				attr('src', 'images/big-imgs/IMG_7318.JPG').fadeIn(500).delay(5000).
								attr('src', 'images/big-imgs/IMG_7319.JPG').fadeIn(500).delay(5000);
	  
    });
	

 ////////////////////////form mail/////////////////
 	
	$("input#name").click(function () { 
      $("#name").val(""); 
    }); 
	$("input#email").click(function () { 
      $("#email").val(""); 
    }); 
	$("input#phone").click(function () { 
      $("#phone").val(""); 
    });  	
 
			$(function() {  
			  $('.error').hide();  
			  $("#form-submit").click(function() {  
				// validate and process form here  
			   
				  var name = $("#name").val();  
				  var email = $("#email").val();  
				  var phone = $("#phone").val();  
				  var msg = $("#msg").val(); 
						  
				if (name == "") {  
					$(".error").fadeIn(500).delay(3000).fadeOut(500);
					$(".error").html("<p>You need to enter your name!</p>");	  
					$("input#name").focus(); 		
				  return false;  
				} 
				if (email == "") {  
					$(".error").fadeIn(500).delay(3000).fadeOut(500);
					$(".error").html("<p>You need to enter your email!</p>");	  
					$("input#email").focus(); 		
				  return false;  
				}  
				if (msg == "") {  
					$(".error").fadeIn(500).delay(3000).fadeOut(500);
					$(".error").html("<p>You need to enter a message!</p>");	  
					$("input#msg").focus(); 		
				  return false;  
				} 
				
				var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&msg=' + msg; 

				$.ajax({  
				  type: "POST",  
				  url: "sendmail.php",  
				  data: dataString,  
				  success: function() {  
					//alert("its sent");
					$("#contact-form").fadeOut(500);
					$(".error").fadeIn(500);
					$(".error").html("<p><strong>Thank YouFor The Email!</strong><br/>Your email has been received, now please allow The Chestnut Tree Pre School some time to reply.</p>");					
				  }  
				});  //success function end
				
				return false;  
			  
			  });  //click function end
			});  //outer function end
		
		 
//////////////////////////////////////////////////////////

//When you click on a link with class of poplight and the href starts with a # 
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size

    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value

    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/Close.png" class="btn_close" title="Close Window" alt="Close" /></a>');

    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

    return false;
});

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});	

$(function() {
		$( "#datepicker" ).datepicker();
});

$(".top").hide();

$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 200) {
				$('.top').fadeIn();
			} else {
				$('.top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('.top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

$(".about").click(function() {
     $('html, body').animate({
         scrollTop: $("#section3").offset().top }, 1500);
 });

$(".pics").click(function() {
     $('html, body').animate({
         scrollTop: $("#section4").offset().top }, 1500);
 });
 
 $(".contact").click(function() {
     $('html, body').animate({
         scrollTop: $("#section5").offset().top }, 1500);
 });

$(".top").click(function() {
 $('html, body').animate({
	 scrollTop: $("#section1").offset().top }, 500);
});

	//this is the tool tip code

    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });



 
});