var ThisProgram='';
function MyAlert(Message) {
	
	// This is supposed to show a LighBox / Modal soon! 2nd August 2021
	
	alert(Message);
}

function MyParseInt(SomeValue) {
	if((SomeValue==0) || (SomeValue=="")) {
		return 0;
	} else {
		if (!IsInteger(SomeValue))
		{
			return 0;
		} else {
			return parseInt(SomeValue);
		}
	}
}
function MyParseFloat(SomeValue) {
	if((SomeValue==0) || (SomeValue=="")) {
		return 0;
	} else {
		if (!IsFloat(SomeValue))
		{
			return 0;
		} else {
			return parseFloat(SomeValue);
		}
	}
}
//This function autofills the date.ie if you have not entered month, year
//It will take the current month ,year
function AutoCompleteDate(strControl)
{
	if(!IsInputFilled(strControl))
	{
		return false;
	}
	var val = strControl.value.split('/');

	var val1 = "";
	var val2 = "";
	var val3 = "";

	if(val.length == 1) {
		val1 = val[0];
	}else if(val.length == 2) {
		val1 = val[0];
		val2 = val[1];
	}else if(val.length == 3) {
		val1 = val[0];
		val2 = val[1];
		val3 = val[2];
	}
	
	var now = new Date();

	var date = now.getDate();
	var month = now.getMonth() + 1;
	var year = now.getFullYear();
	
	date = PrefixZero(date);
	month = PrefixZero(month);

	if(val1.length == 0) { val1 = date; }
	if(val2.length == 0) { val2 = month; }
	if(val3.length == 0) { val3 = year; }

	if(val1.length != 2) { val1 = PrefixZero(val1); }
	if(val2.length != 2) { val2 = PrefixZero(val2); }

	if(val3.length == 1) {
		val3 = "200" + val3;
	}
	if(val3.length == 2) {
		if(val3 > 70)
		{
			val3 = "19" + val3;
		}
		else
		{
			val3 = "20" + val3;
		}
	}

	val[0] = val1;
	val[1] = val2;
	val[2] = val3;

	strControl.value = val[0] + "/" + val[1] + "/" + val[2];
}

function AutoCompleteTime(strControl)
{
	if(!IsInputFilled(strControl))
	{
		return false;
	}
	var val = strControl.value.split(':');

	var val1 = "";
	var val2 = "";
	var val3 = "";

	if(val.length == 1) {
		val1 = val[0];
		val2 = "00";
		val3 = "00";
	}else if(val.length == 2) {
		val1 = val[0];
		val2 = val[1];
		val3 = "00";
	}else if(val.length == 3) {
		val1 = val[0];
		val2 = val[1];
		val3 = val[2];
	}

	if(val1.length != 2) { val1 = PrefixZero(val1); }
	if(val2.length != 2) { val2 = PrefixZero(val2); }

	strControl.value = val1 + ":" + val2 + ":" + val3;
}

function AutoCompleteDateTime(strControl) {
	AutoCompleteDatetime(strControl);
}

function AutoCompleteDateTimeEOD(strControl) {
	AutoCompleteDatetimeEOD(strControl);
}

function AutoCompleteDatetime(strControl)
{
	var space=strControl.value.split(" ");
	var date = space[0];
	var time;

	strControl.value = space[0];
	AutoCompleteDate(strControl);
	
	if(strControl.value == "" || strControl.value == null) return;

	strControl.value = strControl.value + " ";

	if(space[1] == null || space[1] == "") {
		time = "00:00:00";
	} else {
		time = space[1];
	}

	var colon = time.split(":");
	var hours = "";
	var minutes = "";
	var seconds = "";

	hours = colon[0];
	minutes = colon[1];
	seconds = colon[2];
	if(hours == null || hours == "") hours = "00";
	if(minutes == null || minutes == "") minutes = "00";
	if(seconds == null || seconds == "") seconds = "00";

	if(hours.length ==0) hours = "00";
	if(hours.length ==1) hours = "0" + hours;
	if(minutes.length ==0) minutes = "00";
	if(minutes.length ==1) minutes = "0" + minutes;
	if(seconds.length ==0) seconds = "00";
	if(seconds.length ==1) seconds = "0" + seconds;

	strControl.value += hours + ":" + minutes + ":" + seconds;
}

function AutoCompleteDatetimeEOD(strControl) // Used on 'Search's 'To' fields of DateTime type.
{
	var space=strControl.value.split(" ");
	var date = space[0];
	var time;

	strControl.value = space[0];
	AutoCompleteDate(strControl);
	
	if(strControl.value == "" || strControl.value == null) return;

	strControl.value = strControl.value + " ";

	if(space[1] == null || space[1] == "") {
		time = "23:59:59";
	} else {
		time = space[1];
	}

	var colon = time.split(":");
	var hours = "";
	var minutes = "";
	var seconds = "";

	hours = colon[0];
	minutes = colon[1];
	seconds = colon[2];
	if(hours == null || hours == "") hours = "23";
	if(minutes == null || minutes == "") minutes = "59";
	if(seconds == null || seconds == "") seconds = "59";

	if(hours.length ==0) hours = "23";
	if(hours.length ==1) hours = "0" + hours;
	if(minutes.length ==0) minutes = "59";
	if(minutes.length ==1) minutes = "0" + minutes;
	if(seconds.length ==0) seconds = "59";
	if(seconds.length ==1) seconds = "0" + seconds;

	strControl.value += hours + ":" + minutes + ":" + seconds;
}

//This function is used inside the AutoCompleteDate function.
//It will add 0 to the existing value if it is less than 10
function PrefixZero(i)
{
	if(i < 10)
	{
		i = "0" + i;	
	}
	return i;
}

function FieldHelp(strTable,strField,strHeight,strWidth)
{

	var helpWindow=window.open('Help/Field/'+strTable +'_' +strField +'.aspx','FieldHelp','height='+strHeight+',width='+strWidth+',left=660,top=205')
	helpWindow.focus();
}


function FlashStatus(StatusElementOrId, StatusMessage, ParentFormName='') {
	if(StatusMessage.substring(0, 10) != '@@@TRUE@@@') {
		// alert('Error Occurred.');
	}

	var RegExp=/\@\@\@\TRUE\@\@\@/;
	var StatusMessage = StatusMessage.replace(RegExp, "");

	if(typeof(StatusElementOrId)=="object") {
		StatusElementOrId.innerHTML = unescape(StatusMessage);
		if(ParentFormName!='') {
			var SetTimeout="document.forms['"+ParentFormName+"'].querySelector('#"+StatusElementOrId.id+"').innerHTML='&nbsp;';";
			// console.log(SetTimeout);
		}
		setTimeout(SetTimeout, 3000);
	} else if(document.getElementById(StatusElementOrId)) {
		document.getElementById(StatusElementOrId).innerHTML = unescape(StatusMessage);
		setTimeout("document.getElementById('"+StatusElementOrId+"').innerHTML='&nbsp;';", 3000);
	}
}

function OpenAddMoreMasters(ThePage) {
	var AddPageWin;
	AddPageWin=open(ThePage, "AddPageWin");
	// setTimeout("AddPageWin.focus();", 500);
}

function OpenRefreshMasters(EntireURL) {
	var RefreshPageWin;
	RefreshPageWin=open(EntireURL, "RefreshPageWin", "width=100,height=100,toolbars=no,scrollbars=no");
	// setTimeout("RefreshPageWin.focus();", 500);
}
var ViewOneWin;
function OpenWin(URL, AutoResize=true, FormObject=null) {
	ShowViewOne(URL, AutoResize, FormObject);
}
function ShowViewOne(URL, AutoResize=true, FormObject=null) {
	if('IFrame'=='IFrame') {
		OpenMainIFrame(URL, AutoResize, FormObject);
		return;
	} // 'OpenWin' below
		
	// console.log(MediaQuery);
	var StopResponsive="";
	if(!MediaQuery.matches) { // It matches just because the window has Vertical Orientation.
		if(URL.indexOf("?")>0) {
			var AmpOrQM="&";
		} else {
			var AmpOrQM="?";
		}
		StopResponsive=AmpOrQM+"SDOrientation=Horizontal";
	} 
	ViewOneWin=open(URL+StopResponsive, "ViewOneWin", "width=350,height=300,toolbars=no,scrollbars=yes,resizable");
	// setTimeout("ViewOneWin.focus();", 500);
	// console.log(ViewOneWin);
	// console.log(ViewOneWin.document);
	if(AutoResize) {
		window.setTimeout("ViewOneWin.resizeTo(ViewOneWin.document.body.scrollWidth+ViewOneWin.outerWidth-ViewOneWin.innerWidth+20, ViewOneWin.document.body.scrollHeight+ViewOneWin.outerHeight-ViewOneWin.innerHeight);", 1000);
		
		ViewOneWin.document.body.onload=function() {
			ViewOneWin.resizeTo(ViewOneWin.document.body.scrollWidth+ViewOneWin.outerWidth-ViewOneWin.innerWidth+20, ViewOneWin.document.body.scrollHeight+ViewOneWin.outerHeight-ViewOneWin.innerHeight);			
			// not working below
			addEvent(document.body, "keydown",
				function (e) {
					e=e||window.event;
					if(e.keyCode==27) { // escape
						this.close();
					}
				}
			);
		}
	}
}

function ShowAttachments(URL) {
	var AttachmentsWin;
	AttachmentsWin=open(URL, "AttachmentsWin", "width=800,height=300,toolbars=no,scrollbars=yes,resizable");
	// setTimeout("AttachmentsWin.focus();", 500);
}

function ShowAttachmentInline(SrNo) {
	var iFrame=document.getElementById("iframeAttachmentInline"+SrNo);
	var Div=document.getElementById("divAttachmentInline"+SrNo);
	if(iFrame.style.width!="100px") {
		iFrame.style.width="100px";
		iFrame.contentWindow.location.href="ViewAttachments.php?SrNo="+SrNo+"&ContentDisposition=inline&HTMLEnvelop=true";
		iFrame.contentWindow.bgcolor="#888888";
		Div.style.border="1px solid"; 
		Div.style.borderColor="#88BCED";		
	} else {
		iFrame.style.width="0px";
		Div.style.border="";
	}
	if(iFrame.style.height!="100px") {
		iFrame.style.height="100px";
	} else {
		iFrame.style.height="0px";
	}
}

function RefineSearch(SearchPage) {
	if(objForm) {
		objForm.action=SearchPage;
		objForm.submit();
	}
}

function AddMore(AddPage, ExtraQueryString='') {
	if(objForm) {
		if(AddPage.indexOf("?")>-1) {
			objForm.action=AddPage+"&AddMoreFromView=true&"+ExtraQueryString;
		} else {
			objForm.action=AddPage+"?AddMoreFromView=true&"+ExtraQueryString;
		}
		objForm.submit();
	}
}

/*
function Timestamp(Control) {
	var myDate=Control.value;
	myDate=myDate.split("/");
	var newDate=myDate[1]+"/"+myDate[0]+"/"+myDate[2];
	var Timestamp = new Date(newDate).getTime();
	Timestamp = Timestamp / 1000; // because getTime() returns in MilliSeconds
	// alert(Timestamp); // testing
	return Timestamp;

}
*/

function DateDiff(strControl,strControl1, Format)
{
	try {
		var fromDate=strControl.value;
		var toDate=strControl1.value;
	} catch(Error) {
		try {
			var fromDate=strControl;
			var toDate=strControl1;
		} catch(Error) {
			return '0';
		}
	}
	var testdate = new Date(fromDate.substring(6,10),fromDate.substring(3,5)-1,fromDate.substring(0,2));
	                                                          
	var testdate1 = new Date(toDate.substring(6,10),toDate.substring(3,5)-1,toDate.substring(0,2));
	
	if(testdate=="NaN" || testdate1=="NaN") {
		return '0';
	}

	var Diff = testdate1.getTime() - testdate.getTime();

	// alert(Diff); // testing

	if(!Format || Format=="") {
		return Diff;
	}

	if(Format.toLowerCase()=="day" || Format.toLowerCase()=="date" || Format.toLowerCase()=="days") {
		return Diff/86400/1000; // miliseconds ke liye extra 1000
	} else if(Format.toLowerCase()=="hour" || Format.toLowerCase()=="hours") {
		return Diff/3600/1000; // miliseconds ke liye extra 1000
	} else {
		alert("Invalid Format '" + Format + "'");
	}

}
function AutoCorrectName(strControl)
{
	if(!IsInputFilled(strControl))
	{
		return false;
	}
	var str=strControl.value;
	strControl.value = str.toLowerCase().replace(/^(.)|\s(.)/g, 
			  function($1) { return $1.toUpperCase(); });
}
function BreakAtCaps(strControl) {
	if(!IsInputFilled(strControl))
	{
		return false;
	}
	var str=strControl.value;
	strControl.value = str.replace(/([A-Z])/g, 
			  function($1) { return " "+$1; });
	strControl.value = strControl.value.replace(/^ /g, '');
	strControl.value = strControl.value.replace(/ ([A-Z]) ([A-Z]) ([A-Z]) ([A-Z]) ([A-Z]) ([A-Z]) /g, ' $1$2$3$4$5$6 ');
	strControl.value = strControl.value.replace(/ ([A-Z]) ([A-Z]) ([A-Z]) ([A-Z]) ([A-Z]) /g, ' $1$2$3$4$5 ');
	strControl.value = strControl.value.replace(/ ([A-Z]) ([A-Z]) ([A-Z]) ([A-Z]) /g, ' $1$2$3$4 ');
	strControl.value = strControl.value.replace(/ ([A-Z]) ([A-Z]) ([A-Z]) /g, ' $1$2$3 ');
	strControl.value = strControl.value.replace(/ ([A-Z]) ([A-Z]) /g, ' $1$2 ');
}
function ToggleMainTableRows(StartId, EndId, AnchorId) {
	var WhichAnchor=document.getElementById(AnchorId);
	var ShowOrHide="";
	if(WhichAnchor.innerHTML=="Show") {
		WhichAnchor.innerHTML="Hide";
		ShowOrHide="Hide";
	} else {
		WhichAnchor.innerHTML="Show";
		ShowOrHide="Show";
	}
	var MainTable=document.getElementById('MainTable');
	if(!MainTable) {
		alert('MainTable not found. Doing nothing in ToggleMainTableRows');
		return;
	}
	var DoAction=false;
	for(var i=0; i<MainTable.rows.length; i++) {
		// alert(i);
		var Row=MainTable.rows[i];
		// alert(Row.id);
		if(Row.id==StartId) {
			DoAction=true;
		}
		if(DoAction) {
			if(ShowOrHide=="Show") {
				Row.style.display = 'none';
			} else {
				Row.style.display = 'table-row';
			}
		}
		if(Row.id==EndId) {
			DoAction=false;
		}
	}
}

