function displayGen(pagei, variTemp)
{
	var catTemplates = "gen";
	var pagesize = 6
	
	var filename = new Array( "template-gen-58",
							 "template-gen-56",
							 "template-gen-57",
							 "template-gen-52",
							 "template-gen-53",
							 "template-gen-54",
							 "template-gen-55",
							 "template-gen-51",
							 "template-gen-45",
							 "template-gen-41",
							 "template-gen-47",
							 "template-gen-50",
							 "template-gen-42",
							 "template-gen-48",
							 "template-gen-43",
							 "template-gen-46",
							 "template-gen-49",
							 "template-gen-44",
							 "template-gen-39",
							 "template-gen-38",
							 "template-gen-40",
							 "template-gen-37",
							 "template-gen-26",
							 "template-gen-35",
							 "template-gen-31",
							 "template-gen-34",
							 "template-gen-32",
							 "template-gen-33",
							 "template-beauty-4",
							 "template-gen-36",
							 "template-gen-21",
						 "template-gen-22",
						 "template-gen-23",
						 "template-gen-25",
						 "template-gen-30",
						 "template-gen-27",
						 "template-gen-28",
						 "template-gen-18",
						 "template-gen-29",
							 "template-sports-1",
							 "template-background-9",
							 "template-news-3",
							 "template-news-1",
							 "template-retail-6",
							 "template-background-8",
							 "template-realestate-2",
							 "template-health-1",
							 "template-health-2",
							 "template-pets-4",
							 "template-wildlife-1",
							 "template-holiday-4",
							 "template-beauty-3",
							 "template-realestate-1",
							 "template-retail-5",
							 "template-food-3",
							 "template-food-2",
							 "template-floral-3",
							 "template-grunge-2",
							 "template-wildlife-2",
							 "template-holiday-3",
							 "template-spa-2",
							 "template-holiday-5",
							 "template-celebrations-2",
							 "template-floral-5",
							 "template-gen-12",
						 "template-gen-11",
						 "template-gen-10",
						 "template-gen-9",
						 "template-gen-8",
						 "template-gen-7",
						 "template-gen-6",
						 "template-gen-5",
						 "template-gen-4",
						 "template-gen-3",
						 "template-gen-2",
						 "template-gen-1");
	
	var name = Array("Bats On Beige Moon",
					 "Fall Leaves",
					 "Fall Sale",
					 "Love Letter",
					 "Pink Coral",
					 "In The Park",
					 "Abstract Roses",
					 "Chirping Birds Sale",
					 "Holiday Splash",
					 "Natural Zen",
					 "Fall Is Here",
					 "Mocha Swirl",
					 "Butterfly Colors",
					 "Ice Cream Treat",
					 "Gorilla Marketing",
					 "Blue Skies",
					 "Violet Eyes",
					 "Forest Grunge",
					 "Daffodils and Lilacs",
					 "Open For Lunch",
					 "Love Is In The Air",
					 "Carry-Out Tonight",
					 "Spa Services",
					 "Cupcake Love",
					 "In The Meadow",
					 "Business Talk",
					 "Gifts For Mom",
					 "Abstract Art",
					 "Beauty",
					 "Orange Blossom",
					 "Yoga",
					 "Mobile Phone",
					 "Automobiles",
					 "Healing Spa",
					 "Designer Stripes",
					 "Girlfriends",
					 "Brush Strokes",
					 "Health",
					 "Sale",
					 "Sports",
					 "Background",
					 "News",
					 "News",
					 "Retail",
					 "Background",
					 "Real Estate",
					 "Health Feminine",
					 "Health Masculine",
					 "Pets",
					 "Wildlife",
					 "Holiday",
					 "Beauty",
					 "Realestate",
					 "Retail",
					 "Food",
					 "Food",
					 "Floral",
					 "Grunge",
					 "Wildlife",
					 "Holiday",
					 "Spa",
					 "Holiday",
					 "Celebrations",
					 "Floral",
					 "Floral",
					 "Candy",
					 "Retail Girl",
					 "Coconut Beach",
					 "Spring Sale",
					 "Grunge",
					 "Beauty",
					 "Rufus",
					 "Beach",
					 "Butterfly",
					 "Bunny",
					 "Spa");
	
	if (variTemp == "") {
		var pageno = pagei;
	}
	else {
		pageno = getTemplatePageNo(variTemp, filename, pagesize);
	}

	displayTemplateGeneral(pageno, pagesize, variTemp, catTemplates, filename, name);

	
} // function displayGen(pagei, variTemp)

