// JavaScript Document

// When the page is ready
$(document).ready(function(){
	
	function hasCSS() {
	var _d = document.createElement('div')
	_d.id = 'css_test'
	$('body').append(_d)
	$('#css_test').css({width:'1px',height:'1px',display:'none'})
	var _v = ($('#css_test').width() != 1) ? false : true
	$('#css_test').remove()
	return _v
	}
	
	$("#thumbholder img").each(function (i) {
		if ($(this).height() < $(this).width()) {
			$(this).css("marginTop","20px");		
		}
		if ($(this).height() > $(this).width()) {
			$(this).css("marginTop","8px");
		}	
	});

	$("<h2>").attr("id","gallerytitle").text("Facilities").insertAfter("h1");
	
	$("<ul>").attr("id","buttons").insertAfter("#viewer");
	$("<li>").attr("id","prevbtn").text("Previous").appendTo("#buttons");
	$("<li>").attr("id","nextbtn").text("Next").appendTo("#buttons");

	$("#viewer").height("120px").css({"overflow":"hidden","background":"url(images/galleryviewerback.png) left top no-repeat"});
	$(".galleryheading").css("display","none");
	
	var a = Math.ceil($("#facilities li").length / 5);
	var b = Math.ceil($("#primary li").length / 5);
	var c = Math.ceil($("#high li").length / 5);
	var d = Math.ceil($("#corporate li").length / 5);
	var e = Math.ceil($("#holiday li").length / 5);
	$("#thumbholder").height(a * 120);

	$("#facilitiesbtn").click(function(){
		$("#viewer ul").css("display","none");
		$("#facilities").css("display","block");
		$("#thumbholder").height(a * 120);
		$("#thumbholder").css("marginTop","0px");
		$("#gallerytitle").html("The Facilities");
		return false;
	});
	$("#primarybtn").click(function(){
		$("#viewer ul").css("display","none");
		$("#primary").css("display","block");
		$("#thumbholder").height(b * 120);
		$("#thumbholder").css("marginTop","0px");
		$("#gallerytitle").html("Primary / Intermediate School");
		return false;
	});
	$("#highbtn").click(function(){
		$("#viewer ul").css("display","none");
		$("#high").css("display","block");
		$("#thumbholder").height(c * 120);
		$("#thumbholder").css("marginTop","0px");
		$("#gallerytitle").html("High School");
		return false;
	});
	$("#corporatebtn").click(function(){
		$("#viewer ul").css("display","none");
		$("#corporate").css("display","block");
		$("#thumbholder").height(d * 120);
		$("#thumbholder").css("marginTop","0px");
		$("#gallerytitle").html("Corporate");
		return false;
	});
	$("#holidaybtn").click(function(){
		$("#viewer ul").css("display","none");
		$("#holiday").css("display","block");
		$("#thumbholder").height(e * 120);
		$("#thumbholder").css("marginTop","0px");
		$("#gallerytitle").html("Holiday");
		return false;
	});
	
	$("#nextbtn").click(function(){	
		if ( $("#thumbholder").css("marginTop") != (($("#thumbholder").height() - 120) * -1) + 'px' ){		
				$("#thumbholder").animate({"marginTop": "-=120px"}, 100);
		}
		return false;
	});
	
	$("#prevbtn").click(function(){
		if ($("#thumbholder").css("marginTop") < 0 + 'px'){
				$("#thumbholder").animate({"marginTop":"+=120px"}, 100);
		} else {
			$("#thumbholder").css("marginTop","0px");
		}
		return false;
	});
	
/*	$.fn.image = function(src, f){ 
		return this.each(function(){ 
			var i = this;
			i.src = src;  
			i.onload = f;
			this.append(i);
		}); 
	};*/
	
	$("<div>").attr("id","imgholder").insertAfter("#buttons");
	var img1src = $("#thumbholder a:first").attr("href");
	var img1alt = $("#thumbholder a:first").attr("title");
	$("<img />").attr({"id":"imgbig", src: img1src, alt: img1alt }).appendTo("#imgholder");
	

	$("#thumbholder a").click(function(){
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
		$("#imgbig").fadeOut("fast");
		$("#imgbig").attr({ src: largePath }).load(function () {
			$(this).attr({ alt: largeAlt });
			$(this).fadeIn("fast");
    });
		return false;
	});
				
});
