//Load iconfunc.js first


//Function to switch selected tag
function ToggleCommentTab(pGroupNum, pTabNum)
{
	//With IE, if the DIV tag is used for each tab, the tabs will be displayed arbitrarily, all together
	if(false){
//		var retText = "";
//		for(i=1;i<aTabName.length+1;i++){
//			if(aTabName.length<i){
//				i = 999;
//				retText += " |";
//				document.getElementById("gr"+pGroupNum+"tagtitle").innerHTML = retText;
//				document.getElementById("gr"+pGroupNum+"-tab").innerHTML = writecomcontent(pGroupNum,pTabNum);
//				return;
//			}
//			if(i == pTabNum){
//				retText += "| <b>"+aTabName[i-1]+"</b> ";
//			}else{
//				retText += "| <a href=\"javascript: ToggleCommentTab("+pGroupNum+","+(i)+")\">"+aTabName[i-1]+"</a> ";
//			}
//		}
//		retText += " |";
//		document.getElementById("gr"+pGroupNum+"tagtitle").innerHTML = retText;
	}else{
		//* div and i are base 1, aTabName is base 0 (so i-1)
		for(i = 1; i < aTabName.length + 1; i++){
//			if(aTabName.length<i){
//				i = 999;
//				document.getElementById("gr"+pGroupNum+"-tab").innerHTML = writecomcontent(pGroupNum,pTabNum);
//				return;
//			}

			if(i == pTabNum){
				if(i == 1){
					document.getElementById("gr"+pGroupNum+"tagtitle"+(i)).innerHTML = "| ";
					document.getElementById("gr"+pGroupNum+"tagtitle"+(i)).innerHTML += "<b>"+aTabName[i-1]+"</b> |";
				}else{
					document.getElementById("gr"+pGroupNum+"tagtitle"+(i)).innerHTML = "<b>"+aTabName[i-1]+"</b> |";
				}
				//Open this tab
				document.getElementById("gr"+pGroupNum+"-tab"+i).style.display = "block";
			}else{
				if(i == 1){
					document.getElementById("gr"+pGroupNum+"tagtitle"+(i)).innerHTML = "| ";
					document.getElementById("gr"+pGroupNum+"tagtitle"+(i)).innerHTML += "<a href=\"javascript: ToggleCommentTab("+pGroupNum+","+(i)+")\">"+aTabName[i-1]+"</a> |";
				}else
				{
					document.getElementById("gr"+pGroupNum+"tagtitle"+(i)).innerHTML = "<a href=\"javascript: ToggleCommentTab("+pGroupNum+","+(i)+")\">"+aTabName[i-1]+"</a> |";
				}
				//Close other tabs
				document.getElementById("gr"+pGroupNum+"-tab"+i).style.display = "none";
			}
		}
		//document.getElementById("gr"+pGroupNum+"-tab").innerHTML = writecomcontent(pGroupNum,pTabNum);
	}
}