function displaySiteSkins(pagei, variTemp)
{
	var catTemplates = "siteskins";
	var pagesize = 6
	
	var filename = new Array("template-blog-13",
							 "template-blog-3",
							 "template-blog-12",
							 "template-blog-8",
							 "template-blog-9",
							 "template-blog-10",
							 "template-blog-11",
							 "template-blog-4",
							 "template-blog-5",
							 "template-blog-6",
							 "template-blog-7",
							 "template-sites-1",
							 "template-siteskins-3",
							 "template-siteskins-4");
	
	var name = Array("",
					 "",
					 "",
					 "",
					 "",
					 "",
					 "",
					 "",
					 "",
					 "",
					 "",
					 "",
					 "",
					 "");
	
	if (variTemp == "") {
		var pageno = pagei;
	}
	else {
		pageno = getTemplatePageNo(variTemp, filename, pagesize);
	}

	displayTemplateGeneral(pageno, pagesize, variTemp, catTemplates, filename, name);

	
} // function displaySiteSkins(pagei, variTemp)

function displayColorSkins(pagei, variTemp)
{
	var catTemplates = "customcolor";
	var pagesize = 6
	
	var filename = new Array("template-blog-13");
	
	var name = Array("");
	
	//if (variTemp == "") {
	//	var pageno = pagei;
	//}
	//else {
	//	pageno = getTemplatePageNo(variTemp, filename, pagesize);
	//}

	displayTemplateColor(catTemplates, filename, name);

} // function displayColorSkins(pagei, variTemp)

function changehdrsampleColor() {
	var scr_color = document.getElementById("scrbckcolor").value;
	document.getElementById("scrsample").style.backgroundColor=scr_color;
	
	var hdr_color = document.getElementById("hdrbckcolor").value;
	document.getElementById("hdrsample").style.backgroundColor=hdr_color;
	
	var body_color = document.getElementById("bodybckcolor").value;
	document.getElementById("bodysample").style.backgroundColor=body_color;
	
	var ftr_color = document.getElementById("ftrbckcolor").value;
	document.getElementById("ftrsample").style.backgroundColor=ftr_color;
} // function changeTblSampleColor()