function TimeDiff(Field1, Field2) {
	return Timestamp(Field1) - Timestamp(Field2);
}

function Timestamp(Field) {

	if(!Field) { return 0; }

	var dateString;	
	
	if(Field.value) { 
		if(Field.value=="") { return 0; }
		dateString = Field.value;
	} else {
		dateString = Field;
	}

	var dateParts = dateString.split(' ');
    var timeParts = "00:00:00";
	if(dateParts.length==2) {
		timeParts = dateParts[1].split(':');
	}

	var date;
    var dateParts = dateParts[0].split('/');

	date = new Date(dateParts[2], parseInt(dateParts[1], 10) - 1, dateParts[0], timeParts[0], timeParts[1]); // timeParts[2], i.e. SECONDS ignored.

	// console.log(date.getTime()); //1379426880000
	// console.log(date); //Tue Sep 17 2013 10:08:00 GMT-0400
	return date.getTime() / 1000; // in seconds.

}

function PopulateToField(FieldName) { // used on Search
	eval("FromField = objForm."+FieldName+"From;");
	eval("ToField = objForm."+FieldName+"To;");

	if(objForm && FromField && ToField && ToField.value=="") {
		ToField.value=FromField.value;
	}
}
function ValidateUploadType(OneField,attachmentfiletype,filesize)
{
	var extension = OneField.value.substr(OneField.value.lastIndexOf('.')+1);
	if (attachmentfiletype != "" && attachmentfiletype.indexOf(extension)<0 && extension != "")
	{
		if(document.getElementById('vld'+OneField.name)) {
			eval("document.getElementById('vld"+OneField.name+"').innerHTML = '<span class=Error title=\""+OneField.name+"\">"+"The \"FileUpload\" field contains an unsupported filename."+"</span>';");
		} else {
			MyAlert("The \"FileUpload\" field contains an unsupported filename.");
		}
		OneField.focus();
		return false;
	}

	if (!OneField) {
	}
	else if (!OneField.files) {
	}
	else if (!OneField.files[0]) {
	}
	else {
		file = OneField.files[0];
		if ((file.size / 1024) > filesize) 
		{
			if(document.getElementById('vld'+OneField.name)) {
				eval("document.getElementById('vld"+OneField.name+"').innerHTML = '<span class=Error title=\""+OneField.name+"\">"+"The maximum allowed filesize is "+filesize+" KBs"+"</span>';");
			} else {
				MyAlert("The maximum allowed filesize is "+filesize+" KBs");
			}
			OneField.focus();
			return false;
		}
	}
	document.getElementById("vld"+OneField.name).innerHTML = "";
	return true;
}

function OpenGenerateScanCode(ScanCode, DisplayFormat, Filename) { // DisplayFormat='PDF', 'IMG' .. or empty or null; Filename applicable only for DisplayFormat='PDF'
	if(!DisplayFormat || DisplayFormat=='' || DisplayFormat==null || DisplayFormat==undefined || DisplayFormat=='undefined') {
		DisplayFormat='PDF';
	}
	if(!Filename || Filename=='' || Filename==null || Filename==undefined || Filename=='undefined') {
		Filename='ScanCode of '+ScanCode;
	}
	if(DisplayFormat!='PDF' && DisplayFormat!='IMG' && DisplayFormat!='IMGRaw') {
		MyAlert('Invalid ScanCode DisplayFormat '+DisplayFormat);
		return;
	}

	if(!document.getElementById('GenerateScanCode')) {
		var GenerateScanCode=document.createElement('form');
		GenerateScanCode.name='GenerateScanCode';
		GenerateScanCode.id='GenerateScanCode';
		document.body.appendChild(GenerateScanCode);
	}
	if(!document.getElementById('GenerateScanCode_ScanCode')) {
		var GenerateScanCode_ScanCode=document.createElement('input');
		GenerateScanCode_ScanCode.name='GenerateScanCode_ScanCode';
		GenerateScanCode_ScanCode.id='GenerateScanCode_ScanCode';
		GenerateScanCode_ScanCode.type='hidden'; // 'text' / 'hidden' for testing
		document.forms['GenerateScanCode'].appendChild(GenerateScanCode_ScanCode);
	}
	if(!document.getElementById('GenerateScanCode_DisplayFormat')) {
		var GenerateScanCode_DisplayFormat=document.createElement('input');
		GenerateScanCode_DisplayFormat.name='GenerateScanCode_DisplayFormat';
		GenerateScanCode_DisplayFormat.id='GenerateScanCode_DisplayFormat';
		GenerateScanCode_DisplayFormat.type='hidden'; // 'text' / 'hidden' for testing
		GenerateScanCode_DisplayFormat.value=DisplayFormat;
		document.forms['GenerateScanCode'].appendChild(GenerateScanCode_DisplayFormat);
	}
	if(!document.getElementById('GenerateScanCode_Filename')) {
		var GenerateScanCode_Filename=document.createElement('input');
		GenerateScanCode_Filename.name='GenerateScanCode_Filename';
		GenerateScanCode_Filename.id='GenerateScanCode_Filename';
		GenerateScanCode_Filename.type='hidden'; // 'text' / 'hidden' for testing
		GenerateScanCode_Filename.value=Filename;
		document.forms['GenerateScanCode'].appendChild(GenerateScanCode_Filename);
	}
	document.getElementById('GenerateScanCode_ScanCode').value=ScanCode;
	document.getElementById('GenerateScanCode_DisplayFormat').value=DisplayFormat;
	document.getElementById('GenerateScanCode_Filename').value=Filename;

	var GenerateScanCode=document.getElementById('GenerateScanCode');
	GenerateScanCode.method='POST';
	GenerateScanCode.target='_blank';
	GenerateScanCode.action='Includes/GenerateScanCode.php';
	GenerateScanCode.submit();
	// blocks the window // testing //  MyAlert(document.getElementById('GenerateScanCode').GenerateScanCode_ScanCode.value);
}


var MediaQuery=window.matchMedia("only screen and (max-width: 6in)");
function AddOneResponsive(PassedMediaQuery) {
	if(PassedMediaQuery==null) { // Initial call from the Page
		AddOneResponsive(MediaQuery); // Act NOW. MediaQuery is a Global variable.
		MediaQuery.addListener(AddOneResponsive); // Act forever
		return;
	} else if(PassedMediaQuery.matches || PassedMediaQuery=="Vertical") {
		document.getElementById("MainTable").innerHTML=document.getElementById("MainTable").innerHTML.replace(/<td class="Divider">&nbsp;<\/td>/g,'</tr><tr class="Dummy">');
		var Spans=document.getElementById("MainTable").getElementsByTagName('span');
		for(var i=0; i<Spans.length; i++) { // will get executed only ONCE initially ... and that's ok!!
			var Span=Spans[i];
			if(!Span.id.startsWith("vld")) {
				continue;
			}
			var Row=Span.parentElement.parentElement;
			if(Row.nodeName!="TR") {
				continue;
			}
			if(Row.cells.length!=5) { // manually modified row??
				continue;
			}
			if(Row.cells[4].innerHTML!=Span.parentElement.innerHTML) { // Span doesn't come from 5th Column -- something manually modified??
				continue;
			}
			Row.cells[2].innerHTML+='<br>'+Span.parentElement.innerHTML; // Copied to 3rd column
			Span.parentElement.innerHTML=''; // Removed from 5th column.
		}
	} else {
		document.getElementById("MainTable").innerHTML=document.getElementById("MainTable").innerHTML.replace(/<\/tr><tr class="Dummy">/g,'<td class="Divider">&nbsp;</td>');
		// We are NOT restoring the vld* spans back. It is too risky to play around.
	}
	ResizeLightBoxIFrame(); // meaningful only if a window has been opened inside a LightBox. Fault Tolerant.
}

function ModifyOneResponsive(PassedMediaQuery) {
	AddOneResponsive(PassedMediaQuery);
}

function ViewOneResponsive(PassedMediaQuery) {
	AddOneResponsive(PassedMediaQuery);
}

var MainTableInnerHTML='';
var tblPageThrowDisplayInnerHTML='';
function ViewResponsive(PassedMediaQuery) {
	// alert(PassedMediaQuery);
	if(PassedMediaQuery==null) { // Initial call from the Page
		ViewResponsive(MediaQuery); // Act NOW. MediaQuery is a Global variable.
		MediaQuery.addListener(ViewResponsive); // Act forever
		return;
	} else if(PassedMediaQuery.matches || PassedMediaQuery=="Vertical") {

		// Quick Search
		if(document.getElementById("TblQuickSearch")) {
			document.getElementById("TblQuickSearch").innerHTML=document.getElementById("TblQuickSearch").innerHTML.replace(/<td /g,'</tr><tr class="Dummy"><td ');
		}

		// OptionsView
		if(document.getElementById("OptionsViewBR1")) {
			document.getElementById("OptionsViewBR1").innerHTML="<br>";
		}
		if(document.getElementById("OptionsViewBR2")) {
			document.getElementById("OptionsViewBR2").innerHTML="<br>";
		}

		// Main Table
		if(document.getElementById("MainTable")) {
			MainTableInnerHTML=document.getElementById("MainTable").innerHTML;
		}
		var FixedHeaderRows=document.getElementsByClassName("FixedHeader");
		if(FixedHeaderRows && FixedHeaderRows.length==0) { // Microsoft Edge
			if(document.getElementById('MainTable')) {
				FixedHeaderRows[0]=document.getElementById('MainTable').rows[0];
			}
		}
		if(FixedHeaderRows) {
			var RealHeader=FixedHeaderRows[0];
			if(!RealHeader && !document.getElementById("tblPageThrowDisplay")) { // May be, Zero Rows Retrieved
				return;
			}
			var RealHeaderTDs;
			if(RealHeader) {
				if(RealHeader.cells) {
					RealHeaderTDs=RealHeader.cells;
				} else if(RealHeader.children) {  // Microsoft Edge
					RealHeaderTDs=RealHeader.children;
				} else {
					// I don't know 
				}
			}
		}
		var DataRows;
		if(document.getElementById("MainTable")) {
			DataRows=document.getElementById("MainTable").rows;
		}

		if(DataRows){
			var NewMainTableInnerHTML='';
			NewMainTableInnerHTML+="<table>";
// Blocks further rendering :( unreliable			alert(OptionsViewStringResponsive);

			for(var i=0; i<DataRows.length; i++) {
				var Row=DataRows[i];
				if(!Row.id.startsWith("MainTableRow")) { // Header rows
					continue;
				}
				var RowTDs;
				if(Row.cells) {
					RowTDs=Row.cells;
				} else if(Row.children) {  // Microsoft Edge
					RowTDs=Row.children;
				} else {
					// I don't know 
				}
				NewMainTableInnerHTML+="<tr><td><table width='100%' cellspacing=1 border=0>";
				OldCheckBoxColumn='<td class=Footer colspan=2>&nbsp;</td>';

				for(var j=0;j<RowTDs.length; j++) {
					NewMainTableInnerHTML+="<tr>";
					if(RealHeaderTDs[j].id=="CheckBox") {
						var OptionsViewStringToAdd='';
						if(OptionsViewStringResponsive.length>5) {
							OptionsViewStringToAdd=" [ "+RowTDs[j].innerHTML+' &#x1f846 '+OptionsViewStringResponsive+" ]";
						}
						OldCheckBoxColumn="<td class='Header' colspan=2>"+OptionsViewStringToAdd+"</td>"; // It had got set in the OptionsView.php
					} else {
						NewMainTableInnerHTML+=RealHeaderTDs[j].outerHTML;
						NewMainTableInnerHTML+=RowTDs[j].outerHTML;
					}
					NewMainTableInnerHTML+="</tr>";
				}
				NewMainTableInnerHTML+="<tr>"+OldCheckBoxColumn+"</tr></table></td></tr>";
			}
			NewMainTableInnerHTML+="</table>";
			document.getElementById("MainTable").innerHTML=NewMainTableInnerHTML;

			ResizeHeader();
			// irrelevant window.setTimeout("PMA_markRowsInit();", 500); // Mouseover to Rows, Doubleclick to Update

			document.getElementById('legendTable').width="100%";
			if(document.getElementById('divTable').style.overflow = "scroll") {
				ToggleViewHeight();
			}
		}

		// Page Throw
		if(document.getElementById("tblPageThrowDisplay")) {
			tblPageThrowDisplayInnerHTML=document.getElementById("tblPageThrowDisplay").innerHTML;
		}
		var PageThrowDataRows=document.getElementById("tblPageThrowDisplay").rows;
		if(PageThrowDataRows){
			var NewtblPageThrowDisplayInnerHTML='';
			for(var i=0; i<PageThrowDataRows.length; i++) {
				var PageThrowCells=PageThrowDataRows[i].cells;
				for(var j=0; j<PageThrowCells.length; j++) {
					NewtblPageThrowDisplayInnerHTML+='<tr>'+PageThrowCells[j].outerHTML+'</tr>';
				}
			}
			document.getElementById("tblPageThrowDisplay").innerHTML=NewtblPageThrowDisplayInnerHTML;
		}
	} else {
		// Quick Search
		if(document.getElementById("TblQuickSearch")) {
			document.getElementById("TblQuickSearch").innerHTML=document.getElementById("TblQuickSearch").innerHTML.replace(/<\/tr><tr class="Dummy"><td /g,'<td ');
		}
		// OptionsView
		if(document.getElementById("OptionsViewBR1")) {
			document.getElementById("OptionsViewBR1").innerHTML="";
		}
		if(document.getElementById("OptionsViewBR2")) {
			document.getElementById("OptionsViewBR2").innerHTML="";
		}
		// Main Table
		if(document.getElementById("MainTable") && MainTableInnerHTML.length > 0) {
			document.getElementById("MainTable").innerHTML=MainTableInnerHTML;
		}
		// Page Throw
		if(document.getElementById("tblPageThrowDisplay") && tblPageThrowDisplayInnerHTML.length > 0) {
			document.getElementById("tblPageThrowDisplay").innerHTML=tblPageThrowDisplayInnerHTML;
		}
		if(typeof(PMA_markRowsInit)!=="undefined") {
			window.setTimeout("PMA_markRowsInit();", 500); // Mouseover to Rows, Doubleclick to Update
		}
	}
}

