var $e = function(tag, text, className) {
	var e = document.createElement(tag);
	var t = document.createTextNode(text) || document.createTextNode('');
	var c = className || '';
	e.className = c;
	e.appendChild(t);
	return e;
}

var samples = {
	container: "div.sample",
	toggler: "div.thumbnail",
	details: "div.details",
	collect: function() {
		return $(samples.containter);
	},
	doc: {
		Name: "jsdetails",
		Toggle: function() {
			$("body").toggleClass(samples.doc.Name);
		}
	},
	nav: {
		Next: {
			text: "next",
			className: "next"
		},
		Previous: {
			text: "previous",
			className: "previous"
		},
		Back: {
			text: "Back to the Samples",
			className: "jsSampleLink",
			show: function() {
				$("div."+samples.nav.Back.className).fadeIn("crawl");
			}
		},
		Instruction: {
			text: "Click on the samples to see more information",
			className: "sampleInstructions"
		},
		Make: function() {
			if ($(samples.container).size() > 1) {
				$(samples.details).each(function(item) {
					var next = $e("div", samples.nav.Next.text, samples.nav.Next.className);
					var previous = $e("div", samples.nav.Previous.text, samples.nav.Previous.className);
					$(this.parentNode).prepend(next);
					$(this.parentNode).prepend(previous);
					$(next).click(samples.choose.Next);
					$(previous).click(samples.choose.Previous);
					$(next).hide();
					$(previous).hide();
				});
			}
			var instructor = $e("div",samples.nav.Instruction.text, samples.nav.Instruction.className);
			var sampleLink = $e("div",samples.nav.Back.text, samples.nav.Back.className);
			$(sampleLink).hide();
			$(sampleLink).click(
				function(){
					samples.doc.Toggle();
					samples.show.AllThumbnails();
					$(this).hide();
				}
			);
			$("#main").prepend(instructor);
			$("#main").prepend(sampleLink);
		}
	},
	hide: {
		AllDetails: function() {
			$(samples.details).hide();	
			$("div."+samples.nav.Next.text).hide();
			$("div."+samples.nav.Previous.text).hide();
		},
		All: function() {
			$(samples.container).hide();
			$(samples.details).show();
			$(samples.toggler).hide();
			$("div."+samples.nav.Next.text).show();
			$("div."+samples.nav.Previous.text).show();
		}
	},
	show: {
		AllThumbnails: function() {
			$(samples.container).show();
			$(samples.toggler).show();
			samples.hide.AllDetails();
		}
	},
	choose: {
		Me: function(e) {
			samples.hide.All();
			$(this.parentNode).show();
			samples.doc.Toggle();
			$("div."+samples.nav.Back.className).fadeIn("crawl");
			$('body').animate({ top: 0 }, 0);
		},
		Next: function() {
			$(this).parent().hide();
			if($(this).parent().next().attr("class") != "sample") {
				$(this).ancestors("#main").find(samples.container).filter(":first").show();
			} else {
				$(this).parent().next().show();
			}
		},
		Previous: function() {
			$(this).parent().hide();
			if($(this).parent().prev().attr("class") != "sample") {
				$(this).ancestors("#main").find(samples.container).filter(":last").show();
			} else {
				$(this).parent().prev().show();
			}
		}
	},
	setup: function() {
		if ($(samples.container).size() > 1) {
			samples.hide.AllDetails();
			samples.nav.Make();
			$(samples.toggler).css({cursor: "pointer"});
			$(samples.toggler).click(samples.choose.Me);
			
			var samplinkCenter = $("#nav li.samples").visibleTop() + $("#nav li.samples").height()/2;
			var bracketCenter = $("#local").height()/2 + $("#local").visibleTop();
			var diff = Math.ceil(samplinkCenter - bracketCenter);
			var bracketCssTop = parseInt($("#local").top());
			var topchange = bracketCssTop + diff
			$("#local").top(topchange+"px");
			
		}
	}
}
$(document).ready(samples.setup);