var overlayWidth = 600;

$(document).ready(function () {
  // Set up gallery button highlighting/routing
  $("div.galleryButton a").mouseover(function () {
    $(this).addClass("highlight");
  });
	$("div.galleryButton a").mouseout(function () {
    $(this).removeClass("highlight");
  });
	$("div.galleryButton a").click(function () {
		window.location = "?content="+$(this).text().toLowerCase();
	});
	// Set up thumbnail clicking
  $("#thumbs a").click(function () {
		closeOverlay();
		$("body").append('<div id="backgroundOverlay" onclick="closeOverlay();"></div>');
    $("body").append('<div id="overlay" style="top:'+($("body").scrollTop()+20)+'px;left:50%;margin-left:-'+overlayWidth/2+'px;width:'+overlayWidth+'px;"></div>');
  	$("#overlay").show(500);
	  pictureOverlay(this);
		return false;
	});
  // Preload the bigger images
	/*$("a.artlink").each(function () {
	  if(document.images) {
	    var buffer = new Image();
			buffer.src = $(this).attr("href");
		}
	});*/
});
function afterPageLoad() {

}
function changePicture(id) {
  $("a[artId='"+id+"']").each(function () {
		pictureOverlay(this);
	});
}
function pictureOverlay(thumb) {
  var href = $(thumb).attr("href");
	var artTitle = $(thumb).attr("artTitle");
	var artMedium = $(thumb).attr("artMedium");
	var artWidth = $(thumb).attr("artWidth");
	var artHeight = $(thumb).attr("artHeight");
	var artComments = $(thumb).attr("artComments");
	var artNext = $(thumb).attr("artNext");
	var artPrevious = $(thumb).attr("artPrevious");
	
	$("#overlay").empty();
	$("#overlay").append('<a id="closeOverlay" href="javascript:closeOverlay();">Close &#x2717;</a>');
	$("#overlay").append('<div id="pictureHolder">Loading...</div>');
  // Create background image that will later be turned gray
  var background = new Image();
  /*background.id = "gray";
  background.onload = function() {
	  // Add to DOM to set position correctly (currently hidden because of z-index)
		$("#pictureHolder").html(this);
		// Set the left absolute positioning (within the pictureHolder) based on picture width
	  $(this).css("left",overlayWidth/2 - $(this).width()/2 + "px");
		// Create foreground image (color) from background image
    var foreground = $(this).clone();
		// Change id of foreground image
		$(foreground).attr("id", "color");
		// Add to DOM
		$("#pictureHolder").append(foreground);
		// As the last call (since background will become dereferenced,
		// make the background gray
		Pixastic.process(background, "desaturate", {average:false}, function (gray) {
		  // Show gray image using z-index
		  $(gray).css("z-index", 2);
			// Slowly reveal color image on top
			$("#color").hide().css("z-index", 3).fadeIn(5000);
		});
  };*/
  $("#pictureHolder").html(background);
	// Set the source and begin loading the image (which will eventually call the onload event
	background.src = href;
	
  // Add title
	$("#pictureHolder").before('<div id="title">'+artTitle+'</div>');
	// Add controls
	$("#overlay").append('<div class="controls"></div>');
	if (artPrevious != '') {
	  $(".controls").append('<a class="previous" href="javascript:changePicture(\''+artPrevious+'\');">&#x21e6; Previous</a>');
	}
	if (artNext != '') {
	  $(".controls").append('<a class="next" href="javascript:changePicture(\''+artNext+'\');">Next &#x21e8;</a>');
	}
	$(".controls").append('<span class="medium">'+artMedium+' - '+artWidth+'" x '+artHeight+'"</span>');
	// Add comments
	if (artComments != '') {
	  $(".controls").append('<div class="comments">'+artComments+'</div>');
	}
}

function closeOverlay() {
	$("#overlay").remove();
	$("#backgroundOverlay").remove();
}