var QuickSearchTableShut=false;
var QuickSearchTableInnerHTML='';
function ToggleQuickSearchTable() {
	var QuickSearchTable = document.querySelector('#TblQuickSearch');
	var Style = getComputedStyle(QuickSearchTable);
	if(QuickSearchTableShut) {
		document.getElementById('TblQuickSearch').innerHTML=QuickSearchTableInnerHTML;
		QuickSearchTableInnerHTML='';
	} else {
		QuickSearchTableInnerHTML=document.getElementById('TblQuickSearch').innerHTML;
		document.getElementById('TblQuickSearch').innerHTML='';
	}
	QuickSearchTableShut=!QuickSearchTableShut;
}

function ReadOnly(FieldList) {
	if(FieldList=='' || FieldList==null) {
		return;
	}
	if(!objForm) {
		return;
	}
	var Fields = FieldList.split(",");
	var ReadOnly=" ReadOnly onclick=\"alert('This field is Read-Only. Current Contents are: '+this.value);this.blur();\" style=\"background-color: #D8D8D8; color: #888888; \" ";
	for(var i=0; i < Fields.length; i++) {
		if(!document.getElementById(Fields[i])) {
			continue;
		}
		var Field=document.getElementById(Fields[i].trim());
		// alert(Field.type);
		var FieldType = Field.type.toLowerCase();
		if(FieldType == "hidden") {
			continue;
		}
		if(FieldType == "text" || FieldType == "password" || FieldType == "textarea") {
			Field.outerHTML=Field.outerHTML.replace('>',ReadOnly+'>');
		} else if(FieldType.substr(0, 6) == "select") {
			var outerHTML=Field.outerHTML;
			var EndSelect=outerHTML.indexOf('>');
			outerHTML=outerHTML.substring(0, EndSelect);
			outerHTML=outerHTML.replace("select", 'input type="text" ');
			outerHTML+=ReadOnly;
			outerHTML+=' value="'+Field[Field.selectedIndex].value+'" ';
			outerHTML+=' class=NarrowField ';
			outerHTML+='>';
			// alert(outerHTML);
			Field.outerHTML=outerHTML;
		} 
	}
}

function StopRinger(Id) {
	if(document.getElementById(Id)) {
		document.getElementById(Id).pause();
	}
}

function TriggerRinger(URL) {
	window.location.href=URL;
}

function ShowLength(Element, Show=true /* passed from Validate.js.php */, MaxLength=1) {
	if(document.getElementById("lng"+Element.name)) {
		if(!Show && !document.getElementById("lng"+Element.name).innerHTML.startsWith("&gt;")) {
			document.getElementById("lng"+Element.name).innerHTML='';
			// document.getElementById("lngimg"+Element.name).width="1";
			// document.getElementById(Element.name).style.borderBottomColor="black";
		} else {
			document.getElementById("lng"+Element.name).innerHTML=Element.value.length;
			if(Element.value.length>MaxLength) {
				document.getElementById("lng"+Element.name).innerHTML="&gt;"+Element.value.length;
				document.getElementById("lng"+Element.name).classList.add("Error");
				document.getElementById("lng"+Element.name).classList.remove("Note");
			} else {
				document.getElementById("lng"+Element.name).classList.remove("Error");
				document.getElementById("lng"+Element.name).classList.add("Note");
			}
			// document.getElementById("lngimg"+Element.name).width=10*Element.value.length;
			// document.getElementById(Element.name).style.borderBottomColor="white";
		}
		if(!Show && document.getElementById("lng"+Element.name).innerHTML.startsWith("&gt;")) {
			document.getElementById("lng"+Element.name).innerHTML='<img src="Images/Cut.png">';
		}
	}
}

function PopUpSQLPopulate(CascadedField, MyFilterEntity, MyFilterField, MyFilterValue) {
	document.getElementById('Hidden__RemoteEntity__'+CascadedField).value=MyFilterEntity;
	document.getElementById('Hidden__RemoteField__'+CascadedField).value=MyFilterField;
	document.getElementById('Hidden__Value__'+CascadedField).value=MyFilterValue;
}

function PopUpSQL(FormField, FieldString, ThisEntity, MyFilterEntity, MyFilterField, MyFilterValue) {

	var s=""
		+"FormField="+FormField+"&"
		+"FieldString="+FieldString+"&"
		+"Entity="+ThisEntity+"&"
		+"FilterEntity="+MyFilterEntity.value+"&"
		+"FilterField="+MyFilterField.value+"&"
		+"FilterValue="+MyFilterValue.value;		

	window.open("Includes/PopUpSQL.php?"+s, "PopUpSQL", "width=500,height=400");
}

function Personalize(Param, ParamValue) {
	if(!document.getElementById('Result')) {
		var result=document.createElement("div");
		result.id='Result';
		result.cssClass='Shadow';
		document.body.appendChild(result);
		result.style.display='inline-block';
		result.style.position='absolute';
		result.style.top=150;
		result.style.left=innerWidth-300;
	}
	AjaxTarget('Result', 'Includes/Personalize.php?Parameter='+encodeURIComponent(Param)+'&ParameterValue='+encodeURIComponent(ParamValue));
	AutoHideIntervalPersonalize=window.setInterval("AutoHide('Personalize', 'AutoHidePersonalize', 'AutoHideIntervalPersonalize');", 1000);
}
var AutoHideIntervalPersonalize;

function AutoHide(Container, CountdownField, IntervalString) { 
	if(!document.getElementById(Container) || !document.getElementById(CountdownField)) {
		return;
	}
	// alert(Container); alert(CountdownField); // Note, these are **STRINGS**
	// alert(IntervalString);
	// alert(eval(IntervalString));
	document.getElementById(CountdownField).value=parseInt(document.getElementById(CountdownField).value)-1;
	if(parseInt(document.getElementById(CountdownField).value)<=0) {
		document.getElementById(Container).innerHTML='';
		document.getElementById(Container).style.display='none';
		window.clearInterval(eval(IntervalString));
	}
} 

function ManualHide(Container) { 
	document.getElementById(Container).innerHTML='';
	document.getElementById(Container).style.display='none';
}

var SaveRow_RowNumber=''; // Lock -- ajax.js contains xmlHttp, which is GLOBAL variable.
function SaveRow(RowNumber) {
	if(!objForm) {
		alert('Missing objForm.');
		return;
	}
	if(!document.getElementById('FieldList')) {
		alert('FieldList not defined as Hidden form element.');
		return;
	}
	if(!document.getElementById('Save'+RowNumber)) {
		alert('Save button disappeared!');
		return;
	}
	if(document.getElementById('Save'+RowNumber).classList.contains("Dull")) {
		alert('Already Pressed. Please be patient.');
		return;
	}
	if(SaveRow_RowNumber!='') { // NOTE - ajax.js --> xmlHttp is a GLOBAL variable. 
		// .. and I don't know how to make it Local!!! 
		// .. maybe I am NEW to Programming! Just completed 26 years IN CAREER! 
		alert('Previous Row not yet saved. Please WAIT.');
		return;
	}
	SaveRow_RowNumber=RowNumber; // lock
	document.getElementById('Save'+RowNumber).classList.add("Dull");
	document.getElementById('Save'+RowNumber).classList.add("AjaxUnderProgress");

	var OneRowForm=document.createElement('form');
	OneRowForm.method='POST';
	
	var OneElement=document.createElement('input');
	OneElement.name="RowNumber";
	OneElement.value=RowNumber;
	OneRowForm.appendChild(OneElement);

	OneElement=document.createElement('input');
	OneElement.name="AjaxTask";
	OneElement.value="SaveRow";
	OneRowForm.appendChild(OneElement);
	
	var Fields=document.getElementById('FieldList').value.split(',');
	for(iFields=0; iFields<Fields.length; iFields++) {
		// alert(Fields[iFields]);
		OneElement=document.createElement('input');
		OneElement.name=Fields[iFields];
		if(!eval("objForm."+Fields[iFields]+RowNumber)) {
			continue;
		}
		if(!eval("objForm."+Fields[iFields]+RowNumber+".type")) {
			continue;
		}
		var OneField=eval("objForm."+Fields[iFields]+RowNumber);
		// alert(OneField.type);
		if(OneField.type.includes('select')) {
			OneElement.value=OneField[OneField.selectedIndex].value;
		} else if(OneField.type.includes('SOMETHING ELSE')) { // ToDo
			// ToDo - support for Select MANY, Radio, ...
		} else if(OneField.type.includes('checkbox')) {
			if(OneField.checked) {
				OneElement.value=OneField.value;
			}
		} else {
			OneElement.value=eval("objForm."+Fields[iFields]+RowNumber+".value");
		}
		OneField.classList.add("Dull");
		OneRowForm.appendChild(OneElement);
	}
		
	AjaxSend(ThisProgram, OneRowForm, 'ReceiveSaveRow');
	
	// Focusing next row immediately
	var NextRowNumber=parseInt(RowNumber)+1;
	var Fields=document.getElementById('FieldList').value.split(',');
	for(iFields=0; iFields<Fields.length; iFields++) {
		if(!eval("objForm."+Fields[iFields]+RowNumber)) {
			continue;
		}
		if(!eval("objForm."+Fields[iFields]+RowNumber+".type")) {
			continue;
		}
		if(document.getElementById(Fields[iFields]+NextRowNumber)) {
			document.getElementById(Fields[iFields]+NextRowNumber).focus();
			document.getElementById(Fields[iFields]+NextRowNumber).select();
			break;
		}
	}
}
function ReceiveSaveRow(Response) {
	SaveRow_RowNumber=''; // unlock
	Response=unescape(Response);
	try {
		var Result=JSON.parse(Response);
	} catch(e) {
		alert(unescape(Response));
		return;
	}
	if(!Result.RowNumber) {
		alert("No RowNumber: "+Response);
		return;
	}	
	var SaveButton=document.getElementById('Save'+Result.RowNumber);
	SaveButton.classList.remove("Dull");
	SaveButton.classList.remove("AjaxUnderProgress");
	SaveButton.classList.add(Result.Type); // Message, Error, Warning, Note, etc.
	if(Result.Type!="Message") {
		SaveButton.value=Result.Message;
	} else {
		SaveButton.value="Submit";
	}
}

var WhichObjFormSubmitted;
var WhichControllerSubmitted;
var WhichPostBackSuccessFunction;

function objFormSubmit(PassedObjForm='', PassedController='') { // Standard Call for AddModify forms // Jan 2024
	if(PassedObjForm=='') {
		PassedObjForm=objForm;
	}
	var Action;
	if(PassedObjForm.action=="") {
		Action=null;
	} else {
		Action=PassedObjForm.action;
	}
	WhichObjFormSubmitted=PassedObjForm;
	WhichControllerSubmitted=PassedController;
	WhichPostBackSuccessFunction=PassedController.PostBackSuccessFunction;
	AjaxSend(Action, PassedObjForm, 'objFormSubmitReceive');
}

