$(document).ready(function() {
    

    
	/* INPUT DEFAULT TEXT */
    $("input[type=text], textarea").each(function() {
        if ($(this).val() == $(this).attr("title") && !$(this).hasClass("textBoxError")) {
            $(this).addClass("default");
        }
    });

    $("input[type='text'], textarea").focus(function() {
        if ($(this).attr("title") == $(this).val()) {
            $(this).val('');
            $(this).removeClass("default");
        }
    });

    $("input[type='text'], textarea").blur(function() {
        if ($(this).val() == "") {
            $(this).val($(this).attr("title"));
            if (!$(this).hasClass("textBoxError")) {
            $(this).addClass("default");
	        }
        }
    });
    
    /* GALLERY POPULATION */
    var noGalleryItems = 189;
    var itemsPerPage = 9;
    $("#ctaUp a").addClass("disabled");
    if (itemsPerPage >= noGalleryItems) {
    	$("#ctaDown a").addClass("disabled");
    }
    $("#galleryContainer .noJs").remove();
    addGalleryItems(1, itemsPerPage);
    
	/* LIGHTBOX */
    $(".lightbox").lightBox();
    
    
    
    /* GALLERY SCROLLING */
    $("#galleryContainer").css("overflow", "hidden");
    $('body').append('<div id="current">1</div>').append('<div id="loaded">' + itemsPerPage + '</div>');
    $("#ctaUp").click (function() {
	    scrollGallery("up", noGalleryItems, itemsPerPage);
    });
    $("#ctaDown").click (function() {
	    scrollGallery("down", noGalleryItems, itemsPerPage);
	    
    });
    
    /* MESSAGES MASONRY */
    $("#messagesContainer").masonry({
		itemSelector: '.messageItem' 
    });
    
    
    // THIS WILL BE VERY USEFUL
    
    $("#ctaSubmit input").click (function(e) {
	    e.preventDefault();
	    
	    //defaults
	    var default_first_name = 'First Name';
	    var default_last_name = 'Last Name';
	    var default_message = 'Your Message';
	    
	    
	    // get form data
	    var first_name = $("#firstName").val();
	    var last_name = $("#lastName").val();
	    var message = $("#theMessage").val().replace(/\n/g, "<br />");
	    var error = false;
	    
	    // error handling...
	    if (first_name == default_first_name || first_name == "") {
		    error = true;
	    }
	    if (last_name == default_last_name || last_name == "") {
		    error = true;
	    }
	    if (message == default_message || message == "") {
		    error = true;
	    }
	    
	    if (error) {
		    alert("Please fill in all fields");
	    } else {
		    
		    // show overlay
		    var submitMessageOverlay = '<div id="submitMessageOverlay"><div class="message">Adding message...</div></div>';
		    $("body").prepend(submitMessageOverlay);
		    $("#submitMessageOverlay").height($(document).height());
		    $("#submitMessageOverlay .message").css("margin-top", ($(window).scrollTop() + 200) + "px");
	    
		    // run ajax php code here...
		    $.getJSON('/include/addMessage.php', {f:first_name, l:last_name, m:message}, function(data) {
			    
			    $("#messagesContainer").animate({
				    opacity: 1
			    }, 1000, function() {
				    // build new message from submitted data...
				    var newMessage = '<div class="messageItem" id="newMessage"><div class="author"><span>' + data['first_name'] + '</span> said:</div><div class="message"><div><p>' + data['message'] + '</p></div></div></div>';
				    
				    // add new message to container
				    $("#messagesContainer").prepend(newMessage);
				    
				    // hide and then fade in new message in correct place
				    $("#newMessage").hide();
				    $("#newMessage").fadeIn(1000);
				    $("#messagesContainer").masonry({
						itemSelector: '.messageItem' 
				    });
				    
				    // hide overlay when finished
				    $("#submitMessageOverlay .message").text("...done");
				    $("#submitMessageOverlay").fadeOut("slow", function() {
					    // scroll to top of page
					    $('html, body').animate({scrollTop:0}, 500);
					    $("#addBox").slideUp();
					    $("#ctaAddAnother").show();
				    });
				    
			    });
		    	
		    });
	    }
	    
	});
    
});	

function scrollGallery(direction, noGalleryItems, itemsPerPage) {
    var scrollHeight = 	$("#galleryContainer").height();
	var currentScroll = $("#galleryContainer").scrollTop();
	var currentItem = parseFloat($("#current").text());
	var loaded = parseFloat($("#loaded").text());
	switch (direction) {
		case "up":
			distance = currentScroll - scrollHeight;
			if ((currentItem - itemsPerPage) > 0) {
				currentItem = currentItem - itemsPerPage;
			} else {
				currentItem = 1;
			}
			$("#current").text(currentItem);
			break;
		case "down":
			distance = currentScroll + scrollHeight;
			
			if ((currentItem + itemsPerPage) > noGalleryItems) {
				currentItem = noGalleryItems - (itemsPerPage - 1);
			} else {				
				currentItem = currentItem + itemsPerPage;
			}
			
			
			$("#current").text(currentItem);
			if ((currentItem + itemsPerPage) - 1 > loaded) {
				$("#loaded").text((currentItem + itemsPerPage) - 1);
			}
			
			break;
	}
	
	if (currentItem == 1) {
		$("#ctaUp a").addClass("disabled");
	} else {
		$("#ctaUp a").removeClass("disabled");
	}
	
	if (currentItem + (itemsPerPage - 1) >= noGalleryItems) {
    	$("#ctaDown a").addClass("disabled");
	} else {
    	$("#ctaDown a").removeClass("disabled");
	}
	
	if (direction == "down" && currentItem > loaded) {
		addGalleryItems(currentItem, (currentItem + (itemsPerPage - 1)))
	}
	
	$("#galleryContainer").animate({scrollTop: distance}, 500);
}

function addGalleryItems(start, end) {
	
    
    for (var i = (start - 1); i<end; i++) {
	    x = i + 1;
	    if (x < 10) {
		    x = "00" + x;
    	} else if (x < 100) {
		    x = "0" + x;
    	}
	    var galleryItem = '<li><a href="images/large/CJHF_' + x + '.jpg" class="lightbox"><span></span><img src="images/thumbs/CJHF_' + x + '.jpg" width="150" height="150" /></a></li>'
    	$("#galleryContainer").append(galleryItem);
    }
    
    $(".lightbox").lightBox();
}
