var blank = new Image();
blank.src = 'images/spcr.gif';

// we will add our javascript code here  
 function cbLoad(){
	$.fn.colorbox.settings.bgOpacity = "0.4";
	$("a[rel='colorbox']").each(function(){
    	$(this).colorbox({title:$(this).attr('caption'), transition:"elastic", current:"Klepperbek {current} van {total}"});
	});
	$("a[rel='colorbox2']").colorbox({transition:"elastic", current:"Afbeelding {current} van {total}"});
 }

 //Ajax code voor het tonen van album foto's
 function ajaxFunction(limit){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Je browser is vastgelopen!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
			cbLoad();
		}
	}
	
	var cat = document.getElementById('cat').value;
	var queryString = "?cat=" + cat;
	var limitString = "&limit=" + limit;
	ajaxRequest.open("GET", "\includes/ajax_gallery.php" + queryString + limitString, true);
	ajaxRequest.send(null);
 }

 function showGeschiedenisDivs(){
	$(".geschiedenis_text").hide();
	$(".blok_geschiedenis").click(function(){
		var number = $(this).attr('id');
		$("#text"+number).slideToggle('slow');
	});
 }
 
 function hoverFoto(){
	$('#ledenlist li').ahover({moveSpeed: 100, hoverEffect: function() {
        $(this)
            .css({opacity: 0.99})
            .animate({opacity: 0.5}, 750)
            .animate({opacity: 0.99}, 750)
            .dequeue();
        $(this).queue(arguments.callee);
    }});
	// Use the each() method to gain access to each of the elements attributes
   $('#ledenlist img').each(function() {
		Cufon.replace(".qtip-content");
      $(this).qtip({
         content: $(this).attr('naam'), // Give it some content
         position: 'topMiddle', // Set its position
         hide: {
            fixed: true // Make it fixed so it can be hovered over
         },
         style: {
			 border: {
				 width: 1,
				 radius: 3,
				 color: '#333'
      		},
            padding: '5px 0 0 5px', // Give it some extra padding
            name: 'dark' // And style it with the preset dark theme
         }
      });
   });
 }
 
 function insertDivs(){
	 var offset = 0;
	 var scrollTime = $(".coda-nav ul li").length - 13;
	 $("#pages_left").insertBefore(".coda-nav ul");
	 $("#pages_right").insertAfter(".coda-nav ul");
	 $(".coda-nav ul").wrap("<div class='scrollbar'></div>");
	 
	 function checkOffset(){
	 	if(offset == 0){
			$("#pages_left").css({'color' : '#C61616', 'cursor' : 'default'});
	 	} else {
			$("#pages_left").css({'color' : 'black', 'cursor' : 'pointer'});
		}
		if(offset >= scrollTime){
			$("#pages_right").css({'color' : '#C61616', 'cursor' : 'default'});
		} else {
			$("#pages_right").css({'color' : 'black', 'cursor' : 'pointer'});
		}
	 }
	 
	 checkOffset();
	// klik functies definieren
	 $("#pages_left").click(function(){
		if(offset > 0) {
				$(".coda-nav ul").animate({left: '+=41px'}, 800);
				offset--;
				checkOffset();
		}
	 });
	 $("#pages_right").click(function(){
		if(offset < scrollTime) {
				$(".coda-nav ul").animate({left: '-=41px'}, 800);
				offset++;
				checkOffset();
		}
	 });
 }
 
 function replaceTitle(){
		Cufon.replace("#tt");
		Cufon.replace(".page_tekst", {fontSize: '10px'});
 }
	
var map;
var directionDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];

