var ieSet = false;
var ieVal = false;

var ieFirstImage = false;

var suppressPreview = true;

// very complicated load function to get all the preview windows and everything aligned with the text
function load()
{
	suppressPreview = true;

	preloadCss();

	//expand all the windows needing expanding
	bg_useColorClicked();
	tb_useColorClicked();
	tb_useBorderClicked();
	tb_useTransparencyClicked();
	bg_useImage();
	var i;
	for ( i=1; i<20; i++ )
	{
		text_useClicked(i);
	}

	//fill all color preview windows
	document.getElementById("bg_colorPreview").style.backgroundColor = document.getElementById("bg_color").value;
	document.getElementById("tb_colorPreview").style.backgroundColor = document.getElementById("tb_color").value;
	document.getElementById("tb_borderPreview").style.backgroundColor = document.getElementById("tb_borderColor").value;
	for ( i=1; i<20; i++ )
	{
		document.getElementById("text_colorPreview" + i).style.backgroundColor = document.getElementById("text_color" + i).value;
	}

	//change text style samples
	for ( i=1; i<20; i++ )
	{
		changeTextStyle(i);
	}
	
	suppressPreview = false;
	if ( isIE() )
	{
		if ( document.getElementById("bg_image").value != "" )
		{
			ieFirstImage = true;
			bg_loadImage();
		}
		else
			runTardBar();
	}
	else
	{
		if ( document.getElementById("bg_image").value != "" )
			bg_loadImage();
		else
			preview();
	}
}

function preloadCss()
{
	var codes = new Array();
	var r = /([^{]*){([^}]*)}/g;
	while ( (result = r.exec(css)) != null )
	{
		var key = trim( result[1].toLowerCase() );
		var val = trim( result[2] );
		
		var r2 = /([^:]*):([^;]*);/g;
		var x = new Array();
		while ( (result2 = r2.exec(val)) != null )
		{
				var key2 = trim( result2[1].toLowerCase() );
				var val2 = trim( result2[2] );
				x[key2] = val2;
		}
		codes[key] = x;
	}

	// break the css into attributes
	// for instance codes["body"]["background-image"] 

	if ( codes["body"] != undefined )
	{
		if ( codes["body"]["background-image"] != undefined )
		{
			var z = codes["body"]["background-image"];
			z = z.replace("url('", "");
			z = z.replace("')", "");
			document.getElementById("bg_useImage").checked = true;
			document.getElementById("bg_image").value = z;
		}
		if ( codes["body"]["background-position"] != undefined )
		{
			document.getElementById("bg_position").value = codes["body"]["background-position"];
		}
		if ( codes["body"]["background-repeat"] != undefined )
		{
			document.getElementById("bg_repeat").value = codes["body"]["background-repeat"];
		}
		if ( codes["body"]["background-attachment"] != undefined )
		{
			document.getElementById("bg_attachment").value = codes["body"]["background-attachment"];
		}
	}
}

function isIE()
{
	if ( !ieSet )
	{
		if ( navigator.appName.indexOf("Microsoft")!=-1 )
			ieVal = true;
		ieSet = true;
	}
	return ieVal;
}

function preview()
{
	if ( suppressPreview )
		return;
	if ( isIE() )
		return;
	var code = generateCode();
	parent.frames["PreviewFrame"].document.getElementById("AboutMe").innerHTML = code;
}

function runTardBar()
{
	var code = escape ( generateCode() );

	var url = "preview/profile.php?code=" + code;

	//alert (url);

	document.getElementById("PreviewFrame").src = url;
}


function generateCode()
{
	var code = new Array();

	var x;

	x = generateBodyCode();
	if ( x != "" )
		code.push(x);

	if ( document.getElementById("tb_useTransparency").checked )
	{
		code.push("table, td {\r\n");
		if ( document.getElementById("tb_outerTransparency").value == "0" )
		{
			code.push( "\tbackground: transparent; ");
		}
		code.push("}\r\n");
	}

	x = generateTable3Code();
	if ( x != "" )
	{
		code.push(x);
	}

	if ( document.getElementById("tb_useColor").checked || document.getElementById("tb_useBorder").checked )
	{
		code.push("table table table table, table table table td, table table table tr {\r\n\tborder-style:none; background: transparent;\r\n}\r\n");
	}

	x = generateTextCode()
	if ( x != "" )
	{
		code.push(x);
	}

	var z = "";
	if ( code.length > 0 )
	{
		z = "<style>\r\n" + code.join('') + "</style>";
	}

	//alert(z);
	return z;
}

