var paused = false;
var lastThumbnailDone = 0;
var flickrApiKey = "1aa8bf513772eebec51866df8cac8822";
var groupId = "1380976@N25";
var tags="Gardens";
var perPage = 20;
var totalNumberOfImages;
var currentImageNumber = 0;
var widthArray = new Array();
var heightArray = new Array();
var mainPhotos;

$(document).ready(function() {
	if ( $(".editable-item").length < 1 ) {
		$("#gallery_page #gallery-tag").css("display","none");
		tags = $("#gallery_page #gallery-tag").html();
		createFlickrGallery();
	}
	$("#flickr_link").attr("href","http://www.flickr.com/search/groups/?q="+tags+"&w=1380976%40N25&m=pool");
});

function createFlickrGallery(){
	$.getJSON("http://api.flickr.com/services/rest/?format=json&api_key=" + flickrApiKey +"&method=flickr.groups.pools.getPhotos&&tags="+tags+"&group_id=" + groupId +"&per_page=" + perPage +"&jsoncallback=?", function(response){
		totalNumberOfImages = response.photos.photo.length;
		$.each(response.photos.photo, function(i,photo){
			$.getJSON("http://api.flickr.com/services/rest/?format=json&api_key=" + flickrApiKey +"&method=flickr.photos.getSizes&photo_id=" + photo.id +"&jsoncallback=?", function(sizeResponse){
				$.each(sizeResponse.sizes.size, function(j,image){
					if (image.label=="Medium")
					{
						widthArray[currentImageNumber] = image.width;
						heightArray[currentImageNumber] = image.height;
						var mainImg = $("<img/>");
						mainImg.attr("src", image.source);
						mainImg.attr("alt", photo.title);
						mainImg.attr("rel", currentImageNumber);
						mainImg.attr("width", image.width);
						mainImg.attr("height", image.height);
						mainImg.attr("id", "main_photo_"+currentImageNumber);
						mainImg.appendTo("#main-photo").wrap("<a href='" + image.url + "' target='blank'></a>");
					}
					else if (image.label=="Thumbnail")
					{
						var img = $("<img/>");
						img.attr("src", image.source);
						img.attr("alt", photo.title);

						var classToDisplay = "thumbnail";
						if (currentImageNumber==0) classToDisplay += " first";
						img.attr("class", classToDisplay);
						img.attr("rel", currentImageNumber);
						
						img.appendTo($("<div/>").attr("class", "thubmail-area").appendTo("#thumbnails"));
					}
				});
				currentImageNumber++;
				if (currentImageNumber==totalNumberOfImages)
				{
					loadGallery();
					updateItemSizes();
				}
			});
		});
	});
}

function updateItemSizes(){
	var height = $("#main_picture").height();
	if ($("#main_content").height()>height)
	{
		height = $("#main_content").height();
	}
	$("#main_content_area").height(height);
	var photoWidth = $("#main_picture").width();
	$("#main-photo").width(photoWidth);
	var photoHeight = $("#main-photo").height();

	for(var i=0; i<totalNumberOfImages; i++){
		var borderTop = (photoHeight - heightArray[i])/2;
		var borderLeft = (photoWidth - widthArray[i])/2;
//		$("#main_photo_"+i).css("border-top","solid #595347 "+borderTop+"px");
//		$("#main_photo_"+i).css("border-left","solid #595347 "+borderLeft+"px"); 
		$("#main_photo_"+i).css("border-top","solid #ffffff "+borderTop+"px");
		$("#main_photo_"+i).css("border-left","solid #ffffff "+borderLeft+"px"); 
	}
}

function loadGallery() {
	$('#loading').hide();
	$('#main-photo').show();
	$('#main-photo').cycle({
		fx:			'scrollRight',
		next:		'#left',
		delay:		-2000,
		after:		onAfter
	});

	$(".thumbnail").click(function(){
		paused = true;
		var innerHtml = "<img src=\""+$(this).attr("src")+"\" alt=\""+$(this).attr("alt")+"\"/>";
		$('#main-photo').cycle(parseInt($(this).attr("rel")));
		$('#main-photo').cycle('pause');
		lastThumbnailDone = parseInt($(this).attr("rel"));
		$(".thumbnail").animate({opacity: 0.5}, 1);
		$(this).animate({opacity: 1.0}, 1);
	});

	$(".thumbnail").mouseover(function(){
		$(this).animate({opacity: 1.0}, 200);
	});

	$(".thumbnail").mouseout(function(){
		if (lastThumbnailDone != parseInt($(this).attr("rel")))
		{
			$(this).animate({opacity: 0.5}, 200);
		}
	});

	$(".thumbnail").animate({opacity: 0.5}, 1);
	$(".first").animate({opacity: 1.0}, 1);
}

function onAfter(){
	$("#picture-title").show();
	var  html = $(this).find("img").attr("alt");
	if (paused) html += " <a href=\"#\" onclick=\"$('#main-photo').cycle('resume'); paused=false; return false;\">continue</a>"
	$("#picture-title").html(html);
	$(".thubmail-area:nth-child("+(lastThumbnailDone+2)+") img").animate({opacity: 0.5}, 1);
	lastThumbnailDone = parseInt($(this).find("img").attr("rel"));
	$(".thubmail-area:nth-child("+(lastThumbnailDone+2)+") img").animate({opacity: 1.0}, 1);
}