function displayTemplateColor(catTemplates, filename, name) {
	
	var selflag = "";
	//var maxpageno = getTemplateMaxPageNo(filename, pagesize);
	
	var oCellHTML = "";	
		
	// customize table
	var oTable = document.createElement("TABLE");
	oTable.className = "templatetbl";
  	var oTHead = document.createElement("THEAD");
  	var oTBody = document.createElement("TBODY");
	var oRow, oCell;
  	var i, j;
	
	oTable.appendChild(oTBody);
	
	var oCellHTML = "";
	oRow = document.createElement("TR");
	oTBody.appendChild(oRow);
	
	oCell = document.createElement("TD");
	var oCellHTML = "<table cellpadding=5 cellspacing=0 class='customizelayout' width='750px'>";
		oCellHTML = oCellHTML + "<tr><td align='left'>1. Please make your color selections below by clicking in each box to choose from one of our predefined colors, or simply type in the hex color code</td></tr><tr><td align='left'>2. Click 'Refresh' at any time to preview what your page will look like with the new color selections</td></tr><tr><td align='left'>3. Click 'Next' when you are ready to create your template</td></tr><tr><td align='left'>4.To further customize your page and upload a new Logo Image please visit the 'Customize Blog Page' menu once your template is created</td></tr>";
		oCellHTML = oCellHTML + "</table>";
	oCell.innerHTML = oCellHTML;
	oCell.colSpan="3";
	oCell.width="750";
	oRow.appendChild(oCell);
	
	var oCellHTML = "";
	oRow = document.createElement("TR");
	oTBody.appendChild(oRow);
	
	oCell = document.createElement("TD");
	var oCellHTML = "<table cellpadding=0 cellspacing=0 border=2 bordercolor='#000000' width=400 align='center' style='text-align: center; border: 2px solid #000000'>";
		oCellHTML = oCellHTML + "<tr height=100 style='background-color: #000000; color: #ffffff'><td colspan='2'>Logo Image<em>Upload Logo Image under 'Customize Blog Page' menu</em></td><td></td></tr>";
		oCellHTML = oCellHTML + "<tr height=50><td>Screen Background Color:</td><td><INPUT TYPE=\"text\" NAME=\"scrbckcolor\" ID=\"scrbckcolor\" SIZE=\"20\" VALUE=\"#ffffff\" onClick=\"showColorPicker(this,'scrbckcolor')\" onChange=\"changehdrsampleColor()\"></td></tr>";
		oCellHTML = oCellHTML + "<tr height=50><td>Header Background Color:</td><td><INPUT TYPE=\"text\" NAME=\"hdrbckcolor\" ID=\"hdrbckcolor\" SIZE=\"20\" VALUE=\"#ffffff\" onClick=\"showColorPicker(this,'hdrbckcolor')\" onChange=\"changehdrsampleColor()\"></td></tr>";
		oCellHTML = oCellHTML + "<tr height=150><td>Body Background Color:</td><td><INPUT TYPE=\"text\" NAME=\"bodybckcolor\" ID=\"bodybckcolor\" SIZE=\"20\" VALUE=\"#ffffff\" onClick=\"showColorPicker(this,'bodybckcolor')\"></td></tr>";
		oCellHTML = oCellHTML + "<tr height=50><td>Footer Background Color:</td><td><INPUT TYPE=\"text\" NAME=\"ftrbckcolor\" ID=\"ftrbckcolor\" SIZE=\"20\" VALUE=\"#ffffff\" onClick=\"showColorPicker(this,'ftrbckcolor')\"></td></tr>";
		oCellHTML = oCellHTML + "</table>";
		oCell.innerHTML = oCellHTML;
		oCell.align="center";
		oCell.width = "400";
	oRow.appendChild(oCell);
		
	oCell = document.createElement("TD");
		var oCellHTML = "<input type='button' onClick='changehdrsampleColor()' value='Refresh >>'>";
			oCell.innerHTML = oCellHTML;
			oCell.align="center";
			oCell.width = "100";
	oRow.appendChild(oCell);
		
		
		
	oCell = document.createElement("TD");
		var oCellHTML = "<table cellpadding=10 cellspacing=0 border=1 width=250 id='tblsample' style='border: 1px solid #000000; text-align: center; width: 250' align='center'>";
		var oCellHTML = oCellHTML + "<tr id='scrsample'><td valign='center' width='250px' style='width: 250'>";
		var oCellHTML = oCellHTML + "<table cellpadding=0 cellspacing=0 border=2 width=150 style='border: 2px solid #000000; text-align: center; width: 150' align='center'>";
		oCellHTML = oCellHTML + "<tr height=100 style='background-color: #000000; color: #ffffff'><td>Logo Image</td></tr>";
		oCellHTML = oCellHTML + "<tr height=50 id='hdrsample'><td>Header</td></tr>";
		oCellHTML = oCellHTML + "<tr height=150 id='bodysample'><td>Body</td></tr>";
		oCellHTML = oCellHTML + "<tr height=50 id='ftrsample'><td>Footer</td></tr>";
		oCellHTML = oCellHTML + "</table>";
		oCellHTML = oCellHTML + "</td></tr>";
		oCellHTML = oCellHTML + "</table>";
		oCell.innerHTML = oCellHTML;
		oCell.align="center";
		oCell.width = "250";
	oRow.appendChild(oCell);
	
	var oDiv = document.getElementById("otablecontainer");
	removeAllChildren(oDiv);
	document.getElementById("otablecontainer").appendChild(oTable);
	
	document.getElementById("intcat").value = catTemplates;
	//document.getElementById("pagenotd").setAttribute("colspan","3");
	
} // function displayTemplateColor()



function getTemplateMaxPageNo(filename, pagesize) {

	var totTemps = filename.length;
	var pageno = Math.ceil(totTemps / pagesize);
	
	return pageno;
	
} // function getTemplatePageNo(variTemp, filename)



