var changingOutputBg = false;

// the index representing the currently selected color
var SelectedColor = 1;
var NumberOfColors = 2;
var MaxNumberOfColors = 100;

// for keeping each window that we open unique
var FadeCounter = 0;

var hexCode = new Array("00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0A", "0B", "0C", "0D", "0E", "0F", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1A", "1B", "1C", "1D", "1E", "1F", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2A", "2B", "2C", "2D", "2E", "2F", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3A", "3B", "3C", "3D", "3E", "3F", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4A", "4B", "4C", "4D", "4E", "4F", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5A", "5B", "5C", "5D", "5E", "5F", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6A", "6B", "6C", "6D", "6E", "6F", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7A", "7B", "7C", "7D", "7E", "7F", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8A", "8B", "8C", "8D", "8E", "8F", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9A", "9B", "9C", "9D", "9E", "9F", "A0", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "AA", "AB", "AC", "AD", "AE", "AF", "B0", "B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "BA", "BB", "BC", "BD", "BE", "BF", "C0", "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "CA", "CB", "CC", "CD", "CE", "CF", "D0", "D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "DA", "DB", "DC", "DD", "DE", "DF", "E0", "E1", "E2", "E3", "E4", "E5", "E6", "E7", "E8", "E9", "EA", "EB", "EC", "ED", "EE", "EF", "F0", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "FA", "FB", "FC", "FD", "FE", "FF");

var topDual;

/**
 * Function: shiftColors
 *
 * About: Triggered when a user clicks on a color preview box
 *
 **/
function shiftColors(previewIndex)
{
  var centerPos = 9;  
  // make sure we're not out of bounds
  var minPreviewBox = centerPos - (SelectedColor - 1);
  var maxPreviewBox = centerPos - (SelectedColor) + NumberOfColors;
  
  if (previewIndex < minPreviewBox || previewIndex > maxPreviewBox)
  {
    return; 
  }
  
  if (previewIndex == centerPos)
  {
    var val = SelectedColor;
    var range = 600;
    var cf = 99/(range-20);
    
    var min = Math.round((SelectedColor - 1) / cf);
    var max = Math.round((NumberOfColors - 1) / cf) + 20;

    topDual.setValues(min, max);
    
    var showObj = document.getElementById("show");
    showObj.click();
    
    return; 
  }
  
  if (previewIndex > centerPos)
  {
    SelectedColor++; 
    previewIndex--;
  } 
  else 
  {
    SelectedColor--;
    previewIndex++;
  }
  
  var curColor = document.getElementById("currentColorDiv");
  curColor.innerHTML = "Editing Color " + SelectedColor + " of " + NumberOfColors;
  
  updateCodePreviewBars();
  
  setTimeout(function() { shiftColors(previewIndex)}, 50);
}


/**
 * Function: updateCodePreviewBars
 *
 * About: Updates the fade preview bar that's below the color selection slider
 *
 **/
function updateCodePreviewBars()
{
  var selectedColorIndex = SelectedColor - 1;
  var centerPos = 9;  
  var color = document.getElementById("cVal" + selectedColorIndex).value;
  document.getElementById("preview" + centerPos).style.backgroundColor = "#" + color;

  // update previous colors
  for (var i = centerPos-1; i > 0; i--)
  {
    var colorIndex = selectedColorIndex - (centerPos - i);
    
    if (colorIndex < 0)
    {
      color = "ffffff";
    } 
    else
    {
      color = document.getElementById("cVal" + colorIndex).value;    
    }
    
    document.getElementById("preview" + i).style.backgroundColor = "#" + color;
  }
  
  // update next colors
  for (var j = centerPos+1; j < centerPos*2; j++)
  {
    var colorIndex = selectedColorIndex + (j - centerPos);
    
    if (colorIndex >= NumberOfColors)
    {
      color = "ffffff";
    }
    else
    {
      color = document.getElementById("cVal" + colorIndex).value; 
    }
    //alert("preview" + j + "," + color);
    document.getElementById("preview" + j).style.backgroundColor = "#" + color;
  }
  
  // update the selected color's info
  displaySelectedColorInfo(selectedColorIndex);
}
 
/**
 * Function: displaySelectedColorInfo
 *
 * About: Updates the selected color's info
 *
 **/
