$(document).ready(function(){
	
	// Curl the magazine's page.
	$("#current_cover").hover(function(){
		$("#current_cover #curl, #current_cover span").stop().animate({
			width:"140px",
			height:"145px"
			},500);
	},function(){
		$("#current_cover #curl").stop().animate({
			width:"35px",
			height:"37px"
		},220);
		$("#current_cover span").stop().animate({
			width:"35px",
			height:"35px"
		},200);
	})
	
	// Auto-submit the drop-down box.
	$("#other_categories select").change(function(){
		$("#other_categories form").submit();
	});
});

(function (document) {

	// Initial Variables
	var big = document.getElementById("big"),
	small = document.getElementById("small"),
	
	label,
	labelProp,
	labelValue,
	
	smallGoal,
	tempBig,
	innerBig,
	innerSmall,
	tempStyle = " style='opacity:0;filter:alpha(opacity=0)' id='temp_big'",
	
	relaxTimeout,
	clickable = true,
	labels = {
		"bat_lbl": "bottom",
		"how_lbl": "left",
		"con_lbl": "right",
		"kit_lbl": "bottom"
	},
	events = function () {
		var lis = small.getElementsByTagName("li"),
		i = lis.length;
		while (i) {
			i -= 1;
			lis[i].onclick = progress;
		}
	},
	
	// Animation Functions
	fadeSlideAnime = function (current) {
		small.style.left = Math.round(current * smallGoal) + "px";
		current = Math.round(current * 100);
		tempBig.style.opacity = current / 100;
		tempBig.style.filter = "alpha(opacity=" + current + ")";
	},
	labelAnime = function (current) {
		current = 1 - current;
		current *= labelValue;
		label.style[labelProp] = current + "px";
	},
	animate = function (duration, update, after) {
		var start = +new Date(),
		end = start + duration,
		timer = setInterval(function () {
			var current = +new Date();
			current = current > end ? 1 : (current - start) / duration;
			current *= Math.PI;
			current = 1 - Math.cos(current);
			update(current / 2);
			if (current === 2) {
				clearInterval(timer);
				after();
			}
		}, 40);
	},
	
	// Big Image Label
	relax = function () {
		var altText = big.getElementsByTagName("img")[0].alt,
		labelId = altText.toLowerCase().substring(0, 3) + "_lbl";
		events();
		label = "<span class='label' id='";
		labelProp = labels[labelId];
		labelValue = labelProp === "bottom" || labelProp === "top" ?
			"offsetHeight" : "offsetWidth";
		label += labelId + "'>" + altText + "</span>";
		big.getElementsByTagName("a")[0].innerHTML += label;
		label = document.getElementById(labelId);
		labelValue = -label[labelValue];
		label.style[labelProp] = labelValue + "px";
		animate(1500, labelAnime, relaxTimer);
	},
	relaxTimer = function () {
		relaxTimeout = setTimeout(next, 4000);
	},
	
	// Progression Helper Functions
	copier = function (old, beginning, width, height) {
		beginning += old.href + "' title='" + old.title + "'><img width='" +
			width + "' height='" + height + "' alt='";
		old = old.getElementsByTagName("img")[0];
		beginning += old.alt + "' src='";
		old = old.width > width ? old.src.replace("Lg", "Sm") : old.width <
			width ? old.src.replace("Sm", "Lg") : old.src;
		beginning += old + "' /></a>";
		return beginning.charAt(1) === "l" ? beginning + "</li>" : beginning;
	},
	extendList = function (times) {
		var i = 0,
		str = "",
		old;
		while (i < times) {
			old = i ? document.getElementById("small" + i) : big;
			str += copier(old.getElementsByTagName("a")[0], "<li id='small" +
				(i + 4) + "'><a onclick='return false;' href='", 229, 165);
			i += 1;
		}
		return str;
	},
	pareList = function (str, times) {
		times = new RegExp("^\\s*(<li.+?<\\/li>\\s*){" +
			times + "}", "i");
		str = str.replace(times, "");
		times = /small[1-6]/;
		str = str.replace(times, "SMALL1");
		str = str.replace(times, "SMALL2");
		str = str.replace(times, "SMALL3");
		str = str.replace(/SMALL/g, "small");
		str = str.replace(/ onclick='return false;'/g, "");
		return "<ul>" + str + "</ul>";
	},
	
	// Progression
	progress = function () {
		var times,
		ul;
		if (clickable) {
			clickable = false;
			clearTimeout(relaxTimeout);
			times = this.id.charAt(this.id.length - 1);
			ul = small.getElementsByTagName("ul")[0];
			innerBig = copier(this.getElementsByTagName("a")[0],
				"<a" + tempStyle + " href='", 687, 425);
			innerSmall = extendList(times);
			big.innerHTML += innerBig;
			ul.innerHTML += innerSmall;
			innerBig = innerBig.replace(tempStyle, "");
			innerSmall = pareList(ul.innerHTML, times);
			smallGoal = -229 * times;
			tempBig = document.getElementById("temp_big");
			animate(1500, fadeSlideAnime, resetProgress);
		}
		return false;
	},
	resetProgress = function () {
		clickable = true;
		big.innerHTML = innerBig;
		small.innerHTML = innerSmall;
		small.style.left = 0;
		relax();
	},
	next = function () {
		progress.call(document.getElementById("small1"));
	};
	
	// Begin
	relax();
}(document));