$(document).ready(function(){

	//this site uses the cycle plugin and the SimpleModal plugin located in the js folder
	
	/*quote details hover state on home page
	$(".quote").hover(function() {
		$(".quote-details").stop(true, true).fadeIn(500);
	}, function() {
		$(".quote-details").stop(true, true).fadeOut(500);
	});*/
	
	//home page slider
	$('.hero #slides').cycle({ 
		fx: "fade",
		delay: 1000,
	    timeout: 10000, 
	    pager: "#slider-nav"
	}); 
	
	//portfolio page slider
	var portfolioSlider = $('.portfolio-slider');
	var portfolioImage = $('.portfolio-slider img');
	
	portfolioSlider.cycle({ 
	    fx: "fade",
	    delay:  1000,
	    timeout: 10000,
    	pager: ".slider-nav div",
    	pagerEvent: "click",
    	activePagerClass: "activeSlide"
	}); 
	
	//"click for more" hover state
	$(".overlay-wrapper").hover(
   		function() {
   			$(".overlay").fadeIn('fast');
   			portfolioSlider.cycle('pause'); //pause slider when you hover portfolio-slider div
   		}, 
   		function() {
   			$(".overlay").fadeOut('fast');
   			portfolioSlider.cycle('resume');
   		}
   	);
   	
   	//hover functionality for project details and more thumbnails content
   	$(".modal").hover(
   		function() {
   			$(".more-info").fadeIn('fast');
   		}, 
   		function() {
   			$(".more-info").fadeOut('fast');
   		}
   	);
   	
   	//opacity for modal item content
   	$(".more-info").css('opacity','.9');
   	
   	//take each main slider image's alt text and use it as the slide's anchor text in side navigation on portfolio page
  	/*$(".portfolio-slider img[alt]").each(function(i, item){
	    var imageAlt = $(item).attr("alt");
	    var text = imageAlt;
	    $(".slider-nav div a").eq(i).text(text);
	});*/
	
	$(".portfolio-slider a").each(function(i, item){
	    var imageTitle = $(item).attr("title");
	    var text = imageTitle;
	    $(".slider-nav div a").eq(i).text(text);
	});
	
	//portfolio page modals
	$(".portfolio-slider a").click(function(e) {
		var className = $(this).attr("class"); 
		var modalName = $("#" + className).modal({overlayClose : true});//alow a user click to close the modal
		e.preventDefault();
	});
	
	//testimonial screenshot fadein feature
	$(".testimonial-modal a[rel=screenshot]").click(function(e) {//if you click on a link with rel="screenshot"
		var scrollTop = null;
		$(this).parent().next().modal({//turn the next <dd> after this link's parent <dd> into a modal
			overlayClose : true,	
			onShow: function() {	//the rest of this maintains the scroll position after the user clicks
				if(scrollTop !== null) $(this).scrollTop(scrollTop);
			},
			onClose: function() {
				scrollTop = $(this).scrollTop();
				$.modal.close();
			}
		}); 	
		e.preventDefault();
	});	
	
	//allows swap in/out of image thumbnails in each modal window on portfolio page
	$(".more-images a").click(function(e) {
		var largePath = $(this).attr("href");
		var thisId = $(this).closest("div").parents("div").parent().attr("id"); // this gets the id of the parent div that has a class of "modal"
		var data = $("#" + thisId + " img.largeImg").attr("src", largePath); // find thisId's closest image with "largeImg" class & replaces its href with the href of the image you just clicked on
		e.preventDefault();
	});
	
	//testimonials page's hover state
	$("dl").hover(function() {
		$(this).addClass("dl-hover");
	}, function() {
		$(this).removeClass("dl-hover");
	});
	
	//form validation
	var errorsDiv = $("#form_errors");//store #form_errors div
	var randomNum1 = Math.floor(Math.random()*11);//generate random number 1
	var randomNum2 = Math.floor(Math.random()*11);//generate random number 2
	var randomTotal = randomNum1 + randomNum2;//create math problem
	var mathInput = $("#math-value");
	$("#math-equation").text(randomNum1 + " + " + randomNum2);
	
	$("#contact-form").submit(function(e) {
		
		errorsDiv.empty().hide();				//hide form errors from previous submits 		   
		$("#reset").click(function() {			//empty form errors div when you click #reset button
			errorsDiv.empty().hide();
			$("tr").removeClass("label-error");
		});
		
		var validPhone = /[a-zA-z]/;//this test the first name and last name
		var phoneNumber = $("input[name=phone number]").attr("value");
		if(validPhone.test(phoneNumber)){
			errorsDiv.show().append('<p>Please enter a valid phone number.</p>');
		}
		
		//form errors div content
		$("input.required").each(function(i,elm) {	//find all required inputs
			if ($(this).val() == "" ) {				//find their name attributes and append their name to a 
				var formInput = $(elm).attr("name");//paragraph that says what field they left blanks
				var formLabel = $(elm).closest("tr").addClass("label-error");//find the nearest tr and add 
				errorsDiv.show().append("<p>The " + formInput + " is a required field.</p>");//error class to it
			}					
			console.log(formLabel)//make sure .label-error is on the tr;
			if ($(elm).closest("tr").hasClass("label-error") && !$(this).val() == ""){
				$("tr").removeClass("label-error");
			}
		});
		//solve math equation
		if(mathInput.val() != randomTotal){
			errorsDiv.show().append("<p>Please solve the math problem.</p>");
			mathInput.parent().prev().addClass("label-error");								
			e.preventDefault();
		} else{
			mathInput.parent().prev().removeClass("label-error");
		}
		
		//alert(mathVal)
		
		//return false;
		//e.preventDefault();
	});
//close jquery	
});