function generateTextCode()
{
	var code = new Array();

	// ALL TEXT
	if ( document.getElementById("text_use1").checked )
	{
		code.push( "table, tr, td, li, p, div" );
		if ( !document.getElementById("text_use4").checked )
		{
			code.push(", .nameText");
		}
		if ( !document.getElementById("text_use5").checked )
		{
			code.push(", .orangetext15");
		}	
		if ( !document.getElementById("text_use6").checked )
		{
			code.push(", .txtDkGrey");
		}
		if ( !document.getElementById("text_use7").checked )
		{
			code.push(", .lightbluetext8");
		}
		if ( !document.getElementById("text_use8").checked )
		{
			code.push(", .text");
		}	
		if ( !document.getElementById("text_use9").checked )
		{
			code.push(", .blacktext10");
		}	
		if ( !document.getElementById("text_use10").checked )
		{
			code.push(", .whitetext12");
		}
		if ( !document.getElementById("text_use11").checked )
		{
			code.push(", .btext");
		}
		if ( !document.getElementById("text_use12").checked )
		{
			code.push(", .redtext");
		}
		if ( !document.getElementById("text_use13").checked )
		{
			code.push(", .redbtext");
		}
		if ( !document.getElementById("text_use14").checked )
		{
			code.push(", b");
		}
		if ( !document.getElementById("text_use15").checked )
		{
			code.push(", strong");
		}
		
		code.push( "{\r\n" );
		code.push( getTextCodeForRow(1) );
		code.push( "}\r\n" );
	}

	// ALL LINKS
	if ( document.getElementById("text_use2").checked )
	{
		code.push( "a:active, a:visited, a:link");
		if ( !document.getElementById("text_use16").checked )
		{
			code.push(", a.navbar:active, a.navbar:visited, a.navbar:link");
		}
		if ( !document.getElementById("text_use18").checked )
		{
			code.push(", a.redlink:active, a.redlink:visited, a.redlink:link");
		}
		code.push( "{\r\n" );
		code.push( getTextCodeForRow(2) );
		code.push( "}\r\n" );
	}

	// ALL LINKS HOVER 
	if ( document.getElementById("text_use3").checked )
	{
		code.push( "a:hover, a.redlink:hover");
		if ( !document.getElementById("text_use17").checked )
		{
			code.push(", a.navbar:hover");
		}
		if ( !document.getElementById("text_use19").checked )
		{
			code.push(", a.redlink:hover");
		}
		code.push( "{\r\n" );
		code.push( getTextCodeForRow(3) );
		code.push( "}\r\n" );
	}

	// NAME TEXT
	if ( document.getElementById("text_use4").checked )
	{
		code.push( ".nameText {\r\n");
		code.push( getTextCodeForRow(4) );
		code.push( "}\r\n" );
	}

	// ORANGE TEXT
	if ( document.getElementById("text_use5").checked )
	{
		code.push( ".orangetext15 {\r\n");
		code.push( getTextCodeForRow(5) );
		code.push( "}\r\n" );
	}

	// FRIEND'S NAMES
	if ( document.getElementById("text_use6").checked )
	{
		code.push( ".txtDkGrey {\r\n");
		code.push( getTextCodeForRow(6) );
		code.push( "}\r\n" );
	}

	// LIGHT BLUE TEXT (Categories)
	if ( document.getElementById("text_use7").checked )
	{
		code.push( ".lightbluetext8 {\r\n");
		code.push( getTextCodeForRow(7) );
		code.push( "}\r\n" );
	}

	//.Text
	if ( document.getElementById("text_use8").checked )
	{
		code.push( ".text {\r\n");
		code.push( getTextCodeForRow(8) );
		code.push( "}\r\n" );
	}

	//.blacktext10 - TIME AND DATE OF COMMENTS
	if ( document.getElementById("text_use9").checked )
	{
		code.push( ".blacktext10 {\r\n");
		code.push( getTextCodeForRow(9) );
		code.push( "}\r\n" );
	}

	//.whitetext12 - Contacting, Schools header etc...
	if ( document.getElementById("text_use10").checked )
	{
		code.push( ".whitetext12 {\r\n");
		code.push( getTextCodeForRow(10) );
		code.push( "}\r\n" );
	}

	//.btext
	if ( document.getElementById("text_use11").checked )
	{
		code.push( ".btext {\r\n");
		code.push( getTextCodeForRow(11) );
		code.push( "}\r\n" );
	}

	// .redtext
	if ( document.getElementById("text_use12").checked )
	{
		code.push( ".redtext {\r\n");
		code.push( getTextCodeForRow(12) );
		code.push( "}\r\n" );
	}

	// .redbtext
	if ( document.getElementById("text_use13").checked )
	{
		code.push( ".redbtext {\r\n");
		code.push( getTextCodeForRow(13) );
		code.push( "}\r\n" );
	}

	// bold
	if ( document.getElementById("text_use14").checked )
	{
		code.push( "b {\r\n");
		code.push( getTextCodeForRow(14) );
		code.push( "}\r\n" );
	}

	// strong
	if ( document.getElementById("text_use15").checked )
	{
		code.push( "strong {\r\n");
		code.push( getTextCodeForRow(15) );
		code.push( "}\r\n" );
	}

	// navlink
	if ( document.getElementById("text_use16").checked )
	{
		code.push( "a.navbar:active, a.navbar:visited, a.navbar:link {\r\n");
		code.push( getTextCodeForRow(16) );
		code.push( "}\r\n" );
	}
	
	// navlink hover
	if ( document.getElementById("text_use17").checked )
	{
		code.push( "a.navbar:hover {\r\n");
		code.push( getTextCodeForRow(17) );
		code.push( "}\r\n" );
	}
	
	// redlink
	if ( document.getElementById("text_use18").checked )
	{
		code.push( "a.redlink:active, a.redlink:visited, a.redlink:link {\r\n");
		code.push( getTextCodeForRow(18) );
		code.push( "}\r\n" );
	}
	
	// redlink hover
	if ( document.getElementById("text_use19").checked )
	{
		code.push( "a.redlink:hover {\r\n");
		code.push( getTextCodeForRow(19) );
		code.push( "}\r\n" );
	}
	
	return code.join('');
}

