/* IMAGE FADER (IMAGE SLIDESHOWS) */
			
			function theRotator() {
				//Set the opacity of all images to 0
				$('div#main_image ul li').css({opacity: 0.0});
				//Get the first image and display it (gets set to full opacity)
				$('div#main_image ul li:first').css({opacity: 1.0});
				//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
				setInterval('rotate()',3000);
			}
			
			function rotate() {	
				//Get the first image
				var current = ($('div#main_image ul li.show')?  $('div#main_image ul li.show') : $('div#main_image ul li:first'));
				//Get next image, when it reaches the end, rotate it back to the first image
				var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#main_image ul li:first') :current.next()) : $('div#main_image ul li:first'));	
				//Set the fade in effect for the next image, the show class has higher z-index
				next.css({opacity: 0.0})
				.addClass('show')
				.animate({opacity: 1.0}, 1000);
				//Hide the current image
				current.animate({opacity: 0.0}, 1000)
				.removeClass('show');
			};
			
			$(document).ready(function() {		
				//Load the slideshow
				theRotator();
			});




/* IMAGE REVEALER (STYLE SECTION MENU) */
			
			$(document).ready(function(){
				  //original span.resize values that we set in the CSS
				  var oWidth = $('div.drop').width();
				  var oHeight = $('div.drop').height();
							
			//hover over the span image to start the function
				//HOVER
				  $('div.drop').hover(function(){
					  //this is the hover over function, bump up the
					  //zindex and make the animation
					  $(this)
						.stop()
						.css('z-index','99')
						.addClass("drop_hovered")
						.animate({
						  width:190,
						  height:$('div.drop div.drop_inner').height()
						},500);
					},
					
					//this is the hover out function, decrease the span
					//back to original size, decrease the z-index
					//back to normal
					function(){
					  $(this)
						.stop()
				  		.animate({
						  //take the span back to the original
						  //size we set the variables for
						  width:190,
						  height:30
						},500, 
						  //callback function to make css run AFTER shrink  
						  function(){ 
						  $(this)
							.css('z-index','-1')
							.removeClass('drop_hovered');
						  });
						});
				});