var theSepStr;
var theProgressFl;
var theGoalFl;
var thePercentFl;

var borderStr;
var fullProgressText;

var htmlFontStr;
var htmlTextClrStr;
var htmlWidthStr;
var htmlHeightStr;
var htmlSepStr;
var htmlPercentStr;
var htmlForegroundStr;
var htmlBackgroundStr;
var htmlBorderStr;
var htmlProgressText;
var htmlProgressWidthStr;
var htmlOverflowStr;

function trim( str ) {
	var str = str.replace(/^\s+|\s+$/g,"");
	return str;
}

function showhide( id ) {
	var elem = document.getElementById( id );
	if ( elem ) {
		if (elem.style.display == 'none') {
			elem.style.display = 'inline';
		} else {
			elem.style.display = 'none';
		}
	}
}

function validateNum( str, highlightId ) {
	var str = trim( str );
	
	if ( str.length < 1 || isNaN( str ) || parseFloat( str ) < 0 ) {
		document.getElementById( highlightId ).style.display = 'inline';
		return false;
	} else {
		document.getElementById( highlightId ).style.display = 'none';
		return true;
	}
}

function validateStr( str, highlightId ) {
	var str = trim( str );
	if (/^[\w\d\s]+$/.test( str )) {
		document.getElementById( highlightId ).style.display = 'none';
		return true;
	} else {
		document.getElementById( highlightId ).style.display = 'inline';
		return false;
	}
}

function validateClr( str, highlightId ) {
	var str = trim( str );
	if (/^#?[\w\d\s]+$/.test( str )) {
		document.getElementById( highlightId ).style.display = 'none';
		return true;
	} else {
		document.getElementById( highlightId ).style.display = 'inline';
		return false;
	}
}

function convertToUnicodeDecFull( source ) { 
    result = ''; 
    for ( i = 0; i < source.length; i++) {
        result += '&#' + source.charCodeAt(i) + ';'; 
    }
    return result; 
} 

/* the switch functions */

function switchFont( fontname ) {
	fontname = trim( fontname );
	
	if (fontname.length > 0) {
		
		htmlFontStr = fontname;
		
		switch (fontname) {
			case "sans-serif":
			case "serif":
			case "fantasy":
			case "cursive":
			case "monospace":
				break;
			default:
				document.getElementById("mfontCustomText").value = fontname;
				document.getElementById("mfontCustomLabel").style.fontFamily = fontname;
				
				htmlFontStr = "'" + htmlFontStr + "'";
				break;
		}
		document.getElementById("divProgress").style.fontFamily = fontname;
		htmlFontStr = "font-family: " + htmlFontStr + "; "
	}
}

function switchHeight() {

	var newHeight = parseInt( document.getElementById('mheight').value );
	if ( newHeight > 15 ) {
		newHeight = 15;
	}
	document.getElementById('mheight').value = newHeight;
	document.getElementById('progressBar').style.height = newHeight + "px";
	htmlHeightStr = "height: " + newHeight + "px; ";
}
function switchWidth() {

	var newWidth = parseInt( document.getElementById('mwidth').value );
	
	document.getElementById('mwidth').value = newWidth;
	document.getElementById('meterContainer').style.width = newWidth + "%";
	htmlWidthStr = "width: " + newWidth + "%; ";
}

function switchSep() {
	
	theSepStr = document.getElementById('msep').value;
	htmlSepStr = convertToUnicodeDecFull( theSepStr );
	
	//update progress text
	if (document.getElementById('mprogressNum').checked) {
		changeProgressText();
	}
}

function switchColor( newColor, applyTo ) {
	var newColor = trim( newColor );
	
	switch (applyTo){
		case "fg":
			document.getElementById('progressBar').style.backgroundColor = newColor;

			htmlForegroundStr = "background: " + newColor + "; "
			break;
		case "bg":
			document.getElementById('meter').style.backgroundColor = newColor;

			htmlBackgroundStr = "background: " + newColor + "; "
			break;
		case "text":
			document.getElementById('divProgress').style.color = newColor;
			htmlTextClrStr = "background: " + newColor + "; ";
			break;
		case "border":
			borderStr = newColor;
			toggleBorder();
			break;
	}
}

function toggleBorder() {
	var meter = document.getElementById('meter');
	
	if ( document.getElementById('mborder').checked ){
		var bordertext = "solid 1px " + borderStr;
	
		meter.style.border = bordertext;
		htmlBorderStr = "border: " + bordertext + "; "
	} else {
		meter.style.border = "";
		htmlBorderStr = "";
	}
}

