// JavaScript Document

$(document).ready(function() {
						   
	     //this is the code for the lightbox//
	 $(function() {
	// Use this example, or...
	//$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	//$('#gallery 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
	});



	// hides all on open
	$("#rugged").hide();
	$("#suede").hide();
	$("#enschooling").hide();
	$("#morechaps").hide();
	$("#sports").hide();

	
		//this is how to make a roll-over effect in jquery
	$(".lightpic").hover(function() {
			$(".lightpic").addclass(".lightpic_hover");
	}, function() {
		$(".lightpic").removeclass(".lightpic_hover");
	});
	
	// shows the massage section and hides rest
	$("#ruggedLink").click(function() {
			
	$("#rugged").show();
	$("#suede").hide();
	$("#enschooling").hide();
	$("#morechaps").hide();
	$("#sports").hide();
		
	});
	
	
	// shows the skincare section and hides rest
	$("#suedeLink").click(function() {
			
	$("#rugged").hide();
	$("#suede").show();
	$("#enschooling").hide();
	$("#morechaps").hide();
	$("#sports").hide();

	
	});

	// shows the body ex section and hides rest
	$("#enschoolingLink").click(function() {
			
	$("#rugged").hide();
	$("#suede").hide();
	$("#enschooling").show();
	$("#morechaps").hide();
	$("#sports").hide();
	
	});
	

	
	// shows the hair section and hides rest
	$("#morechapsLink").click(function() {
			
	$("#rugged").hide();
	$("#suede").hide();
	$("#enschooling").hide();
	$("#morechaps").show();
	$("#sports").hide();
	
	
	});
	
	// shows the finishing section and hides rest
	$("#sportsLink").click(function() {
			
	$("#rugged").hide();
	$("#suede").hide();
	$("#enschooling").hide();
	$("#morechaps").hide();
	$("#sports").show();
	
	
	});
	
	
	


});