// Variables go here
var flickrVars = {
	url : 'http://api.flickr.com/services/rest/?',
	apiKey : '3da43782784b589cd9eab0945ef9dd25',
	userID : '27820900@N07'
};

$(document).ready(function(){
	
	// hide the divs ready for popup
	$('#flickr-dialog').hide();
	$("#flickr-sets-dialog").hide();
	
	$('.gallery').each(function() {
		getFlickrImages(3, $(this));
	});
	
	$('.flickr-content').each(function() {
		getFlickrImages(5, $(this));
	});
	
	// add homepage carousel
	//AddFlickrSetsCarousel($('.carousel-list ul'));
});

function getFlickrImages(limit, elm) {
	var self = elm;
	var set_id = self.find('ul').attr('class');
		$.getJSON("http://api.flickr.com/services/rest/?photoset_id="+set_id+"&format=json&method=flickr.photosets.getPhotos&api_key=3da43782784b589cd9eab0945ef9dd25&jsoncallback=?", function (data) {
		for(i = 0; i < limit; i++) {
			if(typeof data.photoset.photo[i] == 'object') {
				var set = data.photoset.photo[i];
				var img = "http://farm"+set.farm+".static.flickr.com/"+set.server+"/"+set.id+"_"+set.secret+"_s.jpg";
				self.find('ul').append($('<li/>').append($('<a/>').attr('href', '#').attr('onClick', 'openSetInDialog(\''+set_id+'\'); return false;').append($('<img/>').attr('src', img))));
			}
		}
	});
}

/*
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>';
			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(){
		// console.log('click');
		// 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: "/blog/flickr_gallery/"+setid+"/",
		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(event, ui) {
					//$(this).empty();
					$("#flickr-sets-dialog").empty();
				}
			});
			
			$('#flickr-sets-dialog').bind('dialogclose', function(event, ui) {
				$("#flickr-sets-dialog").empty();
				if(carousel.openedFromCarousel) {
					
					carousel.restartCarousel();
				
				}
			});
					
		}
			
	});
}


// load flickr set list