/*
Variables where the values to be displayed in the textarea are stored.
*/
var personalize = "I make <em id=\"moneyEm\">$50,000</em> a year, putting me among the richest <em id=\"percentileEm\">2.1%</em> in the world";
var addInfo = "There are <em id=\"lessWealthyEm\">6.4 billion</em> people less wealthy than I am.";
var addInfoNum = "1";
var size = "672x280";
var border_color = "";
var title_color = "";
var bg_color = "";
var text_color = "";
var url_color = "";
var highlight_color = "";
var graphic = "/images/wwc_big.jpg";
var corner = "square";
var tempGraphic = "/images/wwc_big.jpg";
var incomeValue = "33500";
var richestPercentValue = "5";
var lessWealthyValue = "6.2";
var currency = "USD";

function getCheckedValue(radioObj) 
{
  if(!radioObj)
    return "";
  var radioLength = radioObj.length;
  if(radioLength == undefined)
    if(radioObj.checked)
      return radioObj.value;
    else
      return "";
  for(var i = 0; i < radioLength; i++)
  {
    if(radioObj[i].checked) 
    {
      return radioObj[i].value;
    }
  }
	return "";
}

function loadValues(income, richestPercent, lessWealthy)
{
	if(income != null && income != "")
	{
		incomeValue = income;
	}
	
	if(richestPercent != null && richestPercent != "")
	{
		richestPercentValue = richestPercent;
	}
	
	if(lessWealthy != null && lessWealthy != "")
	{
		lessWealthyValue = lessWealthy;
	}
}

/*
Refresh the code inside the textarea.
*/
function refreshTextArea()
{
	document.calcForm.tempCode.value = "";
	var tempPersonalize = "";
	if(document.calcForm.selectPersonalize != null)
	{
		tempPersonalize = document.calcForm.selectPersonalize.value;
	}
	else
	{
		tempPersonalize = "Standard";
	}

	document.calcForm.tempCode.value = 
	"<script type=\"text/javascript\">" + "\n" + 
	"status = \"" + tempPersonalize + "\"\n" +
	"add_info = \"" + addInfoNum + "\"\n" +
	"size = \"" + size + "\"\n" +
	"border_color = \"" + border_color + "\"\n" +
	"header_color = \"" + title_color + "\"\n" +
	"bg_color = \"" + bg_color + "\"\n" +
	"text_color = \"" + text_color + "\"\n" +
	"url_color = \"" + url_color + "\"\n" +
	"highlight_color = \"" + highlight_color + "\"\n" +
	"graphic = \"" + graphic + "\"\n" +
	"income = \"" + incomeValue + "\"\n" +
	"richest_percent = \"" + richestPercentValue + "\"\n" +
	"less_wealthy = \"" + lessWealthyValue + "\"\n" +
  "currency = \"" + currency + "\"\n" +
	//"corner = \"" + corner + "\"\n" +
	"</script>" + "\n" +
	"<script src=\"http://leastof.org/javascripts/calc.js\" type=\"text/javascript\"></script>";
}

function getClassSuffix() {
    var addInfo = document.calcForm.checkAddInfo.checked;
    var graphic = document.calcForm.checkGraphic.checked;
    
    if(addInfo && graphic) {
        return "";
    }
    
    if(!addInfo && graphic) {
        return "2";
    }
    
    if(!addInfo && !graphic) {
        return "3";
    }
    
    if(addInfo && !graphic) {
        return "4";
    }
}

/*
Changes the value of the percentile and lesswealthy text.
*/
function fPersonalize(income, percentile, standing)
{
    if(document.calcForm.selectPersonalize != null && document.calcForm.selectPersonalize.value == "Personalize")
    {
		personalize = "I make <em id=\"moneyEm\">$" + income + "</em> a year, putting me among the richest <em id=\"percentileEm\">" + percentile + "%</em> in the world.";
		if(document.calcForm.checkAddInfo.checked == true)
			addInfo = "There are <em id=\"lessWealthyEm\">" + standing + "</em> billion people less wealthy than I am.";
		
		incomeValue = income;
		richestPercentValue = percentile;
		lessWealthyValue = standing;
    }
    else
    {
		personalize = "If you make <em id=\"moneyEm\">$33,500</em> a year, you are among the richest <em id=\"percentileEm\">5%</em> in the world.";
		if(document.calcForm.checkAddInfo.checked == true)
			addInfo = "There are <em id=\"lessWealthyEm\">6.2 billion</em> people less wealthy than you.";
		
		incomeValue = "33500";
		richestPercentValue = "5";
		lessWealthyValue = "6.2";
    }
    
    var p = document.getElementById('percentile');
    
    p.innerHTML = personalize;
	
	fAddInfo(standing);
    fColor();
    refreshTextArea();
}

