// variables go here
var flickrVars = {
	/*url : 'http://api.flickr.com/services/rest/?',
	apiKey : '3da43782784b589cd9eab0945ef9dd25',
	userID : '27820900@N07'*/
	url : 'http://api.flickr.com/services/rest/?',
	apiKey : 'df954eb726ad470adae961ffcae9e2a4',
	userID : '40445240@N07'

};

$(document).ready(function(){

	// hide the divs ready for popup
	$('#flickr-dialog').hide();
	$("#flickr-sets-dialog").hide();

	// add homepage carousel
	AddFlickrSetsCarousel($('.carousel-list ul'));
});


function AddFlickrSetsCarousel(elem) {
	$.getJSON(flickrVars.url+'format=json&method=flickr.photosets.getList&user_id='+flickrVars.userID+'&api_key='+flickrVars.apiKey+'&jsoncallback=?', function(data) {
		elem.empty();
		$.each(data.photosets.photoset, function(i, set) {
			// add li's for carousel images
			var thumb = "http://farm"+set.farm+".static.flickr.com/"+set.server+"/"+set.primary+"_"+set.secret+"_m.jpg";
			//var html = '<li><a href="#" onclick="openSetInDialog(\''+set.id+'\'); return false;"><img src="'+thumb+'" width="134" height="99"><div>'+set.title._content+'</div></a></li>';
			var html = '<li><a href="#" onclick="openSetInDialog(\''+set.id+'\'); return false;"><img src="'+thumb+'" width="134" height="99"></a></li>';
			elem.append(html);
			return (i != 11);
		});
		InitCarousel();
	});
	function InitCarousel() {
		// load carousel
		$("#home-carousel .carousel-list").jCarouselLite({
			btnNext: ".carousel-next",
			btnPrev: ".carousel-prev",
			visible: 4,
			scroll: 4,
			speed: 750
		});
	}
}





function flickrDialog() {
	$('#favourite-gallery-flickr ul li a').click(function(){
		$('#flickr-dialog').show();
		lightboxIt($(this).children());
		return false;
	});
}

function recentFalse(){
	$('#recent-gallery-flickr ul li a').click(function(){
		return false;
	});
}

function lightboxIt(image) {
	// we can use the jquery dimensions plugin to get the thumbnail's attributes
	var image_width = 0;
	var image_height = 0;

	image_width = image.nextAll('.larger-image').width();
	image_height = image.nextAll('.larger-image').height();

	// console.log(image_width);
	// 	console.log(image_height);

	// now that we have the width and height for the clicked thumb,
	// we can determine the ratio of width to height

	var image_ratio = image_width / image_height;

	// If 'image_ratio' is greater than 1,
	// then then width is greater than the height... it's landscape
	// likewise, if 'image_ratio' is less than 1, it's portrait
	// and if it equals 1, then it's square!

	// add extra height for description

	if (image_ratio > 1) {
		image_width = 520;
		image_height = 415;
	}
	else if (image_ratio < 1) {
		    // set up portrait values for lightbox
		 	image_width = 395;
		    image_height = 540;
		}
		else {
		// set up square values for lightbox
		image_width = 520;
		image_height = 540;
	}
	//

  // 4. build your lightbox using the values from the switch statement
		// save this as a variable
		var imageHref = image.parent().attr('href');

		var imageDescription = image.siblings().html();

		//replace src
		$('#flickr-dialog').html('<img src="'+ imageHref +'"/><br/><div class="desc">'+ imageDescription +'</div>');
			// open dialog
			$('#flickr-dialog').dialog({
				width: image_width,
				height: image_height,
				modal: true,
				resizable: false,
				dragabble: false,
			    overlay: {
			        opacity: 0.8,
			        background: "black"
				}
		});
		// close once the overlay is clicked
		$('.ui-dialog-overlay').click(function(){
			$('#flickr-dialog').dialog("close");
			$('#flickr-dialog .ui-dialog-titlebar-close').hide();
		});

}

// function to open flickr sets in a ui dialog
function openSetInDialog(setid){
	$.ajax({
		type: "POST",
		url: "/flickrSet.php",
		cache: false,
		data: "setid=" + setid,
		success: function(html){

	    	$("#flickr-sets-dialog").show().append(html);
			$("#flickr-sets-dialog").dialog({
				modal: true,
				// draggable: false,
				width: 610,
				height: 540,
				resizable: false,
				overlay: {
					opacity: 0.5,
					background: "black"
			    },
				close: function() {
					//$(this).empty();
					$("#flickr-sets-dialog").empty();
				}
			});

			$("#flickr-sets-dialog").dialog("open");
	  	}
	});
}


// load flickr set list