var first_photo_id = false
var first_photo_ob = false
var first_set_ob = false
var first_set_id = false
var url = "http://api.flickr.com/services/rest/?method=flickr.photosets.getList&format=json&api_key=dcf1a4a03762639cea0be94c3fdaeb7e&user_id=22456113@N00" + '&jsoncallback=?'
var totalPhotos = 0;
var loadedPhotos = 0;
var photosets = {};
var first_set_id = 0;
var config = {
				api_key: 'dcf1a4a03762639cea0be94c3fdaeb7e',
				link_to_size: 'l'
			};

$(document).ready(function() {

	//console.log("page ready")
	//$("#bg_img").hide()

	$("#bg_img_container").hide(function(){
		$("#bg_img").attr("src", 'imagery/jeremy_in_stone_path.jpg')
		$("#bg_img").click( function(){
			$("#content").addClass("open")
			return false;
		})
		$("#bg_img").show()
	})
	$("#bg_img_container").show()


	var q =  $.deparam.fragment();

	if(q["collection"]){
		first_set_id = q["collection"]
		first_photo_id = q["photo"]
	}else{
		update_splash_size($("#bg_img"), "fill_outer")
	}

	$("#list_opener").click(function(){
		$("#content").toggleClass("open")
		return false;
	})

	
	$(window).bind('resize', function() {
		update_thumb_display();
	});
	
	$("#thumbs_opener").click(function(){
		open_thumbs();
		return false;
	})
	
	$("#container").click(function(){
		close_thumbs()
		close_list()
		//return false;
	})
	
	
	
	//showCollections

	//console.log("page ready complete")

	$("#thumbs_container").hide()
	
	load_set_data();
	
});
      
      
      

      

		
		
		
load_set_data = function(){
	
	//console.log( "set data loading")
	

   	$.getJSON(url, function(data) {
   		$.each( data.photosets.photoset, function(i, ob){
   			photosets[ob.id] = ob
   			if(first_set_id == ob.id){
   				first_set_ob = ob
   			}
	
			entry = $( document.createElement("li") )
	
			link = $( document.createElement("a") )
	
			ob.primary_src = 'http://farm' + ob.farm + '.static.flickr.com/' + ob.server + 
		       '/' + ob.primary + '_' + ob.secret + "_s" + '.jpg'
	
			link.data("info", ob )
	
			entry.attr( "id", "set_" + ob.id )
	
			link.click( function(){
				info = $(this).data("info")
				setSelection( this);
				loadSet( info )
				event.preventDefault();
				return false
			}, false)
	
			link.html( ob.title._content )
	
			image = new Image(), html = '', href = undefined
							
			image.src = ob.primary_src
		

			image.id = ob.primary

			entry.append( link ) 
			entry.append( image )
	
	   		$("#galleries").append(entry)

   		} )

		$("#container").fadeIn("slow");
		$("#photography").fadeIn()

		if(first_set_ob){
			$("#set_" + first_set_ob.id).addClass("selected")
			loadSet( first_set_ob );
       		
		}
		
		//console.log( "set data loaded")


   	})

}
      	


showCollections = function(){
	$("#content").toggleClass("open")	
}

close_list = function(){
	$("#content").removeClass("open")	
}
      	
setSelection = function(item){
	$('#galleries li').removeClass('selected'); 
	$(item).parent().addClass('selected');
}
		
photoset_data_loaded = function(photoset_data){
	//console.log("photoset_data_loaded")
	$('#bg_img_container').data("info", photoset_data )
	$('#bg_img_container').data("current_photo", 0 )
	if(first_photo_id){
		
		$.each( photoset_data.photo, function(i, photo_ob){
			
			if(photo_ob.id == first_photo_id){
				first_photo_ob = photo_ob
				photo_clicked(first_photo_ob, true, i)
				first_photo_id = null
				first_photo_ob = null
				return
			}
			
		} )
	}else{
		photo_clicked(photoset_data.photo[0], true, 0)
	}
	
	$("#thumbs_container").empty()
	
	var thumb_loaded = false
	
	var img
	
	var div
	
	$.each( photoset_data.photo, function(i, photo_ob){
		
		img = new Image(), html = '', href = undefined
		img.id = "thumb_" + photo_ob.id
		if(!thumb_loaded){
			//img.src = photo_ob.url_m
			thumb_loaded = true
		}
		img = $(img)
		img.data("photo_ob", photo_ob)
		img.click(function(){
			photo_clicked($(this).data("photo_ob"), true, i);
			console.log(this)
			close_thumbs()
			return false;
		})
		img.load(function(){
			
			load_next_thumb(this)
			
		})
		
		div = $('<div class="thumby"></div>')
		div.append( img )
		
		div2 = $('<div class="thumby2"></div>')
		div2.append( div )
		
		
		
		$("#thumbs_container").append( div2 )
		
	//	div.hide()
	})
	
	$("#thumbs_container").data("thums_to_load", photoset_data.photo.slice(0) )
	
	//next_thumb = $("#thumbs_container").data("thums_to_load" ).shift()
	
	
	$("#thumbs_container").css("left", $("#content").innerWidth())
	
	$("#thumbs_container").show()
	
	
}