/*
Toggles the value of the lesswealthy text depending on the selected value of the personalize drop down.
*/
function fAddInfo(standing)
{
    var percentile = document.getElementById('percentile');
    var lessWealthy = document.getElementById('lessWealthy');
    var toFindOut = document.getElementById('toFindOut');

    if(document.calcForm.checkAddInfo.checked == true)
    {
  		if(document.calcForm.selectPersonalize != null && document.calcForm.selectPersonalize.value == "Personalize")
  		{
  			addInfo = "There are <em id=\"lessWealthyEm\">" + standing + "</em> billion people less wealthy than I am.";
  		}
  		else
      {
        addInfo = "There are <em id=\"lessWealthyEm\">6.2 billion</em> people less wealthy than you.";
      }
      addInfoNum = "1";
    }
    else
    {
        addInfo = "";
        addInfoNum = "0";
    }
    
    var p = document.getElementById('lessWealthy');
    
    class_suffix = getClassSuffix();
    
    percentile.className = "preview" + class_suffix;
    lessWealthy.className = "preview" + class_suffix;
    toFindOut.className = "findOut" + class_suffix;
    
    lessWealthy.innerHTML = addInfo;
    
    refreshTextArea();
}

/*
Changes the preview css depending on the selected size value.
Changes the image to be used depending on the selected index.
Changes the size of the div container to fit the form.
*/
function fSize()
{
  size = document.calcForm.selectSize.value;
	
	if(size == "336x280" || size == "300x250" || size == "250x250" || size == "120x380" || size == "380x145")
	{
		document.getElementById('previewImage').src = "/images/wwc_small.jpg";
		tempGraphic = "/images/wwc_small.jpg";
	}
	else
	{
		document.getElementById('previewImage').src = "/images/wwc_big.jpg";
		tempGraphic = "/images/wwc_big.jpg";
	}
    
	document.getElementById("preview").href="/stylesheets/template" + size + ".css";
	
	var splitSize = size.split("x");
    
    // var width = splitSize[0];
    // var height = splitSize[1];
	
    // var container = document.getElementById('previewContainer');
    
    // container.style.width = width + 'px';
    // container.style.height = height + 'px';
    
  fGraphic();
  fColor();
  refreshTextArea();
}

/*
Toggles the src of the graphic. When unchecked the src is left blank to remove the image.
*/
function fGraphic()
{
    if(document.calcForm.checkGraphic.checked == true)
    {
      graphic = "1";
    }
    else
    {
      graphic = "0";
    }
    
    var image = document.getElementById('previewImage');
	
	if(graphic == "1")
		image.src = tempGraphic;
	else
		image.src = "";
    
    class_suffix = getClassSuffix();
    
    document.getElementById('percentile').className = "preview" + class_suffix;
    document.getElementById('lessWealthy').className = "preview" + class_suffix;
    document.getElementById('toFindOut').className = "findOut" + class_suffix;
    
    refreshTextArea();
}