function objFormSubmitReceive(Response) {
	// alert(WhichObjFormSubmitted);
	console.log(WhichObjFormSubmitted);
	console.log(WhichControllerSubmitted);
	console.log(WhichPostBackSuccessFunction);
	
	var Result;
	FormAlreadySubmitted = false;
	if(typeof(WhichObjFormSubmitted.ResultTarget)=='undefined') {
		var ResultTarget=document.getElementById('Result');
	} else {
		var ResultTarget=WhichObjFormSubmitted.ResultTarget.value;
		if(ResultTarget!="") {
			ResultTarget=WhichObjFormSubmitted.querySelector("#"+ResultTarget);
		} else { // No value
			if(WhichObjFormSubmitted.querySelector("#ResultTargetInside")) {
				WhichObjFormSubmitted.ResultTarget.value="ResultTargetInside";
				ResultTarget=WhichObjFormSubmitted.querySelector("#ResultTargetInside");
				// idiot.. already submitted!!! WhichObjFormSubmitted.ResultMode.value="JSON";
			} else if(WhichObjFormSubmitted.querySelector("#ResultTargetAbove")) {
				WhichObjFormSubmitted.ResultTarget.value="ResultTargetAbove";
				ResultTarget=WhichObjFormSubmitted.querySelector("#ResultTargetAbove");
				// idiot.. already submitted!!! WhichObjFormSubmitted.ResultMode.value=""; // HTML
			} else {
				ResultTarget=document.createElement('div');
				ResultTarget.id="CreatedResultTarget";
				WhichObjFormSubmitted.ResultTarget.value="CreatedResultTarget";
				WhichObjFormSubmitted.appendChild(ResultTarget);
			}
		}
	}
	console.log(ResultTarget);
	
	if(WhichObjFormSubmitted.ResultMode.value=="JSON") {
		try {
			Result=JSON.parse(unescape(Response));
		} catch(e) {
			alert(e);
			alert(unescape(Response));
				ResultTarget.innerHTML = unescape(Response);
				document.getElementById("MainTable").parentElement.appendChild(ResultTarget);
				ResultTarget.style.position='';
			WhichObjFormSubmitted=null;
			return;
		}
		if(Result.Message && !ResultTarget) {
			alert(Result.Message);
			WhichObjFormSubmitted=null;
			return;
		}
		if(Result.Type && Result.Type=="Message") {
			if(WhichObjFormSubmitted.ResultTarget.value=="ResultTargetAbove") {
				var WipeOffs=ResultTarget.parentElement.children;
				for(var iWipeOffs=WipeOffs.length-1; iWipeOffs>=0; iWipeOffs--) {
					if(WipeOffs[iWipeOffs].dataset.resulttargetabovewipeoff=="true") {
						WipeOffs[iWipeOffs].outerHTML='';
					}
				}
			} else if(WhichObjFormSubmitted.ResultTarget.value=="ResultTargetInside") {
				var WipeOffs=ResultTarget.parentElement.children;
				for(var iWipeOffs=WipeOffs.length-1; iWipeOffs>=0; iWipeOffs--) {
					console.log(WipeOffs[iWipeOffs].dataset);
					if(WipeOffs[iWipeOffs].dataset.resulttargetinsidewipeoff=="true") {
						WipeOffs[iWipeOffs].outerHTML='';
					}
				}
			}
			ResultTarget.innerHTML = Result.Message;
			ResultTarget.classList.remove('Error');
			ResultTarget.classList.add('Message');
			ResultTarget.style.position='';
			ResultTarget.style.display='block';
			
			// *** CAUTION *** below lines functionally duplicate in CompositeResult()
			
			WhichControllerSubmitted.UniqueKey=Result.UniqueKey;
			WhichControllerSubmitted.UniqueKeyValue=Result.UniqueKeyValue;
			
			if(WhichPostBackSuccessFunction!=null && WhichPostBackSuccessFunction!='' && eval("window."+WhichPostBackSuccessFunction) && typeof(eval("window."+WhichPostBackSuccessFunction))=="function") {
				eval(WhichPostBackSuccessFunction + "();");
			}
		} else if(Result.Type && Result.Type=="Error") {
			ResultTarget.innerHTML = Result.Message + ResultTarget.innerHTML;
			ResultTarget.classList.add('Error');
			ResultTarget.classList.add('Height');
			ResultTarget.classList.remove('Message');
			ResultTarget.classList.remove('Warning');
			ResultTarget.style.position='';
			ResultTarget.style.display='block';
		} else {
			console.log(Result);
			console.log(Result.Type);
		}
	} else { 
		// Cannot "intelligent"ly remove Fields. It's not "known" to be successful.
		ResultTarget.innerHTML = unescape(Response) + ResultTarget.innerHTML + "&nbsp;";
		ResultTarget.style.position='';
		ResultTarget.style.display='block';
	}
	WhichObjFormSubmitted=null;
	WhichControllerSubmitted=null;
	WhichPostBackSuccessFunction=null;
}

function ViewEntitiesTemplate(SomeTemplate) {
	alert('aalo'); // testing
	if(!objForm) {
		alert('No objForm');
		return;
	}
	if(!objForm.Template) {
		var Template=document.createElement('input');
		Template.name='Template';
		Template.id='Template';
		Template.type='hidden'; // 'text' / 'hidden' for testing
		objForm.appendChild(Template);
	}
	objForm.Template.value=SomeTemplate;
	objForm.submit();
}

var ImgSrcDataFieldName='';
function PickImgSrcData(FieldName) {
  var img = document.getElementById("ImgSrcData"+FieldName);
  const openFile = async () =>  {
    const [fh] = await window.showOpenFilePicker();
    var file2 = await fh.getFile();
    var name = file2.name;
    var fr = new FileReader();
    fr.readAsDataURL(file2);
    fr.onloadend = function() {
      img.src = fr.result;
	  ImgSrcDataFieldName=FieldName;
	  window.setTimeout("ResizeImgSrcData();", 1000);
	  document.getElementById(FieldName).value=fr.result;
    }
  }
  const file = openFile();
  /*
  return img;
  */
}
function ResizeImgSrcData(PassedImgSrcDataFieldName=null) {
	if(PassedImgSrcDataFieldName!=null) {
		ImgSrcDataFieldName=PassedImgSrcDataFieldName;
	}
	var img=document.getElementById('ImgSrcData'+ImgSrcDataFieldName);
	var StandardImageWidth=500;
	var MinimumImageWidth=100;
	if(img.naturalWidth>StandardImageWidth) {
		img.width=StandardImageWidth;
		img.height=img.naturalHeight*StandardImageWidth/img.naturalWidth;
		img.style.width=StandardImageWidth+"px";
		img.style.height=(img.naturalHeight*StandardImageWidth/img.naturalWidth)+"px";
	} else if(img.naturalWidth<10){
		img.width=MinimumImageWidth;
		img.height=img.naturalHeight*MinimumImageWidth/img.naturalWidth;
		img.style.width=MinimumImageWidth+"px";
		img.style.height=(img.naturalHeight*MinimumImageWidth/img.naturalWidth)+"px";
	} else {
		img.width=img.naturalWidth;
		img.height=img.naturalHeight;
		img.style.width=img.naturalWidth+"px";
		img.style.height=img.naturalHeight+"px";
	}
}

function SelectText(Element) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(Element);
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(Element);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

var DivLightBoxOverLay;
var OpenLightBoxConfirmationMessage=null;
var OpenLightBoxURL=null;

function OpenLightBox(URL, ConfirmMessage=null) {
	// console.log(URL);
	if(DivLightBoxOverLay && DivLightBoxOverLay.id) {
		DivLightBoxOverLay.dispatchEvent(new Event('click')); // Empty
	}
	DivLightBoxOverLay=document.createElement('div');
	DivLightBoxOverLay.id='DivLightBoxOverLay';
	DivLightBoxOverLay.style.position='fixed'; // absolute
	DivLightBoxOverLay.style.display='none';
	DivLightBoxOverLay.style.zIndex='80';
	DivLightBoxOverLay.style.backgroundColor='#22222288';
	DivLightBoxOverLay.style.width=window.innerWidth-20;
	DivLightBoxOverLay.style.height=window.innerHeight-20;	
	DivLightBoxOverLay.style.left = 10+"px"; // 0-document.body.getBoundingClientRect().left+
	DivLightBoxOverLay.style.top = 10+"px"; // 0-document.body.getBoundingClientRect().top+
	DivLightBoxOverLay.onclick=function(event) {
		if(event.target && 
			event.target.tagName && event.target.tagName.toLowerCase()=='div' && 
			event.target.id && event.target.id=='DivLightBoxOverLay') 
		{
			DivLightBoxOverLay.style.display='none';
			DivLightBoxOverLay.outerHTML=''; // Removed from DOM. So next time appendChild doesn't create duplicate!
		}
	}
	
	document.body.appendChild(DivLightBoxOverLay);
	DivLightBoxOverLay.style.display = "inline-block";
	OpenLightBoxConfirmationMessage=ConfirmMessage;
	OpenLightBoxURL=URL;
	window.setTimeout("OpenLightBoxConfirmation();", 250);
}
var iFrameLightBoxOverLay;
function OpenLightBoxConfirmation() {
	if(OpenLightBoxConfirmationMessage!=null) {
		if(!confirm(OpenLightBoxConfirmationMessage)) {
			DivLightBoxOverLay.dispatchEvent(new Event('click'));
			return;
		}
	}
	iFrameLightBoxOverLay=document.createElement('iframe');
	iFrameLightBoxOverLay.src=OpenLightBoxURL;
	iFrameLightBoxOverLay.style.overflow='hidden';
	iFrameLightBoxOverLay.style.position='absolute';
	// iFrameLightBoxOverLay.style.width=(parseInt(DivLightBoxOverLay.style.width)-60)+'px';
	// iFrameLightBoxOverLay.style.height=(parseInt(DivLightBoxOverLay.style.height)-60)+'px';	
	iFrameLightBoxOverLay.style.width='200px';
	iFrameLightBoxOverLay.style.height='200px';	
	iFrameLightBoxOverLay.style.left = "30px";
	iFrameLightBoxOverLay.style.top = "30px";
	// iFrameLightBoxOverLay.setAttribute("scrolling", "no");
	DivLightBoxOverLay.appendChild(iFrameLightBoxOverLay);
	ResizeLightBoxIFrame();
	// AjaxSend(OpenLightBoxURL, null, DivLightBoxOverLay);
}

function ResizeLightBoxIFrame(MinWidth=0, MinHeight=0) {
	
	if(!iFrameLightBoxOverLay && window.parent && window.parent.iFrameLightBoxOverLay) { // Called from xxxResponsive functions from within the IFrame!!!
		iFrameLightBoxOverLay=window.parent.iFrameLightBoxOverLay;
	}
	if(!DivLightBoxOverLay && window.parent && window.parent.DivLightBoxOverLay) {
		DivLightBoxOverLay=window.parent.DivLightBoxOverLay;
	}
	if(!iFrameLightBoxOverLay || !DivLightBoxOverLay) { // Not opened inside the LightBox. Is an ORDINARY window.
		return;
	}
	iFrameLightBoxOverLay.style.width=iFrameLightBoxOverLay.contentWindow.document.body.scrollWidth+20+'px';
	iFrameLightBoxOverLay.style.height=iFrameLightBoxOverLay.contentWindow.document.body.scrollHeight+20+'px';
	if(parseInt(iFrameLightBoxOverLay.style.width) > parseInt(DivLightBoxOverLay.style.width)-20) {
		iFrameLightBoxOverLay.style.width=(parseInt(DivLightBoxOverLay.style.width)-20)+"px";
	}
	if(parseInt(iFrameLightBoxOverLay.style.height) > parseInt(DivLightBoxOverLay.style.height)-20) {
		iFrameLightBoxOverLay.style.height=(parseInt(DivLightBoxOverLay.style.height)-20)+"px";
	}
	if(parseInt(iFrameLightBoxOverLay.style.width) < MinWidth) {
		iFrameLightBoxOverLay.style.width=MinWidth+"px";
	}
	if(parseInt(iFrameLightBoxOverLay.style.height) < MinHeight) {
		iFrameLightBoxOverLay.style.height=MinHeight+"px";
	}
	iFrameLightBoxOverLay.style.left=((parseInt(DivLightBoxOverLay.style.width)-parseInt(iFrameLightBoxOverLay.style.width))/2)+"px";
	iFrameLightBoxOverLay.style.top=((parseInt(DivLightBoxOverLay.style.height)-parseInt(iFrameLightBoxOverLay.style.height))/2)+"px";
}

