var pGroup = "1643010@N21";
var pMonthNames = new Array("", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

function sunset_autostart() {
	var tag = getAnchorTag();
	display_menu(tag);
}

function getAnchorTag() {
	var hash = window.location.hash;
	if (hash == undefined || hash == null || hash == "") return null;
	
	// remove hash tag
	return new String(hash).substring(1, hash.length);
}

function display_menu(tag) {
	// split into parts
	var year = 0;
	var month = 0;
	var day = 0;
	if (tag != null) {
		tag = new String(tag);
		if (tag.length >= 4) year = tag.substring(0, 4);
		if (tag.length >= 6) month = tag.substring(4, 6);
		if (tag.length >= 8) day = tag.substring(6, 8);
	}
	
	// catch bad tag values
	if (isNaN(year)) year = 0;
	if (isNaN(month)) month = 0;
	if (isNaN(day)) day = 0;
	
	// display years first
	load_year_list(year, month, day);
}

function load_year_list(currentYear, currentMonth, currentDay) {
	//display_message("Loading years...");
	
	// get list of all years
	url = "/api.php?f=group/" + pGroup + "/count.json";
	$.getJSON(url, function(data) { display_year_list(data, currentYear, currentMonth, currentDay); });
	
}

function load_month_list(year, currentMonth, currentDay) {
	// get list of months for year
	url = "/api.php?f=group/" + pGroup + "/" + year + "/count.json";
	$.getJSON(url, function(data) { display_month_list(data, year, currentMonth, currentDay); });
	
}

function load_day_list(year, month, currentDay) {
	// get list of days for year, month
	url = "/api.php?f=group/" + pGroup + "/" + year + "/" + month + "/count.json";
	$.getJSON(url, function(data) { display_day_list(data, year, month, currentDay); });
}

function load_day_photos(tag) {
	$('section.group header h2').text("Loading Photos...");
	$('div#divList').empty();
	
	// split up tag
	tag = new String(tag);
	var year = tag.substring(0, 4);
	var month = tag.substring(4, 6);
	var day = tag.substring(6, 8);
	
	// get places
	url = "/api.php?f=group/" + pGroup + "/" + year + "/" + month + "/" + day + "/list.json";
	$.getJSON(url, function(data) { display_day_photos(data); });
}


function display_year_list(data, currentYear, currentMonth, currentDay) {
	var ul = $('ul#yearMenu');
	ul.empty();
	
	// add label
	html = "Year:";
	li = $('<li></li>').append(html);
	li.addClass('label');	
	ul.append(li); 
	
	// loop through each place
	for (i = data.Items.length - 1; i >= 0; i--) {
		// get photo
		item = data.Items[i];
		tag = item.Key;
		dayCount = item.Days;
		
		// set current year if empty
		if (currentYear == 0) currentYear = item.Key;
		
		count = dayCount + " day";
		if (new Number(dayCount) > 1) count += 's';
		count += ", " + item.Count + " photo";
		if (new Number(item.Count) > 1) count += 's';
		
		// todo: add browse link based on type		
		html = "<a href='#topMenu' id='" + item.Key + "' rel='" + tag + "' title='" + count + "'>" + item.Key + "</a>";
		li = $('<li></li>').append(html);
		
		ul.append(li);
	}
	
	// select current year
	$('ul#yearMenu a#' + currentYear).addClass('current');

	// loop through each item to wire event
	for (i = 0; i < data.Items.length; i++) {
		// get photo
		item = data.Items[i];

		$('#' + item.Key).click(function () {
			// use rel to find scope and value
			var rel = $(this).attr('rel');

			// rename anchor
			//$('a#topMenu').attr('name', rel);
	
			load_month_list(rel, 0, 0);
			// clear all current links
			$('#yearMenu a.current').removeClass('current');
			
			$(this).addClass('current');
		});
		
	}
	
	// load month list now
	load_month_list(currentYear, currentMonth, currentDay); // todo: check for current month
}

function display_month_list(data, year, currentMonth, currentDay) {
	var ul = $('ul#monthMenu');
	ul.empty();
	
	// add label
	html = "Month:";
	li = $('<li></li>').append(html);
	li.addClass('label');	
	ul.append(li); 
	
	// loop through each place
	for (i = data.Items.length - 1; i >= 0; i--) {
		// get photo
		item = data.Items[i];
		tag = new String(year) + new String(item.Key);
		dayCount = item.Days;
		
		index = new Number(item.Key);
		name = pMonthNames[index];
		
		// update current month if empty
		if (currentMonth == 0) currentMonth = item.Key;
		
		count = dayCount + " day";
		if (new Number(dayCount) > 1) count += 's';
		count += ", " + item.Count + " photo";
		if (new Number(item.Count) > 1) count += 's';
		
		html = "<a href='#topMenu' id='" + new String(year) + new String(item.Key) + "' rel='" + tag + "' title='" + count + "'>" + name + "</a>";
		li = $('<li></li>').append(html);
		
		ul.append(li);
	}
	
	// select current month
	$('ul#monthMenu a#' + new String(year) + new String(currentMonth)).addClass('current');

	// loop through each item to wire event
	for (i = 0; i < data.Items.length; i++) {
		// get photo
		item = data.Items[i];

		$('#' + new String(year) + new String(item.Key)).click(function () {
			// use rel to find scope and value
			var rel = $(this).attr('rel');
			
			// rename anchor
			//$('a#topMenu').attr('name', rel);
	
			// split into parts
			rel = new String(rel);
			year = rel.substring(0, 4);
			month = rel.substring(4, 6);
			
			load_day_list(year, month, 0);
			// clear all current links
			$('#monthMenu a.current').removeClass('current');
			
			$(this).addClass('current');
		});
	}
	
	// load day list now
	load_day_list(year, currentMonth, currentDay); // todo: pull current day
}

function display_day_list(data, year, month, currentDay) {
	var ul = $('ul#dayMenu');
	ul.empty();
	
	// add label
	html = "Day:";
	li = $('<li></li>').append(html);
	li.addClass('label');	
	ul.append(li); 
	
	// loop through each place
	for (i = data.Items.length - 1; i >= 0; i--) {
		// get photo
		item = data.Items[i];
		tag = new String(year) + new String(month) + new String(item.Key);
		
		// add current day if not set
		if (currentDay == 0) currentDay = item.Key;
		
		count = item.Count + " photo";
		if (new Number(item.Count) > 1) count += 's';
				
		html = "<a href='#topMenu' id='" + new String(year) + new String(month) + new String(item.Key) + "' rel='" + tag + "' title='" + count + "'>" + item.Key + "</a>";
		li = $('<li></li>').append(html);
		
		ul.append(li);
	}
	
	// select current day
	$('ul#dayMenu a#' + new String(year) + new String(month) + new String(currentDay)).addClass('current');
	
	// loop through each item to wire event
	for (i = 0; i < data.Items.length; i++) {
		// get photo
		item = data.Items[i];

		$('#' + new String(year) + new String(month) + new String(item.Key)).click(function () {
			// use rel to find scope and value
			var rel = $(this).attr('rel');

			load_day_photos(rel);
			// clear all current links
			$('#dayMenu a.current').removeClass('current');
			
			$(this).addClass('current');
		});
	}
	
	// display photos
	load_day_photos(new String(year) + new String(month) + new String(currentDay));
}

function display_day_photos(data) {
	var list = $('div#divList');
	//list.addClass('group');
	
	// remove articles
	//alert($('div#divList section.group article').length);
	
	//$('div#divList section.group article').remove();
	
	// get date from first photo if found
	if (data.length == 0) return;
	
	var firstPhoto = data[0];
	var month = new Number(firstPhoto.Month);
	var day = new Number(firstPhoto.Day);
	var year = firstPhoto.Year;
	firstPhoto = null;
	
	// get month name
	var monthName = pMonthNames[month];
	
	//list.append('<header><h2>' + monthName + ' ' + day + ', ' + year + '</h2></header>');
	$('section.group header h2').text(monthName + ' ' + day + ', ' + year);
	
	// loop through each place
	for (i = 0; i < data.length; i++) {
		// get photo
		photo = data[i];
		
		// find width
		if (new Number(photo.Width) > new Number(photo.Height))
			// make width 500
			width = 500;
		else
			// calculate based on aspect ratio
			width = Math.round(photo.Width / photo.Height * 500);
		
		// set profile Url
		pathAlias = photo.PathAlias;
		if (pathAlias == "") pathAlias = photo.Owner;
		profileUrl = "http://www.flickr.com/photos/" + pathAlias;
		
		img = "<img src='" + photo.MediumUrl + "' style='width: " + width + "px; padding: 1px; border: solid 1px #999;' alt='' />";
		html  = "<article>";
		html += "<header>";
		html += "<h1>" + photo.Title + "</h1>";
		html += "<p class='byline'>taken by<br /><a href='" + profileUrl + "' target='_blank'>" + photo.OwnerName + "</a></p>";
		html += "</header>";
		html += "<p><a href='" + photo.PageUrl + "' target='_blank'>" + img + "</a></p>";
		if (photo.Description != "")
			html += "<p>" + photo.Description + "</p>";
		
		html += "</article>";
		
		list.append(html);
	}
	
	//$('#divList').empty();
	//$('#divList').append(list);
}

function display_message(msg) {
	$('#divList').empty();
	text = $('<p><em></em></p>').append(msg);
	$('#divList').append(text);
}