$(document).ready(function(){

	// hides
	
	$('#about').hide();
	$('#projects').hide();
	$('#contact').hide();
	$('#container').hide();
	$('#boy div img').hide();
	$('#girl div img').hide();
	
	// move faces on load and resize
	
	$(window).bind('load resize', function(){
		movefaces();
	});
	
	// change image function
	
	function movefaces(){
	
		var windowwidth = $(window).width();
		windowleft = ((parseInt(windowwidth)-840)/2);
			
		$('#container').each(function(){
			
			if (windowleft > 200) {
				$(this).css('left', windowleft);
			}
			else {
				$(this).css('left','200');
			};
		});
	};
	
	// menu shows
	
	$('a.about').click(function(){
		$('#about').toggle();
		$('#projects').hide();
		$('#contact').hide();
	});
	
	$('a.projects').click(function(){
		$('#about').hide();
		$('#projects').toggle();
		$('#contact').hide();
	});
	
	$('a.contact').click(function(){
		$('#about').hide();
		$('#projects').hide();
		$('#contact').toggle();
	});
	
	// image variables
	
	var boyhairhat = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png','12.png'];
	var boychin = ['1.png','2.png','3.png','4.png','5.png','6.png'];
	var boymouth = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png'];
	var boynose = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png'];
	var boyeyes = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png','15.png','16.png','17.png','18.png'];
	var girlhairhat = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png'];
	var girlchin = ['1.png','2.png','3.png','4.png','5.png','6.png'];
	var girlmouth = ['1.png','2.png','3.png','4.png','5.png','6.png'];
	var girlnose = ['1.png','2.png','3.png','4.png','5.png','6.png'];
	var girleyes = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png'];
			
	// first random image

	$('#boyhairhat img').attr('src', 'boyhairhat'+ boyhairhat[Math.floor(Math.random() * boyhairhat.length)]).load(function(){ $('#boyhairhat img').show(); });
	$('#boychin img').attr('src', 'boychin'+ boychin[Math.floor(Math.random() * boychin.length)]).load(function(){ $('#boychin img').show(); });
	$('#boymouth img').attr('src', 'boymouth'+ boymouth[Math.floor(Math.random() * boymouth.length)]).load(function(){ $('#boymouth img').show(); });
	$('#boynose img').attr('src', 'boynose'+ boynose[Math.floor(Math.random() * boynose.length)]).load(function(){ $('#boynose img').show(); });
	$('#boyeyes img').attr('src', 'boyeyes'+ boyeyes[Math.floor(Math.random() * boyeyes.length)]).load(function(){ $('#boyeyes img').show(); });
	$('#girlhairhat img').attr('src', 'girlhairhat'+ girlhairhat[Math.floor(Math.random() * girlhairhat.length)]).load(function(){ $('#girlhairhat img').show(); });
	$('#girlchin img').attr('src', 'girlchin'+ girlchin[Math.floor(Math.random() * girlchin.length)]).load(function(){ $('#girlchin img').show(); });
	$('#girlmouth img').attr('src', 'girlmouth'+ girlmouth[Math.floor(Math.random() * girlmouth.length)]).load(function(){ $('#girlmouth img').show(); });
	$('#girlnose img').attr('src', 'girlnose'+ girlnose[Math.floor(Math.random() * girlnose.length)]).load(function(){ $('#girlnose img').show(); });
	$('#girleyes img').attr('src', 'girleyes'+ girleyes[Math.floor(Math.random() * girleyes.length)]).load(function(){ $('#girleyes img').show(); });
	
	// change image function
	
	$.fn.changeImage = function(img, location, arr){
	    $(this).click(function(){
	        var cur = $(img).attr('src');
	        var rnd = cur;
	        while(cur==rnd){
	            rnd = location + arr[Math.floor(Math.random() * arr.length)];
	        };
	        $(img).attr('src',rnd).show();
	    });
	};
	
	// new image clicks
	
	$('#boy-button-hairhat').changeImage('#boyhairhat img', 'boyhairhat', boyhairhat);
	$('#boy-button-chin').changeImage('#boychin img', 'boychin', boychin);
	$('#boy-button-mouth').changeImage('#boymouth img', 'boymouth', boymouth);
	$('#boy-button-nose').changeImage('#boynose img', 'boynose', boynose);
	$('#boy-button-eyes').changeImage('#boyeyes img', 'boyeyes', boyeyes);
	$('#girl-button-hairhat').changeImage('#girlhairhat img', 'girlhairhat', girlhairhat);
	$('#girl-button-chin').changeImage('#girlchin img', 'girlchin', girlchin);
	$('#girl-button-mouth').changeImage('#girlmouth img', 'girlmouth', girlmouth);
	$('#girl-button-nose').changeImage('#girlnose img', 'girlnose', girlnose);
	$('#girl-button-eyes').changeImage('#girleyes img', 'girleyes', girleyes);
	
	// menu click image change
	
	$.fn.randomImage = function(img, location, arr){
        var cur = $(img).attr('src');
        var rnd = cur;
        while(cur==rnd){
            rnd = location + arr[Math.floor(Math.random() * arr.length)];
        };
        $(img).attr('src',rnd).show();
	};
	
	$.fn.randomChange = function(img, location, arr){
	    $(this).click(function(){
	    	var randomNumber = Math.floor(Math.random() * 10);
			if (randomNumber == 0) { $('#boy-button-hairhat').randomImage('#boyhairhat img', 'boyhairhat', boyhairhat); }
			if (randomNumber == 1) { $('#boy-button-chin').randomImage('#boychin img', 'boychin', boychin); }
			if (randomNumber == 2) { $('#boy-button-mouth').randomImage('#boymouth img', 'boymouth', boymouth); }
			if (randomNumber == 3) { $('#boy-button-nose').randomImage('#boynose img', 'boynose', boynose); }
			if (randomNumber == 4) { $('#boy-button-eyes').randomImage('#boyeyes img', 'boyeyes', boyeyes); }
			if (randomNumber == 5) { $('#girl-button-hairhat').randomImage('#girlhairhat img', 'girlhairhat', girlhairhat); }
			if (randomNumber == 6) { $('#girl-button-chin').randomImage('#girlchin img', 'girlchin', girlchin); }
			if (randomNumber == 7) { $('#girl-button-mouth').randomImage('#girlmouth img', 'girlmouth', girlmouth); }
			if (randomNumber == 8) { $('#girl-button-nose').randomImage('#girlnose img', 'girlnose', girlnose); }
			if (randomNumber == 9) { $('#girl-button-eyes').randomImage('#girleyes img', 'girleyes', girleyes); }
	    
	    });
	};
	
	$('#logo').randomChange();
	$('a.about').randomChange();
	$('a.projects').randomChange();
	$('a.contact').randomChange();
	

});