function displaySelectedColorInfo(index)
{
  var color = document.getElementById("cVal" + index).value;
  document.getElementById("txt-color-code").value = color;
}
  

/**
 * Function: updateColorFromTxt(color)
 *
 * About: Updates the selected color based on what's in the color code box
 *
 **/
function updateColorFromTxt(color)
{
	// check to see if the color is valid using regular expressions
	var reg = new RegExp("^[0-9a-fA-F]{6}$");
	if (reg.test(color))
	{
    var selectedColorIndex = SelectedColor - 1;
    var centerPos = 9;    
    // update the hidden color box
    document.getElementById("cVal" + selectedColorIndex).value = color;
    document.getElementById("preview" + centerPos).style.backgroundColor = "#" + color;
	}
}
 
/**
 * Function: getRandomColor(color)
 *
 * About: Returns a randomly generated HTML color
 *
 **/
function getRandomColor()
{
  var randomNumber, hexVal1, hexVal2, hexVal3, randomColor;
  
	randomNumber = Math.floor(Math.random()*256);
	hexVal1 = hexCode[randomNumber];
	randomNumber = Math.floor(Math.random()*256);
	hexVal2 = hexCode[randomNumber];
	randomNumber = Math.floor(Math.random()*256);
	hexVal3 = hexCode[randomNumber];
	randomColor = hexVal1 + hexVal2 + hexVal3;

	return randomColor;
}
 
/**
 * Function: randomizeAllColors(color)
 *
 * About: Sets all input colors to a random color
 *
 **/
function randomizeAllColors()
{
  for (var i = 0; i < 100; i++)
  {
    var color = getRandomColor();
    document.getElementById("cVal" + i).value = color;
    
    if (i == (SelectedColor - 1))
    {
      document.getElementById("txt-color-code").value = color;
    }
  }

  updateCodePreviewBars();
}
 
/**
 * Function: setRandomColor()
 *
 * About: Sets the currently selected color to a random color
 *
 **/
function setRandomColor()
{
  var color = getRandomColor();
  document.getElementById("txt-color-code").value = color;
  updateColorFromTxt(color);
}
  
  
/****** COLOR FADING and FORM FUNCTIONS ************/

var isIE = false;
if (navigator.appName.indexOf("Microsoft")!=-1) {
	isIE = true;
}

// trims the whites spaces in front and in back of the string
String.prototype.trim = function() 
{ 
	return this.replace(/^\s+|\s+$/g, ''); 
}
  
/****** COLOR FADING ************/

var hexCode = new Array("00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0A", "0B", "0C", "0D", "0E", "0F", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1A", "1B", "1C", "1D", "1E", "1F", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2A", "2B", "2C", "2D", "2E", "2F", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3A", "3B", "3C", "3D", "3E", "3F", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4A", "4B", "4C", "4D", "4E", "4F", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5A", "5B", "5C", "5D", "5E", "5F", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6A", "6B", "6C", "6D", "6E", "6F", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7A", "7B", "7C", "7D", "7E", "7F", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8A", "8B", "8C", "8D", "8E", "8F", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9A", "9B", "9C", "9D", "9E", "9F", "A0", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "AA", "AB", "AC", "AD", "AE", "AF", "B0", "B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "BA", "BB", "BC", "BD", "BE", "BF", "C0", "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "CA", "CB", "CC", "CD", "CE", "CF", "D0", "D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "DA", "DB", "DC", "DD", "DE", "DF", "E0", "E1", "E2", "E3", "E4", "E5", "E6", "E7", "E8", "E9", "EA", "EB", "EC", "ED", "EE", "EF", "F0", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "FA", "FB", "FC", "FD", "FE", "FF");

function hexToDec(hexVal) { return parseInt(hexVal,16); }
function decToHex(decVal) { return hexCode[Math.round(decVal)]; }

function getRedStep(len, colorStart, colorEnd)
{
	var r1 = hexToDec( colorStart.substring(0, 2) );
	var r2 = hexToDec( colorEnd.substring(0, 2) );

	var rStep = (r2 - r1) / (len - 1);
	return rStep;
}
function getGreenStep(len, colorStart, colorEnd)
{
	var g1 = hexToDec( colorStart.substring(2, 4) );
	var g2 = hexToDec( colorEnd.substring(2, 4) );

	var gStep = (g2 - g1) / (len - 1);
	return gStep;
}
function getBlueStep(len, colorStart, colorEnd)
{
	var b1 = hexToDec( colorStart.substring(4, 6) );
	var b2 = hexToDec( colorEnd.substring(4, 6) );

	var bStep = (b2 - b1) / (len - 1);
	return bStep;
}

