$(window).load(function()
{
	// there is a bug in jCarouselLite that will not go to the last page of thumbnails if
	// the total number is not divisible by the number viewable.  My workaround is to add
	// extra empty thumbnails to make it divisible.
	thumbnailsneeded = 4-($("#thumbnails li").length%4);
	for(i=0; i<thumbnailsneeded;i++)
	{
		$("#thumbnails #navchild").append('<li>&nbsp;</li>');
	}
	
	$("#thumbnails").jCarouselLite({
		btnNext: ".next",
		btnPrev: ".prev",
		circular: false,
		visible: 4,
		speed: 500,
		scroll: 4,
		afterEnd: function(a) {
				if($("#navchild")[0].offsetLeft < 0) 
					$(".prev").addClass("active");
				else
					$(".prev").removeClass("active");
				if($("#navchild")[0].clientWidth + $("#navchild")[0].offsetLeft > 520) 
					$(".next").addClass("active");
				else
					$(".next").removeClass("active");
			}
	});
	
	$(".prev,.next").click(function () { return false;});
	$(".next").hover(function () { 
		$("#hovermessage").css("visibility", "visible"); 
	}, function () {
		$("#hovermessage").css("visibility","hidden");
	});
	
	// set next image to active if there are more images than are shown
	// when the page loads
	if($("#navchild")[0].clientWidth > 520) {
		$(".next").addClass("active");
	}
	
	$("#navchild a").click(function() {
		var loadedhref = this.href;
		$(".bottom a.rect").filter(function(index) { return this.href == loadedhref; }).click();
		return false;
	});
	
	$(".image_modal .image").load(function() {
		if($(".image_modal").width() > 0) {
			$(".image_modal").css("left",($("body").width()/2 - $(".image_modal").width()/2) + "px");
		}
	});
	
	if(navigator.userAgent.indexOf("Firefox")!=-1){
		var versionindex=navigator.userAgent.indexOf("Firefox")+8
		if (parseInt(navigator.userAgent.charAt(versionindex))==1) 
			$("#detail").html("<p>This page will not function correctly in older versions of Firefox.  Please upgrade to the newest Firefox browser before attempting to view this page.</p>");
	}
		
	$("#detail .panel").each(function (i) {
		//if(i == $("#detail .panel").length-1) {
			$(this).load($(this).children("a").attr("href"),function() {
				$(this).find(".open_form").click(function() {
					$(".issue_title").html($(this).parents(".text").children(".pagetitle").html());
					$("#issue").attr("value",$(this).parents(".text").children(".pagetitle").html());
					$(".form_modal").css("display","block");
					$(".modal_bg").css("display","block");
					return false;
				});
				$(this).find(".open_issue").click(function() {
					$(".issue_modal").load(this.href,function () {
						$(".slide_container").codaSlider();
						// close issue
						$(".issue_modal .close").click(function() {
							$(".image_modal").css("display","none");
							$(".issue_modal").css("display","none");
							$(".modal_bg").css("display","none");
							return false;
						});
						// make first and last navigation half sheets
						var j = $(".issue_modal .stripNav li").length;
						$(".issue_modal .stripNav li.tab1, .issue_modal .stripNav li.tab" + j).each(function() {
							$(this).addClass("smaller");
						});
						// load in all the panels
						$(".issue_modal .panel").each(function (i) {
							/*if(i < $(".issue_modal .panel").length-1) {
								$(this).load($(this).children("a").attr("href"));
							}
							else {*/
								$(this).load($(this).children("a").attr("href"),function() {
									// activate cluetips in the panels
									$(this).find('.cluetip').cluetip({local:true,attribute:'rel',width:194});
									$(this).find('.cluetip').click(function() {
										if(this.href != '' && this.href != null) {
											if($(".image_modal .image").attr("src") != this.href)
												$(".image_modal .image").attr("src",this.href);
											$(".image_modal").css("display","inline");
										}
										return false;
									});
									$('.image_modal .close').click(function() {
										$(".image_modal").css("display","none");
										return false;
									});
								});
							/*}*/
						});
					});
					$(".issue_modal").css("display","block");
					$(".modal_bg").css("display","block");
					return false;
				});
			});
		/*}
		else {
			$(this).load($(this).children("a").attr("href"));
		}*/
	});
	
	var count = 1;
	$(".bottom a.rect").each(function() {
		var loadedhref = this.href;
		$("#navchild a").filter(function(index) { return this.href == loadedhref; }).attr("href","#"+count);
		this.href = "#"+count;
		count++;
	});
	
	$(".bottom a.rect").click(function() {
			// clear the rest of the selected boxes
			$(".bottom a.rect").removeClass("selected");
			// make this the selected box
			$(this).addClass("selected");
			
			if($(".bottom a.rect.selected").next(".rect").length == 0) 
				$("a.next_arrow").removeClass("active");
			else
				$("a.next_arrow").addClass("active");
			if($(".bottom a.rect.selected").prev(".rect").length != 0 )
				$(".bottom a.prev_arrow").addClass("active");
			else
				$(".bottom a.prev_arrow").removeClass("active");
			return false;
	});
	
	//Click first rectangle if it exists when page is loaded
	if($(".bottom a.rect").length > 0) {
		$($(".bottom a.rect")[0]).click();
	}
	
	// set next to active if there are more than one yescozettes
	// when the page loads
	if($(".bottom a.rect").length > 1) {
		$(".bottom a.next_arrow").addClass("active");
	}
	
	$(".bottom a.next_arrow").click(function() {
		if($(".bottom a.next_arrow.active").length > 0) {
			// click the next square
			$("div#stripNavR0 a").click();
			$(".bottom a.rect.selected").next(".rect").click();
		}
		return false;
	});
	
	$(".bottom a.prev_arrow").click(function() {
		if($(".bottom a.prev_arrow.active").length > 0) {
			// click the previous square
			$("div#stripNavL0 a").click();
			$(".bottom a.rect.selected").prev(".rect").click();
		}
			return false;
	});
	
	// close form
	$(".form_modal .close").click(function() {
		$(".form_modal").css("display","none");
		$(".modal_bg").css("display","none");
		return false;
	});
	
	$("div#detail").codaSlider();
});

// make modal background (grey) full height of page
	$("#all").ready(function() {
		$(".modal_bg").height($("#all").height());
		$(".form_modal").css("left", ($("body").width()/2 - 170) + "px");
		$(".issue_modal").css("left",($("body").width()/2 - 415) + "px");
	});