$(document).ready(function(){
		
	$("#firstselector").attr("style", "background: transparent url(images/selector-trans.png) no-repeat;")
		
	$("#nav1").click(function(){
		$("#whyscrimple").hide();
		$("#signupform").hide();
		$("#notsignedup").fadeIn("slow");
		$("#loginform").fadeIn("slow");
		$(".selector").attr("style", "background-image: none");
		$("#nav1").parent().attr("style", "background: transparent url(images/selector-trans.png) no-repeat;");
		return false;
	});
	
	$("#nav2").click(function(){
		$("#notsignedup").hide();
		$("#loginform").hide();
		$("#signupform").fadeIn("slow");
		$("#whyscrimple").fadeIn("slow");
		$(".selector").attr("style", "background-image: none");
		$("#nav2").parent().attr("style", "background: transparent url(images/selector-trans.png) no-repeat;");
		return false;
	});

	//when mouse moves away, remove hover
	$(".textField").mouseout(function() {
		$(this).removeClass("hover");
	})
	
//when user clicks elsewhere, remove green
	$(".textField").blur(function() {
		$(this).removeClass("darken");
	})
	
//When typing/ focused, make it green, remove all other classes
	$(".textField").focus(function() {
		$(this).addClass("darken");
	},function(){
		$(this).removeClass("red hover");
	})
	
//when hovered, make it gray, remove all other classes
	$(".textField").hover(function() {
		$(this).addClass("hover");
	},function(){
		$(this).removeClass("red");
	})

    // validate signup form on keyup and submit 
    var validator = $("#signupform").validate({ 
        rules: { 

            email: { 
                required: true, 
                email: true 
                //remote: "emails.php" 
            },
			password: { 
                required: true, 
                minlength: 5 
            }, 
            password_confirm: { 
                required: true, 
                minlength: 5, 
                equalTo: "#password" 
            }, 
			location: { 
                required: true, 
                minlength: 5,
				range: [00001, 99999]
            }
        }, 
        messages: { 
            password: { 
                required: "Provide a password", 
                rangelength: jQuery.format("Enter at least {0} characters") 
            }, 
            password_confirm: { 
                required: "Repeat your password", 
                minlength: jQuery.format("Enter at least {0} characters"), 
                equalTo: "Enter the same password as above" 
            }, 
            email: { 
                required: "Enter a valid email address", 
                minlength: "Please enter a valid email address", 
                remote: jQuery.format("{0} is already in use") 
            },
			location: { 
                required: "Enter a zip code for your city or town", 
                minlength: "Enter use a zipcode, like 14850"
                //remote: jQuery.format("{0} is already in use") 
            }
        },
        // the errorPlacement has to take the table layout into account 
        errorPlacement: function(error, element) { 
            if ( element.is(":radio") ) 
                error.appendTo( element.parent().next().next() ); 
            else if ( element.is("#checkbox") ) 
                error.appendTo ( element.next() ); 
            else 
                //$("#email_status").empty();
				error.appendTo( element.next("#err_msg") );
        },
       
        // set this class to error-labels to indicate valid fields 
        success: function(label) { 
            // set as text for IE 
			label.html(" ").addClass("checked");
        } 
    }); 
	
	
});