// JavaScript Document
$(document).ready(function() {
	  
						   
				// start with collection selection
	$('tr').live('click', function() {								  
		//var nummer = $(this).attr('id');
				  
								  
								  });

	$('#models a').click(function(evt) {
		evt.preventDefault();
		$("#modelTable tr").each(function() {
		 if ($(this).attr('id') == 'tableHeader') {
				 return;
		 	} else { 
		 		$(this).remove();
		 	}
 
		});
		var model = $(this).attr('id');
	  		$.ajax({
		   type: "GET",
		   url: "Includes/xml/models.xml",
		   dataType: "XML",
		   success: function(xml) {
			//get all collection type from xml   
				$(xml).find('model').each(function() {	   
					var aType = $(this).find('type').text();
					if (aType == model) {
						var nummer = $(this).attr('id');
						var kop = 	$(this).find('type').text();
						var kast = 	$(this).find('kast').text();
						var wijzerplaat = $(this).find('wijzerplaat').text();
						var band = 	 $(this).find('band').text();
						var wijzer = $(this).find('wijzer').text();
						$('#modelTable tbody').append('<tr id="'+nummer+'"><td>'+kast+'</td><td>'+wijzerplaat+'</td><td>'+wijzer+'</td><td>'+band+'</td><td>'+nummer+'</td></tr>');
					} else { 
					return;
					};
				});

		   }
		   });	
	});
	
//mouse over function for main page menu language	
$('.region').hover(
	function() {
		$(this).children('.language.hide').removeClass('hide');
	},
	function() {
		$(this).children('.language').addClass('hide');
	});






//mouse over event for submenu
$('li').mouseover(function() {
							   $(this).append.show("slow");
							   });
	
	
	//click on div collections div class items
	$('#collection a').click(function(evt) {
		evt.preventDefault();
		var collectionType = $(this).attr('id');
		//array met id om te vergelijken, Naam , omschrijving en Image path.
		var collection = [
			['eko', 'Eko Limited', 'Eko limited is de top van onze collectie in 2011. Het is een gelimiteerde oplage van 500 genummerde horloges. Het automatische uurwerk maakt batterijen overbodig. Door het glas aan de achterkant kun je het uurwerk zien. Saffier glas, een geschroefde deksel en een schroefbare kroon maken het horloge compleet. Gecombineerd met het strakke ontwerp kan het horloge overal getoond worden, in de boardroom of op het strand. Draag hem met trots', 'Includes/images/collection/116-image-'],
			['pannekoek', 'Pannekoek', 'Dit horloge heeft alle elementen van een design horloge: Een dunne ranke kast, simple basis vorm, geintegreerde band. Wanneer je het horloge om de pols draagt voelt en toon het plat. Toen wij het voor de eerste keer droegen, keer hij de werknaam: the Pancake. Dit hebben we zo gehouden en we vinden het erg mooi. De collectie van 2011 hebben we daarom ook met dit model uitgebreid. Dit is een van onze best verkopende horloges!', 'Includes/images/collection/100-image-'],
			['pilot', 'New Pilot', 'Dit model is een verwijzing naar de grote piloten horloges. Ons ontwerp is kleiner dan de orginele piloten horloges en is slanker waardoor het beter onder je shirt past. Het combineert een sportief uiterlijk met ingetogen kleuren. We denken dat het horloges het beste past bij mensen met gevoel voor design en die niet bang zijn dit te tonen.', 'Includes/images/collection/099-image-'],
			['rondehoek', 'Ronde hoek', 'Ronde hoeken zijn mooi en daarom hebben we dit horloge ontwikkelt. De ronde hoeken geven het horloge een krachtige en afgewerkte uitstraling. Het saffier glas zorgt ervoor dat er geen krassen opkomen. Het horloges blijft tijdloos mooi.', 'Includes/images/collection/111-image-'],
			['rondo', 'Rondo dames', 'Dit dames horloges hebben we ontwikkelt, vanuit de gedachte eenvoud en toch opvallend krachtig. Door de kleur banden wordt het een modieuze horloge.', 'Includes/images/collection/103-image-'],
			['nieuwecollectie', 'Nieuwe collectie najaar 2011', 'De nieuwe ontwerpen zijn gebasseerd op de kast van de pannekoek. De nieuwe collectie zal oa worden uitgevoerd met een zwitsersuurwerk. Ze hebben allemaal ontspiegeld saffier glas en zijn 5 ATM waterdicht.', 'Includes/images/collection/SG2-image-'],
			
		];
		for (var i=0; i<collection.length; i++) {
	  		if (collection[i][0] == collectionType) {
						var kop = collection[i][1];
						var txt = collection[i][2];
						var img1 = collection[i][3] + '1.png';
						var img2 = collection[i][3] + '2.png';
						var img3 = collection[i][3] + '3.png';
						$('#pageTitle').html(kop);
						$('#tekst').html(txt);
						$('#image1 a').attr('href',img1);
						fade('#image1 a', img1);
						$('#image2 a').attr('href',img2);
						fade('#image2 a', img2);
						$('#image3 a').attr('href',img3);
						fade('#image3 a', img3);
						fade('#gallery-image' , img1);
					} 
		}//end for loop
	});//close click
	
	// Start with gallery
	$('#gallery a').click(function(evt) {
		//don't follow link
		 evt.preventDefault();
		 //get path to new image
	   var imgPath = $(this).attr('href');
		 //get reference to old image
		 var oldImage = $('#gallery-image img');
		 //check to see if they're the same image
		 if (imgPath == oldImage.attr('src')) { 
		 	//if they are then you're done
		 	return;
		 } else {
			 //remove highglight from previously clicked thumbnail
      		 $('.selected').removeClass('selected');		
			 //add highlight to this thumbnail
			 $(this).addClass('selected');
			 //create HTML for new image
			 var newImage = $('<img src="' + imgPath +'"/>');
			 //make new image invisible
			 newImage.hide();
			 //add to the #photo div
			 $('#gallery-image').prepend(newImage);
			 //fade in new image
			 newImage.fadeIn(1000);			 
			 //fade out old image and remove from DOM	 
			 oldImage.fadeOut(1000,function(){
		     $(this).remove();
				});
		 }
	});// end of gallery	
function fade(target, imgPath) {
	var oldImage = $(target + ' img');
	var newImage = $('<img src="'+imgPath +'"/>');	

	newImage.hide();
	$(target).prepend(newImage);
	newImage.fadeIn(1000);
	oldImage.fadeOut(1000, function(){
									$(this).remove();
									});
	
}// end of fade 



function fbFetch(){
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
 
var url = "http://graph.facebook.com/InTouchMinistries/feed?limit=20&callback=?"
 
//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
$.getJSON(url,function(json){
var html = "<ul>";
 
//loop through and within data array's retrieve the message variable.
$.each(json.data,function(i,fb){
if(fb.link){
    html += "<li><img src='"+fb.picture+"'/><a href='" +fb.link+"'>"+ fb.message + "</a></li>";
}else{
    html += "<li>"+ fb.message + "</li>";
}
});
 
html += "</ul>";
 
//A little animation once fetched
$('.facebookfeed').animate({opacity:0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity:1}, 500);
});
};


});