// 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();
	}
	);