var formWidgetColour = '';
var formWidgetWidth = '';
var formWidgetLocation = '';
var formWidgetExclArg = '';
var manualPreview = false;
var previewError = '';

function parseWidgetForm() {
	//reset vars
	formWidgetColour = '';
	formWidgetWidth = '';
	formWidgetLocation = '';
	formWidgetExclArg = '';
	//parse current form values
	formWidgetLocation = escape($("#widgetLocation").val());
	if ($("#widgetColourDark").attr("checked")) formWidgetColour = 'dark';
	if ($("#widgetColourLight").attr("checked")) formWidgetColour = 'light';
	if ($("#widgetWidth400").attr("checked")) formWidgetWidth = '400';
	if ($("#widgetWidth300").attr("checked")) formWidgetWidth = '300';
	$(".widgetProgram").each(function (i) {
	  	if (!this.checked) formWidgetExclArg += this.value + ",";
	 });
}

function updatePreview(e) {
	// remove previous preview, errors, etc
	$("#widgetPreviewLive > img").remove();
	$("#widgetPreviewLive > a").remove();
	$("#widgetPreviewLive > iframe").remove();
	$("#widgetPreviewError").remove();
	
	// get the current form values
	parseWidgetForm();
	
	// initialise vars
	var showDefault = 400;
	previewError = '';
	if (formWidgetWidth == '300') showDefault = 300;
	
	// check that each choice has been made	
	if (formWidgetLocation.length == 0) previewError = '<li>Please enter a location (step 1).</li>';
	if (formWidgetWidth.length == 0) previewError = previewError + '<li>Please select a width.</li>';
	if (formWidgetColour.length == 0) previewError = previewError + '<li>Please select a background colour.</li>';
	
	// decide whether to display the live preview
	if (previewError.length > 0)
	{
		// we're missing one or more form values; don't show live preview
		// show default image
		var widgetDefaultSource = "<img src=\"/widget/images/widgetpreview_" + showDefault + ".gif\" alt=\"Default widget preview - please specify location, width and colour to see the live preview.\">";
		$("#widgetPreviewLive").append(widgetDefaultSource);
		// if Preview button was hit, show error message/s as well
		if (manualPreview)
		{
			var widgetPreviewErrorSource = "<ul id=\"widgetPreviewError\" class=\"widgetGenerateError\">" + previewError + "</ul>";
			$("#widgetRadioButtons").append(widgetPreviewErrorSource);
		}
		
	}
	else
	{
		// form location, width and colour values have been entered; let's show the live preview
		
		//var widgetIframeHeight = "274";
		var widgetIframeHeight = "330";

		if (formWidgetWidth == "300")
		{
			//widgetIframeHeight = "254";
			widgetIframeHeight = "310";
		}
		var widgetLiveSource = "<a href=\"/\" target=\"_top\">";
		// widgetLiveSource = widgetLiveSource + "<img src=\"/widget/images/esp_" + formWidgetWidth + "_banner_" + formWidgetColour + ".gif\" alt=\"Nation Building: Economic Stimulus Plan\" style=\"width:" + formWidgetWidth + "px;height:56px;margin:0;border:none\" /></a>";
		widgetLiveSource = widgetLiveSource + "<iframe src=\"/widget/pages/widget_content.aspx?widgetWidth=" + formWidgetWidth + "&widgetColour=" + formWidgetColour + "&location=" + formWidgetLocation + "&exclprojecttypes=" + formWidgetExclArg + "\" id=\"" + formWidgetWidth + formWidgetColour + "\" width=\"" + formWidgetWidth + "\" height=\"" + widgetIframeHeight + "\" scrolling=\"no\" frameborder=\"0\" style=\"margin:-5px 0 0;padding:0;border:none;\">";
		widgetLiveSource = widgetLiveSource + "<p>Your browser does not support iframes, so the Economic Stimulus Plan widget cannot be displayed.</p>";
		widgetLiveSource = widgetLiveSource + "</iframe>";

		$("#widgetPreviewLive").append(widgetLiveSource);
	}
	
	// clean up
	manualPreview = false;
	previewError = '';
}

$(document).ready(function(){
	// hide no-Javascript warning
	$("#widgetNoJS").css("display", "none");
	// code generation
	$("#widgetGenerateButton").bind("click", function(e){
		
		$(".widgetGenerateError").remove();
		
		parseWidgetForm();
		var generateOK = true;

		if ($("#widgetProgramOptions input:checked").length == 0)
		{
			$('#widgetGenerateButton').after("<p class=\"widgetGenerateError\">Please select at least one Nation Building - Economic Stimulus Plan component (step 3).</p>");
			generateOK = false;
		}
		if (formWidgetColour.length == 0)
		{
			$('#widgetGenerateButton').after("<p class=\"widgetGenerateError\">Please select a background colour (step 2).</p>");
			generateOK = false;
		}
		if (formWidgetWidth.length == 0)
		{
			$('#widgetGenerateButton').after("<p class=\"widgetGenerateError\">Please select a width (step 2).</p>");
			generateOK = false;
		}
		if (formWidgetLocation == null || formWidgetLocation == '')
		{
			$('#widgetGenerateButton').after("<p class=\"widgetGenerateError\">Please enter an Australian postcode, suburb, or town (step 1).</p>");
			generateOK = false;
		}
		if (formWidgetExclArg != '')
		{
			formWidgetExclArg = formWidgetExclArg.slice(0,-1);
			formWidgetExclArg = "&exclprojecttypes=" + formWidgetExclArg;
		}
    	var outputCode = "<script type=\"text/javascript\" src=\"http://www.economicstimulusplan.gov.au/widget/scripts/showWidget.js?espWidth=" + formWidgetWidth + "&espColour=" + formWidgetColour +"&espLocation=" + formWidgetLocation + formWidgetExclArg + "\"></script>";
    	if (generateOK) 
    	{
    		$("#widgetGeneratedCode").text(outputCode);
    		$("#widgetGenCSSselector").html("");
    		$("#widgetGenCSSselector").html("If you are familar with CSS, you can adjust the positioning of the widget on your website by referencing it using the <strong>#espWidget" + formWidgetWidth  + formWidgetColour  + "</strong> selector.");
    	}
    	else $("#widgetGenCSSselector").html("");
    	return false;
    });
    // preview button
    $("#widgetPreviewButton").bind("click", function(e){
    	manualPreview = true;
    	updatePreview();
    	return false;
    });
    
    // bind preview update events
    $("#widgetLocation").bind("blur", updatePreview);
    $("#widgetRadioButtons input").bind("click", updatePreview);
    
    // show the default preview image
    updatePreview();

});