function writecomcontent(pGroupNum,pTabNum)
{
	//As with IE a table cannot be inserted within a table with innerHTML, return source with no table
	if(false){
		//If IE
		var retText = "";

		var gbIconNum = 0;//Global Icon Counter
		var i = 0;
		var ii = 0;
		var tmpIconCount = writecontent_GetIconCount(pTabNum);
		var tmpLineCount = writecontent_GetIconLineCount(pTabNum);
		for(i = 0; i < tmpLineCount; i++){//Only execute number of lines, number of lines is the number of elements in the aTabName array
			for(ii = 0; ii < 18;){//Execute number of lines only
				if(gbIconNum >= aIcon.length){
					ii = 999;
					i = 999;
				}else
				if(pTabNum == aIcon[gbIconNum].tab){//There is still an icon that should be displayed
					retText += "<img src=\""+aIcon[gbIconNum].img.src+"\" alt=\""+ aIcon[gbIconNum].alt +"\" width=\""+  aIcon[gbIconNum].img.width +"\" height=\""+ aIcon[gbIconNum].img.height+"\" onclick=\"comiconclick("+pGroupNum+","+gbIconNum+")\"> ";
					ii++;
					tmpIconCount--;
				}else
				if(pTabNum != aIcon[gbIconNum].tab){//Information about different tab
					if(tmpIconCount==0){//Icons for the selected tab after this not do exist
						ii = 99;
						i=999;
						retText += "<br>\n";
						return retText;

					}
				}else{//There are no more icons that should be displayed
					ii = 99;
					i=999;
					retText += "<br>\n";
					return retText;
					ii++;
				}
				gbIconNum++;
			}
			retText += "<br>\n";
		}
		//alert(gbIconNum);
	}else
	if(false){
		//If Firefox or other
		var retText = "<table  border=\"0\">\n";//Table within tab

		var gbIconNum = 0;//Icon counter
		var i = 0;
		var ii = 0;
		//alert(aIcon.length);
		for(i = 0; i < writecontent_GetIconLineCount(pTabNum); i++){//Execute number of lines only, number of lines is the number of elements in the aTabName array
			retText += "<tr>\n";
			for(ii = 0; ii < 18;){//Execute number of lines only
				if(gbIconNum >= aIcon.length){
					ii = 999;
					i = 999;
				}else
				if(pTabNum == aIcon[gbIconNum].tab){//There are still icons that should be displayed
					retText += "<td><img src=\""+aIcon[gbIconNum].img.src+"\" alt=\""+ aIcon[gbIconNum].alt +"\" width=\""+  aIcon[gbIconNum].img.width +"\" height=\""+ aIcon[gbIconNum].img.height+"\" onclick=\"comiconclick("+pGroupNum+","+gbIconNum+")\"></td>\n";
					ii++;
				}else
				if(pTabNum != aIcon[gbIconNum].tab){//Information for different tag

				}else{//No more icons that should be displayed
					retText += "<td></td>\n";
					ii++;
				}
				gbIconNum++;
			}
			retText += "</tr>\n";
		}
		retText += "</table>\n";
	}
	if(true){
		//If Firefox or other
		var retText = "<table  border=\"0\" align=\"center\">\n";//Table within tab

		var gbIconNum = 0;//Icon Counter
		var i = 0;
		var ii = 0;

		retText += "<tr>";
		retText += "<td>";
		
		retText += "<img src=\""+aTabObj[pTabNum-1].Img+"\" usemap=\"#imgmap"+pTabNum+"\" style=\"border-style:none;\">\n";
		
		retText += "<map name=\"imgmap"+pTabNum+"\">\n";
		var nCurX = 0;
		var nCurY = 0;
		var nCurMaxY = 0;
		//alert(aIcon.length);
		for(i = 0; i < writecontent_GetIconLineCount(pTabNum); i++){//Execute number of lines only, number of lines is the number of elements in the aTabName array
//			retText += "<tr>\n";
			for(ii=0;ii<18;){//Execute number of lines only
				if(gbIconNum >= aIcon.length){
					ii = 999;
					i = 999;
				}else
				if(pTabNum == aIcon[gbIconNum].tab){//There are still icons that should be displayed
					retText += "<area shape=\"rect\" coords=\""+nCurX+","+nCurY+","+(nCurX+aIcon[gbIconNum].width)+","+(nCurY+aIcon[gbIconNum].height)+"\" href=\"javascript: comiconclick("+pGroupNum+","+gbIconNum+");\">\n";
//					retText += "<td><img src=\""+aIcon[gbIconNum].img.src+"\" alt=\""+ aIcon[gbIconNum].alt +"\" width=\""+  aIcon[gbIconNum].img.width +"\" height=\""+ aIcon[gbIconNum].img.height+"\" onclick=\"comiconclick("+pGroupNum+","+gbIconNum+")\"></td>\n";
					nCurX += aIcon[gbIconNum].width;
					if(nCurMaxY < aIcon[gbIconNum].height){
						nCurMaxY = aIcon[gbIconNum].height;
					}
					ii++;
				}else
				if(pTabNum != aIcon[gbIconNum].tab){//Information for different tab

				}else{//There are no more icons that should be displayed
//					retText += "<td></td>\n";
					ii++;
				}
				gbIconNum++;
			}
			nCurY += nCurMaxY;
			nCurMaxY = 0;
			nCurX = 0;
		}
		retText += "</map>\n";
		
		
		retText += "</td>";
		retText += "</tr>";
		retText += "</table>\n";
	}
	return retText;
}

