// This is an AJAX request. It takes a structure of URL parameters as
// well as an optional call back method.
function APIRequest( objParams, fnCallBack ){
	var objConnection = null;
	var strUrl = "api.cfm?";
	var strQueryString = "";
	var strKey = "";
 
	// The the various forms of creating the HTTP request. IE
	// and Mozilla do this differently. Use the try / catch
	// to figure out which one's won't break.
	try {
 
		objConnection = new ActiveXObject("Microsoft.XMLHTTP");
 
	} catch( objMSError ) {
 
		try {
 
			objConnection = new XMLHttpRequest();
 
		} catch (objMozError) {
 
			alert("Your browser cannot handle this XMLHttpRequest technology.");
 
		}
 
	}
 
 
	// Check to make sure we have a connection object.
	if (objConnection){
 
		// Loop over the URL params object and add the
		// key-value pairs to the query string.
		for (strKey in objParams){
 
			// Be sure to escape the value for the URL.
			strUrl += (
				"&" +
				strKey +
				"=" +
				encodeURIComponent( objParams[ strKey ] )
				);
 
		}
 
		// prompt( "url", strUrl );
		// return;
 
		// Open the connection. We are going to use a "Get"
		// approach. That will put all of our values into the
		// URL, not the FORM scope.
		objConnection.open(
			"get",
			strUrl
			);
 
 
		// Check to see if we have a call back method. If we do,
		// then set up the state change method handler. This is
		// designed to send the evaluated JSON result back to
		// the call back method.
		if (fnCallBack){
 
			// Define the ready state change method.
			objConnection.onreadystatechange = function(){
				var objResponse = objConnection;
 
				// Check to see if we have a response.
				if (objResponse.readyState == 4){
 
					// Evaluate the JSON response and send it to the
					// given call back method.
					fnCallBack(
						eval( "(" + objResponse.responseText + ")" )
						);
 
				}
 
			};
 
		}
 
 
		// Send the AJAX request now that we have our connection
		// set up and the handlers defined.
		objConnection.send(
			null
			);
 
	}
 
}
 
 
 
function CallAPI( strInteraction ){
 
	// Check to see if we have an APIInterval
	// value that we should clear.
	if (window.APIInterval){
 
		// Delete this interval since we are about to
		// launch another API request.
		clearTimeout(
			window.APIInterval
			);
 
	}
 
	// Launch a new API request to update the Shortie and
	// get the updated property data returned.
	APIRequest(
		{
			interaction: (strInteraction ? strInteraction : "")
		},
 
		function( objData ){
 
			// Update the property values.
			$( "p.property" ).each(
				function( intI ){
					var objProp = $( this );
 
					objProp.text(
						objData[ objProp.attr( "rel" ) ]
						);
				}
				);
 
			// Update the time values.
			$( "#timevalue" ).text( objData.time );
 
			// Update the delay value.
			$( "#delayvalue" ).text(
				(
					(parseInt( objData.delay ) > 0) ?
					(objData.delay + " minutes") :
					"No Delay"
				)
				);
 
			// Set a timeout to call another API request.
			window.APIInterval = setTimeout(
				CallAPI,
				(5 * 1000)
				);
 
		}
		);
 
}
 
 
function UpdateShortieImage(){
	var jShortie = $( "#shortie" );
	var intValue = ((parseInt( Math.random() * 100 ) % 17) + 1);
	var imgShortie = new Image();
 
	// Format the value to make sure it is a two digit
	// value (for our file naming convention).
	intValue = (
		(intValue.toString().length == 1) ?
		("0" + intValue) :
		intValue
		);
 
	// Set the image onload handler.
	$( imgShortie ).load(
		function( obj ){
 
			// Fade out the current shortie.
			jShortie.fadeOut(
				function(){
 
					// Set the background image of the
					// shortie div to the newly loaded
					// image.
					jShortie.css(
						"background-image",
						"url( '" + imgShortie.src + "' )"
						);
 
					// Fade the shorti back in.
					jShortie.fadeIn(
						function(){
 
							// Set the timeout to update the
							// shortie image.
							setTimeout(
								UpdateShortieImage,
								(8 * 1000)
								);
 
						}
						);
				}
				);
 
		}
		);
 
	// Set the image source. This will trigger the
	// onLoad handler set above.
	imgShortie.src = ("images/" + intValue + ".jpg");
}
 
 
// Run this code when the document loads.
$(
	function(){
 
		// Set up all the interaction links.
		$( "a.interaction" ).click(
			function( objEvent ){
				CallAPI( this.rel );
			}
			);
 
		// Update the form with an API call.
		CallAPI();
 
		// Update the shortie image.
		UpdateShortieImage();
	}
	);