/*
   David Lalonde

   Function List:
   setGlobalVars - Call in each page to set the global path variables appropriately for that page
   showEM - Used to display the full email address as supplied in 3 parts (server extension, email name, server)
   stringReverse - Used to reverse the order of characters in a text string

*/
// Global Variables
// paths for external files referenced in functions
   var pathHome="";
   var pathPhoto="";
   var pathArt="";
   var pathFraming="";
   var pathMisc="";

// Event registration
function registerEvents()
{
   // these are from the common page links on the left hand side of the page
   var pLinks = document.getElementsByName("pagelinks");
   for (var i=0; i<pLinks.length; i++)
      {
      pLinks[i].onclick = setPageNumber;	  
      pLinks[i].onmouseover = function () {this.style.color="yellow"};
      pLinks[i].onmouseout = function () {this.style.color="black"};
      }

   // these are from the common index.htm pages that show a larger view of an image and 
   // the constructed largeview.htm pages for the previous/next iamge to display   
   iLinks = document.getElementsByName("imglinks");
   for (var i=0; i<iLinks.length; i++)
      {
      iLinks[i].onclick = setImageFile;	  
      }
}

// Sets the page number id variable as per the source of the onclick event from the common page links
function setPageNumber(e)
{
   // parent.data.pageNumber=getEvent(e);
   var pageno = getEvent(e);
   window.name = pageno;

}

// Sets the image file number variable as per the source of the onclick event in the index and largeview pages
function setImageFile(e)
{
   // parent.data.imgFileNo=getEvent(e);
   var imageno = getEvent(e);
   var pageno = window.name.substring(0,1);

   window.name = pageno+"-"+imageno;

}

// Get the event ID - common function
function getEvent(e)
{
   var eventId;
   if (!e)
   {
       var e = window.event.srcElement;
   }
      
   if (e.target)
   {
      eventId = e.target.id;
   }
   else 
      if (e)
      {
         eventId = e.id;
      }   
   return eventId;
}

// Set Global Variables
function setGlobalVars(v1,v2,v3,v4,v5)
{
pathHome=v1;
pathPhoto=v2;
pathArt=v3;
pathFraming=v4;
pathMisc=v5;
}

// Write Header
function writeHeader()
{
var myHeader = "<div id=\"header\">" +
         "<a id=\"logoimage\" href=\"" + pathHome + "default.html\"><img src=\"" + pathHome +
		 "images/framing_square_logo_marblefaint.jpg\" alt=\"Framing Square Logo\" " +
         "style=\"border-width: 0\" /></a> " +
         "<img id=\"titleimage\" src=\"" + pathHome +
		 "images/newtitlemarble.jpg\" alt=\"Framing Square Title Image\" style=\"border-width: 0\" /> " +
      "</div>";
document.write(myHeader);     
}