function padText(txt, len, pad)
{
  while (txt.length < len)
  {
    txt = txt + pad; 
  }
  return txt; 
}

function removeLastFadedChar(txt)
{
  var endIndex = txt.lastIndexOf("<font color=");

  if (endIndex == -1)
  {
    endIndex = 0; 
  }
  
  //alert("txt.substring(0, endIndex)=" + txt.substring(0, endIndex) + ",endIndex=" + endIndex);
  return txt.substring(0, endIndex);
}

function fadeString(str, colorStart, colorEnd)
{
	var rStep = getRedStep(str.length, colorStart, colorEnd);	
	var gStep = getGreenStep(str.length, colorStart, colorEnd);
	var bStep = getBlueStep(str.length, colorStart, colorEnd);

	var retStr = "";
	var r = hexToDec( colorStart.substring(0,2) );
	var g = hexToDec( colorStart.substring(2, 4) );
	var b = hexToDec( colorStart.substring(4, 6) );

	for (var i = 0; i < str.length; i++)
	{
	  if (str.substring(i,i+1) == "\n")
	  {
	    retStr = retStr + "<font color=\"000000\"></font><br/>";
	  }
	  else
	  {
		  retStr = retStr + "<font color=\"#" + decToHex(r) + decToHex(g) + decToHex(b) + "\">" + str.substring(i,i+1) + "</font>";
	  }
		r = r + rStep;
		g = g + gStep;
		b = b + bStep;
	}

	return retStr;
}


function removeLastFadedLine(txt)
{
  var endIndex = txt.lastIndexOf("<font color=");
  if (endIndex == -1)
  {
    endIndex = 0;
  }
  return txt.substring(0, endIndex);
}

function fadeLines(txtArray, startLine, stopLine, colorStart, colorEnd)
{
  // for HTML only
  var endLineChar = "";
  if (document.getElementById("outputCode").selectedIndex == 0)
  {
    endLineChar = "\n";  
  }
  
  var fadeLen = stopLine - startLine;
  
	var rStep = getRedStep(fadeLen, colorStart, colorEnd);	
	var gStep = getGreenStep(fadeLen, colorStart, colorEnd);
	var bStep = getBlueStep(fadeLen, colorStart, colorEnd);

	var retStr = "";
	var r = hexToDec( colorStart.substring(0,2) );
	var g = hexToDec( colorStart.substring(2, 4) );
	var b = hexToDec( colorStart.substring(4, 6) );

	for (var i = startLine; i < stopLine; i++)
	{
		retStr = retStr + "<font color=\"#" + decToHex(r) + decToHex(g) + decToHex(b) + "\">" + txtArray[i] + "</font><br/>" + endLineChar;
		r = r + rStep;
		g = g + gStep;
		b = b + bStep;
	}

	return retStr;
}

function horizontalFade(txt, colors, numColors)
{
	var prevC = 0, currC = 1;
	var letterStep = (txt.length - 1) / (numColors - 1);
	var currStr = "", fadedTxt = "", finalFadedTxt = "";
	var letterStart = 0, letterEnd = 1;

	for (i = 1; i < Math.min(numColors, txt.length+1); i++)
	{
		letterEnd = Math.max(letterStart+2, letterEnd + letterStep);
		currStr = txt.substring( Math.round(letterStart), Math.round(letterEnd) );

		fadedTxt = fadeString(currStr, colors[prevC], colors[currC]);

		//alert(letterStart + "," + letterEnd + "," + txt.substring( Math.round(letterStart), Math.round(letterEnd) ) + "," + "fadedTxt=" + fadedTxt + ",finalFadedTxt=" + finalFadedTxt);
		
		finalFadedTxt = removeLastFadedChar(finalFadedTxt) + fadedTxt;
		letterStart = Math.round(letterEnd) - 1;
		prevC++;
		currC++;
  } 
  
  return finalFadedTxt;
}


