// JavaScript
// katz.be
// producten detail : tabbed panels 
// requires jquery 1.3.2

$(document).ready(function(){

					//zebrastriping the tables
					$('.tabpanelcontent tr:odd').addClass('row1');
					$('.tabpanelcontent tr:even').addClass('row2');
					$('.tabpanelcontent tr:nth-child(1)').removeClass('row2');
						
						
					// init first panel
					$('#tabpanel #panelcollection .panelsubtab').hide();
					$('#tabpanel #panelcollection .panelsubtab:nth-child(1)').show();
					//$('#tabpanel #panelcollection .panel:nth-child(1)').slideDown('fast', function() {
							// Animation complete.
							//jumpy behavior, hier niet gebruiken
					//	  });
					$('#tabpanel #tabscontainer .tab:nth-child(1)').addClass('selected');
					
					//click tab function
					$('#tabpanel #tabscontainer .tab').click(function(e) {
						e.preventDefault();	
						//get the clicked index (numbering starts at 0 !)
						var index = $('#tabpanel #tabscontainer .tab').index(this);
						var index = index + 1; // clicked index starts at 0, nth-child starts at 1...
						//alert(index);
						
						//hide all panels, reset all paneltabs
						//$('#tabpanel #panelcollection .panelsubtab').hide();
						$('#tabpanel #panelcollection .panelsubtab').fadeOut('fast');
						$('#tabpanel #tabscontainer .tab').removeClass('selected');
						
						//set active paneltab, show active panel
						//$('#tabpanel #panelcollection .panel:nth-child(' + index +')').show();
						$('#tabpanel #panelcollection .panelsubtab:nth-child(' + index +')').fadeIn('fast');
						//$('#tabpanel #panelcollection .panelsubtab:nth-child(' + index +')').slideDown('slow', function() {
							//e.preventDefault();
							// Animation complete.
							// opgelet: als je snel na elkaar op 2 tabs klikt, zie je TWEE panels;
							//kan opgevangen worden door snelheid op te drijven
							//of door de kortste panels langer te maken
						  //});
						$('#tabpanel #tabscontainer .tab:nth-child(' + index +')').addClass('selected');
						
					});
					
					
					
					
});