// Write Links
function writeLinks(sublink) 
{
var myLinks ="";
var myLinks1="";
var myLinks2="";
var myLinks3="";

myLinks1="<div id=\"links\"> " +
        " <p> <br /> </p> " +
        " <ul class=\"newgroup1\"> " +
            "<li><a id=\"home\" name=\"pagelinks\" href=\"" + pathHome + "default.html\">Home</a></li> ";

switch (sublink )
{
				// The pagelinks ID's that reference the index.htm pages are used to set the page number to get data from DataHide.js
   case "A":   // Art Gallery sub links
      myLinks2=   "<li><a id=\"artgallery\" name=\"pagelinks\" href=\"" + pathArt + "artgallery.htm\">Art Gallery</a></li> " +          
                     "<ul class=\"newgroup2\"> " +
                        "<li><a id=\"0\" name=\"pagelinks\" href=\"" + pathArt + "index.htm\" >Landscapes</a></li> " +
                        "<li><a id=\"1\" name=\"pagelinks\" href=\"" + pathArt + "index.htm\" >Seascapes</a></li> " +
                        "<li><a id=\"2\" name=\"pagelinks\" href=\"" + pathArt + "index.htm\" >Birds/Animals</a></li> " +
                        "<li><a id=\"3\" name=\"pagelinks\" href=\"" + pathArt + "index.htm\" >Still Life</a></li> " +
                        "<li class=\"lastitem\"><a id=\"4\" name=\"pagelinks\" href=\"" + pathArt + "index.htm\" >Figure</a></li> " +
                     "</ul>" +
				  "<li><a id=\"photogallery\" name=\"pagelinks\" href=\"" + pathPhoto + "photogallery.htm\">Photo Gallery</a></li> ";
      break; 
   case "P":   // Photo Gallery sub links
      myLinks2=   "<li><a id=\"artgallery\" name=\"pagelinks\" href=\"" + pathArt + "artgallery.htm\">Art Gallery</a></li> " +
   			      "<li><a id=\"photogallery\" name=\"pagelinks\" href=\"" + pathPhoto + "photogallery.htm\">Photo Gallery</a></li> " +
                     "<ul class=\"newgroup2\"> " +
                        "<li><a id=\"0\" name=\"pagelinks\" href=\"" + pathPhoto + "index.htm\" >Animals</a></li> " +
                        "<li><a id=\"1\" name=\"pagelinks\" href=\"" + pathPhoto + "index.htm\" >Aquatic</a></li> " +
                        "<li><a id=\"2\" name=\"pagelinks\" href=\"" + pathPhoto + "index.htm\" >Birds/Insects</a></li> " +
                        "<li><a id=\"3\" name=\"pagelinks\" href=\"" + pathPhoto + "index.htm\" >Flowers</a></li> " +
                        "<li><a id=\"4\" name=\"pagelinks\" href=\"" + pathPhoto + "index.htm\" >Landscapes</a></li> " +						
						"<li><a id=\"5\" name=\"pagelinks\" href=\"" + pathPhoto + "index.htm\" >Objects</a></li> " +
                        "<li class=\"lastitem\"><a id=\"6\" name=\"pagelinks\" href=\"" + pathPhoto + "index.htm\" >People</a></li> " +
                     "</ul>";
      break;  	  
   default:    // No sub links
      myLinks2=   "<li><a id=\"artgallery\" name=\"pagelinks\" href=\"" + pathArt + "artgallery.htm\">Art Gallery</a></li> " +
				  "<li><a id=\"photogallery\" name=\"pagelinks\" href=\"" + pathPhoto + "photogallery.htm\">Photo Gallery</a></li> ";                 ;
      break;
}              
myLinks3=   "<li><a id=\"framing\" name=\"pagelinks\" href=\"" + pathFraming + "framing.htm\">Picture Framing</a></li> " +
            "<li><a id=\"location\" name=\"pagelinks\" href=\"" + pathMisc + "location.htm\">Location & Contact</a></li> " +
//            "<li><a id=\"contact\" name=\"pagelinks\" href=\"" + pathMisc + "contact.htm\">Contact Me</a></li> " + 
            "<li><a id=\"about\" name=\"pagelinks\" href=\"" + pathMisc + "about.htm\">About The Artist</a></li> " +
         "</ul> " +
         "<div id=\"dennis\"> " +
               "<a id=\"about\" href=\"" + pathMisc + "about.htm\"><img id=\"indeximg\" src=\"" + pathHome +
			   "images/gallery_flag_house_03.jpg\" alt=\"The Artist\" style=\"border-width: 0\" /></a> " +
         "</div> " +
      "</div>";
      
myLinks = myLinks1 + myLinks2 + myLinks3;      

document.write(myLinks);      
}

// Write Address
function writeAddress() 
{
   var newNode = document.createElement( "address" );
   var text = "Framing Square " + "\u25CF" +
              " 345 St Patrick St. " + "\u25CF" +
              " Fergus, Ontario " + "\u25CF" +
              " N1M 1M7 " + "\u25CF" +
              " (519) 843-1633 ";
   newNode.appendChild(document.createTextNode( text ) );
   document.getElementById( 'innermain' ).appendChild( newNode );
   // Register the Events
   registerEvents();
   
}
  		
// Display an email address as a link
function showEM(emServerExt,userName,emServer)
   {userName = stringReverse(userName);
    emServer = stringReverse(emServer);
    emServerExt = stringReverse(emServerExt);
    var emLink = userName + "@" + emServer + "." + emServerExt;
    document.write("<a href='mailto:" + emLink + "'>");
    document.write(emLink);
    document.write("</a>");}

