/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 50;

// Variable to store the images we need to set as background
// which also includes some text and url's.
function getWidth() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return myWidth;
}
function getHeight() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

var photos = "";
function setWinSize(){
	winHeight = getHeight();
	heightNew = winHeight - 35 - 83 - 40 - 20;
	document.getElementById("largeContent").style.height = heightNew + "px";
	heightNew = winHeight - 35 - 83 -  20;
	document.getElementById("largeContent2").style.height = heightNew + "px";
	document.getElementById("largeContent3").style.height = heightNew + "px";
	document.getElementById("largeContent4").style.height = heightNew + "px";
}

function setWinSizeFotoboek(){
	winHeight = getHeight();
	heightNew = winHeight - 35 - 83;
	document.getElementById("largeContentFotoboek").style.height = heightNew + "px";
}

function setBgSize(){
	winWidth = getWidth();
	winHeight = getHeight();
	if((winHeight/winWidth)<(5/6)){
		if (winWidth>1500){
			var Folder = "bgLarge";
		} else { 
			if(winWidth>1000){
				var Folder = "bgMed";
			} else {
				if(winWidth>500){
					var Folder = "bgSm";
				} else {
					var Folder = "bgMob";
				}
			}
		}
	} else {
		if (winHeight>875){
			var Folder = "bgLarge";
		} else { 
			if(winHeight>667){
				var Folder = "bgMed";
			} else {
				if(winHeight>500){
					var Folder = "bgSm";
				} else {
					var Folder = "bgMob";
				}
			}
		}
	}
	photos = [ {
			"image" : Folder + "/bg.jpg"
		}, {
			"image" : Folder + "/bg_f2.jpg"
		}, {
			"image" : Folder + "/bg_f3.jpg"
		}, {
			"image" : Folder + "/bg_f4.jpg"
		}, {
			"image" : Folder + "/bg_f5.jpg"
		}, {
			"image" : Folder + "/bg_f6.jpg"
		}, {
			"image" : Folder + "/bg_f7.jpg"
		}
	];
	//alert(winWidth + " - " + Folder);
}
setBgSize();

function setSizes(){
	setWinSize();
	setBgSize();
	setTimeout("setSizes()",2000);
}

$(document).ready(function() {
		
		
// attach a submit handler to the form
  $("#sloepentocht").submit(function(event) {
    // stop form from submitting normally
    event.preventDefault(); 
        
    // get some values from elements on the page:
    var $form = $( this ),
        Uw_naam = $form.find( 'input[name="Uw_naam"]' ).val(),
        Naam_van_uw_boot = $form.find( 'input[name="Naam_van_uw_boot"]' ).val(),
        Uw_telefoonnummer = $form.find( 'input[name="Uw_telefoonnummer"]' ).val(),
        Uw_email_adres = $form.find( 'input[name="Uw_email_adres"]' ).val(),
        Aantal_personen = $form.find( 'input[name="Aantal_personen"]' ).val(),
        url = $form.attr( 'action' );
	if(Uw_naam!="" && Naam_van_uw_boot!="" && Uw_telefoonnummer!="" && Uw_email_adres!="" && Aantal_personen!=""){
		// Send the data using post and put the results in a div
		$.post( url, $("#sloepentocht").serialize() ,
		  function( data ) {
			  alert(data);
			  $( "#result" ).html( "Uw aanmelding is verzonden.");
		  }
		);
	} else {
		alert("Vul alle verplichte velden in s.v.p.");
	}
  });
// attach a submit handler to the form
  $("#contactForm").submit(function(event) {
    // stop form from submitting normally
    event.preventDefault(); 
        
    // get some values from elements on the page:
    var $form = $( this ),
        Uw_naam = $form.find( 'input[name="Uw_naam"]' ).val(),
        Uw_telefoonnummer = $form.find( 'input[name="Uw_telefoonnummer"]' ).val(),
        Uw_vraag = $form.find( 'input[name="Uw_vraag"]' ).val(),
        url = $form.attr( 'action' );
	if(Uw_naam!="" && Uw_telefoonnummer!="" && Uw_vraag!=""){
		// Send the data using post and put the results in a div
		$.post( url, $("#contactForm").serialize() ,
		  function( data ) {
			  var content = $( data ).find( '#content' );
			  $( "#result" ).html( "Uw contactverzoek is verstuurd.");
			  $( "#contactForm" ).hide();
		  }
		);
	} else {
		alert("Vul alle verplichte velden in s.v.p.");
	}
  });

// attach a submit handler to the form
  $("#brochureForm").submit(function(event) {
    // stop form from submitting normally
    event.preventDefault(); 
        
    // get some values from elements on the page:
    var $form = $( this ),
        Uw_naam_ = $form.find( 'input[name="Uw_naam_"]' ).val(),
        Uw_adres_ = $form.find( 'input[name="Uw_adres_"]' ).val(),
        Uw_woonplaats_ = $form.find( 'input[name="Uw_woonplaats_"]' ).val(),
        Uw_postcode_ = $form.find( 'input[name="Uw_postcode_"]' ).val(),
        url = $form.attr( 'action' );

    // Send the data using post and put the results in a div
	if(Uw_naam_!="" && Uw_adres_!="" && Uw_woonplaats_!="" && Uw_postcode_!=""){
		$.post( url, $("#brochureForm").serialize() ,
		  function( data ) {
			  var content = $( data ).find( '#content' );
			  //alert(data);
			  $( "#resultB" ).html( "Uw brochureaanvraag is verstuurd.");
			  $( "#brochureForm").hide();
		  }
		);
	} else {
		alert("Vul alle verplichte velden in s.v.p.");
	}
  });

	var activeContainer = 1;	
	var currentImg = Math.ceil(Math.random()*photos.length);
	var animating = false;
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}
		
		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}
		
		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
	var currentZindex = -1;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		// Make sure the new container is always on the background
		currentZindex--;
			// Set the background image of the new active container
			$("#headerimg" + activeContainer).css({
				"background-image" : "url(" + photoObject.image + ")",
				"display" : "block",
				"z-index" : currentZindex
			});
			
			
		setTimeout(function() {
			// Fade out the current container
			$("#headerimg" + currentContainer).fadeOut('slow', function() {
				animating = false;
			});
			
		}, 12000);
	};
	
	// We should statically set the first image
	navigate("next");
	
	// Start playing the animation
	interval = setInterval(function() {
		navigate("next");
	}, slideshowSpeed);
	
});