$(document).ready(function() {
	var animationSpeed = 500; // milliseconds
	
	/**
	 * Dialog Pages
	 */
	$.ui.dialog.defaults.bgiframe = true;
	$('.about-page').click(function () {
		$("#about-page").dialog({
			bgiframe: true,
			modal: true,
			width: 600,
			height: 400
		});
		return false;
	});
	
	/**
	 * Toggle the account icon and display/hide the account statuses
	 */
	$('.account-icon').click(function () {
		var id = $(this).attr('id');
		var state = $(this).attr('state');
		
		// Hide all pinned account icons
		pinUserIcon();
		
		// Display/Hide the selected user's tweets
		$('.user-tweet').each(function (i) {
			if ($(this).attr('class') == 'user-tweet user-' + id) {
				if (state == 'selected') {
					$(this).slideUp(animationSpeed);
				} else {
					$(this).slideDown(animationSpeed);
				}
			}
		});
		
		// Toggle image selection
		if (state == 'selected') {
			deselectUserIcon('.account-icon-' + id);
		} else {
			selectUserIcon('.account-icon-' + id);
		}
		return false;
	});
	
	/**
	 * Select/Unselect all accounts and hide statuses from timeline
	 */
	$('.toggle-all-accounts').click(function () {
		var action = $(this).attr('action');
		var type = $(this).attr('type');
		
		// Removed any pinned account icons from the list
		$('.' + type + '-thumb-tack').removeClass('pinned');
		
		// Select/unselect all the following icons
		$('.' + type).each(function (i) {
			var id = $(this).attr('id');
			
			if (action == 'select') {
				// Highlight icons
				selectUserIcon(this);
				
				// Display statuses from selected accounts
				$('#statuses .user-tweet.user-' + id).fadeIn(animationSpeed);
			} else if (action == 'unselect') {
				// Unhighlight icons and change the state
				deselectUserIcon(this);
				
				// Hide statuses from unselected accounts
				$('#statuses .user-tweet.user-' + id).fadeOut(animationSpeed);
			}
		});
		
		return false;
	});
	
	/**
	 * Profile image rollover actions
	 */
	$('.profile-image').mouseover(function () {
		$(this).children('.thumb-tack').attr('style', 'display:block');
		$(this).children('.external').attr('style', 'display:block');
	});
	$('.profile-image').mouseout(function () {
		$(this).children('.thumb-tack').attr('style', 'display:none');
		$(this).children('.external').attr('style', 'display:none');
	});
	
	/**
	 * Show-only actions
	 */
	$('.show-only').click(function () {
		var id = $(this).attr('id');
		
		// Unhighlight icons and change the state
		deselectUserIcon($('.account-icon'));
		selectUserIcon($('.account-icon-' + id), true);
		pinUserIcon($('.show-only-' + id));
		
		// Show only the statuses from this selected user in the timeline
		$('#statuses .user-tweet').hide();
		$('#statuses .user-' + id).show();
	});
	
});

/**
 * Display a unhighlighted/unselected account icon of the selected account and change the state
 */
function deselectUserIcon(obj) {
	$(obj).attr('src', '/img/icons/icon_overlay.png');
	$(obj).attr('state', 'unselected');
	
	// Hide any other pinned (thumb tack) icons
	
}

/**
 * Display a highlighted/selected account icon of the selected account and change the state
 */
function selectUserIcon(obj, pinned) {
	$(obj).attr('src', '/img/icons/icon_overlay_selected.png');
	$(obj).attr('state', 'selected');
}

/**
 * Hide all other pinned account icons and show the selected one
 */
function pinUserIcon(obj) {
	$('.show-only').removeClass('pinned');
	
	if (obj) {
		$(obj).addClass('pinned');
	}
}