//Function executed when icon in comment field is clicked
function comiconclick(pGroupNum, pArrayNum)
{
	//alert("Write process to add to textarea here");
	//Multi-process because the method for distinguishing the cursor position varies between IE and Firefox
	if(navigator.appName.indexOf("Microsoft") > -1){
		//If IE
		var target = document.getElementById("pass");
		target.focus();
		if (document.selection != null){
			var sSel = document.selection.createRange().text;
			if (sSel){
				document.selection.createRange().text = aIcon[pArrayNum].rep;
			}else{
				document.selection.createRange().text = aIcon[pArrayNum].rep;
			}
		}else if(target.selectionStart || target.selectionStart == '0'){
			var s = target.selectionStart;
			var e = target.selectionEnd;
			var str2 = target.value.substring(s,e);
			if (str2){
				target.value = target.value.substring(0,s) + aIcon[pArrayNum].rep + target.value.substring(e,target.value.length);
			}else{
				target.value = target.value.substring(0,s) + aIcon[pArrayNum].rep + target.value.substring(e,target.value.length);
			}
			target.focus();
		}else{
			target.value += aIcon[pArrayNum].rep;
		}
	}else{
		var tmpFirstText = document.getElementById("pass").value.substring(0,document.getElementById("pass").selectionStart);
		var tmpEndText = document.getElementById("pass").value.substring(document.getElementById("pass").selectionEnd,document.getElementById("pass").value.length);
		document.getElementById("pass").value = tmpFirstText + aIcon[pArrayNum].rep + tmpEndText;
	}
	preview("previewcontent", document.getElementById("pass"), pGroupNum);
}

//Function to display tab icon set, group number is specified in argument
function makecomtable(tabNum)
{
	var retText = "<hr style=\"border: medium dotted rgb(44, 179, 243);\" size=\"2\">";
	//With IE a table cannot be inserted within a table using innerHTML, so return source with no table
	if(false){
		//If IE

		//Tab display
		retText += "<div id=\"gr"+tabNum+"tagtitle\"> | ";
		for(i=0;i<aIcon.length;i++){
			if(aTabName[i] === undefined){
				retText += " ";
			}else{
				retText += "<a href=\"javascript: ToggleCommentTab("+tabNum+","+(i+1)+")\">"+aTabName[i]+"</a> | \n";
			}
		}
		retText += "</div> \n";
	
		//Create icon display area after tab
		retText += "<hr style=\"border: medium dotted rgb(44, 179, 243);\" size=\"1\">";
		retText += "<div id=\"gr"+tabNum+"-tab\" style=\"visibility:visible\"></div>\n";
	}else{
		//If Firefox or other
		retText += "<table border=\"0\" align=\"center\"><tr>\n";

		//Tab display
		for(i = 0; i < aIcon.length; i++){
			if(typeof(aTabName[i]) == "undefined"){
//				retText += "<td></td>\n";
			}else{
				if(i == 0){
					retText += "<td><div id=\"gr"+tabNum+"tagtitle"+(i+1)+"\">| <a href=\"javascript: ToggleCommentTab("+tabNum+","+(i+1)+")\">"+aTabName[i]+"</a> |</div></td>\n";
				}else{
					retText += "<td><div id=\"gr"+tabNum+"tagtitle"+(i+1)+"\"><a href=\"javascript: ToggleCommentTab("+tabNum+","+(i+1)+")\">"+aTabName[i]+"</a> |</div></td>\n";
				}
			}
		}
		retText += "</tr></table>\n";
		retText += "<hr style=\"border: medium dotted rgb(44, 179, 243);\" size=\"1\">";
		//Create icon display area after tab
		for(var i = 1;i<aTabName.length+1;i++){
			retText += "<div id=\"gr"+tabNum+"-tab"+i+"\" style=\"display:none\">"+i+"</div>\n";
		}
//		retText += "<table border=\"0\"><tr>\n";
//		retText += "<div id=\"gr"+tabNum+"-tab\" style=\"visibility:visible\"></div>\n";
//		retText += "</tr></table>\n";
	}
	return retText;

}