load_next_thumb = function(){
	
	thumbs_to_load = $("#thumbs_container").data("thums_to_load" )
	if( thumbs_to_load ){
		if( thumbs_to_load.length > 0 ){
			next_thumb_info = $("#thumbs_container").data("thums_to_load" ).shift()
			if(next_thumb_info){
				next_thumb = $("#thumb_" + next_thumb_info.id)
				next_thumb.parent().hide()
				next_thumb.attr("src", next_thumb_info.url_s)

				update_splash_size(	next_thumb, "fill_outer")
			}
		}
	}else{
		$("#content").addClass("open")
		
	}
	
	
}

photo_double_clicked = function(){
	
	$("#thumbs_container").toggleClass("closed")
	update_thumb_display()
}

close_thumbs = function(){
		$("#thumbs_container").addClass("closed")
		update_thumb_display()
}

open_thumbs = function(){
		$("#thumbs_container").removeClass("closed")
		update_thumb_display()
		load_next_thumb()
		
		
}

update_thumb_display = function(){
	
	if( $("#thumbs_container").hasClass("closed")){
		$("#thumbs_container").css("left", $("#content").innerWidth())
		
		
	}else{
		$("#thumbs_container").css("left", $("#content").innerWidth() - $("#thumbs_container").innerWidth())
		
	}
	
	
}

photo_clicked = function(ob, direct_link, position){
	
	close_thumbs()
	var set_info = $('#bg_img_container').data("info")
	
	var next_photo_num = 0
	
	var next_photo
	
	var photo_src
	
	
	if(direct_link){
		next_photo = ob
		first_photo_ob = null
		next_photo_num = position
	}else{
		next_photo_num = $('#bg_img_container').data("current_photo_num") + 1
		next_photo = set_info.photo[next_photo_num]
	}
	
	if (next_photo_num > set_info.photo.length - 1){
		next_photo_num = 0		
		next_photo = set_info.photo[next_photo_num]
		
	}
	
	$("#content").removeClass("open")
	

	
	$('#bg_img_container').data("current_photo_num", next_photo_num )
	$('#bg_img_container').data("current_photo_ob", next_photo )
	
	
	$.bbq.pushState({ photo: next_photo.id });
	
	
	photo_src = next_photo.url_l || next_photo.url_z || next_photo.url_m
	
	$("#bg_img_container").fadeOut(500, function(){
		$("#bg_img_container").empty()
		img = new Image(), html = '', href = undefined
	  	img.id = "bg_img"
		img.src = photo_src
		img = $(img)
		img.click(function(){
			photo_clicked(this);
			return false;
		})
		
		img.dblclick(function(){
			photo_double_clicked(this);
			return false;
		})
		
		$("#bg_img_container").append(img)
		update_splash_size($("#bg_img"))
		
		next_photo_num = $('#bg_img_container').data("current_photo_num") + 1
		if (next_photo_num > set_info.photo.length - 1){
			next_photo_num = 0
		}
		
		next_photo = set_info.photo[next_photo_num]
		photo_src = photo_src = next_photo.url_l || next_photo.url_z || next_photo.url_m
		
		img = new Image(), html = '', href = undefined
	  	img.id = "next_img"
		img.src = photo_src
		//$(img).load(function(){//console.log("preload complete")})
	})
	
}

loadSet = function(set_info){
	
	$("#content").removeClass("open")
	
	close_thumbs()
	
	$("#thumbs_container").data("thums_to_load", null )
	
	
	$('#loaded').flickr(config).photosetsGetPhotos({photoset_id: set_info.id, per_page: 1000, extras: "url_s, url_m, url_l, url_z"})
	

	
	$.bbq.pushState({ collection: set_info.id, photo: set_info.primary });
    	
	
	$('#bg_img_container').fadeOut( 1000, function(){
		$("#bg_img_container").removeClass("start")
		
		
	} )	
}

      	
setLoaded = function(){

	if(first_photo_id){
		$("#" + first_photo_id).click()
	}

}


thumbLoaded = function(thumb){
	var div = $(thumb).parent().parent()
	$("#loaded").append(div);

	++loadedPhotos
	if(loadedPhotos == totalPhotos ){
		setLoaded()
	}
}

update_splash_size = function(object, cropType){

	if(cropType==null){
		cropType='full'
	}

	$(function()
			{
			object.jmc_resizr({
				followBrowserSize: true,
				cropType : cropType,
				binding : {
					vertical : 'center',
					horizontal : 'center'
				}
			});
		});

}