// Reverse a text string
function stringReverse(textString) {
   if (!textString) return '';
   var revString='';
   for (i = textString.length-1; i>=0; i--)
       revString+=textString.charAt(i)
   return revString;
}

// Create the body of the picture large view page
function largeViewBody()
{
   // set the page and image file indexes from the hidden page stored variables

   
   // var pageIndex = parseInt(parent.data.pageNumber);    
   var pageIndex = parseInt(window.name);   
	 
   // var fileIndex = parseInt(parent.data.imgFileNo);
   var dash = window.name.indexOf('-');
   var fileIndex = parseInt(window.name.substring(dash+1));
		 
   // create h2 header node
   createNodeH2(pageIndex);
   
   // create link nodes
   createNode3Links(pageIndex, fileIndex);
   
   // create line breal <BR />
   createNodeBr();
   
   // create image node
   createNodeImage(pageIndex, fileIndex); 
   
      // create line breal <BR />
   createNodeBr();
      
   // create paragraph node for image description
   // createNodePara( parent.data.window.pageset[pageIndex][fileIndex][4], "innerbody" );
   createNodePara( window.pageset[pageIndex][fileIndex][4], "innerbody" );
   
}

// Create the H2 node
function createNodeH2(pageI)
{
   var newNode = document.createElement( "h2" );
   newNode.setAttribute("style", "text-align: left");
   // var text = parent.data.window.pageset[pageI][0][0];  // set page category name
   var text = window.pageset[pageI][0][0];  // set page category name
   newNode.appendChild(document.createTextNode( text ) );
   document.getElementById( 'innerbody' ).appendChild( newNode );   
}

// create the 3 navigation link nodes at the top of the large image displayed
function createNode3Links( pageI, fileI )
{
   // first link
   var page = "largeview.htm";
   var spacer = true;      
   var text = "Previous Picture";
   var nlink = fileI-1;
   if (fileI == 1)
   {
      text = "Last Picture";  // set to last if on the first
      // nlink = parent.data.window.pageset[pageI][0][1];
      nlink = window.pageset[pageI][0][1];
   }

   createNodealink(text, page, nlink, spacer); 
   
   // second link
   page = "index.htm";
   spacer = true;   
   text = "Back to Picture Index";
   nlink = 0;
   createNodealink(text, page, nlink, spacer); 

   // third link
   page = "largeview.htm";
   spacer = false;   
   text = "Next Picture";
   nlink = fileI+1;
      // if ( fileI == parent.data.window.pageset[pageI][0][1] )   // set to first if on the last image
      if ( fileI == window.pageset[pageI][0][1] )   // set to first if on the last image	  
   {
      text = "First Picture";
      nlink = 1;      
   }
   createNodealink(text, page, nlink, spacer);
}

// create the a link nodes for the largeview page - common
function createNodealink(text, page, nextLink, spacer)
{
   var newNode = document.createElement( "a" );
   newNode.setAttribute("href", page);
   newNode.setAttribute("class", "links3");    
   newNode.setAttribute("id", nextLink.toString());
   newNode.setAttribute("name", "imglinks");     
   newNode.appendChild(document.createTextNode( text ) );
   document.getElementById( 'innerbody' ).appendChild( newNode );  
   if (spacer)    // put a spacer between the links
      document.getElementById( 'innerbody' ).appendChild(document.createTextNode( "\u0020\u002e\u0020") );
}

// Create a line break node
function createNodeBr()
{
   var newNode = document.createElement( "br" );
   document.getElementById( 'innerbody' ).appendChild( newNode );   
}

// Create the image node
function createNodeImage( pageI, fileI )
{
   // var imgPath = parent.data.window.pageset[pageI][0][2];
   var imgPath = window.pageset[pageI][0][2];   
   var newNode = document.createElement( "img" );
   // newNode.setAttribute("src", imgPath+"images/"+parent.data.window.pageset[pageI][fileI][0]);
   newNode.setAttribute("src", imgPath+"images/"+window.pageset[pageI][fileI][0]);   
   newNode.setAttribute("class", "largeview");
   // newNode.setAttribute("alt", parent.data.window.pageset[pageI][fileI][1]);
   // newNode.setAttribute("width", parent.data.window.pageset[pageI][fileI][2]);
   // newNode.setAttribute("height", parent.data.window.pageset[pageI][fileI][3]);
   newNode.setAttribute("alt", window.pageset[pageI][fileI][1]);
   newNode.setAttribute("width", window.pageset[pageI][fileI][2]);
   newNode.setAttribute("height", window.pageset[pageI][fileI][3]);   
   document.getElementById( 'innerbody' ).appendChild( newNode ); 


}

