// perform JavaScript after the document is scriptable. 
$(function() {
	//initial setup behaviours
	$("#loading").fadeTo(300,0);
	if ($.browser.opera) { $("#loading").hide(); }
	$("#booking span").animate( { width:"100%"}, "slow", function(){
		$("#explore span").animate( { width:"100%"}, "slow" );
	} );
	$("#booking span").animate( { width:"0%"}, "slow", function(){
		$("#explore span").animate( { width:"0%"}, "slow", function(){
			$("#search").fadeIn(2500);
		} );
	} );
	
    // setup ul.tabs to work as tabs for each div directly under div.panes 
    $("#nav ul").tabs("#panes div.fade", {effect: 'fade', fadeOutSpeed: 400});

    
    
	// initialize scrollable and return the programming API
	var api = $("#wrapper").scrollable({
		size: 1,
		clickable: true

	});
	//set up the scrollable content
    var scrolling = $("#about_scroll").scrollable({ 
 	    size: 1, api:true, clickable: false
 	});
	var myoverlay = $("a[rel]").overlay({
	// hide trigger when the overlay is opened 
    onLoad: function(event) {
        this.getTrigger().hide();
    },
    onClose: function(event) { 
        this.getTrigger().show(); 
    },
	absolute:true, speed:"slow", api:true, closeOnClick:false
	});
	
    $("#clickme").hover(
      	function () {
      		$("#logo").fadeIn("slow");
       	}, 
      function () {
        	$("#logo").fadeOut(1500);
      	}
    );

    $("#clickme").click(function(){	
    	$("#logo").fadeOut(1500);
       	$("a[rel]").each(function() { 
        	$(this).overlay().close(); 
    	}); 
    })
    
    //form functions
    // Step 1 collects details, Step 2 is message body, Step 3 is the status of the sent message
    // Step 1 proceeds to step 2 - only if there are NO ERRORS
    function isValidEmailAddress(emailAddress) {
		var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
		return pattern.test(emailAddress);
	}
    $("#contactform .step1").click(function(){
    	if(!$("#c_ds").hasClass("active")){
    		$("#contactform .buttonimage").removeClass("nextset").removeClass("linkableclick").removeClass("prevset");
    		$("#c_ms").addClass("nextset").addClass("linkableclick");
    		if($("#c_ms").hasClass("active")){
    			var errors = "";
    			// go back to check email etcetera is correct
    			$("#contact_message").hide();
    			if ($("#catchpa").val() == "13") {
    				$("#catchpa").removeClass("error"); $("label[for='catchpa']").removeClass("error");
      			}else{
      				errors = "true";
      			}
      			if ($("#message").val() != "") {
      			    $("#message").removeClass("error"); $("label[for='message']").removeClass("error");
      			}else{
      				errors = "true";
      			}
      			if (errors != "true"){
      				$("#c_ms").removeClass("errored");	
      			}
    		}
    		if($("#c_ss").hasClass("active")){
    			// reset form (the form has been submitted)
    			$("#contact_submit").hide();
    			$("#contactform input:not(.nextset)").val("");
    			$("#contactform textarea").val("");
    			$('#contact_submit').html(' ');
    			$("#c_ds").removeClass("reset");
    		}
    		$("#contactform *").removeClass("active");
    		$("#contact_details").show("slide", { direction: "left" }, 1300);
    		$("#c_ds").addClass("active");
    	} 
    })
    $("#contactform .step2").click(function(){
    	if($("#c_ds").hasClass("active")){
    		var steperrors = "";
    		$("#c_ds").removeClass("errored");
    		$("#contactform #contact_details *").removeClass("error");
    		if (!$("#username").val()){
    			$("#username").addClass("error"); $("label[for='username']").addClass("error");
      			steperrors = "true";
    		}
    		if (!$("#usermail").val()){
    			$("#usermail").addClass("error"); $("label[for='usermail']").addClass("error");
      			steperrors = "true";
    		}
    		if (!$("#subject").val()){
    			$("#subject").addClass("error"); $("label[for='subject']").addClass("error");
      			steperrors = "true";
    		}
    		var email = $("#usermail").val();
			if(!isValidEmailAddress(email)){
				$("#usermail").addClass("error"); $("label[for='usermail']").addClass("error");
				$("label[for='usermail']").html("your email * (invalid)");
      			steperrors = "true";
			}else{
				$("label[for='usermail']").html("your email *");
			}
    		if(steperrors!="true"){
    			// step 1 has been completed. Error check and proceed to step 2
    			$("#c_ms").removeClass("linkableclick nextset");
    			$("#c_ms").addClass("active");
    			$("#contact_details").hide("slide", { direction: "left" }, 500);
    			$("#contact_message").show("slide", { direction: "right" }, 1300);
    			$("#c_ds").removeClass("active");
    			$("#c_ds").addClass("linkableclick prevset");
    			$("#c_ss").addClass("linkableclick nextset");
    		}else{
    			$("#c_ds").addClass("errored");
    		}
    	} 
    })
    $("#contactform .step3").click(function(){
    	$("#contactform *").removeClass("error").removeClass("errored");
    	var errorSend = "";
    	if($("#c_ms").hasClass("active")){
    		// step 2 has been completed. Check and send the form - step 3
      		if ($("#catchpa").val() == "13") {
      		}else{
      			$("#catchpa").addClass("error"); $("label[for='catchpa']").addClass("error");
      			errorSend = "true";
      		}
      		if ($("#message").val()){
      		}else{
      			$("#message").addClass("error"); $("label[for='message']").addClass("error");
      			errorSend = "true";
      		}
      		if(errorSend!="true"){
      			$("#contactform *").removeClass("error").removeClass("errored");
      			$("#c_ss").removeClass("linkableclick nextset").addClass("active");
    			$("#contact_message").hide("slide", { direction: "left" }, 500);
    			$("#contact_submit").show("slide", { direction: "right" }, 1300);
    			$("#c_ms").removeClass("active");
    			$("#c_ds").addClass("reset");
   
       			// the actual sending function
    			//Get the data from all the fields
				var name = $('#username');
				var email = $('#usermail');
				var subject = $('#subject');
				var comment = $('#message');
				//organize the data properly
				var data = 'name=' + name.val() + '&email=' + email.val() + '&subject='
				+ subject.val() + '&comment='  + encodeURIComponent(comment.val());
		
				
				//display 'sending email'
				$('#contact_submit').html('<img src="http://www.atholl-lodge.com/images/ajax-loader.gif" alt="sending message" style="background:none; border:0; outline:0; position:relative; float:none;" /><br /><h6 style="color:#000030; font-weight:normal; letter-spacing:1px; margin-top: 10px; font-size:90%;">{ SENDING }</h6>');

				//start the ajax
				$.ajax({
					//this is the php file that processes the data and send mail
					url: "http://www.atholl-lodge.com/mailing.php",	
			
					//GET method is used
					type: "GET",

					//pass the data			
					data: data,		
			
					//Do not cache the page
					cache: false,
			
					//success
					success: function (html) {				
						//if mailing.php returned 1/true (send mail success)
						if (html==1) {					
							$('#contact_submit').html('<p style="margin-top: 20px;">Your message has been sent to Atholl Lodge!</p><p>We will get back to you as soon as possible...</p>');

						//if mailing.php returned 0/false (send mail failed)
						} else{
							$('#contact_submit').html('<p style="margin-top: 20px; color: red">It was not possible to send your message at this time. Please try again later.</p>');
						}				
					}		
				});

    		}else{
    			$("#c_ms").addClass("errored");
    		}
    	} 
    })


   
	// navigation functions
	$("#explore").hover(
      function () {
        $(".navigation-sub").slideDown("fast");
      }, 
      function () {
        $(".navigation-sub").slideUp("fast");
      }
    );
	$(".navigation-sub a").click(function() {
		$(".navigation-sub").slideUp("fast");
	});
	
	$("#booking").hover(
      	function () {
      		$("#booking span").stop(true,true).animate( { width:"100%"}, "slow" );
       	}, 
      function () {
        	$("#booking span").stop(true,true).animate( { width:"0%"}, "medium" );
      }
    );
    
    $("#explore").hover(
      	function () {
      		$("#explore span").stop(true,true).animate( { width:"100%"}, "slow" );
       	}, 
      function () {
        	$("#explore span").stop(true,true).animate( { width:"0%"}, "slow" );
      }
    );
    
	$(".navigation-sub a").click(function() {
		$(".navigation-sub").slideUp("fast");
		return false;
	});
	
	// specific page grabbers
	var slide="false";
	$(".photoscroll").fadeTo(10,0);
	$("a.y").click(function () {
	  if(!$("#features").hasClass("live")){
	  	//if the photo scroll is visible, hide it.
	  	$(".photoscroll:visible").fadeTo(500,0, function(){
	  		$(".photoscroll:visible").hide();
	  	});
      	$("#content-main").hide("slide", { direction: "right" }, 1300);
      	$("#features").fadeTo("slow", 1).addClass("live");
      	//SLIDE the active picture off the screen
      	$(".on").hide("slide", { direction: "left" }, 1100);
      	if($.browser.opera){
      		slide="false";
      	}
      	$("#image_description").fadeOut("fast");
      }
	});
	$("a.z").click(function () {
	  if($("#features").hasClass("live")){
      	$("#content-main").show("slide", { direction: "right" }, 1300);
      	$("#features").fadeTo("slow", 0).removeClass("live");
      	//SLIDE the active picture onto the screen during the following steps
      	if(slide=="true"){
      		$(".on").show("slide", { direction: "left" }, 1100);
      	}
      }
	});
	$("a.b").click(function () {
	  if(!$("#overview").hasClass("live")){
	  	$(".photoscroll[id!=overview_thumbs]:visible").fadeTo(1000,0, function(){
	  		$(".photoscroll[id!=overview_thumbs]:visible").hide();
	  	});
	   	$(".live").hide("slide", { direction: "left" }, 999);
      	$("#overview").show("slide", { direction: "right" }, 1000);
      	$("*").removeClass("live");
      	$("#overview").addClass("live");
      	if(slide=="true"){
      		if ($.browser.opera){
      			//straight change of image
      			$("#img_overview").show();
      			$(".on").hide();
      			$("*").removeClass("on");
      			$("#img_overview").addClass("on");		
      		}else{
      			//FADE in new image
      			$(".on").fadeTo(1500, 0);
      			if($('#img_overview').is(':hidden')){
      				$("#img_overview").fadeTo(10, 0, function(){ $("#img_overview").show(); });  			
      			}
      			$("#img_overview").fadeTo(1000, 1);
      		
      			$("*").removeClass("on");
      			$("#img_overview").addClass("on");
      		}
      	}else{
      		$("#img_overview").show("slide", { direction: "left" }, 800).addClass("on");
      		slide = "true"; 
      	}
      }
      $("#overview_thumbs:hidden").show();
	  $("#overview_thumbs").fadeTo(2000,1);
	  var myTitler = $("#overview_thumbs .shown").attr("title");
      $("#image_description").text(myTitler);
   	});
	$("a.c").click(function () {
	  if(!$("#rooms").hasClass("live")){
	  	$(".photoscroll[id!=rooms_thumbs]:visible").fadeTo(1000,0, function(){
	  		$(".photoscroll[id!=rooms_thumbs]:visible").hide();
	  	});
	  	$(".live").hide("slide", { direction: "left" }, 999);
      	$("#rooms").show("slide", { direction: "right" }, 1000);
      	$("*").removeClass("live");
      	$("#rooms").addClass("live");
      	if(slide=="true"){
      		if ($.browser.opera){
      			//straight change of image
      			$("#img_rooms").show();
      			$(".on").hide();
      			$("*").removeClass("on");
      			$("#img_rooms").addClass("on");		
      		}else{
      			//FADE in new image
      			$(".on").fadeTo(1500, 0);
      			if($('#img_rooms').is(':hidden')){
      				$("#img_rooms").fadeTo(10, 0, function(){ $("#img_rooms").show(); });  			
      			}
      			$("#img_rooms").fadeTo(1000, 1);
      		
      			$("*").removeClass("on");
      			$("#img_rooms").addClass("on");
      		}
      	}else{
      		$("#img_rooms").show("slide", { direction: "left" }, 800).addClass("on");
      		slide = "true"; 
      	}
      }
      $("#rooms_thumbs:hidden").show();
	  $("#rooms_thumbs").fadeTo(2000,1);
	  var myTitler = $("#rooms_thumbs .shown").attr("title");
      $("#image_description").text(myTitler);
   	});
	$("a.d").click(function () {
	  if(!$("#dining").hasClass("live")){
	  	$(".photoscroll[id!=dining_thumbs]:visible").fadeTo(1500,0, function(){
	  		$(".photoscroll[id!=dining_thumbs]:visible").hide();
	  	});
	   	$(".live").hide("slide", { direction: "left" }, 999);
      	$("#dining").show("slide", { direction: "right" }, 1000);
      	$("*").removeClass("live");
      	$("#dining").addClass("live");
      	if(slide=="true"){
      		if ($.browser.opera){
      			//straight change of image
      			$("#img_dining").show();
      			$(".on").hide();
      			$("*").removeClass("on");
      			$("#img_dining").addClass("on");		
      		}else{
      			//FADE in new image
      			$(".on").fadeTo(1500, 0);
      			if($('#img_dining').is(':hidden')){
      				$("#img_dining").fadeTo(10, 0, function(){ $("#img_dining").show(); });  			
      			}
      			$("#img_dining").fadeTo(1000, 1);
      		
      			$("*").removeClass("on");
      			$("#img_dining").addClass("on");
      		}
      	}else{
      		$("#img_dining").show("slide", { direction: "left" }, 800).addClass("on");
      		slide = "true"; 
      	}
      }
      $("#dining_thumbs:hidden").show();
	  $("#dining_thumbs").fadeTo(2000,1);
	  var myTitler = $("#dining_thumbs .shown").attr("title");
      $("#image_description").text(myTitler);
	});
	$("a.e").click(function () {
	  if(!$("#lounge").hasClass("live")){
	  	$(".photoscroll[id!=lounge_thumbs]:visible").fadeTo(1500,0, function(){
	  		$(".photoscroll[id!=lounge_thumbs]:visible").hide();
	  	});
	   	$(".live").hide("slide", { direction: "left" }, 999);
      	$("#lounge").show("slide", { direction: "right" }, 1000);
      	$("*").removeClass("live");
      	$("#lounge").addClass("live");
      	if(slide=="true"){
      		if ($.browser.opera){
      			//straight change of image
      			$("#img_lounge").show();
      			$(".on").hide();
      			$("*").removeClass("on");
      			$("#img_lounge").addClass("on");		
      		}else{
      			//FADE in new image
      			$(".on").fadeTo(1500, 0);
      			if($('#img_lounge').is(':hidden')){
      				$("#img_lounge").fadeTo(10, 0, function(){ $("#img_lounge").show(); });  			
      			}
      			$("#img_lounge").fadeTo(1000, 1);
      		
      			$("*").removeClass("on");
      			$("#img_lounge").addClass("on");
      		}
      	}else{
      		$("#img_lounge").show("slide", { direction: "left" }, 800).addClass("on");
      		slide = "true";       		
      	}
      }
      $("#lounge_thumbs:hidden").show();
	  $("#lounge_thumbs").fadeTo(2000,1);
	  var myTitler = $("#lounge_thumbs .shown").attr("title");
      $("#image_description").text(myTitler);
	});
	$(".ra").click(function () {
		//load the correct rooms div - overview
		if(!$("#rooms_overview").hasClass("activate")){
			$("#room_nav li[rel]").removeClass("active");
			$(".roomarea").removeClass("activate");
			$("#rooms_overview").addClass("activate");
			$("#room_nav li[rel='rooms_overview']").addClass("active");
			$("#rooms_thumbs *").removeClass("shown"); $("#rooms_thumbs img").show(); 
			$("#rooms_thumbs img:visible:first").addClass("shown");
			var newSRC = $("#rooms_thumbs img:visible:first").attr("src");
			newSRC = (newSRC.replace(/t_/, ''));
			$("#img_rooms").attr("src", newSRC);
			var newTitle = $("#rooms_thumbs img:visible:first").attr("title");
    		$("#image_description").text(newTitle);
		}
	});
	$(".rb").click(function () {
		//load the correct rooms div - overview
		if(!$("#rooms_family").hasClass("activate")){
			$("#room_nav li[rel]").removeClass("active");
			$(".roomarea").removeClass("activate");
			$("#rooms_family").addClass("activate");
			$("#room_nav li[rel='rooms_family']").addClass("active");
			$("#rooms_thumbs img").hide();
			$("#rooms_thumbs *").removeClass("shown"); $("#rooms_thumbs img").filter(".family").show(); 
			$("#rooms_thumbs img:visible:first").addClass("shown");
			var newSRC = $("#rooms_thumbs img:visible:first").attr("src");
			newSRC = (newSRC.replace(/t_/, ''));
			$("#img_rooms").attr("src", newSRC);
			var newTitle = $("#rooms_thumbs img:visible:first").attr("title");
    		$("#image_description").text(newTitle);
		}
	});
	$(".rc").click(function () {
		//load the correct rooms div - overview
		if(!$("#rooms_double").hasClass("activate")){
			$("#room_nav li[rel]").removeClass("active");
			$(".roomarea").removeClass("activate");
			$("#rooms_double").addClass("activate");
			$("#room_nav li[rel='rooms_double']").addClass("active");
			$("#rooms_thumbs img").hide();
			$("#rooms_thumbs *").removeClass("shown"); $("#rooms_thumbs img").filter(".double").show(); 
			$("#rooms_thumbs img:visible:first").addClass("shown");
			var newSRC = $("#rooms_thumbs img:visible:first").attr("src");
			newSRC = (newSRC.replace(/t_/, ''));
			$("#img_rooms").attr("src", newSRC);
			var newTitle = $("#rooms_thumbs img:visible:first").attr("title");
    		$("#image_description").text(newTitle);
		}
	});
	$(".rd").click(function () {
		//load the correct rooms div - overview
		if(!$("#rooms_twin").hasClass("activate")){
			$("#room_nav li[rel]").removeClass("active");
			$(".roomarea").removeClass("activate");
			$("#rooms_twin").addClass("activate");
			$("#room_nav li[rel='rooms_twin']").addClass("active");
			$("#rooms_thumbs img").hide();
			$("#rooms_thumbs *").removeClass("shown"); $("#rooms_thumbs img").filter(".twin").show(); 
			$("#rooms_thumbs img:visible:first").addClass("shown");
			var newSRC = $("#rooms_thumbs img:visible:first").attr("src");
			newSRC = (newSRC.replace(/t_/, ''));
			$("#img_rooms").attr("src", newSRC);
			var newTitle = $("#rooms_thumbs img:visible:first").attr("title");
    		$("#image_description").text(newTitle);
		}
	});
	$(".re").click(function () {
		//load the correct rooms div - overview
		if(!$("#rooms_single").hasClass("activate")){
			$("#room_nav li[rel]").removeClass("active");
			$(".roomarea").removeClass("activate");
			$("#rooms_single").addClass("activate");
			$("#room_nav li[rel='rooms_single']").addClass("active");
			$("#rooms_thumbs img").hide();
			$("#rooms_thumbs *").removeClass("shown"); $("#rooms_thumbs img").filter(".single").show(); 
			$("#rooms_thumbs img:visible:first").addClass("shown");
			var newSRC = $("#rooms_thumbs img:visible:first").attr("src");
			newSRC = (newSRC.replace(/t_/, ''));
			$("#img_rooms").attr("src", newSRC);
			var newTitle = $("#rooms_thumbs img:visible:first").attr("title");
    		$("#image_description").text(newTitle);
		}
	});
	$(".rf").click(function () {
		//load the correct rooms div - overview
		if(!$("#rooms_basic").hasClass("activate")){
			$("#room_nav li[rel]").removeClass("active");
			$(".roomarea").removeClass("activate");
			$("#rooms_basic").addClass("activate");
			$("#room_nav li[rel='rooms_basic']").addClass("active");
			$("#rooms_thumbs img").hide();
			$("#rooms_thumbs *").removeClass("shown"); $("#rooms_thumbs img").filter(".basic").show(); 
			$("#rooms_thumbs img:visible:first").addClass("shown");
			var newSRC = $("#rooms_thumbs img:visible:first").attr("src");
			newSRC = (newSRC.replace(/t_/, ''));
			$("#img_rooms").attr("src", newSRC);
			var newTitle = $("#rooms_thumbs img:visible:first").attr("title");
    		$("#image_description").text(newTitle);
		}
	});
	
	// initialize scrollable for image thumbs
    $(".photoscroll").scrollable({ 
        vertical:true,  
        size: 7 
    });
    $("#overview_thumbs img").click(function(){
    	$("#overview_thumbs *").removeClass("shown");
    	var imagepath = this.src;
    	var newtitle = this.title;
    	var newimagepath = (imagepath.replace(/t_/, ''));
    	//change the image
    	$("#loading").fadeTo(100,0.8);
    	$("#img_overview").attr("src", newimagepath).load(function(){
    		$("#loading").fadeTo(300,0);
    	}); 
    	$(this).addClass("shown");
    	$("#image_description").text(newtitle);
    });
    $("#rooms_thumbs img").click(function(){
    	$("#rooms_thumbs *").removeClass("shown");
    	var imagepath = this.src;
    	var newtitle = this.title;
    	var newimagepath = (imagepath.replace(/t_/, ''));
    	//change the image
    	$("#loading").fadeTo(100,0.8);
    	$("#img_rooms").attr("src", newimagepath).load(function(){
    		$("#loading").fadeTo(300,0);
    	}); 
    	$(this).addClass("shown");
    	$("#image_description").text(newtitle);	
    });
    $("#dining_thumbs img").click(function(){
    	$("#dining_thumbs *").removeClass("shown");
    	var imagepath = this.src;
    	var newtitle = this.title;
    	var newimagepath = (imagepath.replace(/t_/, ''));
    	//change the image
    	$("#loading").fadeTo(100,0.8);
    	$("#img_dining").attr("src", newimagepath).load(function(){
    		$("#loading").fadeTo(300,0);
    	}); 
    	$(this).addClass("shown");
    	$("#image_description").text(newtitle); 	
    });
	$("#lounge_thumbs img").click(function(){
    	$("#lounge_thumbs *").removeClass("shown");
    	var imagepath = this.src;
    	var newtitle = this.title;
    	var newimagepath = (imagepath.replace(/t_/, ''));
    	//change the image
    	$("#loading").fadeTo(100,0.8);
    	$("#img_lounge").attr("src", newimagepath).load(function(){
    		$("#loading").fadeTo(300,0);
    	});  
    	$(this).addClass("shown");
    	$("#image_description").text(newtitle);  	
    });
    
    $(".picture_image").hover( function(){
    	$("#image_description").fadeIn(800);
    }, function(){
    	$("#image_description").fadeOut(500);
    });
    $(".photoscroll img").click(function(){
    	$("#image_description").fadeIn(800, function(){
    		$("#image_description").fadeOut(1500);
    	});
    });
    
});