$(document).ready(function(){
	// shortcut to services dropdown
	var $svc = $('#service');
	// shortcut to the svc form fields container
	var $fields = $('#svcContainer');
	// shrinkURL form container
	var $form = $('#shrinkURLForm');
	// plain text field template
	var text = '<div><label for="XYZ">ABC</label><input type="text" name="XYZ" id="XYZ" /></div>';
	// hidden text field template
	var hidden = '<input type="hidden" name="XYZ" value="EFG" />';
	// set up the onChange handler
	$svc.change(function(){
		// get the current value of the services dropdown
		var service = $(this).val();
		// toggle the loading image
		loadingImageToggle('on');
		// as long as the user selected a valid service, we can proceed
		if (service != 0) {
			// before we dump new form fields onto the page, let's remove all the previous ones
			$fields.slideUp('fast',function(){
				$fields.empty();
				// make an ajax call to get the required parameters
				$.getJSON("/code/shrinkURL/shrinkURL.cfc?method=getService", {
					service: service,
					returnFormat:'JSON'
				},function(data){
					// loop over array, begin to build input fields
					for (var i = 0; i < data.length; i++) {
						// get the parameters object from the array
						var params = data[i];

						// determine which input type this param needs, find and replace off the template
						var value = params['value'];
						var field = params['field'];
						var label = params['label'];
						var str = 
							// if the value has a $ in it, then it's a text input field, if not it's hidden
							(value == '' ) ?
							// replace the template for text input fields
							text.replace(/ABC/gi,label).replace(/XYZ/gi,field) :
							// and the ones for hidden input fields
							hidden.replace(/XYZ/gi,field).replace(/EFG/gi,value);
						// add the value for each field to the fields container
						$fields.append(str);

					}
					// add the submit button
					$fields.append('<div><label>&nbsp;</label><input type="submit" value="GO!" /></div>');
					// finally, display the fields again
					$fields.slideDown('fast',function(){
						// toggle the loading image
						loadingImageToggle('off');
					});
				});
			});
		};
	});
	// set up the form submit handler
	$form.submit(function(e){
		// toggle the loading image
		loadingImageToggle('on');
		// prevet the default form submit
		e.preventDefault();
		// temp message string
		var msg = '';
		// serialize all form field values
		var keys = $("form").serialize();
		// make sure that all form fields have a value
		$('input[type=text]').each(function(){
			if ($(this).val() == '') {
				msg += $(this).attr('id') + ' is a required field\n';
			}
		});
		// if any of them are blank, throw an alert
		if (msg != '') {
			alert(msg);
			// toggle the loading image
			loadingImageToggle('off');
			return false;
		}
		// if they're not, then let's get the short URL
		$.get("Shrinkadoo.cfm?" + keys,function(data){
			// inject returned string into the shortened container
			$('#shortened').slideUp('fast',function(){
				$(this).empty().html(data.split('!!!')[1]).slideDown('fast');
				// toggle the loading image
				loadingImageToggle('off');
			});
		});
	});

	function loadingImageToggle(state) {
		// default state
		var off = '/images/white.gif';
		// loading state
		var on = '/images/ajaxload.gif';
		// change image
		$('#loadingImg').attr('src',eval(state));
	}
});