function getTextCodeForRow(row)
{
	var code = new Array();
	code.push( "\tfont-family: " + document.getElementById("text_face" + row).value + ";\r\n" );
	code.push( "\tfont-size: " + document.getElementById("text_size" + row).value + ";\r\n" );
	if ( document.getElementById("text_underline" + row).checked )
	{
		code.push( "\ttext-decoration: underline;\r\n" );
	}
	if ( document.getElementById("text_italics" + row).checked )
	{
		code.push( "\tfont-style: italic;\r\n" );
	}
	if ( document.getElementById("text_bold" + row).checked )
		code.push( "\tfont-weight: bold;\r\n" );
	else
		code.push( "\tfont-weight: normal;\r\n" );
	code.push( "\tcolor: " + document.getElementById("text_color" + row).value + ";\r\n" );

	return code.join('');
}

function generateBodyCode()
{
	var code = new Array();

	if ( document.getElementById("bg_useColor").checked )
	{
		code.push( "\tbackground-color: " +  document.getElementById("bg_color").value + ";\r\n" ) ;
	}
	if ( document.getElementById("bg_useImage").checked && bg_imageValid )
	{
		code.push( "\tbackground-attachment: " + document.getElementById("bg_attachment").value + ";\r\n" );
		code.push( "\tbackground-image: url('" + document.getElementById("bg_image").value + "');\r\n" );
		code.push( "\tbackground-position: " + document.getElementById("bg_position").value + ";\r\n" );
		code.push( "\tbackground-repeat: " + document.getElementById("bg_repeat").value + ";\r\n" );
	}

	if ( code.length > 0 )
	{
		return "body {\r\n " + code.join('') + "}\r\n";
	}
	else
		return "";
}

