// JavaScript Document



//$(function(){
//		   alert('dom tree geladen');
//		   });

//accordioncode

$(function(){
		   	$('#content_detail').accordion({
								header: 'h2',
								active: 'none',
								////icons:{
//									header: "ui-icon-circle-arrow-e",
//									headerSelected: "ui-icon-circle-arrow-s"
//									},
								autoHeight: false,
								collapsible: false,
								event: "mouseover"
										   });
		   
		  // });

//effecten op thumbnails zetten
//var duimlijst = $('#thumblist div img');
var duimlijst = $('#thumblist div img');
//set van de images van de thumnails
var biglist = $('#grote_foto img')
//set van de grote images

duimlijst.each(function(){
	$(this).height(78).width(105).css('opacity','0.7')
	//de opbouw van deze css is toepasbaar op 1 item
	//elke item in de duimlijst
	//jquery methods
})	
	
biglist.each(function(){
	$(this).css('opacity','1').addClass('')
})
//acties toegepast op vanuit een andere plaats
//duimlijst.bind('mouseover',zoomIn);
//duimlijst.bind('mouseout',zoomOut);

var zoomIn = function(e){
	//zoomeffect op thumbs
	$(this).css({
	//css moet nu toegepast worden op meerder objecten, daarom accolade zetten
			'z-index':1	
			})
			.animate({//http://docs.jquery.com/Effects
					opacity:1 ,
					/*width: 160,
					height: 120*/
					width: 140,
					height: 105
			}, 600);//speed)
}

var zoomOut = function(e){
	//zoomeffect op thumbs
	$(this).css({
	//css moet nu toegepast worden op meerder objecten, daarom accolade zetten
			'z-index':0
			})
			.animate({//http://docs.jquery.com/Effects
					opacity:0.7 ,
					//width: 140,
//					height: 105
					width: 105,
					height: 78
					
			}, 1000);//speed)
}

//var vervPic = function(e){
//	//wisselt de grote foto's
//	//bij aanwijzen van een kleine foto, of mouseover van welke thumbnail dan moet de grote verschijnen, dat is de this
//	//img_src = $(this).attr('src')//ik lees de source van de thumbnail;
//	img_src = $(this).attr('id');
//	//alert(img_src);
//	//re = /(?:thumb_)(\w+)(?:\.jpg)/i;
//	re = /(?:thumb_)(\w+)(?:\.jpg)/i;
//	//alert(re);
//	var plant = img_src.match(re)[1];
//	//var plant = img_src;
//	alert(plant);
//	var bovenop = $('img.boven');//de img die boven ligt
////	
//	var nieuwBovenop = $("#" + plant); //ik stel een nieuwe set klaar
////	var nieuwBovenop = $("#" + img_src);
//    $bovenop.addClass('netEronder');
//	$nieuwBovenop
//	 .addClass('boven')
//	 .animate({
//	 			opacity: 1.0,	 
//			 }, 800, function(){
//	 				$boven.css({opacity: 0.0}).removeClass('boven netEronder');	 
//	 		});
////			
//	//boven krijgt een klasse neteronder
//
//}

duimlijst.bind('mouseover',zoomIn);
duimlijst.bind('mouseout',zoomOut);
//duimlijst.bind('mouseover',vervPic);


//$(function() {
//	// Use this example, or...
//	//$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
//	// This, or...
//	$('#thumblist a').lightBox(); // Select all links in object with gallery ID
////	// This, or...
////	$('a.lightbox').lightBox(); // Select all links with lightbox class
////	// This, or...
////	$('a').lightBox(); // Select all links in the page
//	// ... The possibility are many. Use your creative or choose one in the examples above
//});




//einde document ready
});