function getTemplatePageNo(variTemp, filename, pagesize) {
	var posi;
	var pageno;
	var maxi = filename.length;
	
	for (i=0; i<maxi; i++) {
		if (variTemp == filename[i]) {
			posi = i;
		}
	} // for (i=0...
			  
	var pageno = Math.ceil( (posi+1) / pagesize);
	return pageno;
	
	
} // function getTemplatePageNo(variTemp, filename)

function displayTemplateGeneral(pageno, pagesize, variTemp, catTemplates, filename, name) {
	
	var selflag = "";
	var maxpageno = getTemplateMaxPageNo(filename, pagesize);
	
	var oTable = document.createElement("TABLE");
	oTable.className = "templatetbl";
  	var oTHead = document.createElement("THEAD");
  	var oTBody = document.createElement("TBODY");
	var oRow, oCell;
  	var i, j;
	
	oTable.appendChild(oTBody);
	
	// create page numbers row
	oRow = document.createElement("TR");
	oRow.width = "100%";
	oTBody.appendChild(oRow);
	oCell = document.createElement("TD");
	var oCellHTML = "";
	
	oCellPageHTML = "<table width='100%'><tr><td align='center'>Page:";
	
	for (i=1; i <= maxpageno; i++) {
		
		if (i == pageno) {
			if (catTemplates == "gen") {
				oCellPageHTML = oCellPageHTML + "<a href='javascript:displayGen(" + i + ",\"\")'><span class='activepageno'>&nbsp;" + i + "&nbsp;</span></a>|";
			}
			else if (catTemplates == "siteskins") {
				oCellPageHTML = oCellPageHTML + "<a href='javascript:displaySiteSkins(" + i + ",\"\")'><span class='activepageno'>&nbsp;" + i + "&nbsp;</span></a>|";
			}
		}
		else {
			if (catTemplates == "gen") {
				oCellPageHTML = oCellPageHTML + "<a href='javascript:displayGen(" + i + ",\"\"\)'>&nbsp;" + i + "&nbsp;</a>|";
			}
			else if (catTemplates == "siteskins") {
				oCellPageHTML = oCellPageHTML + "<a href='javascript:displaySiteSkins(" + i + ",\"\"\)'>&nbsp;" + i + "&nbsp;</a>|";
			}
		}

	} // for (i=1; i < pageno; i++)
	
	oCellPageHTML = oCellPageHTML + "</td></tr></table>";
	oCell.innerHTML = oCellPageHTML;
	oCell.align="left";
	oCell.colSpan="3";
	oRow.appendChild(oCell);
		
	var begi = (pageno * pagesize) - pagesize;
	var endi = (pageno * pagesize) - 1;
	if ( endi > (filename.length - 1) ) {
		endi = filename.length - 1;
	}
	
	for (i=begi; i <= endi; i++)
	{
		if ( (i%3) == 0) {
			oRow = document.createElement("TR");
			oTBody.appendChild(oRow);
		}
		var iTemp = i+1;
		if ((variTemp != "") && (variTemp == filename[i])) {
			selflag = "CHECKED";
		}
		else { 
		selflag = ""; 
		}
		
		oCell = document.createElement("TD");
		if (name[i] == "") {
			var template_name = catTemplates + " Template " + iTemp;
		}
		else {
			var template_name = name[i];
		}
		var oCellHTML = "<img src='emailtemps/" + catTemplates + "/" + filename[i] + "-sm.jpg' border='1'/>";
		oCellHTML = oCellHTML + "<p>" + template_name + "</p>";
		oCellHTML = oCellHTML + "<a href=\"javascript:showTemplate('" + catTemplates + "','" + filename[i] + "',event); backgroundFilter();\"><img src=\"images/icon_magnifier_preview1.gif\" />View</a>  <input type=\"radio\" id=\"radiouse" + iTemp + "\" name=\"radiouse\" value=\"" + filename[i] + "\"" + selflag + " />Use This Template";
		oCell.innerHTML = oCellHTML;
		oCell.align="center";
		oCell.width = "250";
		oRow.appendChild(oCell);
	}
	
	// display page numbers on the bottom also
	oRow = document.createElement("TR");
	oRow.width = "100%";
	oTBody.appendChild(oRow);
	oCell = document.createElement("TD");

	oCell.innerHTML = oCellPageHTML;
	oCell.align="left";
	oCell.colSpan="3";
	oRow.appendChild(oCell);

	
	var oDiv = document.getElementById("otablecontainer");
	removeAllChildren(oDiv);
	document.getElementById("otablecontainer").appendChild(oTable);
	
	document.getElementById("intcat").value = catTemplates;
	//document.getElementById("pagenotd").setAttribute("colspan","3");
	
	
	
} // function displayGenTemplatetst()


