/* JQuery Validation Plug-in */
/* Additional method */

/*
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
	return this.optional(element) || phone_number.length > 9 &&
		phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
*/




/* JQuery scripts go here */

$(document).ready(function(){	//When document is done loading...



	//Randomize photo placement, rotation, and stacking
	//
	//
	//Which page are we on?
	var pageID = $("body").attr("id");
	if(pageID != "photos") {

		//Start with default treatment for all pages except "photos"
		//
		var photos = $("body:not(#photos) #sidebarphotos div").get();
		var imageCount = photos.length;
		
		if($("#sidebarphotos div").length) {	//If there are any photos in the sidebar...
		
			var startingTopPosition = $("#sidebarphotos div").eq(0).css("top");
			startingTopPosition = startingTopPosition.replace("px", "");
			startingTopPosition = parseInt(startingTopPosition);
		
			for (var i = 0; i < imageCount; i++) {	//Loop through each
			
				//X position
				var posOrNegOne = 1;
				if(Math.random() > 0.5) {
					posOrNegOne = -1;
				}
				var newLeftPosition = (Math.random() * 20) * posOrNegOne;
				newLeftPosition += "px";
				$("#sidebarphotos div").eq(i).css("left", newLeftPosition);
		
				//Y position
				var newTopPosition = startingTopPosition + (i * 230);
				newTopPosition += "px";
				$("#sidebarphotos div").eq(i).css("top", newTopPosition);
				
				//Z index
				var newZindex = imageCount - i;
				$("#sidebarphotos div").eq(i).css("z-index", newZindex);
		
				//Rotation
				posOrNegOne = 1;
				if(Math.random() > 0.5) {
					posOrNegOne = -1;
				}
				var newRotationAmount = (Math.random() * 5) * posOrNegOne;
				var newRotationCSSValue = "rotate(";
				newRotationCSSValue += newRotationAmount;
				newRotationCSSValue += "deg)";
				$("#sidebarphotos div").eq(i).css("-webkit-transform", newRotationCSSValue);
				$("#sidebarphotos div").eq(i).css("-moz-transform", newRotationCSSValue);
				$("#sidebarphotos div").eq(i).css("transform", newRotationCSSValue);
				
				//Masking tape
				applyMaskingTape();
			}
			
		}
				
	} else {

		//Continue with treatment for "photos" page
		//
		var photos = $("#photos #sidebarphotos div").get();
		var imageCount = photos.length;
		
		var startingLeftPosition = $("#photos #sidebarphotos div").eq(0).css("left");
		startingLeftPosition = startingLeftPosition.replace("px", "");
		startingLeftPosition = parseInt(startingLeftPosition);
		
		var startingTopPosition = $("#photos #sidebarphotos div").eq(0).css("top");
		startingTopPosition = startingTopPosition.replace("px", "");
		startingTopPosition = parseInt(startingTopPosition);
	
		for (var i = 0; i < imageCount; i++) {	//Loop through each
		
			//X position
			var newLeftPosition = -1 * (startingLeftPosition + (i % 3 * 230));
			newLeftPosition += "px";
			$("#photos #sidebarphotos div").eq(i).css("left", newLeftPosition);
	
			//Y position
			var newTopPosition = -80 + (Math.round((i - 1) / 3) * 260);
			newTopPosition += "px";
			$("#photos #sidebarphotos div").eq(i).css("top", newTopPosition);

			//Z index
			var newZindex = imageCount - i;
			$("#photos #sidebarphotos div").eq(i).css("z-index", newZindex);
	
			//Rotation
			var posOrNegOne = 1;
			if(Math.random() > 0.5) {
				posOrNegOne = -1;
			}
			var newRotationAmount = (Math.random() * 5) * posOrNegOne;
			var newRotationCSSValue = "rotate(";
			newRotationCSSValue += newRotationAmount;
			newRotationCSSValue += "deg)";
			$("#photos #sidebarphotos div").eq(i).css("-webkit-transform", newRotationCSSValue);
			$("#photos #sidebarphotos div").eq(i).css("-moz-transform", newRotationCSSValue);
			$("#photos #sidebarphotos div").eq(i).css("transform", newRotationCSSValue);
			
			//Masking tape
			applyMaskingTape();
		}

		//Make wrapper div taller to accommodate photos
		$("#wrapper").css("min-height", "900px");
	}

	
	
	//Make photos draggable
	//
	$("#sidebarphotos div").draggable({
		containment: 'body',
		stack: '#sidebarphotos div'
		});



	//Change photo padding color on hover
	//
	$("#sidebarphotos div").hover(function () {
			$(this).css({'background-color' : '#ffbbbc'});	//Over
		}, function () {
			$(this).css({'background-color' : 'white'});  	//Out
		});



	//Change icon drop shadow on hover
	//
	$("#footer img").hover(function () {
			$(this).addClass('hovered');		//Over
		}, function () {
			$(this).removeClass('hovered');  	//Out
		});



	//Staff subnavigation
	//
    $('#subnav li').click(function(event) {
    	event.preventDefault();
    	var newItemID = $('a', this).attr('href');
    	//Update 'selected' class
		$('.selected').removeClass('selected');
		$(this).addClass('selected');
    	//Fade out whichever item is currently visible
    	$('#listings div:visible').fadeOut('fast', function() {
	    	//Fade in the newly selected person
	    	$(newItemID).fadeIn('fast');
    	});
	});



	
	//Funtion to apply masking tape
	function applyMaskingTape() {

		//Apply tape
		var tapeImg = "<img class=\"tape\" src=\"images/maskingtape1.png\" />";
		if(Math.random() > 0.5) {
			tapeImg = "<img class=\"tape\" src=\"images/maskingtape2.png\" />";
		}
		$("#sidebarphotos div").eq(i).prepend(tapeImg);
		
		//X position
		var newLeftPosition = (Math.random() * 120) + 20;
		newLeftPosition += "px";
		$("#sidebarphotos div").eq(i).children(".tape").css("left", newLeftPosition);

		//Y position
		var newTopPosition = (-1 * Math.random() * 15) - 10;
		newTopPosition += "px";
		$("#sidebarphotos div").eq(i).children(".tape").css("top", newTopPosition);

		//Rotation
		var posOrNegOne = 1;
		if(Math.random() > 0.5) {
			posOrNegOne = -1;
		}
		var newRotationAmount = (Math.random() * 180) * posOrNegOne;
		var newRotationCSSValue = "rotate(";
		newRotationCSSValue += newRotationAmount;
		newRotationCSSValue += "deg)";
		$("#sidebarphotos div").eq(i).children(".tape").css("-webkit-transform", newRotationCSSValue);
		$("#sidebarphotos div").eq(i).children(".tape").css("-moz-transform", newRotationCSSValue);
		$("#sidebarphotos div").eq(i).children(".tape").css("transform", newRotationCSSValue);
	}




	/*				  */
	/*	CONTENT FORM  */
	/*				  */
	
	//Inline validation (uses plug-in)
	//
	//Set validation rules
	/*
    $("#hairmodel #form").validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            mobileNumber: {
            	required: true,
            	phoneUS: true
            },
            email: {
            	required: true,
                email: true
            }
        },
        //Set error messages
        messages: {
            name: {
                required: "Your name, please?",
                minlength: "Surely your name is longer than that, no?"
            },
            mobileNumber : {
            	required: "Please provide your mobile phone number.",
            	phoneUS: "We need a domestic phone number where we can reach you."
            },
            email: {
                required: "I'm definitely going to need your address if you want me to write back.",
                email: "Hmm, this doesn't look right."
            }
		},
		success: "valid"
    });
    */

	//Plug-in to show hints in text input fields
	//
	//Borrowed from: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/comment-page-1/
	//
	jQuery.fn.hint = function (blurClass) {
	  if (!blurClass) { 
	    blurClass = 'blur';
	  }
	
	  return this.each(function () {
	    // get jQuery version of 'this'
	    var $input = jQuery(this),
	
	    // capture the rest of the variable to allow for reuse
	      title = $input.attr('title'),
	      $form = jQuery(this.form),
	      $win = jQuery(window);
	
	    function remove() {
	      if ($input.val() === title && $input.hasClass(blurClass)) {
	        $input.val('').removeClass(blurClass);
	      }
	    }
	
	    // only apply logic if the element has the attribute
	    if (title) { 
	      // on blur, set value to title attr if text is blank
	      $input.blur(function () {
	        if (this.value === '') {
	          $input.val(title).addClass(blurClass);
	        }
	      }).focus(remove).blur(); // now change all inputs to title
	
	      // clear the pre-defined text when form is submitted
	      $form.submit(remove);
	      $win.unload(remove); // handles Firefox's autocomplete
	    }
	  });
	};
	//Apply hinting to all text input fields
	//If the field has a title="" value, it will be shown as a "hint"
	$('input').hint();

	//Toggle "otherService" field
	$("#Other").click(function(event) {
		$("#otherService").slideToggle(100);
	});
	
	//Submit button
	/*
	$('#hairmodel #submitButton').click(
		function(event) {
			event.preventDefault();

			//Update UI
			$('.textInput').attr('disabled', 'true');	//Disable all the text fields

			//Get the data from all the fields
			var name = $('input[name=name]');
			var email = $('input[name=email]');
			
			var passOrFail = 0;		//Boolean set to zero (failure) by default
				
			//Hand off data to PHP
			$.get("hairmodel.php", { inputName: name.val(), inputEmail: email.val(), inputComment: comment.val() }, 
				function(data) {
					passOrFail = data;
					if (passOrFail == 1) {
						//If success
						$('.loading').slideUp(100);		//Hide loading indicator
						$('.success').slideDown(100);	//Reveal success message
					} else {
						//If failure
						$('.loading').slideUp(100);		//Hide loading indicator
						$('#form').slideDown(100);		//Reveal form
						$('.textInput').removeAttr("disabled");		//Re-enable all the text fields
						alert('Sorry, I had trouble sending that! Please try again later.');
					}
				}
			);
		}
	);
	*/


});