var flickrImagesPerPage = 6;

var flickrImages = undefined;
var flickrScrollTime = 10000;
var flickrTimerId = undefined;
var flickrTotalNumberOfPhotos = 0;
var flickrMostRecentImageDate = undefined;

$(function () {
	insertPlaceholderLi();

	getAndLoadPhotosAsync();

	// Check for new photos on flickr and reload (if needed) the photo display
	setInterval(getAndLoadPhotosAsync, 60000);
});

function getAndLoadPhotosAsync() {
	// Do a JSONP request for the flickr photos (note the 'jsoncallback=?' argument to allow this seeming crossdomain call)
	$.getJSON('http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=663b1f32a1f50438b20cf7f526b187ab&user_id=19665894@N00&sort=date-posted-desc&per_page=250&extras=date_upload&format=json&jsoncallback=?', function (d) {
		loadPhotoData(d);
	});
}

function loadPhotoData(data) {
	if (isImageListUpToDate(data.photos.photo))
		return;

	// The total number of photos available
	flickrTotalNumberOfPhotos = parseInt(data.photos.total);

	var images = new Array();

	$.each(data.photos.photo, function (i, photo) {
		var photoUrlPart = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret;

		// Thumbnail and large photo URLs
		var thumbUrl = photoUrlPart + '_s.jpg';
		var largeUrl = photoUrlPart + '_b.jpg';

		var image = new Object();
		image.thumbPhotoUrl = thumbUrl;
		image.largePhotoUrl = largeUrl;
		image.title = photo.title._content;

		images.push(image);
	});

	flickrImages = images;

	loadNewSetOfImages();
}

function isImageListUpToDate(photos) {
	if (photos.length == 0)
		return false;

	var firstImage = photos[0];

	if (flickrMostRecentImageDate == undefined) {
		flickrMostRecentImageDate = firstImage.dateupload;
		return false;
	}

	if (firstImage.dateupload > flickrMostRecentImageDate) {
		flickrMostRecentImageDate = firstImage.dateupload;
		return false;
	} else {
		return true;
	}
}

function insertPlaceholderLi() {
	$('#flickr').html('');
	$('#flickr').append('<ul id="PhotoList"></ul>');

	var initialImages = new Array();
	for (var i = 0; i < flickrImagesPerPage; i++) {
		var image = new Object();
		image.thumbPhotoUrl = '/images/flickr/flickr_icon.png';
		image.largePhotoUrl = undefined;
		image.title = '';
		image.index = i;

		initialImages.push(image);
	}

	$('#PhotoTemplate')
		.tmpl(initialImages)
		.appendTo('#PhotoList');

	$('a[rel*=lightbox]').lightBox({
		'overlayOpacity': 0.4,
		'onOpen': function(){
			clearTimeout(flickrTimerId);
		},
		'onClose': function () {
			startTimer();
		}
	});
}

function displayImages() {
	var pagedImages = getRandomImages();

	for (var k = 0; k < pagedImages.length; k++) {
		$('#flickr_' + k).fadeOut('slow', function () {
			var index = $(this).attr('index');

			$(this).attr('src', pagedImages[index].thumbPhotoUrl);
			$(this).parents('a').attr('href', pagedImages[index].largePhotoUrl);
			$(this).fadeIn('slow');
		});
	}

	for (var j = pagedImages.length; j < flickrImagesPerPage; j++) {
		$('#flickr_' + j).fadeOut('slow', function () {
			var index = $(this).attr('index');

			$(this).attr('src', '/images/flickr/flickr_icon.png');
			$(this).parents('a').attr('href', '#');
			$(this).fadeIn('slow');
		});
	}

	//

	$('.flickr #page-num').html(flickrTotalNumberOfPhotos + ' photos');
}

function loadNewSetOfImages() {
	var imagesToLoad = getRandomImages();

	var imagesLoaded = 0;

	for (var i = 0; i < imagesToLoad.length; i++) {
		backgroundLoadImage(imagesToLoad[i].thumbPhotoUrl, function () {
			imagesLoaded++;

			// If we've loaded all our images, rotate to the next page
			if (imagesLoaded == imagesToLoad.length) {
				displayImages();

				startTimer();
			}
		});
	}
}
function backgroundLoadImage(imageUrl, callback) {
	var i = new Image();
	i.onload = function () {
		callback();
	};
	i.src = imageUrl;
}

function startTimer() {
	flickrTimerId = setTimeout(function () {
		loadNewSetOfImages();
	}, flickrScrollTime);
}

// Returns 6 random images
function getRandomImages() {
	var images = new Array();

	for (var i = 0; i < flickrImagesPerPage; i++) {
		var r = Math.floor(Math.random() * flickrImages.length);

		images.push(flickrImages[r]);
	}

	return images;
}