var modalReq;
		 var imgRoot="/cardconnection/Custom/Backgrounds/";
         var imgDirectory;
         var directory;
         var maxHorizontalRows = 4;
		 var maxHorizontalColumns =3
		 var maxVerticalRows = 2;
		 var maxVerticalColumns = 4;
		 var maxRows = [];
		  maxRows["Horizontal"] = maxHorizontalRows;
		  maxRows["Vertical"] = maxVerticalRows;
		 var maxColumns = [];
		 maxColumns["Horizontal"] = maxHorizontalColumns;
		 maxColumns["Vertical"] = maxVerticalColumns;
		 var maxImages = [];
		 maxImages["Horizontal"]=12;
		 maxImages["Vertical"]=8;
		 var modalDirectory = null;
		 var _orientation = null;

         var createDirectoryArray = function(){
		       if (modalReq.readyState == 4) {
		          var fileNames = modalReq.responseText.split(/[\n\r\s\t]+/);
                  fileNames = fileNames.reverse();
				  var tmp = [];
				  for (var i =0;i < fileNames.length ; i++ )
				  {
					  if (fileNames[i])
					  {
						  tmp.push(fileNames[i]);
					  }
				  }
				  fileNames=tmp;
				  var pages = Math.ceil(fileNames.length / (maxRows[_orientation] * maxColumns[_orientation]));
				  createModalPanel(modalDirectory, directory, pages);
				  createModalTable(fileNames);
				}
		 }
         

		 var showModalThumbnails = function(_directory){
			      directory = _directory;
				 _orientation = FormGetFieldValue("orientation");
				 if (arguments.length>1)  
				 {
				    _orientation = arguments[1];
				 };
		         imgDirectory = imgRoot +  _orientation + "/" + directory + "/";
				 modalDirectory = _orientation + "_" + directory;
				 var elm = document.getElementById(modalDirectory + "_0");
	             if (elm != null) {
				      var rows = document.getElementById(modalDirectory + "_0").rows;
					  showModal(modalDirectory + "_0", rows ); //This will display the already existing modal panel.
					  return; 
				 };
		         modalReq = newHttpRequest();
				 var fullPath = imgDirectory + "images.txt?" + Math.random();
				 modalReq.open("GET", fullPath, true);
				 modalReq.onreadystatechange = createDirectoryArray; 
				 modalReq.send(null);
		 }

         var showModal = function(id, rows){
		       	  var h;
                  if (_orientation=="Vertical"){
	                   /*
                       if (rows > maxRows["Vertical"])
                       {
						   rows=2;
                       }; */
					   rows=maxRows["Vertical"];
				       h = (rows * 250) + 70;
				  }
				  else{
					  rows= maxRows["Horizontal"];
					  /*
					   if (rows > maxRows["Horizontal"])
					   {
						   rows =3;
					   };
					   */
				       h = (rows  *	 140) + 70;
				  };
				 sm(id, 760, 620);
		 };

var cancelButton ="<div class='siteButton' style='float: center;'> " +
 "               <div class='siteButton-t'>  " +
