/// <reference path="~/Assets/Scripts/Generic/jquery-1.2.6.min.js" />
$(document).ready(function() {
	//1 init paging
	//1.1 split into lists of 15

	/*$("#choose-frame-bot").css("width", "2000px");
	$("#choose-frame-top").css("overflow", "hidden");*/
	function splitmonkeys() {
		currentul = $(".monkey-overview:last");
		totalitems = currentul.find("li").size();
		if (totalitems > 15) {
			newlist = $("<ul></ul>")
			newlist.addClass("monkey-overview");
			newlist.hide();
			for (i = 16; i <= totalitems; i++) {
				newlist.append(currentul.find("li:nth-child(16)"));
			}
			newlist.insertAfter(currentul);
			newlist.hide();
			splitmonkeys();

		}
	}
	splitmonkeys();
	$(".monkey-overview:first").css("display", "block");


	prevbutton = $("<div>Previous</div>");
	prevbutton.addClass("previous");
	prevbutton.attr("title", "Previous");
	nextbutton = $("<div>Next</div>");
	nextbutton.addClass("next");
	nextbutton.attr("title", "Next");
	configNextPrevButtons();
	$("#choose-frame-head").append(nextbutton);
	$("#choose-frame-head").append(prevbutton);

	var fadespeed;
	if ($.browser.msie) {
		fadespeed = 1;
	}
	else {
		fadespeed = 300;
	}
	nextbutton.addClass("clickable").click(function() {
		visibleul = $(".monkey-overview:visible");
		nextul = visibleul.next();
		if (nextul.size() > 0) {
			visibleul.animate({ opacity: 0 }, fadespeed, function() {
				visibleul.css({ display: "none" });
				nextul.css("opacity", "0");
				nextul.css("display", "block");
				nextul.animate({ opacity: 1 }, fadespeed);
				configNextPrevButtons();
			});
		}
	});
	prevbutton.addClass("clickable").click(function() {
		visibleul = $(".monkey-overview:visible");
		prevul = visibleul.prev();
		if (prevul.size() > 0) {
			visibleul.animate({ opacity: 0 }, fadespeed, function() {
				visibleul.css({ display: "none" });
				prevul.css("opacity", "0");
				prevul.css("display", "block");
				prevul.animate({ opacity: 1 }, fadespeed);
				configNextPrevButtons();
			});
		}
	});
	function configNextPrevButtons() {
		visibleul = $(".monkey-overview:visible");
		if (visibleul.next().size() > 0) {
			nextbutton.css("visibility", "inherit");
			nextbutton.css("background-image", "url(./Assets/Images/PageSpecific/Adopt/next" + visibleul.next().find("li").size() + ".png)"); /// <reference path="../../Images/PageSpecific/Adopt/next1.png" />

			nextbutton.attr("title", "Next " + visibleul.next().find("li").size());
		}
		else {
			nextbutton.css("visibility", "hidden");
		}
		if (visibleul.prev().size() > 0) {
			prevbutton.css("visibility", "inherit");
		}
		else {
			prevbutton.css("visibility", "hidden");
		}

	}

	//2 init click handlers
	$("ul.monkey-overview li a").click(function() {
		link = $(this);
		if (!($("" + link.attr("href")).is(":visible"))) {
			visibleItems = $("ul#monkey-details li:visible");
			if (visibleItems.size() > 0) {
				visibleItems.hide();
				//seperate in case we introduce animation/queueing
				showMonkey(link.attr("href"));
			}
			else {
				showMonkey(link.attr("href"));
			}
		}
		return false;
	});

	function showMonkey(id) {
		$("ul#monkey-details li" + id + " .monkeyimg").css({ opacity: "0" });
		$("ul#monkey-details li" + id).show();
		$("ul#monkey-details li" + id + " .monkeyimg").animate({ opacity: "1" }, 700, "easeOutExpo");

		$(".monkey-overview li").removeClass("active");
		$(".monkey-overview a[href=" + id + "]").parent().parent().addClass("active");
	}
});