JS App /w JSON Image Data

app.js

/**
 * @namespace
 * TCR (<masked>) is a global namespace object containing
 * the methods and properties used throughout this application.
 * @requires jQuery-1.8.2 and Portfolio.JS (and its dependencies).
 */
var TCR = {
	Data: { Images: $() },
	Images: { Slideshow: [], Gallery: [] },
	initSlideshow: function(){
		var $images = this.Images.Slideshow;
		$.each($images,function(i){
			$images[i] = $("<img/>").attr(this);
		});
		this.DOM.$slideshow.append($images).portfolio({
			loop: true, logger: false, height: "inherit"
		}).init();
	},
	buildGallery: function(){
		var $images = this.Images.Gallery;
		$.each($images,function(i){
			$images[i] = $("<li/>").append($("<img/>").attr(this));
		});
		this.DOM.$gallery.append($images);
		this.displayDriverNames();
	},
	displayDriverNames: function(){
		var $template = this.DOM.$nameplate,
			$images = this.DOM.$gallery.find("img");
		$images.filter("[data-driver]").each(function(){
			var $img = $(this), name = $img.data("driver");
			$img.after($template.clone().html(name).show());
		});
	},
	formSetup: function(){
		var $inputs = $("input[type=text]");
		if (!("placeholder" in $("<input/>")[0])) {
			$inputs.on("focus blur",function(event){
				if (event.type == "focus" && this.value == this.placeholder) this.value = '';
				else if (this.value === '') this.value = this.placeholder;
			});
			$inputs.each(function(){ this.value = this.placeholder; });
		}
		this.DOM.$form.on("submit",function(event){
			var valid, $f = $(this), $i = $("input",$f), re = /Name$|^\s*$/;
			$i.each(function(){ return (valid = !re.test(this.value)); });
			if (valid) $.post(this.action,$f.serialize());
			return false;
		});
	},
	toggleDetails: function(event){
		TCR.DOM.$details.toggle();
	},
	toggleSignup: function(event){
		TCR.DOM.$form.toggle();
	},
	bindEvents: function(){
		this.DOM.$promo = $("#promo")
			//.on("click",".signup",this.toggleSignup)
			.on("click","#btnDetails",this.toggleDetails);
	},
	init: function(){
		this.DOM = {
			$slideshow: $("#slideshow"),
			$nameplate: $(".nameplate"),
			$gallery: $("#gallery"),
			$details: $("aside"),
			$form: $("form")
		};
		this.initSlideshow();
		this.buildGallery();
		this.bindEvents();
		this.formSetup();
	}
};

/**
 * @property {object} Images - This property contains a jqXHR object from a JSON request.
 * @desc The data returned from the JSON request is assigned to 2 image arrays.
 *       After requesting the JSON data, this object will initialize the namespace.
 */
TCR.Data.Images = $.getJSON(
	"js/images.json", function(d){
		TCR.Images.Slideshow = d.slideshow;
		TCR.Images.Gallery = d.gallery;
		$(function(){ TCR.init(); });
	}
);

images.json

{
	"slideshow": [
		{ "data-src": "img/slideshow/image1.jpg" },
		{ "data-src": "img/slideshow/image2.jpg" },
		{ "data-src": "img/slideshow/image3.jpg" },
		{ "data-src": "img/slideshow/image4.jpg" },
		{ "data-src": "https://dl.dropbox.com/u/1218282/slideshow/5.jpg" },
		{ "data-src": "https://dl.dropbox.com/u/1218282/slideshow/6.jpg" }
	],
	"gallery": [
		{ "src": "", "alt": "", "data-driver": "A driver" },
		{ "src": "", "alt": "" },
		{ "src": "", "alt": "", "data-driver": "Some driver" },
		{ "src": "", "alt": "" },
		{ "src": "", "alt": "", "data-driver": "Another Driver" },
		{ "src": "", "alt": "", "data-driver": "Celeb Driver" },
		{ "src": "", "alt": "" },
		{ "src": "", "alt": "", "data-driver": "Random Driver" },
		{ "src": "", "alt": "" },
		{ "src": "", "alt": "", "data-driver": "Alist Driver" },
		{ "src": "", "alt": "" },
		{ "src": "", "alt": "", "data-driver": "Blist Driver" },
		{ "src": "", "alt": "" },
		{ "src": "", "alt": "", "data-driver": "Clist Driver" },
		{ "src": "", "alt": "" },
		{ "src": "", "alt": "" }
	]
}