function generateTable3Code()
{
	var code = new Array();

	if ( document.getElementById("tb_useColor").checked )
	{
		code.push( "\tbackground-color: " +  document.getElementById("tb_color").value + ";\r\n" ) ;
	}

	if ( document.getElementById("tb_useBorder").checked )
	{
		code.push( "\tborder-style: " +  document.getElementById("tb_borderStyle").value + ";\r\n" );
		code.push( "\tborder-width: " +  document.getElementById("tb_borderWidth").value + "px;\r\n" );
		code.push( "\tborder-color: " +  document.getElementById("tb_borderColor").value + ";\r\n" );
	}
	if ( document.getElementById("tb_useTransparency").checked )
	{
		var x = document.getElementById("tb_innerTransparency").value;
		code.push( "\tfilter:alpha(opacity=" + x + ")\r\n;" );
		code.push( "\t-moz-opacity:" + (x/100) + ";\r\n");
		code.push( "\topacity:" + (x/100) + ";\r\n");
	}

	if ( code.length > 0 )
	{
		return "table table table {\r\n" + code.join('') + "}\r\n";
	}
	else
		return "";
}

function showLoadBox(m)
{

	document.getElementById("loadMessage").innerHTML = m;

	var box = document.getElementById("loadBox");

	box.style.left = getCenterX(400);
	box.style.top = getCenterY(100);
	box.style.display = "block";
}

function hideLoadBox()
{
	document.getElementById("loadBox").style.display = "none";
}


// get the x position for an element of width w to be centered
function getCenterX(w)
{
	if ( isIE() )
		x = ( document.body.offsetWidth - w ) / 2 + document.body.scrollLeft;
	else
		x = ( window.innerWidth - w ) / 2 + window.pageXOffset;
	return x + "px";
}

// get the y position for an element of height h to be centered
function getCenterY(h)
{
	var x;
	if ( isIE() )
		x = ( document.body.offsetHeight - h ) / 2 + document.body.scrollTop;
	else
		x = ( window.innerHeight - h ) / 2 + window.pageYOffset;
	return x + "px";
}

function fillCodeBox()
{
	var code = generateCode();
	document.getElementById("codeBox").value = code + "\r\n<a href=\"http://www.grumpychimp.com/\" target=\"_blank\"><img src=\"http://www.grumpychimp.com/chimp-corner.jpg\" style=\"position:absolute; left:0px; top: 0px; z-index:9;\" border=\"0\"></a>";
}


/*********** TABBING FUNCTIONS *****************/

var tab_active = 1;

function tab_over(which)
{
	if ( which != tab_active )
	{
		document.getElementById("tabc" + which).style.textDecoration = "underline";
	}
}

function tab_click(which)
{
	if ( which != tab_active )
	{
		tab_deactivate();
		tab_active = which;
		tab_activate();
	}
}

function tab_out(which)
{
	if ( which != tab_active )
	{
		document.getElementById("tabc" + which).style.textDecoration = "none";
	}
}

function tab_deactivate()
{
	document.getElementById("tab" + tab_active + "l").src = "tab-left-i.gif";
	document.getElementById("tab" + tab_active + "r").src = "tab-right-i.gif";
	var x = document.getElementById("tabc" + tab_active);
	x.style.cursor = "pointer";
	x.style.backgroundColor = "ffcc80";
	x.style.color = "666666";

	if ( tab_active == 1 )
		document.getElementById("bg").style.display = "none";
	else if ( tab_active == 2 )
		document.getElementById("tb").style.display = "none";
	else if ( tab_active == 3 )
		document.getElementById("tx").style.display = "none";
	else if ( tab_active == 4 )
		document.getElementById("cd").style.display = "none";

}

