$(function() {
	// The total number of constant tabs.
	var tab_counter = 5;

	var $tabs = $("#tabs").tabs({
		ajaxOptions: {
			error: function(xhr, status, index, anchor) {
				$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible.");
			}
		},
		
		// Add a close button.
		tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
		
		cookie: {
			// store cookie for a day, without, it would be a session cookie
			expires: 1
		},

		load: function(event, ui) {
			// Adjust the height of the div
			adjustMainHeight(ui.panel.id);
			
			// Bind the add tab function to the links on the main photo page.
			$("div#photos a").click(function () { 
				addTab($(this).attr("alt"), $(this).attr("href"));
				return false;
		    });

			// Open links in the current tab instead of leaving the page.
			/*
			$('a', ui.panel).click(function() {
				$(ui.panel).load(this.href);
				return false;
			});
			*/
			
			// Bind the "open dialog" functionality to the links on the yearly photo pages.
			/*
			$("div.yearly-photo-master a").click(function () { 
				// Set the content of the modal.
				$("#dialog-modal").html("<img src=\"" + $(this).attr("href") + "\" />")

				// Display the modal
				$("#dialog-modal").dialog("open");
				return false;
		    });
		    */
		}
	}); // end tabs

	$('#tabs').bind('tabsshow', function(event, ui) {
		// The main panel has to be resized here, since it's not a remote tab.
		// The remote tabs are not resized here, because sometimes they will not resize
		// on the first load of the tab (if they're re-sized here).
	    if (ui.panel.id == "main") {
	    	adjustMainHeight(ui.panel.id);
	    }
	});

	// close icon: removing the tab on click
	// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
	$( "#tabs span.ui-icon-close" ).live( "click", function() {
		var index = $( "li", $tabs ).index( $( this ).parent() );
		removeTab(index);
	});
	
	// Make the tabs sortable
	//$( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });

	// actual addTab function: adds new tab using the title input from the form above
	function addTab(title, url) {
		// Add the tab
		$tabs.tabs( "add", "#tabs-" + tab_counter, title );

		// Set the url of the new tab
		$tabs.tabs("url", tab_counter, url);
		
		// Immediately switch to the new tab
		$tabs.tabs("select", tab_counter);

		// Increment the tab counter
		tab_counter++;
	}
	
	function removeTab(index) {
		// Remove the tab
		$tabs.tabs( "remove", index );
		
		// Decrement the tab counter
		tab_counter--;
	}

	// On page initialize, resize the main content area.
	adjustMainHeight("main");
});

// Adjust the DIV heights after the window is resized.
$(window).resize(function() {
	//console.log("Executing window.resize");
	adjustMainHeight("main");
});


function adjustMainHeight(divId) {
	// Get the div
	var $div = $("#" + divId);
	
	// First, remove any current height attribute on the div
	//$div.css("height", "");
	
	//  add overflow-y attr
	//$div.css('overflow-y', 'auto');
	
	console.log( "window = " + $(window).height()
		+ "\ndoc = " + $(document).height()
		+ "\nmain height = " + $("#main").height()
		+ "\n$div.height() = " + $div.height()
	);
	

	// If the document is taller than the window
	if($(document).height() > $(window).height()) {
		// Calculate new size
		var newDivSize = $(window).height() - ($(document).height() - $div.height());
		
		console.log("calculated new, smaller window size to be " + newDivSize);
		
		// If the new size is not too small, then shrink the tab contents.
		if(newDivSize > 150) {
			console.log("Setting new div size to be " + newDivSize);
			
			$div.height(newDivSize);
		}
	
		// Else, the new size is too small, so do not shrink the div
		// and remove the overflow-y CSS attribute.
		else {
			console.log("Not setting height on div, because the new div size would be too small.");
		
			// Remove any current height attribute on the div
			$div.css("height", "");

			// remove overflow-y attr
			//$div.css('overflow-y', '');
		}
	}
}