function displayMyOwnCode(varinowncode)
{
	var existingowncode = "";
	if (varinowncode != "") {
			if (document.getElementById(varinowncode).value != "") {
				existingowncode = document.getElementById(varinowncode).value; }
	}
			
	var oDiv = document.getElementById("otablecontainer");
	var oTable = oDiv.getElementsByTagName("TABLE");
	oDiv.removeChild(oTable[0]);
	
	var oTBox = document.createElement("textarea");
	oTBox.setAttribute('id', 'inowncode');
	oTBox.setAttribute('name', 'inowncode');
	oTBox.setAttribute('rows', 100);
	oTBox.setAttribute('cols', 48);
	oTBox.style.width = '500px';
	oTBox.style.margin = '0 10px 10px 10px';
	oDiv.appendChild(oTBox);
	
	document.getElementById("intcat").value = "owncode";
	if (existingowncode != "") {
		document.getElementById("inowncode").innerText = existingowncode; }
	
} // function displayMyOwnCode

function displayMyOwnCode2(varinowncode)
{
	var existingowncode = "";
	if (varinowncode != "") {
			if (document.getElementById(varinowncode).value != "") {
				existingowncode = document.getElementById(varinowncode).value; }
	}
			
	var oDiv = document.getElementById("otablecontainer");
	
	var oTBox = document.createElement("textarea");
	oTBox.setAttribute('id', 'inowncode');
	oTBox.setAttribute('name', 'inowncode');
	oTBox.setAttribute('rows', 100);
	oTBox.setAttribute('cols', 48);
	oTBox.style.width = '500px';
	oTBox.style.margin = '0 10px 10px 10px';
	oDiv.appendChild(oTBox);
	
	document.getElementById("intcat").value = "owncode";
	if (existingowncode != "") {
		document.getElementById("inowncode").innerText = existingowncode; }
	
} // function displayMyOwnCode

function removeAllChildren(targetElement) {
    if (targetElement && targetElement.childNodes) {
        for (var rloop = targetElement.childNodes.length -1; rloop >= 0 ; rloop--) {
            targetElement.removeChild(targetElement.childNodes[rloop]);
        }
    }
}

function showTemplate(dirid,tempname,e)
{
	var posx = 0;
    var posy = 0;
	var sWidth = document.body.clientWidth;
	var sHeight = document.body.clientHeight;
	
    //posx= getX(e) + getScrollX();
    //posy= getY(e) + getScrollY();
	document.getElementById("templatepic").src = "http://www.ibizard.com/emailtemps/" + dirid + "/" + tempname + "-lg.jpg";
	document.getElementById("templatepic").border = "1";
	document.getElementById("usebtn1").onclick = Function("useTemplate('" + dirid + "','" + tempname + "'); backgroundFilter()");
	document.getElementById("usebtn2").onclick = Function("useTemplate('" + dirid + "','" + tempname + "'); backgroundFilter()");
	var divname = document.getElementById("templatescreen");
	divname.style.top = 20 + getScrollY();
	divname.style.left = (sWidth - 500)/2;
}  // view template

function hideTemplate()
{
	document.getElementById("templatepic").src = "";
	var divname = document.getElementById("templatescreen");
	divname.style.top = -1000;
	divname.style.left = -1000;
	
}  // view template

function useTemplate(dirid,tempname)
{
	document.getElementById("templatepic").src = "";
	var divname = document.getElementById("templatescreen");
	divname.style.top = -1000;
	divname.style.left = -1000;
	var radioObj = document.forms[0].radiouse;
	var rlen = radioObj.length;
	
	for (i=0; i < rlen; i++) {
		if (radioObj[i].value == tempname) {
			radioObj[i].checked = true;
		}
	} // for...
	//var aitem = rdiff-tempid;
	//radioObj[aitem].checked = true;
	//for (i=0; i < radioObj.length; i++) {
	//	if (radioObj[i].checked == true)
	//	{
	//		alert(radioObj[i].value);
	//	}
	//}
	
}  // view template