// JavaScript Document
// Authored by Jeremy Carlson

jQuery(document).ready(function($) {
		//Menu animation						
		$('#navList ul').css({display: "none"}); //Fix Opera
  		$('#navList li').hover(function() {  
		$(this).find('a').stop().animate({'width' : "280"});
   		$(this).find('ul:first').css({visibility : "visible", display : "none"}).show(400);
    
  		}, function() {
    		$(this).find('ul:first').css({visibility : "hidden"}).hide(400);
   			$(this).find('a').stop().animate({'width' : "250"});
  
		});						
								
		//hide Left control at start
		$('#controlLeft').hide();
						   
		var currentPosition = 0;
		var slideWidth = 580;
		var slides = $('.slide');
		var numberSlides = slides.length;
		
		//Create function to control the hiding of the arrow controls
		//If you add more slides, change the 3 to: number of slides -1, so if you have 5 slides, then the number should be 4
		function controlMechanism () {
			if (currentPosition >= 3) {
			$('#controlRight').hide();
		} else {
			$('#controlRight').show();	
		}
		//do not change this number
		if (currentPosition <= 0) {
			$('#controlLeft').hide();
		} else {
			$('#controlLeft').show();	
		}	
		};
		
		
		//Move the slider with list items
		$('#controlList li').click(function(evt) {
			evt.preventDefault()
			currentPosition = ($(this).index());
			//Move slider
			$('#slideWrap').animate({'marginLeft' : slideWidth*(-currentPosition)});
			
			//Call the arrow control function
			controlMechanism ();
		});
		
		//Move the slider with left and right controls
		$('.controls').click(function(evt) {
			evt.preventDefault()
			//if right control is clicked, add 1 to position, otherwise subtract 1
			currentPosition = ($(this).attr('id') == 'controlRight'
			? currentPosition+1 : currentPosition-1);
			//Move slider
			$('#slideWrap').animate({'marginLeft' : slideWidth*(-currentPosition)});
									  
		
			//Call the arrow control function
			controlMechanism ();

		});
		
		
		//Give a starting value to the search box, take it out when search box is clicked on
		$('#searchform input:first')
			.attr({'value' : "Search Web Machine"})
			.css({
				color: '#999999',
				fontStyle: 'italic'
			}).focus(function() {
				$(this).attr('value', "");
			});
					
});