function changeProgress() {
	changeProgressText();
	changeProgressBar();
}

function changeProgressBar() {
	
	htmlProgressBarStr = '';
	
	//change width
	var progBar = document.getElementById( 'progressBar' );
	
	var width;
	var maxWidth;
	var minWidth;
	
	if ( thePercentFl > 100 ) {
		width = "100%";
	} else {
		width = thePercentFl + "%";
	}
	maxWidth = thePercentFl + "%";
	
	if ( document.getElementById('moverflow').checked ) {
		minWidth = thePercentFl + "%";
		htmlOverflowStr = "";

	} else {
		minWidth = "0%";
		htmlOverflowStr = "overflow: hidden; ";
	}
	
	htmlProgressWidthStr = "min-width: " + minWidth + "; max-width: " + maxWidth + "; width: " +  width + "; "
	
	progBar.style.width = width;
	progBar.style.minWidth = minWidth;
	progBar.style.maxWidth = maxWidth;
}

function changeProgressText() {
	
	//get most recent values from form
	if (document.getElementById('mprogressNum').checked) {
		
		theProgressFl = parseFloat( document.getElementById('mprogressNumText').value )
		theGoalFl = parseFloat( document.getElementById('mprogressGoal').value )
		
		//update percentage
		thePercentFl = ((theProgressFl / theGoalFl) * 100).toFixed(2);
		document.getElementById('mprogressPercentText').value = parseFloat(thePercentFl);
		
		fullProgressText = theProgressFl + ' ' + theSepStr + ' ' + theGoalFl;
		htmlProgressText = theProgressFl + ' ' + htmlSepStr + ' ' + theGoalFl;
		
	} else {
		thePercentFl = parseFloat( document.getElementById('mprogressPercentText').value );
		
		fullProgressText = thePercentFl + '%';
		htmlProgressText = fullProgressText;
	}
	
	document.getElementById( 'meterContainer' ).title = thePercentFl + '%';
	
	//change text
	var progressText = document.createTextNode( fullProgressText );
	var elem = document.getElementById( 'divProgress' );
	if (elem) {
		if (elem.firstChild) {
			elem.replaceChild( progressText, elem.firstChild );
		} else {
			elem.appendChild( progressText );
		}
	}
}

function assembleString() {
	var theCode = '<div style="margin: auto; text-align: center;' + htmlWidthStr + '" title="' + thePercentFl + '%"><div style="text-align: left; margin: 2px auto; ' + htmlBorderStr + htmlBackgroundStr + htmlOverflowStr + '"><div style="font-size: 0px; line-height: 0px; ' + htmlHeightStr + htmlProgressWidthStr + htmlForegroundStr + '"><!----></div></div><div style="font-size: 8pt; ' + htmlFontStr + '">' + htmlProgressText + '</div></div>';
	
	var elem = document.getElementById('codeText');
	
	var theCodeNode = document.createTextNode( theCode );
	
	if (elem) {
		if (elem.firstChild) {
			elem.replaceChild( theCodeNode, elem.firstChild );
		} else {
			elem.appendChild( theCodeNode );
		}
	}
}

function init() {
	document.getElementById('appearanceDiv').style.display = 'none';
	
	//get initial values
	switchHeight();
	switchWidth();
	
	var fgColor = document.getElementById("mcolorFG").value;
	var bgColor = document.getElementById("mcolorBG").value;
	var borderColor = document.getElementById("mcolorBorder").value;
	
	if (!validateClr( fgColor, 'mcolorFGValid' )) {  fgColor = 'red' }
	if (!validateClr( bgColor, 'mcolorBGValid' )) {  bgColor = '#DDD' }
	if (!validateClr( borderColor, 'mcolorBorderValid' )) { borderColor = '#AAA' }
	
	switchColor( fgColor, 'fg');
	switchColor( bgColor, 'bg');
	switchColor( borderColor, 'border');
	
	for( i = 0; i < document.theForm.mfont.length; i++ ) {
		if (document.theForm.mfont[i].checked) {
			fontname = document.theForm.mfont[i].value;
			break;
		}
	}
	
	if (fontname.length < 1) {
		fontname = document.getElementById('mfontCustomText').value;
	}
	
	switchFont( fontname );
	switchSep();
	changeProgress();
	assembleString();
}