$(function(){

	$(".expanding-text").live( "keyup", function() {
		FitToContent(this, document.documentElement.clientHeight);
	});

	$( "#submit-user-status" ).click( function() {

		$( "#activity-stream-post-loading" ).show();
		$( "#activity-stream-post-loading" ).html( "Posting..." );
		$( "#user-status" ).attr( "disabled", true );

		$.post( "/profile/_update_status/", { status: $( "#user-status" ).val() }, function( data ) {
			var result_msg = "";
			if( data.success == true )	{
				$( "#user-status" ).removeClass("focus");
				$( "#user-status" ).val( "What's on your mind?" );	
				$( "#activity-stream" ).prepend( activity_html( data.activity ) );
				$( "#activity-stream-post-loading" ).hide();
			} else if( data.success == false ) { 
				result_msg = "Error occured: " + data.message;
			}
			$( "#activity-stream-post-loading" ).html( result_msg );
			$( "#user-status" ).attr( "disabled", false );
		}, "json");	
	});
	$( "#user-status" ).click( function() {
		$(this).addClass("focus");
		if( $( this ).val() == "What's on your mind?" )	{
			$( this ).val( "" );	
		}
	});
	$( "#user-status" ).blur( function() {
		if( $( this ).val() == "" )	{
			$(this).removeClass("focus");
			$( this ).val( "What's on your mind?" );	
		}
	});
	$.get( "/home/_get_activity_stream/", {}, function( data ) {
		$( "#activity-stream-loading" ).slideUp();

		if( data.success == true ){
			var towrite = [];
				j = 0;

			$.each( data.activity, function( i, a ) {
				console.log( a.activity_id );
				towrite[j++] = activity_html( a );
			});			
			$( "#activity-stream" ).append( towrite.join('') );

		} else if( data.success == false ) {
			if( data.type != "login" ) {
				alert( "Error occured: " + data.message );
			}
		}
	}, "json");

	$("a[rel=add-comment]").live( "click", function( e ) {		
		e.preventDefault(); // Cancel the link behavior
		var activity_id = $( this ).attr( "data-activity-id" );
			element_id = "activity-" + activity_id;		
			pic = $( "#comment-profile-pic-" + activity_id );
			controls = $( "#comment-controls-" + activity_id );
			comment = $( "#comment-text-" + activity_id );

		$( "#comment-reply-" + activity_id ).show();
		$( "ul#comments-" + activity_id + ":hidden" ).show();

		comment.addClass( "active" );
		pic.show();
		controls.show();
		if( comment.val() == "Write a comment..." ) {
			comment.val( "" );
		}
		comment.focus();
	});
	
	$(".comment-cancel").live( "click", function( ) {
		var activity_id = $( this ).attr( "data-activity-id" );
			pic = $( "#comment-profile-pic-" + activity_id );
			controls = $( "#comment-controls-" + activity_id );
			comment = $( "#comment-text-" + activity_id );

		if( comment.val() == "" ) {
			comment.removeClass( "active" );
			comment.val( "Write a comment..." );
		}
		pic.hide();
		controls.hide();
	});
	$("input[rel=comment-submit]").live( "click", function( e ) {	
		e.preventDefault(); // Cancel the link behavior
		var activity_id = $( this ).attr( "data-activity-id" );
			comment = $( "#comment-text-" + activity_id  ).val();

		$.post( "/home/_activity_comment/", { "activity_id" : activity_id, "comment" : comment }, function( data ) {
			var activity_id = data.comment.activity_id;
				pic = $( "#comment-profile-pic-" + activity_id );
				controls = $( "#comment-controls-" + activity_id );
				comment = $( "#comment-text-" + activity_id ); 

			if( data.success == true ) {				
				append_comment( activity_id, data.comment );				
			} else if( data.success == false ) { 
				alert( "Error occured: " + data.message );
			}
			pic.hide();
			controls.hide();
			comment.removeClass( "active" );
			comment.val( "Write a comment..." );

		}, "json")
	});

	$( ".comment-text" ).live( "click", function( e ) {
		var activity_id = $( this ).attr( "data-activity-id" );
			pic = $( "#comment-profile-pic-" + activity_id );
			controls = $( "#comment-controls-" + activity_id );
		$( this ).addClass( "active" );
		pic.show();
		controls.show();
		if( $( this ).val() == "Write a comment..." ) {
			$( this ).val( "" );
		}
	});

	$( ".show-all-comments-enable" ).live( "click", function() {
		var activity_id = $( this ).attr( "data-activity-id" );
			comments = $( "#comments-" + activity_id + " li" );
					
		$.each( comments, function( i, a ) {
			$( this ).show();
		});
		$( "#show-all-comments-" + activity_id ).hide();

	});
	
	setTimeout( "check_updates()", 2500 ); // 2.5 seconds for testing purposes
});


