var checkScroll;

var numItems;
var numItemsLoaded = 0;
var navItems;
var portfolioItems;
var oldWindowWidth = -1;
var itemOffsets = new Array();

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

$(document).ready(function() {
	//Set Globals #################################################################################
	var emailText = "Your email here.";
	var commentsText = "A little note here.";
	
	portfolioItems = $('.portfolio-item');
	numItems = $(portfolioItems).length;
	navItems = $('#navigation li');
	
	console.log("Number of registered images: " + numItems);
	
	$("#email").val(emailText);
	$("#comments").val(commentsText);
	//General Functions #################################################################################
	$("#email").click(function() {
		if ($(this).val() == emailText)	$(this).val('');
	}).blur(function() {
		if ($(this).val() == "") {
			$(this).val(emailText);
		}
	});
	$("#comments").click(function() {
		if ($(this).val() == commentsText) $(this).val('');
	}).blur(function() {
		if ($(this).val() == "") {
			$(this).val(commentsText);
		}
	});
	$("#send-it").click(function() {
		var fancyboxSettings = { 
															'autoDimensions'	  : false,
															'width'         		: 350,
															'height'        		: 'auto',
															'transitionIn'		  : 'none',
															'transitionOut'		  : 'none',
															'showCloseButton'   : false
														};
		$("#send-it").hide();
		$.ajax({
			type:'POST',
			url:'submit_contact.php',
			dataType:'json',
			data:$('#contact').serialize(),
			success: function(data) {
				$.fancybox('<p class=\'message\'>' + data.msg + '</p>', fancyboxSettings);
				$("#send-it").show();
			},
			error: function(data) {
				$.fancybox('<p class=\'message\'>There was an internal error. Sorry. Probably a server thing or maybe some bad code? Who knows...</p>', fancyboxSettings);
				$("#send-it").show();
			}
		});
	});
	$(navItems).click(function() {
		$('html,body').animate({
			scrollTop:$('#portfolio-item-' + $(navItems).index(this)).offset().top
		}, 1500);
	});
	$('.top-image').load(function() {
		$(this).show();
		fixImage(this);
	  numItemsLoaded++;
		if (numItemsLoaded == numItems) {
			checkScroll = setInterval("setNavItemFromScroll()", 500);
			setPortfolioTops();
		}
	});
	$('a.fancybox').fancybox({
		showCloseButton: false
	});
	//Fix things up #################################################################################
	setElementDimensions();
});

$(window).resize(function() {
	//delay(function(){
    setElementDimensions();
  //}, 500);
});

function setElementDimensions() {
	var marginRight = 7;
	var leftOffset = 0;
	var bucket = 0;
	
	var newNavWidth = $(window).width() - parseInt($('#name').css('width'));
	var newNavItemWidth = (newNavWidth - marginRight) / numItems;
	var maxBucket = newNavItemWidth / 3 * 2;
	if (newNavItemWidth - maxBucket < 18) {
		maxBucket = newNavItemWidth - 18;
	}
	
	//Set up navigation widths #############################################################################

	jQuery.each(navItems, function(){
		var newWidth = 0;
		if (newNavItemWidth < 30) {
			newWidth = newNavItemWidth
		}
		else {
			var r = Math.random();
			var addedWidthValue = 0;
			if ($(navItems).index(this) < $(navItems).length - 1) {
				if (r < .5) r = r * -2;
				else r = (1 - r) * 2;
				// r is between -1 and 1
				addedWidthValue = Math.ceil(r * maxBucket);
				bucket += addedWidthValue;
				if (Math.abs(bucket) > maxBucket) {
					addedWidthValue = addedWidthValue * -1;
					bucket += (addedWidthValue * 2);
				}
				newWidth = newNavItemWidth + addedWidthValue;
			}
			else {
				newWidth = newNavWidth - leftOffset - marginRight;
			}
		}
		$(this).clearQueue().animate({
			width: newWidth,
			left: leftOffset	
		});
		leftOffset += newWidth + marginRight;
	});
	
	oldWindowWidth = $(window).width();
	//Mask Images and set their width heigth #############################################################
	$('.top-image-mask').css({
		width:$(window).width(),
		height:$(window).height()
	});
	jQuery.each(portfolioItems, function(){
		var imgObj = $('img', this).first();
		fixImage(imgObj);
		$('.thumbs', this).css({
			"width" : Math.floor(($(window).width() - 640) / 197) * 197
		});
	});
	
	//Set scroll places ####################################################################################
	setPortfolioTops();
}
function fixImage(imgObj) {
	var imgW = $(imgObj).width();
	var imgH = $(imgObj).height();
	var newW = 0;
	var newH = 0;
	var newTop = 0;
	if (imgW / imgH < $(window).width() / $(window).height()) {
		newH = (imgH * $(window).width()) / imgW;
		newW = $(window).width();
		newTop = -((newH - $(window).height()) / 2);
		$(imgObj).css({
			"width" : $(window).width(),
			"height" : newH,
			"top" : newTop,
			"left" : 0
		});
	}
	else {
		newW = (imgW * $(window).height()) / imgH;
		newH = $(window).height();
		$(imgObj).css({
			"width" : newW,
			"height" : $(window).height(),
			"top" : 0,
			"left" : -((newW - $(window).width()) / 2)
		});
	}
}

function setNavItemFromScroll() {
	$(navItems).removeClass('on');
	console.log("Removed 'on' class from Nav items");
	for (var i = itemOffsets.length - 1; i >= 0; i--) { 
		console.log("Searching if window.scrollTop (=" + $(window).scrollTop() + ") is >= item-" + i + "-top (=" + itemOffsets[i] + ")");
		if ($(window).scrollTop() >= itemOffsets[i]) {
			console.log("Setting class to 'on' for item-" + i);
			$($('#navigation li')[i]).addClass('on');
			break;
		}
	}
}

function setPortfolioTops() {
	console.log("Setting portfolio item tops");
	jQuery.each(portfolioItems, function() {
		console.log("Item " + $(portfolioItems).index(this) + " set to : " + $(this).offset().top);
		itemOffsets[$(portfolioItems).index(this)] = $(this).offset().top;
	});
}