"					 <div class='siteButton-b'>  " +   
"						<div class='siteButton-l'>     " + 
"							<div class='siteButton-r'>     " +  
"								<div class='siteButton-tl'>     " +   
"									<div class='siteButton-tr'>     " +    
"										<div class='siteButton-bl'>     " +    
 "											<div class='siteButton-br'>     " +      
	"											<div class='siteButton-inner'>" +           
	"												 <a class='siteButton' onClick='hm();'>Cancel</a> " +         
 	"											</div>          " +
	"										</div>        " +
	"									 </div>        " +
	"								</div>       " +
	"							</div>     " +
	"						 </div>     " +
	"					</div>   " +
 	"				</div>  " +
 	"			</div> ";

	     var createModalTable = function(fileNames){
		            var row = 0;
					var finished = true;
                 
					var currentPage = -1;
					var imageCounter=0;
					while (fileNames.length > 0)
					{
						if (finished)
						{
							
							var tableObj = document.createElement("TABLE");
						    tableObj.border=0;
							tableObj.style["position"]="relative";
							
							tableObj.cellPadding=0;
							if (_orientation=="Horizontal"){
								tableObj.setAttribute("width", 760);
								tableObj.cellSpacing="15";
								var cellWidth= "210";
								var cellHeight= 150;
								var alignment="center";
								var valignment="top";
							}
							else{ 
								tableObj.setAttribute("width", 760);
								tableObj.cellSpacing = "20";
								var cellWidth= "160";
								var cellHeight= 200;
								var alignment="center";
								var valignment="top";
							}
							var tbodyObj = document.createElement("TBODY");
							tableObj.appendChild(tbodyObj);
                            finished=false;
							currentPage++;
						}
						for (var i=0; i < maxColumns[_orientation] ; i++ )
						{
							var trObj;
							if (i==0)
							{
								trObj = document.createElement("TR");
							   tbodyObj.appendChild(trObj);
							   row++;
							}
							var td = document.createElement("TD");
							td.setAttribute("width", cellWidth);
							if (_orientation=="Vertical")
							{
							//	td.setAttribute("height", cellHeight);
							}
							td.setAttribute("align", alignment);
			                td.setAttribute("valign", valignment);
							trObj.appendChild(td);

							if (fileNames.length >0)
							{
							
							var img = document.createElement("IMG");
							    var fileName;
								while (!(fileName=fileNames.pop()) && fileNames.length > 0){};
								imageCounter++;
								if (fileName)
								{
										img.src= imgDirectory + fileName;
										//img.style.zIndex=1000;
										img.setAttribute("border", "1");
										img.setAttribute("onclick", "paperChange('" + imgDirectory + "', '" + fileName + "');hm()");
										td.appendChild(img);
								};
								if (((imageCounter % maxImages[_orientation])==0) || (fileNames.length==0) && !finished)
								{
									    var nextText="";
										var prevText="";
										if (fileNames.length > 0)
										{
											   nextText="<td width='180' align='center'><div class='siteButton' style='float: center;'> " +
 "               <div class='siteButton-t'>  " +
"					 <div class='siteButton-b'>  " +   
"						<div class='siteButton-l'>     " + 
"							<div class='siteButton-r'>     " +  
"								<div class='siteButton-tl'>     " +   
"									<div class='siteButton-tr'>     " +    
"										<div class='siteButton-bl'>     " +    
 "											<div class='siteButton-br'>     " +      
	"											<div class='siteButton-inner'>" +           
	"												 <a class='siteButton' onClick='hm();showModal(\"" +  modalDirectory +"_" + (currentPage +1)+"\", " + row + ");'>More Images</a> " +         
 	"											</div>          " +
	"										</div>        " +
	"									 </div>        " +
	"								</div>       " +
	"							</div>     " +
	"						 </div>     " +
	"					</div>   " +
 	"				</div>  " +
 	"			</div></td> ";
										}
									   if (currentPage > 0)
									   {
											 prevText="<td width='180' align='center'><div class='siteButton' style='float: center;'> " +
 "               <div class='siteButton-t'>  " +
"					 <div class='siteButton-b'>  " +   
"						<div class='siteButton-l'>     " + 
"							<div class='siteButton-r'>     " +  
"								<div class='siteButton-tl'>     " +   
"									<div class='siteButton-tr'>     " +    
"										<div class='siteButton-bl'>     " +    
 "											<div class='siteButton-br'>     " +      
	"											<div class='siteButton-inner'>" +           
	"												 <a class='siteButton' onClick='hm();showModal(\"" +  modalDirectory +"_" + (currentPage -1) +"\", " + row +");'>Previous Images</a> " +         
 	"											</div>          " +
	"										</div>        " +
	"									 </div>        " +
	"								</div>       " +
	"							</div>     " +
	"						 </div>     " +
	"					</div>   " +
 	"				</div>  " +
 	"			</div></td> ";
									   };
									  var bodyElm = document.getElementById(modalDirectory +"_" + currentPage);
									  bodyElm.appendChild(tableObj);
									  var div2 = document.createElement("DIV");
									  div2.id="modal_cancel";
									  div2.style["position"]="absolute";
									  if (_orientation=="Vertical")
									  {
                                           div2.style["top"]="545px";
									  }
									  else{
										  div2.style["top"] = "565px";
									  };
									  div2.style["width"]="100%";
									  div2.setAttribute("align", "center");
									  div2.innerHTML =  "<table cellspacing='0' width='760' height='100%' valign='center'  border='0'><tbody><td align='center'><table><tbody><tr>" + prevText + "<td width='180' align='center' valign='center'>" + cancelButton + "<td></td>" + nextText + "</tr><tbody></table></td></tr></tbody></table>";
									  bodyElm.appendChild(div2);
									  
									  bodyElm.rows = row;
									  finished = true;
								}
							}
						}
					};
            
				  showModal(modalDirectory + "_0", row)
		 }
 
 //Create all the necessary pages for a given images.txt file
 var createModalPanel = function(id, directory, pages){
	  var elm = document.getElementById(id + "_0");
	 if (elm != null) return false;
     for (var i=0; i < pages; i++ )
     {
		 var div = document.createElement("DIV");
		 div.id = id + "_" + i;
		 div.setAttribute("class", "dialog");
		 div.style.display="none"; 
		 div.innerHTML = '<div><font size="3" color="#339933"><b><span style="font-family:Arial,Helvetica,sans-serif;">CHOOSE A BACKGROUND</span></b></font><center><div id="' + id + '_panel" align="center"></div></center>'  ;
		var bodyElm = document.getElementsByTagName("body")[0];
		bodyElm.appendChild(div);
	 }
 }