/*
Changes the colors in the form.
Choosing personalize will get the values from the textfields. Choosing any of the standard colors will give the form colors standard values.
*/
function fColor()
{
    if(document.calcForm.selectColor.value == "Personalize")
    {
		border_color = document.calcForm.textBorderColor.value;
		text_color = document.calcForm.textTextColor.value;
		title_color = document.calcForm.textTitleColor.value;
		bg_color = document.calcForm.textBGColor.value;
		url_color = document.calcForm.textURLColor.value;
		highlight_color = document.calcForm.textHighlightColor.value;
    }
    else if(document.calcForm.selectColor.value == "Original")
    {
		border_color = "#CCC";
		text_color = "black";
		title_color = "#03678C";
		bg_color = "white";
		url_color = "#999";
		highlight_color = "black";

		document.calcForm.textBorderColor.value = border_color;
		document.calcForm.textTextColor.value = text_color;
		document.calcForm.textTitleColor.value = title_color;
		document.calcForm.textBGColor.value = bg_color;
		document.calcForm.textURLColor.value = url_color;
		document.calcForm.textHighlightColor.value = highlight_color;
     } 
    else if(document.calcForm.selectColor.value == "Cool Blue")
    {
		border_color = "black";
		text_color = "black";
		title_color = "#03317E";
		bg_color = "white";
		url_color = "#03317E";
		highlight_color = "#03317E";

		document.calcForm.textBorderColor.value = border_color;
		document.calcForm.textTextColor.value = text_color;
		document.calcForm.textTitleColor.value = title_color;
		document.calcForm.textBGColor.value = bg_color;
		document.calcForm.textURLColor.value = url_color;
		document.calcForm.textHighlightColor.value = highlight_color;
     } 
    else if(document.calcForm.selectColor.value == "Green Dream")
    {
		border_color = "#CCC";
		text_color = "white";
		title_color = "blue";//"#3F4FFF";
		bg_color = "green";
		url_color = "#fde700";
		highlight_color = "#fde700";

		document.calcForm.textBorderColor.value = border_color;
		document.calcForm.textTextColor.value = text_color;
		document.calcForm.textTitleColor.value = title_color;
		document.calcForm.textBGColor.value = bg_color;
		document.calcForm.textURLColor.value = url_color;
		document.calcForm.textHighlightColor.value = highlight_color;
     } else if(document.calcForm.selectColor.value == "Black and Blue")
    {
		border_color = "#CCC";
		text_color = "#0C2E6E";
		title_color = "black";
		bg_color = "white";
		url_color = "black";
		highlight_color = "#732465";

		document.calcForm.textBorderColor.value = border_color;
		document.calcForm.textTextColor.value = text_color;
		document.calcForm.textTitleColor.value = title_color;
		document.calcForm.textBGColor.value = bg_color;
		document.calcForm.textURLColor.value = url_color;
		document.calcForm.textHighlightColor.value = highlight_color;
     } else if(document.calcForm.selectColor.value == "Red, White and Blue")
    {
		border_color = "black";
		text_color = "#002868";
		title_color = "#BF0A30";
		bg_color = "white";
		url_color = "#BF0A30";
		highlight_color = "#BF0A30";

		document.calcForm.textBorderColor.value = border_color;
		document.calcForm.textTextColor.value = text_color;
		document.calcForm.textTitleColor.value = title_color;
		document.calcForm.textBGColor.value = bg_color;
		document.calcForm.textURLColor.value = url_color;
		document.calcForm.textHighlightColor.value = highlight_color;
     } else if(document.calcForm.selectColor.value == "Red, White and Blue Two")
    {
		border_color = "black";
		text_color = "black";
		title_color = "#002868";
		bg_color = "white";
		url_color = "#002868";
		highlight_color = "#BF0A30";

		document.calcForm.textBorderColor.value = border_color;
		document.calcForm.textTextColor.value = text_color;
		document.calcForm.textTitleColor.value = title_color;
		document.calcForm.textBGColor.value = bg_color;
		document.calcForm.textURLColor.value = url_color;
		document.calcForm.textHighlightColor.value = highlight_color;
     } else if(document.calcForm.selectColor.value == "Tan Plan")
    {
		border_color = "black";
		text_color = "black";
		title_color = "#03317E";
		bg_color = "tan";
		url_color = "#036786";
		highlight_color = "black";

		document.calcForm.textBorderColor.value = border_color;
		document.calcForm.textTextColor.value = text_color;
		document.calcForm.textTitleColor.value = title_color;
		document.calcForm.textBGColor.value = bg_color;
		document.calcForm.textURLColor.value = url_color;
		document.calcForm.textHighlightColor.value = highlight_color;
     } 
     
	//We get the individual elements in the form that will need to be recolored...
    var p1 = document.getElementById('percentile');
	var em1 = document.getElementById('percentileEm');
    var p2 = document.getElementById('lessWealthy');
	var em2 = document.getElementById('lessWealthyEm');
	var em3 = document.getElementById('moneyEm');
    var p3 = document.getElementById('toFindOut');
    var p4 = document.getElementById('link');
    var header = document.getElementById('header');
    var url = document.getElementById('url');
    var bg = document.getElementById('previewContainer');
    
	//then set their color values to the corresponding colors.
    p1.style.color = text_color;
	em1.style.color = highlight_color;
    p2.style.color = text_color;
	em2.style.color = highlight_color;
	em3.style.color = highlight_color;
    p3.style.color = text_color;
    p4.style.color = text_color;
    header.style.color = title_color;
    url.style.color = url_color;
    bg.style.background = bg_color;
    bg.style.borderColor = border_color;
    
    refreshTextArea();
}

function fCorner()
{
    if(document.calcForm.selectCorner.value == "Square")
    {
      corner = "square";
    }
    else if(document.calcForm.selectCorner.value == "Slightly rounded")
    {
      corner = "slightly rounded"
    }
    else if(document.calcForm.selectCorner.value == "Rounded")
    {
      corner = "rounded"
    }
    refreshTextArea();
}