$(function() {

	var activePage = $("#accueil"),
			transitionTime = 500,
			containerDiv = $("#main"),
			slidingDiv = $(".slider-container"),
			changes = 1,
			maxChanges = nums.sum(),
			imgPreloader = new Image;

	var nextPos = function(){
		return (pos == nums.length-1) ? 0 : pos+1;
	}

	// Rel Plz takes elements' href tags and turns them into rel, for safe non-js links
	relPlz("nav a, #masthead h1 a");

	// Binding the click to a function that receives the ID of the target page
	var bindPagelinks = function(){
		$("nav a, #masthead a").click(function(){
			changePage( $(this).attr("rel"), true );
		});
		// preload next image
		if (pos < 5 && changes < maxChanges) imgPreloader.src = '/assets/img/bg/'+nums[nextPos()]+'.jpg';
	};
	bindPagelinks(); // auto execute

	//Takes the ID and makes the div visible, then animates from the current to the future page
	var changePage = function(pageName, changeBg) {
		var targetPage = $( "#"+pageName );

		$("nav li").removeClass("select");
		$("#b-" + pageName).addClass("select");

		// http://oncemade.com/animated-page-scroll-with-jquery/
		$("html:not(:animated),body:not(:animated)").animate({scrollTop: 0}, transitionTime);

		var change = function() {
			if(targetPage.attr("id") != activePage.attr("id")){
				$("nav a, #masthead a").unbind();
				$("footer").fadeOut(0, function(){
					targetPage.show();
					slidingDiv.css({
						"margin-left" : -( activePage.offset().left ) + "px"
					});
					slidingDiv.animate(
						{"margin-left" : -( targetPage.offset().left - slidingDiv.offset().left ) + "px"},
						transitionTime,
						function(){
							// change bg photo
							if (changeBg) {
								pos = nextPos();
								changes = changes + nums[pos];
								$(".bg")
									.before('<div class="bg" style="background-image:url(/assets/img/bg/'+nums[pos]+'.jpg)"><img src="/assets/img/bg/'+nums[pos]+'.jpg"></div>')
									.remove();
	 								//.fadeOut('slow', function(){$(this).remove()});
							}
							$("footer").fadeIn('fast');
							activePage.hide();
							slidingDiv.css({"margin-left" : "0"});
							activePage = targetPage;
							bindPagelinks();
							changeHash(pageName);

							$("body").removeClass().addClass(pageName);
						}
					)
				});
			}
		}

		if (activePage.attr('id') == 'accueil' && targetPage.attr('id') != 'accueil') {
			$("#masthead h1").animate({top: 0, height: 120}, transitionTime, change());
		} else if (targetPage.attr('id') == 'accueil') {
			$("#masthead h1").animate({top: 126, height: 154}, transitionTime, change());
		} else {
			change();
		}
	}

	// horaire
	$("#horaire a").click(function(e){e.preventDefault()}).hover(
		function() {
			$(".b-horaire").addClass("opened");
			$("#horaire .hours").animate({top: "-112", height: 'toggle'});
		},
		function() {
			$("#horaire .hours").animate({top: "-27", height: 'toggle'}, function() {
				$(".b-horaire").removeClass("opened");
			});
		}
	);

  function changeHash(newHash) {
    window.location.hash = "#-" + newHash;
  }

  // check hash and change page accordingly
	if ( location.hash && $('#' + location.hash.slice(2)).length) {
    changePage(location.hash.slice(2), false);
  }

});