$(function(){
	$(".cycle").css("display","block");
	$("#accordion").css("display","block");
	
	//Cycle Slideshow
	$(".cycle").cycle({
		fx: 'fade',
		speed: 1200,
		timeout: 1000,
		pause: true, //pauses slideshow on hover
		before:  onBefore 
    	//after:   onAfter 
	});
	
	var current_slideshow = "lobe"; 
	var category = "ear";
	
	if(current_slideshow == "lobe"){
		$("#lobe-info").css("display","block");
	}else{
		$("#lobe-info").css("display","none");
	};


	//Show current slideshow only
	function startSlide(){
		$(".cycle").hide();
		$("."+current_slideshow).fadeIn("slow"); //class of Cycle div
	}
	startSlide();

	// Accordion navigation
	$("#accordion").accordion({ 
	  	header: "h3"
	 });
	
	
	$(".dropdown p").click(function(){
		$(".dropdown p").removeClass("active"); //changes style of nav text onclick
		$(this).addClass("active");
		
		current_slideshow = $(this).attr("id"); //current slideshow is same as ID of nav
		
		category = $(this).attr("class").split(' ').slice(0, 1); //pics first class of the selected navigation item, and uses it as the background image for the main .bg-cycle div containing the images. This is useful to not create a gap between images of the same type.
		
		$(".bg-cycle").css('background', 'url("../gs/piercing-slideshows/bg-'+category+'.jpg")');
		if(current_slideshow == "lobe"){
			$("#lobe-info").css("display","block");
			}else{
				$("#lobe-info").css("display","none");
		};
		startSlide();
		return false;
	});
	
	$("h3").click(function(){
		var next_slideshow = $(this).parent().find("p:first");
		current_slideshow = next_slideshow[0].id;
		$(".cycle").fadeOut("slow");
		$("."+current_slideshow).fadeIn("slow");
		
		next_slideshow.addClass("active"); //adds class of active to first link in chosen section
		category = $(next_slideshow).attr("class").split(' ').slice(0, 1); //gets category based on first class of <p>
		
		$(".bg-cycle").css('background', 'url("../gs/piercing-slideshows/bg-'+category+'.jpg")'); //changes static background image to match category
		if(current_slideshow == "lobe"){
		$("#lobe-info").css("display","block");
		}else{
			$("#lobe-info").css("display","none");
		};
	});
	
	//For slideshows that need a larger background
	$("h3.large").click(function(){
		$(".slide-frame").removeClass("small-bg").addClass("large-bg");
		$(".slide-frame-top").removeClass("small-top").addClass("large-top");
		$(".slide-frame-btm").removeClass("small-btm").addClass("large-btm");
		$("#slideshow").removeClass("small-slide").addClass("large-slide");
		$(".bg-cycle").removeClass("small-slide").addClass("large-slide");
	});
	
	//For slideshows that need a smaller background
	$("h3.small").click(function(){
		$(".slide-frame").removeClass("large-bg").addClass("small-bg");
		$(".slide-frame-top").removeClass("large-top").addClass("small-top");
		$(".slide-frame-btm").removeClass("large-btm").addClass("small-btm");
		$("#slideshow").removeClass("large-slide").addClass("small-slide");
		$(".bg-cycle").removeClass("large-slide").addClass("small-slide");
		
	});
	
	//callback for tooltips
	function onBefore() {
		var tooltip = $("."+this.id); //"this" refers to image link within onBefore. id of image link becomes the class for tooltip.
		var imageLink = $(".cycle a#"+this.id); //id of image link
		
		//tooltips animation
		imageLink.hover(function(){	
			$(".default").stop().fadeTo('def' , 0).css('filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)');
			tooltip.stop().fadeTo('100' , 1.0).css('filter', 'none');
		},function(){
			tooltip.stop().fadeTo('def' , 0).css('filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)');
			$(".default").stop().fadeTo('100' , 1.0).css('filter', 'none');
		});
	};
});