// would love to eventually translate this all to direct dom js creating instead of string'd html
// for preformance sake
function activity_html( a ) {

	var act_text = "";
		user_avatar = $( "#user-avatar-image" ).attr( "src" );
		comment_html = "";

	if( a.activity_type == "status_update" ) {
		act_text = a.activity_data.text;
	} else if( a.activity_type == "board_post" ) {
		act_text = "<span class=\"automated\">posted a message on <a href=\"/board/\">the board</a>:</span> <div class=\"board-message\">"
							+ a.activity_data.text 
							+ "</div>";
	} else if( a.activity_type == "added_game" ) {
		act_text = "<span class=\"automated\">added <strong>" + a.activity_data.game_title + "</strong> to his/her game list</span>";
	} else if( a.activity_type == "level_up" ) {
		act_text = "<span class=\"automated\">has just reached <strong>level " + a.activity_data.level + "</strong></span>";
	} else {
		// ?
	}

	if( a.comments.length > 0 ) {
		var collapse = false;
			num_collapsed = 0;

		$.each( a.comments, function( c_num, c ) {
			collapse = false;
			if( a.comments.length >= 3 && c_num != a.comments.length-1 && c.unread == false ) {
				collapse = true;
				num_collapsed++;
			}
			comment_html += activity_comment_html( c, collapse );
		});

		if( num_collapsed > 0 ) {
			comment_html = '<li id="show-all-comments-' + a.activity_id + '" class="show-all-comments"><a class="show-all-comments-enable" data-activity-id="' + a.activity_id + '">Show ' + num_collapsed + ' previous comments</a></li>'
				+ comment_html;
		}
	}
	
	
	var activity_html = 
			  '<li id="activity-' + a.activity_id + '" class="activity' + (a.unread ? ' unread' : '' ) + '">'
			+ '<div class="message-wrap">'
				+ '<div class="profile-pic"><a href="/' + a.user_login + '/"><img src="' + a.avatar_tn + '" alt="' + a.user_login + '\'s avatar" /></a></div>'
				+ '<div class="message">'
					+ '<a href="/' + a.user_login + '/" class="user">' + a.user_login + '</a>'							
					+ '<span class="text">' + act_text + '</span>'
					+ '<div class="meta">' + a.activity_date + ' &middot; <a class="add-comment" rel="add-comment" data-activity-id="' + a.activity_id + '">Comment</a></div>'
				+ '</div>'
			+ '</div>'		
			+ '<ul id="comments-' + a.activity_id + '" class="comments" '
					+ ( ( a.comments.length == 0 ) ? 'style="display: none;"' : '' )
					+ '>'
				+ comment_html
			+ '</ul>'	
			+ '<div class="activity-comment" id="comment-reply-' + a.activity_id + '" data-activity-id="' + a.activity_id + '" '
					+ ( ( a.comments.length == 0 ) ? 'style="display: none;"' : '' )
					+ '>'
				+ '<div id="comment-profile-pic-' + a.activity_id + '" class="profile-pic" style="display: none;">'
					+ '<img src="' + user_avatar + '" alt="" />'
				+ '</div>'
				+ '<div class="comment-reply-box">'
					+ '<textarea data-activity-id="' + a.activity_id + '" id="comment-text-' + a.activity_id + '" class="expanding-text comment-text" name="message" cols="40" rows="2">Write a comment...</textarea>'
				+ '</div>'
				+ '<div id="comment-controls-' + a.activity_id + '" class="comment-controls" style="display: none;">'
					+ '<input rel="comment-submit" data-activity-id="' + a.activity_id + '" type="button" class="sub-reply" value="Add Comment" /> '
					+ '<a rel="comment-cancel" class="comment-cancel" data-activity-id="' + a.activity_id + '">Cancel</a>'
				+ '</div>'
			+ '</div>'
		+ "</li>";

	return activity_html;
}
function append_comment( activity_id, c ) {	
	$( "ul#comments-" + activity_id ).show();
	$( "ul#comments-" + activity_id ).append( activity_comment_html( c ) );
}

function activity_comment_html( c, collapse ) {

	collapse = ( collapse == undefined ) ? false : collapse;

	return "<li" + ( collapse ? " style=\"display: none;\"" : "" ) + ( c.unread ? ' class="unread"' : '' ) + ">"
		+ "<div class=\"message-wrap\">"
			+ "<div class=\"profile-pic\"><a href=\"/" + c.user_login + "\"><img src=\"" + c.avatar_tn + "\" alt=\"\" /></a></div>"
			+ "<div class=\"message\">"
				+ "<a href=\"/" + c.user_login + "/\" class=\"user\">" + c.user_login + "</a> <span class=\"text\">" + c.comment_text + "</span>"
				+ "<div class=\"meta\">" + c.comment_date + "</div>"
			+ "</div>"
		+ "</div>"
	+ "</li>";
}

function check_updates() {
	$.post( "/home/_check_activity_stream/", { "latest" : "null" }, function( data ) {
		if( data.success == true )
		{				
			console.log( data );
		} 
		else if( data.success == false ) 
		{ 
			alert( "Error occured: " + data.message );
		}
	}, "json");

	//setTimeout( "checkUpdates()", 2500 );
}