// Create a paragraph node
function createNodePara( text, where )
{
   var newNode = document.createElement( "p" );
   newNode.appendChild(document.createTextNode( text ) );
   document.getElementById( where ).appendChild( newNode );   
}

// Create the body of the index page
function indexBody()
{
   // set the page and image file indexes
   // var pageIndex = parseInt(parent.data.pageNumber); 
   var pageIndex = parseInt(window.name); 
			 
   // var fileIndex = parseInt(parent.data.imgFileNo);
   // var dash = window.name.indexOf('-');
   // var fileIndex = window.name.substring(dash+1);
  
			 
   // create h2 header node
   createNodeH2(pageIndex);
 
   // create paragraph node for the click image instruction on innerbody div
   createNodePara( "Click on any image below for a larger view and more details.", "innerbody" );   
   
   // create table of images
   createNodeTableImages(pageIndex);
}

// Create the table of images for the index page body
function createNodeTableImages( pageI )
{
   // var images = parent.data.window.pageset[pageI][0][1];  // number of images for the category
   var images = window.pageset[pageI][0][1];  // number of images for the category   
   
   createNodetable();      // create the table node
   var imageCount=1; 
   var imageRow=1;
   var imagePath;
   var imageFile;
   var imageAlt;
   var imageWid;
   var imageLen;
   var imageId=1;
   for (imageId; imageId<=images; imageId++)
   {
      if (imageCount==1)
	  {
         createNodetr(imageRow);      // create a table row for every 4 images
	  }
      imagePath = window.pageset[pageI][0][2];         
      imageFile = window.pageset[pageI][imageId][0];
      imageAlt = window.pageset[pageI][imageId][1];
      imageWid = window.pageset[pageI][imageId][2];
      imageLen = window.pageset[pageI][imageId][3];
      createNodetd(imageRow, imageId, imagePath, imageFile, imageAlt, imageWid, imageLen );   // create the table column 
      
      imageCount++;    
      // reset the image count to force a new table row
      if (imageCount==5)
      {
         imageCount = 1;
         imageRow++;
      }
   }
}

// Create the table node for the images
function createNodetable()
{
	var newNode = document.createElement( "table" );
   newNode.setAttribute("class", "ptable");    
   newNode.setAttribute("id", "imtable");    
   newNode.setAttribute("cellpadding", "0.5em");
   newNode.setAttribute("cellspacing", "0.5em");     
   document.getElementById( 'innerbody' ).appendChild( newNode );    
}

// Create the table row
function createNodetr(row)
{
   var rowId = "R"+row.toString();
	var newNode = document.createElement( "tr" );
   newNode.setAttribute("id", rowId );   
   document.getElementById( 'imtable' ).appendChild( newNode );    
}

// Create the table detail columns
function createNodetd(row, imageId, filePath, fileName, altName, imageWid, imageLen)
{
   var rowId = "R"+row.toString();
   var colId = "C"+imageId.toString();
   
   // set the image class for picture formatting in the CSS
   var classId = "tpicture";
   if (imageWid < imageLen)
   {
	  classId = "tpicture2"
   }
   
   // create the td node
	var newNode = document.createElement( "td" );
   newNode.setAttribute("class", "tcell"); 
   newNode.setAttribute("id", colId );     
   document.getElementById( rowId ).appendChild( newNode );     
   
   // create the anchor node
  	var newNode1 = document.createElement( "a" );
   newNode1.setAttribute("href", "largeview.htm");    
   
   // create the image node
	var newNode2 = document.createElement( "img" );
   newNode2.setAttribute("src", filePath+"images/"+fileName);
   newNode2.setAttribute("alt", altName);
   newNode2.setAttribute("class", classId);    
   newNode2.setAttribute("id", imageId.toString());
   newNode2.setAttribute("name", "imglinks");
   newNode1.appendChild( newNode2 );      
    
   document.getElementById( colId ).appendChild( newNode1 );    
}