function SubmitDrillDownSearch(ParentRow) {
	ForceSubmitDrillDown=true;
	if(ParentRow=='') {
		document.DrillDownSellers.DrillDownLevel.value='0';
		document.getElementById('ParentRow').value=ParentRow;
		// how is it that NewDrillDownRequestFilters and ChildrenContainer are not required to resetted here?
		// anyways, it's working, so let it work!!
		document.DrillDownSellers.submit();
	} else {
		document.getElementById('a'+ParentRow).dispatchEvent(new MouseEvent('click'));
	}
}
var ForceSubmitDrillDown=false;
function SubmitDrillDown(NewDrillDownLevel, NewDrillDownRequestFilters, ParentRow, ChildrenContainer) {
	if(!ForceSubmitDrillDown && document.getElementById(ChildrenContainer).innerHTML.length>50) {
		document.getElementById(ChildrenContainer).innerHTML='<!--NonEmptyInnerHTML-->'; // Toggle
		return;
	}
	document.getElementById('DrillDownLevel').value=NewDrillDownLevel;
	document.getElementById('NewDrillDownRequestFilters').value=NewDrillDownRequestFilters;
	document.getElementById('ParentRow').value=ParentRow;
	document.getElementById('ChildrenContainer').value=ChildrenContainer;
	AjaxSend('#', document.DrillDownSellers, ChildrenContainer);
	ForceSubmitDrillDown=false;
}

function HighLightField(field) {
	if(typeof(field)=="string") field=document.getElementById(field);
	field.classList.add('Bright');
	if(document.getElementById('LabelContainer'+field.id)) {
		document.getElementById('LabelContainer'+field.id).classList.add('Bright');
	}
	
//	window.setTimeout(field.classList.remove('Bright'), 5000);
}

// I think the function below should go to SDesigner/Includes/iBlinkTools.js.php but I am NOT sure how it relates to different between TechAdmin and UIUXAdmin Roles.

function CloneFormFields2UIUX(SDPageID, AllFieldsUIUX) {
	var UIUXFields=AllFieldsUIUX.split(",");
	for(var iUIUXFields=0; iUIUXFields<UIUXFields.length; iUIUXFields++) {
		// console.log(document.getElementById(UIUXFields[iUIUXFields]));
		if(!document.getElementById(UIUXFields[iUIUXFields])){
			continue;
		}
		var OneField=document.getElementById(UIUXFields[iUIUXFields]).cloneNode(true);
		var SDFieldSpan=this.parent.document.getElementById('SDField__'+SDPageID+'__'+OneField.id);
		if(SDFieldSpan==null) {
			console.log("NULL found for field");
			console.log(SDFieldSpan);
			continue;
		}
		OneField.id="SDPage"+SDPageID+"__SDField__"+OneField.id;
		OneField.classList.add(SDFieldSpan.getAttribute('SDFieldCSSClass'));
		var CurrentOnchange=OneField.getAttribute('onchange');
		if(CurrentOnchange==null) {
			CurrentOnchange="";
		}
		CurrentOnchange=""; // ValidateField of iFrame is troubling
		OneField.setAttribute('onchange', CurrentOnchange+"document.getElementById('SDPageWidget"+SDPageID+"').contentWindow.CopySDFieldValue2Form(this);");
		SDFieldSpan.appendChild(OneField);
	}
}

function CopySDFieldValue2Form(Source) {
	var SourceId=Source.id;
	var RegEx=/(.*)__SDField__/;
	var FormFieldId=Source.id.replace(RegEx, "");
	console.log(Source.tagName.toLowerCase());
	if(Source.tagName.toLowerCase()=="select") {
		document.getElementById(FormFieldId)[Source.selectedIndex].selected=true;
	} else {
		document.getElementById(FormFieldId).value=Source.value;
	}
}

function CloneResult2UIUX(TargetContainerId) {		
	this.parent.document.getElementById(TargetContainerId).innerHTML=this.getElementById('Result').innerHTML;
	alert('q');
}