// These functions are for the SPIN fade
function shiftArrayValuesForward(arr)
{
  var temp = arr[0];
  for (var i = 0; i < arr.length - 1; i++)
  {
    arr[i] = arr[i+1];
  }
  arr[arr.length-1] = temp;
}
function shiftArrayValuesBack(arr)
{
  var temp = arr[arr.length - 1];
  for (var i = arr.length-1; i > 0; i--)
  {
    arr[i] = arr[i-1];
  }
  arr[0] = temp;
}
function fadeArray(fadedArray, colorStart, colorEnd, startPos, endPos)
{
  var len = endPos - startPos ;

	var rStep = getRedStep(len, colorStart, colorEnd);	
	var gStep = getGreenStep(len, colorStart, colorEnd);
	var bStep = getBlueStep(len, colorStart, colorEnd);

	var retStr = "";
	var r = hexToDec( colorStart.substring(0,2) );
	var g = hexToDec( colorStart.substring(2, 4) );
	var b = hexToDec( colorStart.substring(4, 6) );

	for (var i = startPos; i < endPos; i++)
	{
		fadedArray[i] = decToHex(r) + decToHex(g) + decToHex(b);
		r = r + rStep;
		g = g + gStep;
		b = b + bStep;
	}
}
function createFadeArray(fadedColorArray, colors, largestLen)
{
  var colorsClone = colors.slice(0);
  colorsClone.push(colors[0]);

	var prevC = 0, currC = 1;
	var step = (largestLen - 1) / (colorsClone.length - 1);
	var start = 0, end = 1;

	for (i = 1; i < Math.min(colorsClone.length, largestLen+1); i++)
	{
		end = Math.max(start+2, end + step);
		fadeArray(fadedColorArray, colorsClone[prevC], colorsClone[currC], Math.round(start), Math.round(end));
		start = Math.round(end) - 1;
		prevC++;
		currC++;
  } 
}

