var Colors = [["Top color",["#264890","#872448","#5B5B5B"]],["Bottom color",["#DCC381","#BFBFBF","#D59679"]]];
var CellWidth = 90;
var CellHeight = 30;
var CellClassName = "TDColor";
var RowHeaderClassName = "TDRowHeader";
var Folder = "images";
var ImagesExtension = ".jpg";


var selIndexes = new Array();
var logoVisible = false;
var localFilePrefix = "FILE:///";
window.onresize = UpdateLogoLayout;

function Init()
{
	CreateColorChooser(Colors);
	InitIndexes(Colors.length);
}

function InitIndexes(count)
{
	for(var i=0;i<count;i++)
	{
		selIndexes[i] = 0;
	}
}

function UpdateImage() 
{
	if (document.images)
	{
		var filename = "";
		for(var i=0;i<selIndexes.length;i++)
		{
			filename += selIndexes[i].toString();
		}
		filename += ImagesExtension;
		document.getElementById("preview").src = Folder + "/" + filename;
	}
}

function ShowLogo()
{
	var logoUri = new String(document.getElementById("logoFile").value);
	var startingStr = logoUri.substr(0,8).toUpperCase();
	if(startingStr != localFilePrefix)
	{
		logoUri = localFilePrefix + logoUri;
	}
	logoUri = logoUri.replace(/\\/g,"/");
	document.getElementById("ImgLogo").src = logoUri;
	logoVisible = true;
	document.getElementById("DivLogo").style.visibility = "visible";
	UpdateLogoLayout();
}

function HideLogo()
{
	logoVisible = false;
	document.getElementById("DivLogo").style.visibility = "hidden";
}

function UpdateLogoLayout()
{
	if(logoVisible == true)
	{
		var offset = GetOffset("preview");
		var x = offset[0] + parseInt(document.getElementById("LogoX").value);
		var y = offset[1] + parseInt(document.getElementById("LogoY").value);
		var width = parseInt(document.getElementById("LogoWidth").value);
		var height = parseInt(document.getElementById("LogoHeight").value);
		var objDiv = document.getElementById("DivLogo");
		var objImage = document.getElementById("ImgLogo");
		if(!isNaN(x))
		{
			objDiv.style.left = x + "px";
		}
		if(!isNaN(y))
		{
			objDiv.style.top = y + "px";
		}
		if(!isNaN(width))
		{
			objDiv.style.width = objImage.width = width;
		}
		if(!isNaN(height))
		{
			objDiv.style.height = objImage.height = height;
		}
	}
}

function GetOffset(id)
{
	var offsetX = 0;
	var offsetY = 0;
	var obj = document.getElementById(id);
	do
	{
		offsetX += parseInt(obj.offsetLeft);
		offsetY += parseInt(obj.offsetTop);
		obj = obj.offsetParent;
	}while(obj);
	return new Array(offsetX,offsetY);
}

function CreateColorChooser(colors)
{
	var oTDContainer = document.getElementById("TDColorContainer");
	var oTable = document.createElement("TABLE");
	oTDContainer.appendChild(oTable);
	oTable.id = "ColorTable";
	for(var i=0;i<colors.length;i++)
	{
		var oNewRow = oTable.insertRow(-1);
		var oRowHeaderCell = oNewRow.insertCell(-1);
		oRowHeaderCell.innerHTML = colors[i][0];
		oRowHeaderCell.className = RowHeaderClassName;
		for(var j=0;j<colors[i][1].length;j++)
		{
  		var oCell = oNewRow.insertCell(-1);
  		oCell.width = CellWidth;
  		oCell.height = CellHeight;
  		oCell.bgColor = colors[i][1][j];
  		oCell.className = CellClassName;
  		oCell.innerHTML = "&nbsp;";
//  		oCell.onclick = "ColorClicked(" + i + ", " + j + ");";
			oCell.onclick = CellClicked;
  	}
  }
  oCell.normalize();
  oNewRow.normalize();
  oTable.normalize();
}

function CellClicked(eventArgs)
{
	var oSrcElement;
	if(eventArgs)
	{
		oSrcElement = eventArgs.target;
	}
	else
	{
		oSrcElement = window.event.srcElement;
	}

	var oCell = oSrcElement;
	var cellIndex = oCell.cellIndex;
	var oRow = oCell.parentNode;
	var rowIndex = oRow.rowIndex;
	ColorClicked(rowIndex,cellIndex - 1);
}

function ColorClicked(iRow,iCell)
{
	selIndexes[iRow] = iCell;
	UpdateFields();
	UpdateImage();
}

function UpdateFields()
{
	var oIndex = document.getElementsByName("colorSelected").item(0);
	var s = new String();
	for(var i=0; i<selIndexes.length; i++)
	{
		s += Colors[i][0] + ": " + Colors[i][1][selIndexes[i]] + "; ";
	}
	oIndex.value = s;
}