function AddModifyVisibility() {
	var AddModifyVisibility=document.getElementById('AddModifyVisibility').value;
	if(typeof(AllFields)==='undefined') return;
	
	if(AddModifyVisibility=="All") {
		document.getElementById('AddModifyVisibilityMust').classList.remove("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityMust').classList.add("VisibilityIconOn");
		document.getElementById('AddModifyVisibilityMay').classList.remove("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityMay').classList.add("VisibilityIconOn");
		document.getElementById('AddModifyVisibilityAll').classList.remove("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityAll').classList.add("VisibilityIconOn");
	} else if(AddModifyVisibility=="May") {
		document.getElementById('AddModifyVisibilityMust').classList.remove("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityMust').classList.add("VisibilityIconOn");
		document.getElementById('AddModifyVisibilityMay').classList.remove("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityMay').classList.add("VisibilityIconOn");
		document.getElementById('AddModifyVisibilityAll').classList.add("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityAll').classList.remove("VisibilityIconOn");
	} else if(AddModifyVisibility=="Must") {
		document.getElementById('AddModifyVisibilityMust').classList.remove("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityMust').classList.add("VisibilityIconOn");
		document.getElementById('AddModifyVisibilityMay').classList.add("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityMay').classList.remove("VisibilityIconOn");
		document.getElementById('AddModifyVisibilityAll').classList.add("VisibilityIconOff");
		document.getElementById('AddModifyVisibilityAll').classList.remove("VisibilityIconOn");
	} else {
		console.log("AddModifyVisibility '"+AddModifyVisibility+"' is Yet Unprogrammed");
	}

	var arrAllFields=AllFields.split(',');
	var AllMandatoryPadded = ','+AllMandatory+',';
	
	for(iAllFields=0; iAllFields<arrAllFields.length; iAllFields++) {
		if(!document.getElementById(arrAllFields[iAllFields])) {
			continue;
		}
		var OneField=arrAllFields[iAllFields];
		if(AddModifyVisibility=="All") {
			ShowHideField(OneField, 'Show');
		} else if(AddModifyVisibility=="Must") {
			if(AllMandatoryPadded.indexOf(','+OneField+',')>-1) {
				ShowHideField(OneField, 'Show');
			} else {
				ShowHideField(OneField, 'Hide');
			}
		} else if(AddModifyVisibility=="May") {
			if(AllMandatoryPadded.indexOf(','+OneField+',')>-1) {
				ShowHideField(OneField, 'Show');
			} else if(document.getElementById(OneField).classList.contains("Dull")) {
				ShowHideField(OneField, 'Hide');
			} else {
				ShowHideField(OneField, 'Show');
			}
		}
	}
}

function ShowHideField(FieldName, ShowOrHide) {
	if(ShowOrHide=='Show') {
		document.getElementById('LabelContainer'+FieldName)		.style.opacity="100%";
		document.getElementById('MandatoryContainer'+FieldName)	.style.opacity="100%";
		document.getElementById('FieldContainer'+FieldName)		.style.opacity="100%";
		document.getElementById('ToolTipContainer'+FieldName)	.style.opacity="100%";
		document.getElementById('ValidationContainer'+FieldName).style.opacity="100%";
	} else if(ShowOrHide=='Hide') {
		document.getElementById('LabelContainer'+FieldName)		.style.opacity="0%";
		document.getElementById('MandatoryContainer'+FieldName)	.style.opacity="0%";
		document.getElementById('FieldContainer'+FieldName)		.style.opacity="0%";
		document.getElementById('ToolTipContainer'+FieldName)	.style.opacity="0%";
		document.getElementById('ValidationContainer'+FieldName).style.opacity="0%";
	} else {
		console.log(ShowOrHide+" was unexpected regarding Show or Hide");
	}
}

function Select(DropDown, Value) {
	if(typeof(DropDown)=="string") DropDown=document.getElementById(DropDown);
	if(!DropDown) return;
	for(var i=0; i < DropDown.length; i++) {
		if(DropDown[i].value==Value) {
			DropDown.selectedIndex=i;
			if(HighLightField) HighLightField(DropDown);
			return;
		}
	}
}
function Input(Field, Value) {
	if(typeof(Field)=="string") Field=document.getElementById(Field);
	if(!Field) return;
	if(Field.value=="") {
		Field.value=Value;
	}
	if(HighLightField) HighLightField(Field);
}
function Checkbox(Field, Value) {
	if(typeof(Field)=="string") Field=document.getElementById(Field);
	if(!Field) return;
	if(Value=="checked" || Value==true || Value=="true") {
		Value=true;
	} else {
		Value=false;
	}
	Field.checked=Value;
	if(HighLightField) HighLightField(Field);
}

var CompositeForm; // FormData()'s
var CompositeForms=[]; // Array of Forms
var CompositeControllersSubmitted=[]; // Array of Controllers
var CompositeForm_OneFormName;
var CompositeForm_OneAllFields;
var CompositeFetch;
var CompositeResponse;
var CompositeButton;
async function ValidateCompositePage(StartAtController=-1, EndAtController=-1, ButtonNumber='', View='', SubmitType='Fetch') {
	if(typeof(ControllerObjects)=='undefined') {
		alert('No ControllerObjects founds');
		return;
	}
	// console.log(ControllerObjects);
	if(StartAtController==-1) {
		StartAtController=0;
	}
	if(EndAtController==-1) {
		EndAtController=ControllerObjects.length;
	}
	for(iControllerObjects=StartAtController; iControllerObjects <= EndAtController; iControllerObjects++) {
		var OneControllerObject=ControllerObjects[iControllerObjects];
		if(typeof(OneControllerObject.ValidateFunction)=='function') {
			if(!OneControllerObject.ValidateFunction(false)) {
				console.log(OneControllerObject.objForm.name + " returned false");
				return;
			}
		}
	}
	// Bundle-up
	// var SubmitType="Submit" /*Fetch, AjaxSend, Submit*/; // Testing
	
	if(SubmitType=="Fetch") {
		CompositeForm=new FormData();
		if(View=='') { View='2'; }
		CompositeForm.append('View', View);
		CompositeForm.append('SubmitMode', 'Ajax');
		CompositeForm.append('ResultMode', 'JSON');
		CompositeForm.append('ResultTarget', 'ResultTargetInside');

		var frmCompositeSubmit=document.getElementById('frmCompositeSubmit'+ButtonNumber);
		CompositeForms=[]; CompositeControllersSubmitted=[];
		for(iControllerObjects=StartAtController; iControllerObjects <= EndAtController; iControllerObjects++) {
			var OneControllerObject=ControllerObjects[iControllerObjects];
			CompositeForm_OneFormName=OneControllerObject.objForm.name;
			CompositeForms[CompositeForms.length]=OneControllerObject.objForm;
			CompositeControllersSubmitted[CompositeControllersSubmitted.length]=OneControllerObject;
			CompositeForm_OneAllFields=OneControllerObject.AllFields;
			console.log(CompositeForm_OneFormName);
			
			var OneFormData=new FormData(OneControllerObject.objForm);
			CompositeForm.append('Forms[]', CompositeForm_OneFormName);
			CompositeForm.append(CompositeForm_OneFormName+'__AllFields', CompositeForm_OneAllFields);
			
			OneFormData.forEach(
				function(FieldValue, FieldName, FormDataObject) { 
					// console.log(CompositeForm_OneFormName);
					CompositeForm.append(CompositeForm_OneFormName+'__'+FieldName, FieldValue);
				} 
			);

		}
		// console.log(frmCompositeSubmit);
		// Submit
		console.log(CompositeForm);
		
		CompositeFetch=await fetch(frmCompositeSubmit.action, { method: "POST", body: CompositeForm, }); 
		CompositeResponse=await CompositeFetch.text();
		CompositeResult(CompositeResponse, ButtonNumber);

		console.log(CompositeResponse);
		
	} else if(SubmitType="Submit") {
		
		var frmCompositeSubmit=document.getElementById('frmCompositeSubmit'+ButtonNumber);
		frmCompositeSubmit.method='POST';
		CompositeForms=[];
		for(var iFormElements=frmCompositeSubmit.elements.length-1; iFormElements>=0; iFormElements--) {
			frmCompositeSubmit.elements[iFormElements].remove();
		}
		if(View=='') { View='2'; }
		// CompositeForm.append('View', View);
		var t=document.createElement('input'); t.name='View'; t.type='hidden';  t.value=View; frmCompositeSubmit.appendChild(t);
		// CompositeForm.append('SubmitMode', 'Ajax');
		var t=document.createElement('input'); t.name='SubmitMode'; t.type='hidden';  t.value=''; frmCompositeSubmit.appendChild(t);
		// CompositeForm.append('ResultMode', 'JSON');
		var t=document.createElement('input'); t.name='ResultMode'; t.type='hidden';  t.value=''; frmCompositeSubmit.appendChild(t);
		// CompositeForm.append('ResultTarget', 'ResultTargetInside');
		var t=document.createElement('input'); t.name='ResultTarget'; t.type='hidden';  t.value=''; frmCompositeSubmit.appendChild(t);
		
		for(iControllerObjects=StartAtController; iControllerObjects <= EndAtController; iControllerObjects++) {
			var OneControllerObject=ControllerObjects[iControllerObjects];
			CompositeForm_OneFormName=OneControllerObject.objForm.name;
			CompositeForms[CompositeForms.length]=OneControllerObject.objForm;
			CompositeForm_OneAllFields=OneControllerObject.AllFields;
			console.log(CompositeForm_OneFormName);
			
			// var OneFormData=new FormData(OneControllerObject.objForm);
			var OneFormElements=OneControllerObject.objForm.elements;

			// CompositeForm.append('Forms[]', CompositeForm_OneFormName);
			var t=document.createElement('input'); t.type='hidden'; t.name='Forms[]'; t.value=CompositeForm_OneFormName; frmCompositeSubmit.appendChild(t);
			
			// CompositeForm.append(CompositeForm_OneFormName+'__AllFields', CompositeForm_OneAllFields);
			var t=document.createElement('input'); t.name=CompositeForm_OneFormName+'__AllFields'; t.type='hidden';  t.value=CompositeForm_OneAllFields; frmCompositeSubmit.appendChild(t);
			
			/*
			OneFormData.forEach(
				function(FieldValue, FieldName, FormDataObject) { 
					// console.log(CompositeForm_OneFormName);
					CompositeForm.append(CompositeForm_OneFormName+'__'+FieldName, FieldValue);
				} 
			);
			*/
			console.log(OneFormElements);
			for(var iFormElements=OneFormElements.length-1; iFormElements>=0; iFormElements--) {
				var OneChild=OneFormElements[iFormElements];
				if(OneChild.nodeName.toLowerCase()=="fieldset") continue;
				OneChild.name=CompositeForm_OneFormName+'__'+OneChild.name;
				OneChild.id=CompositeForm_OneFormName+'__'+OneChild.id;
				OneChild.value=OneChild.value;
				console.log(OneChild);
				frmCompositeSubmit.appendChild(OneChild);
			}
		}
		console.log(frmCompositeSubmit);
		frmCompositeSubmit0.submit();
	}
}

function CompositeResult(Response, ButtonNumber='') {
	var CompositeResult=document.getElementById('CompositeResult'+ButtonNumber);
	try {
		var Result=JSON.parse(Response);
	} catch(e) {
		alert("JSON Parse Error Occurred: \n\n"+Response);
		CompositeResult.innerHTML=Response;
		console.log(Response);
		return;
	}
	console.log(Result);
	console.log(CompositeForms);
	if(Result[0].Type=="Message") {
		CompositeResult.classList.add("Message");
		CompositeResult.classList.remove("Error");
		CompositeResult.innerHTML="Saved successfully";
		document.getElementById('CompositePageButton'+ButtonNumber).onclick=console.log; // dummy
		document.getElementById('CompositePageButton'+ButtonNumber).value="Saved";
		document.getElementById('CompositePageButton'+ButtonNumber).classList.add("Message");
		
	} else {
		CompositeResult.classList.remove("Message");
		CompositeResult.classList.add("Error");
		CompositeResult.innerHTML="Errors Occurred. Please scroll upwards.<br><b>Please press Save button FRESH after rectifying the Errors</b>";
	}
	var AtLeastOneCompositeFormError=false;
	for(var iCompositeForms=0; iCompositeForms<CompositeForms.length; iCompositeForms++) {
		var OneForm=CompositeForms[iCompositeForms];
		var ResultTargetInside=OneForm.querySelector("#ResultTargetInside");
		if(Result[iCompositeForms+1].Type=="Message") {
			ResultTargetInside.classList.add('Message');
			ResultTargetInside.classList.remove('Error');
		} else {
			ResultTargetInside.classList.remove('Message');
			ResultTargetInside.classList.add('Error');
			AtLeastOneCompositeFormError=true;
		}
		ResultTargetInside.innerHTML=Result[iCompositeForms+1].Message;
		ResultTargetInside.style.display='block';
	}
	
	if(!AtLeastOneCompositeFormError) {
		for(var iCompositeForms=0; iCompositeForms<CompositeForms.length; iCompositeForms++) {
			var OneForm=CompositeForms[iCompositeForms];
			// *** CAUTION *** below lines functionally duplicate in objFormSubmitReceive()
		
			CompositeControllersSubmitted[iCompositeForms].UniqueKey=Result.UniqueKey;
			CompositeControllersSubmitted[iCompositeForms].UniqueKeyValue=Result.UniqueKeyValue;
			
			if(CompositeControllersSubmitted[iCompositeForms].PostBackSuccessFunction!=null && CompositeControllersSubmitted[iCompositeForms].PostBackSuccessFunction!='' && eval("window."+CompositeControllersSubmitted[iCompositeForms].PostBackSuccessFunction) && typeof(eval("window."+CompositeControllersSubmitted[iCompositeForms].PostBackSuccessFunction))=="function") {
				eval(CompositeControllersSubmitted[iCompositeForms].PostBackSuccessFunction + "();");
			}
		}
	}
		
}

var WhoOpenedMainModal;

function OpenMainModal(WhoOpened) {
	WhoOpenedMainModal=WhoOpened;

	var MainModalWrapper = document.getElementById("MainModalWrapper");
	MainModalWrapper.style.display = "block";
	var MainModal = document.getElementById("MainModal"); // LOCAL
	MainModal.style.display = "block"; 
	MainModal.style.animation = 'MainModalOpening 0.35s'

	MainModal.style.top = event.clientY  + "px";
	MainModal.style.left = event.clientX + "px";
	MainModal.style.transform = "translate(-50%, -50%)";
	MainModal.style.animationFillMode = 'forwards';
	
	document.getElementById('MainModalBody').style.display = 'block';
	document.getElementById('MainModalClose').style.display = 'block';
}

function CloseMainModal() {
	
	// Removing inner content
	setTimeout(() => {
		document.getElementById('MainModalClose').style.display = 'none';
		document.getElementById('MainModalBody').style.display = 'none';
	}, 100);

	// Make CSS rule for "closing animation" 
	// -------------------------------------

	var WhoOpenedMainModalRect=WhoOpenedMainModal.getBoundingClientRect();
	// console.log(WhoOpenedMainModalRect.left); // e.g. 123     *NOT* 123px
	// console.log(WhoOpenedMainModalRect.top); // e.g. 123     *NOT* 123px
	var WhoOpenedMainModalRectLeft=Math.floor(WhoOpenedMainModalRect.left)+'px';
	var WhoOpenedMainModalRectTop=Math.floor(WhoOpenedMainModalRect.top)+'px';
	// event.stopPropagation(); // I think not needed. No parents likely to Catch it
	
	var CloseAnimPositions = {
		'0%': 'opacity: 1; left: '+WhoOpenedMainModalRectLeft+'; top: '+WhoOpenedMainModalRectTop+';',
		'50%': 'opacity: 0.8; background: #000; left: '+WhoOpenedMainModalRectLeft+'; top: '+WhoOpenedMainModalRectTop+';',
		'100%': 'opacity: 0.5; width: 0; height: 0; background: red; left: '+WhoOpenedMainModalRectLeft+'; top:'+WhoOpenedMainModalRectTop+';'
	};
	var AnimationName='MainModalClosingIntoSourceDynamically';
	var AnimationDuration=2000; // ms

	// Below patch makes a StyleSheet @KeyFrames construct and dynamically adds it
	var styleSheet = document.styleSheets['MainModalCSS']; // Did you know this!!!
	var keyframes = '@keyframes ' + AnimationName + ' {';
	for (var key in CloseAnimPositions) {
		keyframes += key + ' {' + CloseAnimPositions[key] + '}';
	}
	keyframes += '}';
	styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
	// End of @KeyFrames construct

	var MainModal = document.getElementById("MainModal"); // LOCAL
	MainModal.style.animation = AnimationName+' '+AnimationDuration+'ms';

	// Removing the Modal itself
	// document.body.style.overflow = 'auto'
	setTimeout(() => {
		
		var MainModalWrapper = document.getElementById("MainModalWrapper");
		MainModalWrapper.style.display = "none";
		MainModal.style.display = "none";
	}, AnimationDuration+30);

}

var MainIFrameFormObject;
function OpenMainIFrame(MainIFrameURL, AutoResize=true, FormObject=null) {
	CloseMainIFrame(); // earlier opened and not closed.
	if(document.getElementById("MainIFrame")) {
		var MainIFrame=document.getElementById("MainIFrame");
		var DivMainIFrame=document.getElementById("DivMainIFrame");
	} else {
		var MainIFrame=document.createElement('iframe');
		MainIFrame.id='MainIFrame';
		var DivMainIFrame=document.createElement('div');
		DivMainIFrame.id="DivMainIFrame";
		DivMainIFrame.style.display='none';//Just now, will be made visible after it's READY
		DivMainIFrame.style.opacity='0.1';
		
		DivMainIFrame.classList.add("Shadow");
		DivMainIFrame.style.transition='opacity 1s ease';
		
		DivMainIFrame.style.left='100px'; // Factory default!
		DivMainIFrame.style.top='100px';
		DivMainIFrame.style.position='absolute';
		DivMainIFrame.style.zIndex='100';
		DivMainIFrame.style.height='400px';
		DivMainIFrame.style.width='700px';
		DivMainIFrame.style.borderTop='1px solid white';
		DivMainIFrame.style.borderLeft='1px solid #267CB5';
		DivMainIFrame.style.borderRight='1px solid #267CB5';
		DivMainIFrame.style.borderBottom='1px solid #267CB5';
		var TableMainIFrame=document.createElement('table');
		TableMainIFrame.id="TableMainIFrame";
		TableMainIFrame.style.cellSpacing='0';
		TableMainIFrame.style.cellPadding='0';
		TableMainIFrame.style.border='1';
		TableMainIFrame.style.backgroundColor='#267CB5';
		var TR=document.createElement('tr');
		var TD=document.createElement('td');
		TD.classList.add("Header");
		TD.id="MainIFrameTitle";
		TD.style.height='15px';
		TD.style.color='white';
		TD.style.backgroundColor='#267CB5';
		TD.style.width='100%';
		TR.appendChild(TD);
		TD=null;
		TD=document.createElement('td');
		TD.style.width='10';
		TD.style.height='12';
		TD.style.textAlign='right';
		TD.style.verticalAlign='top';
		TD.style.paddingLeft='0px';
		TD.style.paddingRight='0px';
		TD.classList.add("Header");
		TD.style.backgroundColor='#267CB5';
		var A=document.createElement('a');
		A.href="javascript:CloseMainIFrame();";
		A.style.textDecoration='none';
		A.style.color='red';
		A.innerHTML='&#x274E;';
		TD.appendChild(A);
		TR.appendChild(TD);
		TableMainIFrame.appendChild(TR);
		DivMainIFrame.appendChild(TableMainIFrame);
		DivMainIFrame.appendChild(MainIFrame);
		
		document.body.appendChild(DivMainIFrame);
	}

	var StopResponsive="";
	if(!MediaQuery.matches) { // It matches just because the window has Vertical Orientation.
		if(MainIFrameURL.indexOf("?")>0) {
			var AmpOrQM="&";
		} else {
			var AmpOrQM="?";
		}
		StopResponsive=AmpOrQM+"SDOrientation=Horizontal";
	} 

	// MainIFrame.contentWindow.location.href=MainIFrameURL+StopResponsive;
	MainIFrame.src=MainIFrameURL+StopResponsive;
	var TD=document.getElementById("MainIFrameTitle");
	TD.innerHTML='<!-- some title -->';
	
	MainIFrameFormObject=FormObject;
	window.setTimeout("PlaceMainIFrame();", 500);
}

function PlaceMainIFrame() {
	if(MainIFrameFormObject!=null) {
		var FormObjectRect=MainIFrameFormObject.getBoundingClientRect(); // ViewPort
		var FormObjectRectX=FormObjectRect.x;
		var FormObjectRectY=FormObjectRect.y
		var FormObjectRectWidth=FormObjectRect.width;
		var FormObjectRectHeight=FormObjectRect.height;
	} else {
		var FormObjectRectX=cursorX;
		var FormObjectRectY=cursorY;
		var FormObjectRectWidth=500;
		var FormObjectRectHeight=20;
	}
	var BodyRect=document.body.getBoundingClientRect(); // "ground" reference
	
	var DivMainIFrame=document.getElementById("DivMainIFrame");
	var TD=document.getElementById("MainIFrameTitle");

	// Ideally the code below should lie within a Promise 
	var DivMainIFrameX=FormObjectRectX+FormObjectRectWidth-BodyRect.x+10;
	console.log(DivMainIFrameX);
	console.log(window.innerWidth/2);
	DivMainIFrame.style.display='inline-block'; // Otherwise "width" is ZERO 
	
	if(DivMainIFrameX < window.innerWidth/2) {
		DivMainIFrame.style.left=(DivMainIFrameX-BodyRect.x)+"px";
		DivMainIFrame.style.top=(FormObjectRectY-BodyRect.y)+"px";
	} else  {
		console.log(document.getElementById("DivMainIFrame").getBoundingClientRect().width);
		var DivMainIFrameStyleLeft=(DivMainIFrameX-DivMainIFrame.getBoundingClientRect().width
		);
		console.log("here");
		console.log(DivMainIFrameStyleLeft);
		if(DivMainIFrameStyleLeft<0) {
			console.log("inside if");
			DivMainIFrameStyleLeft=0;
		}
		DivMainIFrame.style.left=(DivMainIFrameStyleLeft+FormObjectRectWidth-BodyRect.x)+"px";
		DivMainIFrame.style.top=(FormObjectRectY)+"px";
	}
	MainIFrame.style.width="100px"; // Important. Provides initial baseline.
	MainIFrame.style.height="100px"; // Important. Provides initial baseline.
	MainIFrame.style.left="100px"; // Important. Provides initial baseline.
	MainIFrame.style.top="100px"; // Important. Provides initial baseline.
	DivMainIFrame.style.width="100px";
	DivMainIFrame.style.height="100px";
	window.setTimeout("ResizeMainIFrame();", 500);
}

function ResizeMainIFrame() {

	var MaxHeight=500;
	var MaxWidth=800;

	Height=MaxHeight;
	if(MainIFrame.contentWindow.document.body.scrollHeight<MaxHeight) {
		Height=MainIFrame.contentWindow.document.body.scrollHeight+20; // doesnt work MainIFrame.contentWindow.outerHeight-MainIFrame.contentWindow.innerHeight;
	}
	MainIFrame.style.height=Height+"px";

	Width=MaxWidth;
	if(MainIFrame.contentWindow.document.body.scrollWidth<MaxWidth) {
		Width=(MainIFrame.contentWindow.document.body.scrollWidth+20); // doesnt work +MainIFrame.contentWindow.outerWidth-MainIFrame.contentWindow.innerWidth
	}
	MainIFrame.style.width=Width+"px";

	var TableMainIFrame = document.getElementById("TableMainIFrame");
	TableHeight=TableMainIFrame.getBoundingClientRect().height;
	
	var DivMainIFrame = document.getElementById("DivMainIFrame");
	
	DivMainIFrame.style.height=(Height+TableHeight)+"px";
	DivMainIFrame.style.width=MainIFrame.style.width;
	window.setTimeout("document.getElementById('DivMainIFrame').style.transition='';", 2000);
	
	// Placement Rework if any
	// ------------------------
	var BodyRect=document.body.getBoundingClientRect(); // "ground" reference
	
	if(MainIFrameFormObject!=null) {
		var FormObjectRect=MainIFrameFormObject.getBoundingClientRect(); // ViewPort
		var FormObjectRectX=FormObjectRect.x;
		FormObjectRectWidth=FormObjectRect.width;
	} else {
		var FormObjectRectX=100;
		FormObjectRectWidth=500;
	}
	var DivMainIFrameX=FormObjectRectX+FormObjectRectWidth-BodyRect.x+10;

	if(DivMainIFrameX > window.innerWidth/2) {
		var DivMainIFrameStyleLeft=DivMainIFrameX-DivMainIFrame.getBoundingClientRect().width;
		if(DivMainIFrameStyleLeft<0) {
			DivMainIFrameStyleLeft=0;
		}
		DivMainIFrame.style.left=DivMainIFrameStyleLeft+"px";
	}
	DivMainIFrame.style.opacity='1';
}

function CloseMainIFrame() {
	if(document.getElementById("MainIFrameTitle")) 
		document.getElementById("MainIFrameTitle").innerHTML='';
	if(document.getElementById("DivMainIFrame")) {
		document.getElementById("DivMainIFrame").style.display='none';
		document.getElementById("DivMainIFrame").style.opacity='0';
	}
}

function FocusMainIFrame() {
	if(document.getElementById('MainIFrame')) {
		document.getElementById('MainIFrame').focus();
	}
}

var ColorPickerValueField=null;
var ColorPickerDemoField=null;
var LockedMouseOverPickTwoColors=false;
var LockedMouseOverPickThirdColor=false;
var ColorPickerIncrement=4;
var ShownColor=null;
var ColorPickerBordersOn=Array();
var ShowColorInWhichPanel=null;

function ShowColorPicker(WhereControl, PassedField=null, DemoField=null) {
	var ValueField=null;
	ColorPickerDemoField=DemoField;
	if(typeof(WhereControl)=="string") {
		WhereControl=document.getElementById(WhereControl);
	}
	if(typeof(PassedField)=="string") {
		ValueField=document.getElementById(PassedField);
	} else if(typeof(PassedField)=="object" && PassedField!=null) {
		ValueField=PassedField;
	} else {
		ValueField=WhereControl;
	}
	if(typeof(ValueField)!="object") {
		alert("No "+PassedField+" found. Further doubtful WhereControl.");
		return;
	}
	ColorPickerValueField=ValueField;
	var CurrentValue=null;
	// console.log(ValueField);
	if(typeof(ValueField.value)=="string") {
		CurrentValue=ValueField.value;
	} else if(ValueField.innerHTML) {
		CurrentValue=ValueField.innerHTML;
	} else {
		CurrentValue="rgb(128,128,128)";
	}
	
	if(CurrentValue.startsWith("#")) {
		var HexColor=CurrentValue;
		HexColor=HexColor.replace("#","");
		if(HexColor.length==3) {
			var HexR="0x"+HexColor.substring(0,1)+HexColor.substring(0,1); var dR=+HexR;
			var HexG="0x"+HexColor.substring(1,2)+HexColor.substring(1,1); var dG=+HexG;
			var HexB="0x"+HexColor.substring(2,3)+HexColor.substring(2,1); var dB=+HexB;
		} else if(HexColor.length==6) {
			var HexR="0x"+HexColor.substring(0,2); var dR=+HexR;
			var HexG="0x"+HexColor.substring(2,4); var dG=+HexG;
			var HexB="0x"+HexColor.substring(4,6); var dB=+HexB;
		} else {
			alert("Unknown Color Format: "+CurrentValue);
			return;
		}
		CurrentValue="rgb("+dR+","+dG+","+dB+")";
		// console.log(CurrentValue);
	}
	
	if(document.getElementById('ShowColorInWhichPanel_'+ValueField.id).value!="") {
		ShowColorInWhichPanel=document.getElementById('ShowColorInWhichPanel_'+ValueField.id).value;
	}
	
	var ColorPickerCellsPadding="1px 1px 0px 0px";
	if(ColorPickerIncrement==1) {
		ColorPickerCellsPadding='1px 1px 0px 0px'; // High Precision mode
	} else if(ColorPickerIncrement==2) {
		ColorPickerCellsPadding='1px 1px 1px 1px'; // Precision mode
	} else if(ColorPickerIncrement==3) {
		ColorPickerCellsPadding='2px 2px 1px 1px'; // Low Precision mode
	} else if(ColorPickerIncrement==4) {
		ColorPickerCellsPadding='1px 1px 1px 1px'; // Quick mode
	} else if(ColorPickerIncrement==5) {
		ColorPickerCellsPadding='1px 1px 1px 1px'; // School mode
	}
		
	
	if(!document.getElementById('divSDPickColor')) {
		var divSDPickColor=document.createElement('div');
		divSDPickColor.id="divSDPickColor";
		divSDPickColor.style.display="none";
		divSDPickColor.style.zIndex="1000";
		divSDPickColor.style.position='absolute';
		divSDPickColor.style.backgroundColor='var(--TableHeaderColor)';
		divSDPickColor.style.padding='1px';
		divSDPickColor.classList.add("Shadow");
		
		var tblSDPickColor=document.createElement('table');
		tblSDPickColor.setAttribute("cellpadding", "0");
		tblSDPickColor.setAttribute("cellspacing", "0");
		tblSDPickColor.setAttribute("border", "0");
		
		var TRTDs1, TRTDs2, TRTDs3;

		TRTDs1='<table id="ColorPickerRG" cellspacing=0 border=0 style="cursor: crosshair">';
		
		var iInitial=255;
		iInitial=iInitial-(iInitial%ColorPickerIncrement);
		
		var jInitial=255;
		jInitial=jInitial-(jInitial%ColorPickerIncrement);
		
		for(i=iInitial; i>=0; i-=ColorPickerIncrement) {
			TRTDs1+='<tr>';
			for(j=0; j<256; j+=ColorPickerIncrement) {
				TRTDs1+='<td id="ColorPicker'+i+'_'+j+'_0" style="background-color: rgb('+i+','+j+',0); padding: '+ColorPickerCellsPadding+';" onclick="javascript:PickTwoColorsClick(\'RG\');" ondblclick="javascript:UnLockMouseOverPickTwoColors();" onmouseover="javascript:PickTwoColors(this,'+i+','+j+',0);"></td>';
			}
			TRTDs1+='</tr>';
		}
		TRTDs1+='</table>';
		
		TRTDs2='<table id="ColorPickerGB" cellpadding=1 cellspacing=0 border=0 style="cursor: crosshair">';
		for(j=0; j<256; j+=ColorPickerIncrement) {
			TRTDs2+='<tr>';
			for(i=0; i<256; i+=ColorPickerIncrement) {
				TRTDs2+='<td id="ColorPicker0_'+i+'_'+j+'" style="background-color: rgb(0,'+i+','+j+'); padding: '+ColorPickerCellsPadding+';" onclick="javascript:PickTwoColorsClick(\'GB\');" ondblclick="javascript:UnLockMouseOverPickTwoColors();" onmouseover="javascript:PickTwoColors(this,0,'+i+','+j+');"></td>';
			}
			TRTDs2+='</tr>';
		}
		TRTDs2+='</table>';
		
		TRTDs3='<table id="ColorPickerBR" cellpadding=1 cellspacing=0 border=0 style="cursor: crosshair" align="right">';
		for(i=0; i<256; i+=ColorPickerIncrement) {
			TRTDs3+='<tr>';
			for(j=jInitial; j>=0; j-=ColorPickerIncrement) {
				TRTDs3+='<td id="ColorPicker'+j+'_0_'+i+'" style="background-color: rgb('+j+',0,'+i+'); padding: '+ColorPickerCellsPadding+';" onclick="javascript:PickTwoColorsClick(\'BR\');" ondblclick="javascript:UnLockMouseOverPickTwoColors();" onmouseover="javascript:PickTwoColors(this,'+j+',0,'+i+');"></td>';
			}
			TRTDs3+='</tr>';
		}
		TRTDs3+='</table>';

		// var Q4Height=(Math.floor(256/ColorPickerIncrement*)-20);
		var Q4Height=128;
		var ColorPickerThirdHeight=Q4Height-80;
		
		var PageTitle='&nbsp;&nbsp;Pick the required Color';
		if(ColorPickerIncrement==4) {
			PageTitle='&nbsp;Pick';
			Q4Height=42;
			ColorPickerThirdHeight=28;
		} else if(ColorPickerIncrement==5) {
			PageTitle='';
			Q4Height=67;
			ColorPickerThirdHeight=28;
		}
		
		var CurrentColorTitle='&nbsp; Current Color &nbsp;';
		var ChangedColorTitle='&nbsp; Changed Color &nbsp;';
		var StepsTR=''
			+'<tr style="height: 35px;">'
			+'<td style="text-align: center; vertical-align: bottom;"><span class=Header style="padding: 3px;"> Step 2 &#x25BC </span></td>'
			+'<td style="text-align: right; vertical-align: middle;"><span class=Header style="padding: 3px;"> Step 1 &#x25BA </span></td>'
			+'</tr>';
		var TxtMaxWidth='';
		
		if(ColorPickerIncrement==4) {
			CurrentColorTitle='&nbsp; Current &nbsp;';
			ChangedColorTitle='&nbsp; Changed &nbsp;';
			StepsTR='';
			TxtMaxWidth='max-width: 50px;';
		} else if(ColorPickerIncrement==5) {
			CurrentColorTitle='Current';
			ChangedColorTitle='Changed';
			StepsTR='';
			TxtMaxWidth='max-width: 40px;';
		}
		var TitleRow = '<tr><td class=Header colspan=2><input type=button onclick="javascript:ShutColorPicker();" value="Cancel"/> '+PageTitle+'</td></tr>';
		
		if(ColorPickerIncrement==5) {
			TitleRow='';
		}
		
		var ColorPickerFinal=
			TitleRow
			+ '<tr><td width="50%" style="border: 1px solid var(--TableHeaderColor); text-align: center; background-color:'
			+CurrentValue
			+';" height="'
			+(Q4Height-20)
			+'" id="ColorPickerCurrent"><span id="ColorPickerCurrentSpan" style="background-color: white">'
			+CurrentColorTitle
			+'<br><br><input type=button onclick="javascript:ShutColorPicker();" value="Ok" />'
			+'</span>'
			+'</td><td width="50%" id=ColorPickerFinal style="border: 1px solid var(--TableHeaderColor); text-align: center; cursor: crosshair; background-color:'
			+CurrentValue
			+';" height="'
			+(Q4Height-20)
			+'" onclick="javascript:PickColor(this);"><span style="background-color: white">'
			+ChangedColorTitle
			+'<br><br><input type=button onclick="javascript:PickColor(this);return false;" value="Pick" />'
			+'</span>'+'</td></tr>'
			+'<tr><td class=Body1 style="text-align: center;">'
			+'<input type=text class="Small VeryNarrowField" style="background-color: #AAA; color: #444; '+TxtMaxWidth+'" onfocus="this.blur();" id=txtColorPickerCurrent ReadOnly value="'
			+CurrentValue
			+'" />'
			+'</td><td class=Body1 style="text-align: center;">'
			+'<input type=text class="Small VeryNarrowField" style="'+TxtMaxWidth+'" id=txtColorPickerFinal value="'
			+CurrentValue
			+'" onchange="javascript:ShowColor(this.value);LockMouseOverPickTwoColors();LockMouseOverPickThirdColor();"/>'
			+'</td></tr>'
			+StepsTR
			;
		
		var ColorPickerThird=
			'<tr><td colspan=2 style="text-align: center;"><table align=center cellpadding=0 cellspacing=0 border=0 height="'
			+ColorPickerThirdHeight
			+'"><tr id="ColorPickerThird" style="cursor: crosshair;">';
		for(i=255; i>=0; i-=ColorPickerIncrement) {
			ColorPickerThird+='<td id="ColorPickerThird'+(255-i)+'" style="background-color:rgb('+i+','+i+','+i+'); padding:'+ColorPickerCellsPadding+';" '
			+'onmouseover="javascript:PickThirdColor(this);" '
			+'onclick="javascript:PickThirdColorClick();" '
			+'ondblclick="javascript:UnLockMouseOverPickThirdColor();" '
			+'></td>';
		}
		ColorPickerThird+='</tr></table></td></tr>'
			+'<tr><td class=Body1 colspan=2 style="text-align: center;">'
			+'<input type=text class="Small VeryNarrowField" id=txtColorPickerThird value="'
			+CurrentValue
			+'" onchange="javascript:ShowColor(this.value);LockMouseOverPickTwoColors();LockMouseOverPickThirdColor();" />'
			+'</td></tr>'
			;
		
		var ColorPickerThirdAndFinal=
			'<table width="100%" height="100%" cellpadding=0 cellspacing=1 border=0 style="border-color: transparent; height: 100%;">'
			+ColorPickerFinal
			+ColorPickerThird
			+'</table>';
		
		tblSDPickColor.innerHTML=
			'<tr>'
			+'<td>'+ColorPickerThirdAndFinal+'</td>'
			+'<td style="vertical-align: bottom; background-color: var(--TableHeaderBGColor);">'
			+TRTDs1
			+'</td>'
			+'</tr><tr><td style="background-color: var(--TableHeaderBGColor);">'
			+TRTDs3
			+'</td><td style="background-color: var(--TableHeaderBGColor);">'
			+TRTDs2
			+'</td>'
			+'</tr>';
		divSDPickColor.appendChild(tblSDPickColor);
		document.body.appendChild(divSDPickColor);
	} else {
		var divSDPickColor=document.getElementById('divSDPickColor');
		document.getElementById('ColorPickerCurrent').style.backgroundColor=CurrentValue;
		document.getElementById('txtColorPickerCurrent').value=CurrentValue;
		UnLockMouseOverPickTwoColors();
	}
	// var FieldRect=ValueField.getBoundingClientRect();
	var FieldRect=WhereControl.getBoundingClientRect();
	var BodyRect=document.body.getBoundingClientRect();
	divSDPickColor.style.left=(FieldRect.x-BodyRect.x+FieldRect.width+5)+"px";
	divSDPickColor.style.top=(FieldRect.y-BodyRect.y)+"px";
	divSDPickColor.style.display="inline-block";
	
	ShowColor(CurrentValue, ShowColorInWhichPanel);
}

function PickTwoColorsClick(FromWhichPanel) {
	LockMouseOverPickTwoColors();
	UnLockMouseOverPickThirdColor();
	ShowColorInWhichPanel=FromWhichPanel;
	ShowColor(document.getElementById('txtColorPickerThird').value, FromWhichPanel);
}

function PickTwoColors(TD, Red, Green, Blue) {
	
	if(LockedMouseOverPickTwoColors) return;
	
	var Third;
	// console.log(TD.closest('table').id);
	if(TD.closest('table').id=="ColorPickerRG") {
		Third='Blue';
	} else if(TD.closest('table').id=="ColorPickerGB") {
		Third='Red';
	} else if(TD.closest('table').id=="ColorPickerBR") {
		Third='Green';
	} else {
		alert("PickTwoColors TD has no known parent");
		return;
	}
	// console.log(Red); console.log(Green); console.log(Blue); console.log(Third);
	LoadThirdColorPallet(Red, Green, Blue, Third);
}

function LoadThirdColorPallet(Red, Green, Blue, Third) {
	
	var TR=document.getElementById('ColorPickerThird');
	var TDs=TR.querySelectorAll('td');
	
	var txtColorPickerThird=document.getElementById('txtColorPickerThird');
	if(txtColorPickerThird.value!="") {
		var CurrentColors=txtColorPickerThird.value;
		CurrentColors=CurrentColors.replace("rgb","");
		CurrentColors=CurrentColors.replace("(","");
		CurrentColors=CurrentColors.replace(")","");
		CurrentColors=CurrentColors.replace(" ","");
		CurrentColors=CurrentColors.split(",");
	} else {
		var CurrentColors=Array();
		CurrentColors[0]=128;
		CurrentColors[1]=128;
		CurrentColors[2]=128;
	}
	
	for(i=0, iThird=0; i<TDs.length; i++, iThird+=ColorPickerIncrement) {
		var OneTD=TDs[i];
		if(Third=="Red") {
			OneTD.style.backgroundColor='rgb('+iThird+','+Green+','+Blue+')';
			document.getElementById('txtColorPickerThird').value='rgb('+CurrentColors[0]+','+Green+','+Blue+')';
		} else if(Third=="Green") {
			OneTD.style.backgroundColor='rgb('+Red+','+iThird+','+Blue+')';
			document.getElementById('txtColorPickerThird').value='rgb('+Red+','+CurrentColors[1]+','+Blue+')';
		} else if(Third=="Blue") {
			OneTD.style.backgroundColor='rgb('+Red+','+Green+','+iThird+')';
			document.getElementById('txtColorPickerThird').value='rgb('+Red+','+Green+','+CurrentColors[2]+')';
		} else {
			alert("Third color unexpected");
			return;
		}
	}
}

function PickThirdColorClick() {
	LockMouseOverPickThirdColor();
	ShowColor(document.getElementById('txtColorPickerFinal').value, ShowColorInWhichPanel);
}

function PickThirdColor(Color="#888888") {
	
	if(LockedMouseOverPickThirdColor) return;
	
	if(typeof(Color)!="string") {
		Color=Color.style.backgroundColor;
	}
	document.getElementById('ColorPickerFinal').style.backgroundColor=Color;
	document.getElementById('txtColorPickerFinal').value=Color;	
	document.getElementById('txtColorPickerThird').value=Color;	
}
function PickColor(Color="rgb(128,128,128)") {
	if(typeof(Color)!="string") {
		Color=Color.style.backgroundColor;
	}
	// console.log(ColorPickerValueField);
	// console.log(ColorPickerValueField.value);
	
	if(ColorPickerValueField && typeof(ColorPickerValueField.value)=="string") ColorPickerValueField.value=Color;
	if(ColorPickerValueField && ColorPickerValueField.innerHTML) ColorPickerValueField.innerHTML=Color;
	if(ColorPickerValueField && ColorPickerValueField.style) ColorPickerValueField.style.backgroundColor=Color;

	if(ColorPickerValueField.getAttribute("onchange")!="") { // xxxxxxx
		ColorPickerValueField.dispatchEvent(new Event('change'));
	}
	document.getElementById('ShowColorInWhichPanel_'+ColorPickerValueField.id).value=ShowColorInWhichPanel;

	ShutColorPicker();
}
function ShutColorPicker() {
	var divSDPickColor=document.getElementById('divSDPickColor');
	divSDPickColor.style.display="none";
}

function ShowColor(Color="rgb(128,128,128)", FromWhichPanel='RG') {
	
	if(FromWhichPanel=='' || FromWhichPanel==null) {
		FromWhichPanel='RG';
	}
	
	for(i=0; i<ColorPickerBordersOn.length; i++) {
		var EachTD=ColorPickerBordersOn[i];
		EachTD.style.border='';
	}
	
	var ShowColorBorder="3px solid black";
	var DontShowColorBorder="3px solid transparent";
	
	document.getElementById('ColorPickerFinal').style.backgroundColor=Color;
	document.getElementById('txtColorPickerFinal').value=Color;
	Color=Color.replace("rgb(","");
	Color=Color.replace(")","");
	Color=Color.replaceAll(" ","");
	var aColor=Color.split(",");

	if(ColorPickerIncrement>1) { // given color will need approximation to Show.
		aColor[0]=aColor[0]-(aColor[0]%ColorPickerIncrement);
		aColor[1]=aColor[1]-(aColor[1]%ColorPickerIncrement);
		aColor[2]=aColor[2]-(aColor[2]%ColorPickerIncrement);
	}
	// console.log(aColor);

	if(FromWhichPanel=='RG') {
		var Q1=document.getElementById('ColorPicker'+aColor[0]+'_'+aColor[1]+'_0');
		Q1.style.border=ShowColorBorder;

		LoadThirdColorPallet(aColor[0], aColor[1], aColor[2], 'Blue');
		
		var Q2Dont=document.getElementById('ColorPicker0_'+aColor[1]+'_'+aColor[2]);
		
		var Q3Dont=document.getElementById('ColorPicker'+aColor[0]+'_0_'+aColor[2]);
		Q2Dont.style.border=DontShowColorBorder;
		Q3Dont.style.border=DontShowColorBorder;
		var Q4=document.getElementById('ColorPickerThird'+aColor[2]);
		Q4.style.border=ShowColorBorder;
		
		ColorPickerBordersOn=null;
		ColorPickerBordersOn=Array();
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q1;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q2Dont;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q3Dont;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q4;
	} else if(FromWhichPanel=='GB') {
		var Q2=document.getElementById('ColorPicker0_'+aColor[1]+'_'+aColor[2]);
		Q2.style.border=ShowColorBorder;

		LoadThirdColorPallet(aColor[0], aColor[1], aColor[2], 'Red');
		
		var Q1Dont=document.getElementById('ColorPicker'+aColor[0]+'_'+aColor[1]+'_0');
		
		var Q3Dont=document.getElementById('ColorPicker'+aColor[0]+'_0_'+aColor[2]);
		Q1Dont.style.border=DontShowColorBorder;
		Q3Dont.style.border=DontShowColorBorder;
		var Q4=document.getElementById('ColorPickerThird'+aColor[0]);
		Q4.style.border=ShowColorBorder;
		
		ColorPickerBordersOn=null;
		ColorPickerBordersOn=Array();
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q2;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q1Dont;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q3Dont;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q4;
	} else if(FromWhichPanel=='BR') {
		var Q3=document.getElementById('ColorPicker'+aColor[0]+'_0_'+aColor[2]);
		Q3.style.border=ShowColorBorder;

		LoadThirdColorPallet(aColor[0], aColor[1], aColor[2], 'Green');
		
		var Q1Dont=document.getElementById('ColorPicker'+aColor[0]+'_'+aColor[1]+'_0');
		var Q2Dont=document.getElementById('ColorPicker0_'+aColor[1]+'_'+aColor[2]);
		
		Q1Dont.style.border=DontShowColorBorder;
		Q2Dont.style.border=DontShowColorBorder;
		var Q4=document.getElementById('ColorPickerThird'+aColor[1]);
		Q4.style.border=ShowColorBorder;
		
		ColorPickerBordersOn=null;
		ColorPickerBordersOn=Array();
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q3;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q1Dont;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q2Dont;
		ColorPickerBordersOn[ColorPickerBordersOn.length]=Q4;
	} else {
		alert('Unknown Color Panel '+FromWhichPanel);
	}
}

function LockMouseOverPickTwoColors() {
	LockedMouseOverPickTwoColors=true;
	document.getElementById('ColorPickerRG').style.cursor="default";
	document.getElementById('ColorPickerGB').style.cursor="default";
	document.getElementById('ColorPickerBR').style.cursor="default";
}
function UnLockMouseOverPickTwoColors() {
	LockedMouseOverPickTwoColors=false;
	document.getElementById('ColorPickerRG').style.cursor="crosshair";
	document.getElementById('ColorPickerGB').style.cursor="crosshair";
	document.getElementById('ColorPickerBR').style.cursor="crosshair";
}

function LockMouseOverPickThirdColor() {
	LockedMouseOverPickThirdColor=true;
	document.getElementById('ColorPickerThird').style.cursor="default";
}
function UnLockMouseOverPickThirdColor() {
	LockedMouseOverPickThirdColor=false;
	document.getElementById('ColorPickerThird').style.cursor="crosshair";
}

function MakeJSONOfAllJSONs(Controller) {
	console.log(Controller);
	if(!Controller || !Controller.AllJSONs || Controller.AllJSONs=="") return;
	var aAllJSONs=Controller.AllJSONs.split(",");
	console.log(aAllJSONs);
	for(i=0; i<aAllJSONs.length; i++) {
		try {
			var MakeJSONOfEach=eval("MakeJSONOf"+aAllJSONs[i]); // ToDo Controller.CompositePageSuffix
			if(typeof(MakeJSONOfEach)=="function") {
				MakeJSONOfEach();
			}
		} catch(Exception) {
		}
	}
}

function CheckBoxes2ValueList(FieldName) {
	console.log(FieldName);
	var ValuesList='';
	for(i=0; i<parseInt(document.getElementById(FieldName+'_Rows').value); i++) {
		if(document.getElementById(FieldName+'_'+i).checked) {
			ValuesList+=document.getElementById(FieldName+'_'+i).value+',';
		}
	}
	console.log(ValuesList);
	ValuesList=ValuesList.substring(0, ValuesList.length-1);
	console.log(ValuesList);
	document.getElementById(FieldName).value=ValuesList;
}