$(window).load(function(){
	
	$('#container').fadeIn();
	
	(function($) {
		var cache = [];
  		$.preLoadImages = function() {
			var args_len = arguments.length;
			for (var i = args_len; i--;) {
				var cacheImage = document.createElement('img');
					cacheImage.src = arguments[i];
					cache.push(cacheImage);
			}
		}
	})(jQuery)
	
	jQuery.preLoadImages("boy-chin1.png","boy-chin2.png","boy-chin3.png","boy-chin4.png","boy-chin5.png","boy-chin6.png","boy-eyes1.png","boy-eyes2.png","boy-eyes3.png","boy-eyes4.png","boy-eyes5.png","boy-eyes6.png","boy-eyes7.png","boy-eyes8.png","boy-eyes9.png","boy-eyes10.png","boy-eyes11.png","boy-eyes12.png","boy-eyes13.png","boy-eyes14.png","boy-eyes15.png","boy-eyes16.png","boy-eyes17.png","boy-eyes18.png","boy-hairhat1.png","boy-hairhat2.png","boy-hairhat3.png","boy-hairhat4.png","boy-hairhat5.png","boy-hairhat6.png","boy-hairhat7.png","boy-hairhat8.png","boy-hairhat9.png","boy-hairhat10.png","boy-hairhat11.png","boy-hairhat12.png","boy-mouth1.png","boy-mouth2.png","boy-mouth3.png","boy-mouth4.png","boy-mouth5.png","boy-mouth6.png","boy-mouth7.png","boy-mouth8.png","boy-nose1.png","boy-nose2.png","boy-nose3.png","boy-nose4.png","boy-nose5.png","boy-nose6.png","boy-nose7.png","boy-nose8.png","boy-nose9.png","girl-chin1.png","girl-chin2.png","girl-chin3.png","girl-chin4.png","girl-chin5.png","girl-chin6.png","girl-eyes1.png","girl-eyes2.png","girl-eyes3.png","girl-eyes4.png","girl-eyes5.png","girl-eyes6.png","girl-eyes7.png","girl-eyes8.png","girl-eyes9.png","girl-eyes10.png","girl-eyes11.png","girl-hairhat1.png","girl-hairhat2.png","girl-hairhat3.png","girl-hairhat4.png","girl-hairhat5.png","girl-hairhat6.png","girl-hairhat7.png","girl-hairhat8.png","girl-hairhat9.png","girl-hairhat10.png","girl-hairhat11.png","girl-hairhat12.png","girl-hairhat13.png","girl-hairhat14.png","girl-mouth1.png","girl-mouth2.png","girl-mouth3.png","girl-mouth4.png","girl-mouth5.png","girl-mouth6.png","girl-nose1.png","girl-nose2.png","girl-nose3.png","girl-nose4.png","girl-nose5.png","girl-nose6.png" );

});