function convertToOutputCode(txt)
{
  // the code is already in HTML form
  if (document.getElementById("outputCode").selectedIndex == 0)
  {
    return txt;
  }
  // ezboard
  if (document.getElementById("outputCode").selectedIndex == 1)
  {
    txt = txt.replace(/<font color=\"/g, "[font color=");
    txt = txt.replace(/\">/g, "]");
    txt = txt.replace(/<\/font>/g, "[/font]");
    txt = txt.replace(/ \[\/font\]\[/g, " [/font] [");
    txt = txt.replace(/<br\/>/g, "[br]");
    return txt;
  }
  // vBulletin, Invision Powerboard
  if (document.getElementById("outputCode").selectedIndex >= 2)
  {
    txt = txt.replace(/<font color=\"/g, "[color=");
    txt = txt.replace(/\">/g, "]");
    txt = txt.replace(/<\/font>/g, "[/color]");
    txt = txt.replace(/ \[\/color\]\[/g, " [/color] [");
    txt = txt.replace(/<br\/>/g, "\n");
    return txt;
  }
}

  
  
/**
 * Function: generateFade()
 *
 * About: Collects and error checks all of the info that will be needed to generate a faded text.
 *        This info is then processed.
 *
 **/
function generateFade()
{
	var colors = new Array();
	
	for (var i = 0; i < NumberOfColors; i++)
	{
	  colors[i] = document.getElementById("cVal"+i).value; 
	}
  
  var numColors = NumberOfColors;
  
  if (NumberOfColors == 1)
  {
    colors[1] = colors[0];
    numColors = 2;
  }
  
	var txt = document.getElementById("txtInput").value;

	var txtLines;
	if (isIE == true)
	{
    txtLines = txt.split("\r\n");
  } 
  else 
  {
    txtLines = txt.split("\n");  
  }

  var index = document.getElementById("selectFadeType").selectedIndex;

  // Text: Vertical Fade
  if (document.getElementById("selectFadeType").options[index].value == "Text: Vertical")
  {
    if (txtLines.length <= 1)
    {
      alert("Tip: For this fade to look good, you'll want to use multiple lines of text.");
    }
    
  	var prevC = 0, currC = 1;
  	var lineStep = (txtLines.length - 1) / (numColors - 1);
  	var currStr = "", finalFadedTxt = "";
  	var lineStart = 0, lineEnd = 1;
  	
  	for (i = 1; i < Math.min(numColors, txtLines.length + 1); i++)
  	{
  		lineEnd = Math.max(lineStart+2, lineEnd + lineStep);

  		var fadedTxt = fadeLines(txtLines, Math.round(lineStart), Math.min(Math.round(lineEnd), txtLines.length), colors[prevC], colors[currC]);

  		//alert(lineStart + "," + lineEnd + "," + "fadedTxt=" + fadedTxt + ",finalFadedTxt=" + finalFadedTxt);
  		
  		finalFadedTxt = removeLastFadedLine(finalFadedTxt) + fadedTxt;
  
  		lineStart = Math.round(lineEnd) - 1;
  		prevC++;
  		currC++;
    }
  
  	document.getElementById("htmlCode").value = convertToOutputCode(finalFadedTxt);
    document.getElementById("textDivBG").innerHTML = finalFadedTxt;
  }
  // Text: Horizontal Fade
  else if (document.getElementById("selectFadeType").options[index].value == "Text: Horizontal")
  {
    var finalFadedTxt = horizontalFade(txt, colors, numColors);
  	document.getElementById("htmlCode").value = convertToOutputCode(finalFadedTxt);
    document.getElementById("textDivBG").innerHTML = finalFadedTxt;
  }
  // Text: Horizontal (line by line) Fade
  else if (document.getElementById("selectFadeType").options[index].value == "Text: Horizontal (line by line)")
  {
  	var finalFadedTxt = "";
  	for (var i = 0; i < txtLines.length; i++)
  	{
      finalFadedTxt = finalFadedTxt + horizontalFade(txtLines[i], colors, numColors) + "<br/>";
    }

  	document.getElementById("htmlCode").value = convertToOutputCode(finalFadedTxt);
    document.getElementById("textDivBG").innerHTML = finalFadedTxt;
  }
  // Text: Horizontal (line by line, uniform) Fade
  else if (document.getElementById("selectFadeType").options[index].value == "Text: Horizontal (line by line, uniform)")
  {
    // find the longest length of text
  	var largestLen = 0;
  	for (var i = 0; i < txtLines.length; i++)
  	{
  	  largestLen = Math.max(largestLen, txtLines[i].length);
  	}
    
  	var finalFadedTxt = "";
  	for (var i = 0; i < txtLines.length; i++)
  	{
  	  txtLines[i] = padText(txtLines[i], largestLen, " ");
      finalFadedTxt = finalFadedTxt + horizontalFade(txtLines[i], colors, numColors) + "<br/>";
    }

  	document.getElementById("htmlCode").value = convertToOutputCode(finalFadedTxt);
    document.getElementById("textDivBG").innerHTML = finalFadedTxt;
  }
  // Text: Horizontal (spin forward/back) Fade
  else if (document.getElementById("selectFadeType").options[index].value == "Text: Horizontal (spin back)" || document.getElementById("selectFadeType").options[index].value == "Text: Horizontal (spin forward)")
  {
    if (txtLines.length <= 1)
    {
      alert("Tip: For this fade to look good, you'll want to use multiple lines of text.");
    }
    
    // find spin direction
    var spinForward = true;
    if (document.getElementById("selectFadeType").options[index].value == "Text: Horizontal (spin back)")
    {
      spinForward = false;  
    }
    
    // find the longest length of text
  	var largestLen = 0;
  	for (var i = 0; i < txtLines.length; i++)
  	{
  	  largestLen = Math.max(largestLen, txtLines[i].length);
  	}
    
    var fadedColorArray = new Array();
    createFadeArray(fadedColorArray, colors, largestLen + Math.floor(largestLen / (colors.length-1)) );
    fadedColorArray.pop();
    
  	var finalFadedTxt = "";
  	for (var i = 0; i < txtLines.length; i++)
  	{
  	  var tempStr = padText(txtLines[i], largestLen, " ");
  	  
  	  for (j = 0; j < largestLen; j++)
  	  {
  	    finalFadedTxt = finalFadedTxt + "<font color=\"#" + fadedColorArray[j] + "\">" + tempStr.substr(j,1) + "</font>";
  	  }
  	  finalFadedTxt = finalFadedTxt + "<br/>";
  	  
  	  // shift array values
  	  if (spinForward == true)
  	  {
  	    shiftArrayValuesBack(fadedColorArray);
  	  }
  	  else
  	  {
  	    shiftArrayValuesForward(fadedColorArray);
  	  }
    }

  	document.getElementById("htmlCode").value = convertToOutputCode(finalFadedTxt);
    document.getElementById("textDivBG").innerHTML = finalFadedTxt;
  }
  
  // Text: Square Fade (NOT IMPLEMENTED!)
  else if (document.getElementById("selectFadeType").options[index].value == "Text: Square")
  {
    // find the longest length of text
  	var largestLen = 0;
  	for (var i = 0; i < txtLines.length; i++)
  	{
  	  largestLen = Math.max(largestLen, txtLines[i].length);
  	}
    
  	var finalFadedTxt = "";
  	for (var i = 0; i < txtLines.length; i++)
  	{
  	  txtLines[i] = padText(txtLines[i], largestLen, " ");
      finalFadedTxt = finalFadedTxt + horizontalFade(txtLines[i], colors, numColors) + "<br/>";
    }

  	document.getElementById("htmlCode").value = convertToOutputCode(finalFadedTxt);

    document.getElementById("textDivBG").innerHTML = finalFadedTxt;
  }
  
  fadeOutInput(100);
}
 

function fadeOutInput(level)
{ 
  var timeoutDur = 10;
  var theObj = document.getElementById("inputContainer");

	if (isIE == true)
	{
		theObj.style.filter = "alpha(opacity=" + level + ")";
	}
	else
	{
		theObj.style.opacity = level/100;
	} 

  if (level <= 0)
  {
    theObj.style.display = "none"; 

    // now to deal with the result container
    theObj = document.getElementById("resultContainer"); 
    level = 0;
  	if (isIE == true)
  	{
  		theObj.style.filter = "alpha(opacity=" + level + ")";
  	}
  	else
  	{
  		theObj.style.opacity = level/100;
  	} 
  	theObj.style.display = "block"; 
  	fadeInResults(0);
  }
  else
  {
    setTimeout(function() {fadeOutInput(level-20);}, timeoutDur);
  }
}
function fadeInResults(level)
{
  var timeoutDur = 10;
  var theObj = document.getElementById("resultContainer");

	if (isIE == true)
	{
		theObj.style.filter = "alpha(opacity=" + level + ")";
	}
	else
	{
		theObj.style.opacity = level/100;
	} 

  if (level >= 100)
  {
    // we're done
    currentlyTransitioningLayout = false;
  }
  else
  {
    setTimeout(function() {fadeInResults(level+20);}, timeoutDur);
  }
}



function fadeOutResults(level)
{
  var timeoutDur = 10;
  var theObj = document.getElementById("resultContainer");

	if (isIE == true)
	{
		theObj.style.filter = "alpha(opacity=" + level + ")";
	}
	else
	{
		theObj.style.opacity = level/100;
	} 

  if (level <= 0)
  {
    theObj.style.display = "none"; 

    // now to deal with the input container
    theObj = document.getElementById("inputContainer"); 
    level = 0;
  	if (isIE == true)
  	{
  		theObj.style.filter = "alpha(opacity=" + level + ")";
  	}
  	else
  	{
  		theObj.style.opacity = level/100;
  	} 
  	theObj.style.display = "block"; 
  	fadeInInput(0);
  }
  else
  {
    setTimeout(function() {fadeOutResults(level-20);}, timeoutDur);
  }
}
function fadeInInput(level)
{
  var timeoutDur = 10;
  var theObj = document.getElementById("inputContainer");

	if (isIE == true)
	{
		theObj.style.filter = "alpha(opacity=" + level + ")";
	}
	else
	{
		theObj.style.opacity = level/100;
	} 

  if (level >= 100)
  {
    // we're done
    currentlyTransitioningLayout = false;
  }
  else
  {
    setTimeout(function() {fadeInInput(level+20);}, timeoutDur);
  }
}

function resetReport()
{
  if (currentlyTransitioningLayout == true)
  {
    return; 
  }
  currentlyTransitioningLayout = true;
  
  fadeOutResults(100);
}
 
function copyToClipboard() 
{
	document.getElementById("htmlCode").focus();
	document.getElementById("htmlCode").select();
	window.clipboardData.setData("Text", document.getElementById("htmlCode").value);
}
  
window.onload = function() 
{
	randomizeAllColors();
}