//Vertical carousel on meet our people page
jQuery(function () { 
	
	//show ul (was hidden in css)
	$("#vert-wrap-outer ul").show();
	
	//initialise carousel
	jQuery('#mycarousel-vert').jcarousel({
			visible:4,
			scroll:3,
			vertical:true //vertical
	});
	
	
	

// hover state

	$("#mycarousel-vert li").hover(
		  function () {
			$(this).addClass("verthover");
		  }, 
		  function () {
			$(this).removeClass("verthover");
		  }
		);


	
	
	//hide all the main divs - need to call for safari, although already hidden in css  
	hideMainImages();
	
	 
	 //display the first div (content)
	 $('#meet-content div.meet-content-wrap:first').show();
	 $('#mycarousel-vert li:first').addClass("on");
	 
	 //display the main content for the slected li 
	$('#mycarousel-vert li').each(function(index){
		$(this).click(function(){ 
				hideMainImages();
				// show selected li
				$('#meet-content div.meet-content-wrap:eq(' + index + ')').show();
				removeThumbNailOnStates();
				$(this).addClass("on");
				
		});
	});
	
});

function hideMainImages(){
	 $('#meet-content div.meet-content-wrap').hide();
}

function removeThumbNailOnStates(){
	$('#mycarousel-vert > li').removeClass("on");
}

 //li hover
  // $("#mycarousel-vert li").mouseover(function(){
//			$(this).addClass("verthover");
//										   });