function google_maps() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();
    
  // Create a map and center it on Manhattan.
  var bouwschuur = new google.maps.LatLng(51.6187, 4.6926);
  var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    center: bouwschuur
  }
  	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
	var marker = new google.maps.Marker({
		position: bouwschuur, 
		map: map,
		title:"Bouwadres c.v. de Klepperbekken!"
	});
	var infowindow = new google.maps.InfoWindow({
		content: "Bouwadres C.V. de Klepperbekken <br\> Brielsedreef 72"
	});
	infowindow.open(map,marker);
	
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
	
	var useragent = navigator.userAgent;
	var mapdiv = document.getElementById("map_canvas");
	
	if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
		mapdiv.style.width = '100%';
		mapdiv.style.height = '100%';
	}
	
  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)
    
  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {
  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.trips[0].warnings + "";
      directionsDisplay.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.trips[0].routes[0];
  
  var contentSteps = "<p id='kop'>Routebeschrijving</p>";
  
  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point, 
        map: map
      });
      attachInstructionText(marker, [i]+")" + " "+ myRoute.steps[i].instructions);	  
	  contentSteps += [i]+ ")" + " " + myRoute.steps[i].instructions + "<br\>";
	  document.getElementById('stepsDiv').innerHTML = contentSteps;
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

 
 $(document).ready(function() {
	// Fix png issue with IE
	var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
	if (badBrowser) {
	 // get all pngs on page
	 	alert ("Deze website is ontwikkeld vanaf Internet Explorer 7 en hoger, update dus uw browser");
		$('img[src$=.png]').each(function() {
			if (!this.complete) {
				this.onload = function() { fixPng(this) };
			} else {
				fixPng(this);
			}
		});
	}
	
	Cufon.replace("#gastenboek, #menu a, #sponsoren_tekst, #logincontainer, #cms", {
	fontSize: '9px'
	});	
	

	// Modify the look and login block
   $(".dialog").hide();
   $("#tt").html("Home");
   $.get("content/home.php","", function(data){
		$("#content").empty(); 
		$("#content").html(data);
		$("#contentDiv").slideDown('slow');
		replaceTitle();
		cbLoad();
	});	
   //$.fn.HoverImageText.defaults.AnimShow = {height: "show"}; 
   var hoogte = $(window).height();
   var cssStyle = {
        'min-height' : hoogte,
        'height' : hoogte
   }
   $("#divmidden").css(cssStyle);
   //$("").bg(15);
   // fixen
   $("#menu li:not(#lijn)").ahover({toggleEffect: 'width'});
   $("#login,#closeLogin").hide();
   $("#foto_fade").cycle('fade');
   
   // Knoppen pagina's
   //Home knop
   $("a#home").click(function() {
	$(".dialog").hide();
	$("#tt").html("Home");
	replaceTitle();
	$.get("content/home.php","", function(data){
										   	$("#content").empty(); 
										   	$("#content").html(data); 
										   	$("#contentDiv").slideDown('slow');
											replaceTitle();
											cbLoad();
										   	});	
	return false;
   });
   //Geschiedenis knop
   $("a#geschiedenis").click(function() {
	$("#contentDiv").hide();
	$("#tt").html("Geschiedenis");
	$.get("content/geschiedenis.php","", function(data){
										   			$("#content").empty(); 
										   			$("#content").html(data); 
										   			$("#contentDiv").slideDown('slow');
													replaceTitle();
													$('#coda-slider-1').codaSlider();
													insertDivs();
										   			});	
	return false;
   });
   //Bouwplaats knop
   $("a#bouwplaats").click(function() {
	$("#contentDiv").hide();
	$("#tt").html("Bouwplaats");
	$.get("content/bouwplaats.php","", function(data){
										   		$("#content").empty(); 
										   		$("#content").html(data); 
										   		$("#contentDiv").slideDown('slow');
												replaceTitle();
										   		});	
	return false;
   });

   //Leden knop
   $("a#leden").click(function() {
	$("#contentDiv").hide();
	$("#tt").html("Leden");
	$.get("content/leden.php","", function(data){
										   $("#content").empty(); 
										   $("#content").html(data); 
										   $("#contentDiv").slideDown('slow');
										   replaceTitle();
										   Cufon.replace("#ledenlist li", {hover: true, hoverables: {li: true}});
										   cbLoad();
										   hoverFoto();
										   });
	return false;
   });
   //Foto knop
   $("a#foto").click(function() {
	$("#contentDiv").hide();
	$("#tt").html("Foto's");
	$.get("content/foto.php","", function(data){
										   		$("#content").empty(); 
										   		$("#content").html(data); 
										   		$("#contentDiv").slideDown('slow');
												replaceTitle();
										   		});	
	return false;
   });
   //Route knop
   $("a#route").click(function() {
	$("#contentDiv").hide();
	$("#tt").html("Route");
	$.get("content/route.php","", function(data){
										   		$("#content").empty(); 
										   		$("#content").html(data); 
										   		$("#contentDiv").slideDown('slow');
												replaceTitle();
												google_maps();
										   		});	
	return false;
   });
   
   // Page numbers active en non-active
   $(".pagenumber").click(function(){
		$(".pagenumber").removeClass("active_page");
		$(this).addClass("active_page");
	});
   
   //Contact knop
   $("a#contact").click(function() {
	$("#contentDiv").hide();
	$("#tt").html("Contact");
	$.get("content/contact.php","", function(data){
										   		$("#content").empty(); 
										   		$("#content").html(data); 
										   		$("#contentDiv").slideDown('slow');
												replaceTitle();
										   		});	
	return false;
   });
   //Sponsorenlijst knop
   $("a#sponsorlijst").click(function() {
	$("#contentDiv").hide();
	$("#tt").html("Sponsorenlijst");
	$.get("content/sponsorenlijst.php","", function(data){
										   		$("#content").empty(); 
										   		$("#content").html(data); 
										   		$("#contentDiv").slideDown('slow');
												replaceTitle();
												Cufon.replace("#sponsorenlijst li, #sponsoor, #donateurs", {fontSize: '11px'});
										   		});	
	return false;
   });
   //Prijzenkast knop
   $("a#prijzen").click(function() {
	$("#contentDiv").hide();
	$("#tt").html("Prijzenkast");
	$.get("content/prijzen.php","", function(data){
										   			$("#content").empty(); 
										   			$("#content").html(data); 
										   			$("#contentDiv").slideDown('slow');
													replaceTitle();
										   			});	
	return false;
   });
   // Knoppen inlog systeem
   $("#openLogin").click(function() {
	$("#openLogin").hide()
	$("#login").toggle('slow');
	$("#closeLogin").show();
   });
   
   $("#closeLogin").click(function() {	
	$("#openLogin").show();
	$("#login").toggle('slow');
	$("#closeLogin").hide();
   });
 });