function tab_activate()
{
	document.getElementById("tab" + tab_active + "l").src = "tab-left.gif";
	document.getElementById("tab" + tab_active + "r").src = "tab-right.gif";
	var x = document.getElementById("tabc" + tab_active);
	x.style.cursor = "default";
	x.style.backgroundColor = "0099ff";
	x.style.color = "ffffff";
	x.style.textDecoration = "none";

	if ( tab_active == 1 )
		document.getElementById("bg").style.display = "block";
	else if ( tab_active == 2 )
		document.getElementById("tb").style.display = "block";
	else if ( tab_active == 3 )
		document.getElementById("tx").style.display = "block";
	else if ( tab_active == 4 )
	{
		fillCodeBox();
		document.getElementById("cd").style.display = "block";
	}

}


/*********** END TABBING FUNCTIONS *****************/


function changeTextStyle(which)
{
	var element = document.getElementById("text_r" + which + "c6").style;

	element.color = document.getElementById("text_color" + which).value;
	element.fontSize = document.getElementById("text_size" + which).value;
	element.fontFamily = document.getElementById("text_face" + which).value;
	if ( document.getElementById("text_underline" + which).checked )
		element.textDecoration = "underline";
	else
		element.textDecoration = "none";
	if ( document.getElementById("text_italics" + which).checked )
		element.fontStyle = "italic";
	else
		element.fontStyle = "normal";

	if ( document.getElementById("text_bold" + which).checked )
		element.fontWeight = "bold";
	else
		element.fontWeight = "normal";

	preview();
}


function bg_useColorClicked()
{

	if ( document.getElementById("bg_useColor").checked )
		document.getElementById("bg_colorOptions").style.display = "block";
	else
		document.getElementById("bg_colorOptions").style.display = "none";

	preview();
}

function tb_useColorClicked()
{

	if ( document.getElementById("tb_useColor").checked )
		document.getElementById("tb_colorOptions").style.display = "block";
	else
		document.getElementById("tb_colorOptions").style.display = "none";

	preview();
}

function tb_useBorderClicked()
{

	if ( document.getElementById("tb_useBorder").checked )
		document.getElementById("tb_borderOptions").style.display = "block";
	else
		document.getElementById("tb_borderOptions").style.display = "none";

	preview();
}

function bg_useImage()
{

	if ( document.getElementById("bg_useImage").checked )
		document.getElementById("bg_imageOptions").style.display = "block";
	else
		document.getElementById("bg_imageOptions").style.display = "none";

	preview();
}

function tb_useTransparencyClicked()
{
	if ( document.getElementById("tb_useTransparency").checked )
		document.getElementById("tb_transparencyOptions").style.display = "block";
	else
		document.getElementById("tb_transparencyOptions").style.display = "none";

	preview();
}

function text_useClicked(which)
{

	var checked = document.getElementById("text_use" + which).checked;

	if ( checked )
		document.getElementById("text_row" + which).style.height= "80px";
	else
		document.getElementById("text_row" + which).style.height= "30px";


	var i;
	for (i=2; i<=6; i++)
	{
		var element = document.getElementById("text_r" + which + "c" + i);
		if ( checked )
		{
			element.style.display = "block";
		}
		else
		{
			element.style.display = "none";
		}
	}

	preview();
}

function trim(s)
{
	s = s.replace(/^\s+/, '');
	return s.replace(/\s+$/, '');
}

function codeboxClicked(x)
{
	x.focus();
  	x.select();
}

// user types in a color box
function typeinColor(binding)
{
	var s;
	if ( binding == 1 )
		s = document.getElementById("bg_color").value
	else if ( binding == 2 )
		s = document.getElementById("tb_color").value;
	else if ( binding == 3 )
		s = document.getElementById("tb_borderColor").value;
	else if ( binding >= 4 )
		s = document.getElementById("text_color" + ( binding - 3 ) ).value;

	s = s.toUpperCase();
	if ( s.length == 6 )
	{
		var valid = true;
		for (var i=0; i<6; i++)
		{
			if ( s[i] >= 'A' && s[i] <= 'F' )
				continue;
			if ( s[i] >= '0' && s[i] <= '9' )
				continue;
		}
		if ( valid )
		{
			cp_showChangesEx(s,binding);
		}
	}
}