websdotcom_updateStatusPOC.html

<script type="text/javascript">
var updateStatus = {
	isLoggedIn: false,
	workingForm: null,
	newRequestEl: null,
	
	init: function(formName) {
		// We need the user to actually be logged in before we can let them use this, so we'll hack a check
		updateStatus.isLoggedIn = updateStatus.checkLogin();
				
		// Check authentication, and store (if we can) a reference to our form for later use (should we need it)
		if(document.getElementById(formName) && updateStatus.isLoggedIn) {
			updateStatus.workingForm = document.getElementById(formName);
			updateStatus.workingForm.style.display = "block";
			
			// Ideally, this event handler should use a library, but since we can't rely on one, we fall back to DOM level 2
			updateStatus.workingForm.onsubmit = function() {
				updateStatus.sendRequest();
				return false;
			}
		}
	},
	
	checkLogin: function() {
		// Some login-checking magic (really, this is magic. We check for various permutations of login-states on the page...)
		var secondaryCheckEls = document.getElementById("fw-sidebar").getElementsByTagName("div")[1].getElementsByTagName("a"),
			secondaryCheckConfirm = false;
			
		for(var i = 0; i < secondaryCheckEls.length; i++) {
			if(secondaryCheckEls[i].innerHTML == "Sign Out") secondaryCheckConfirm = true;
		}
		
		if(document.getElementById("fw-member-presence") || secondaryCheckConfirm) return true;
		else return false;
	},
	
	sendRequest: function() {
		// Get our Status for our query parameter.
		var ourStatus = document.getElementById("updateStatus_text").value,
			newRequestEl = document.createElement("iframe");
		
		// Since we can't rely on an AJAX library being present, we'll do a little trick and append a new <script>
		// to the page. We'll also clean it up once we're done, so we leave no garbage behind. :D
		// We build our query by grabbing the action of our (stored!) form object, and encoding our status so it sends properly.
		newRequestEl.src = updateStatus.workingForm.action + "?status=" + escape(ourStatus);
		newRequestEl.style.width = "1px";
		newRequestEl.style.height = "1px";
		newRequestEl.style.top = "0px";
		newRequestEl.style.left = "0px";
		newRequestEl.style.visibility = "hidden";
		
		// Now that we've built our script tag, we append it to the body, where the browser parses it
		document.body.appendChild(newRequestEl);
		updateStatus.newRequestEl = newRequestEl;
		setTimeout(function() { document.body.removeChild(updateStatus.newRequestEl); return false; }, 5000);
	}
}
</script>

<style type="text/css">
/* Hide this by default, we'll be showing it with JS after we check for a logged in user */
#statusForm { display: none; }
</style>

<!-- HTML Junks -->
<form name="statusForm" id="statusForm" action="http://lolcakes23.webs.com/apps/profile/setProfileStatus" method="post">
	<p>Update your Status!</p>
	<input name="status" id="updateStatus_text" value="What's shakin, Cowboy?">
	<input type="submit" id="updateStatus_button" value="Update!">
</form>

<script type="text/javascript">updateStatus.init("statusForm");</script>