function previewBanner()
{
	var	fl_text = document.getElementById('fl_text').value;
	var sl_text = document.getElementById('sl_text').value;
	
	// Loop from zero to the one minus the number of radio button selections
	for (var counter = 0; counter < document.bannerform.fl_align.length; counter++) {
		if (document.bannerform.fl_align[counter].checked) {
			var fl_align = document.bannerform.fl_align[counter].value; 
		}
	}
	
	for (var counter = 0; counter < document.bannerform.sl_align.length; counter++) {
		if (document.bannerform.sl_align[counter].checked) {
			var sl_align = document.bannerform.sl_align[counter].value; 
		}
	}	
	
	var fl_size = document.getElementById('fl_size').value;
    var sl_size = document.getElementById('sl_size').value;
    
    var fl_font = document.getElementById('fl_font').value;
    var sl_font = document.getElementById('sl_font').value;
    
    var bg_color = document.getElementById('colorfield1').value;
    var fl_color = document.getElementById('colorfield2').value;
    var sl_color = document.getElementById('colorfield3').value;
    var bd_color = document.getElementById('colorfield4').value;
    
    var bg_image = document.getElementById('bg_image').value;

	var src = 'banner-maker-preview.bnr?fl_text='+fl_text+'&sl_text='+sl_text+'&fl_size='+fl_size+'&sl_size='+sl_size
				+'&fl_align='+fl_align+'&sl_align='+sl_align
				+'&bg_color='+bg_color+'&fl_color='+fl_color+'&sl_color='+sl_color+'&bd_color='+bd_color
				+'&fl_font='+fl_font+'&sl_font='+sl_font
				+'&bg_image='+bg_image;
	
	updatePreview(src);
}

function setFont(font_name)
{
	// when the click a font, remove all font borders, put a border around the clicked font
	// then update the preview
	
	var fonts = document.getElementsByName(font_name);
	
	if (font_name.indexOf('fl') !=-1 )
    {
    	table = document.getElementById('fontTable-fl');
    	document.getElementById('fl_font').setAttribute('value', font_name);
    }
    
    if (font_name.indexOf('sl') !=-1 )
    {
    	table = document.getElementById('fontTable-sl');
    	document.getElementById('sl_font').setAttribute('value', font_name);
    }
	
	//table = document.getElementById('fontTable');
	images = table.getElementsByTagName('img'); 
	for (var i = 0; i < images.length; i++) 
	{ 
		images[i].removeAttribute('class');
    }
    
    for (var i = 0; i < fonts.length; i++) 
	{ 
		fonts[i].setAttribute('class', 'selectedFont');
    }
    
    previewBanner();
}

function setBG(bg_name) {
//		when they upload an image, store it onto the server * also, adjust the width of the file
//		have options perhaps to resize bg image *like windows backgrounds (stretch, centre, resize..)
	document.getElementById('bg_image').setAttribute('value', bg_name);
	previewBanner();
}

function checkRadio(radio_name) {
	for (counter = 0; counter < document.bannerform.radio_name.length; counter++) {
		// If a radio button has been selected it will return true
		if (document.bannerform.radio_name[counter].checked) {
			return(document.bannerform.radio_name[counter].value); 
		}
	}
}

function changePage() {
	//document.location.href = '#preview';
	// both work the same AFAIK
	window.location = '#preview';
}

function updatePreview(src) {
	document.getElementById('image').innerHTML = '<a name="preview"><img alt="MySpace Banner Maker Preview" src="/' + src + '" /></a>';
	changePage()
}