//--------------------------------------------------------------------------------------------------
// All material contained within this and associated downloaded pages is the property of The Image Artist 
// Copyright © 2005.  All rights reserved.
//
// www.theImageArtist.com
//
//---------------------------------------------------------------------------------------------------

window.onload=InitializePage;

var MaxCol=2   /// number of column(thumbnails) or TD cell per row or  TR in table
var thumbnailCount=0
var MaxRow=4
var MaxThumbnails=8   //max thumbnails to display per page
var MaxSlideSet=0   //number of slide set (each having total of MaxThumbnails)

var ThumbnailBorderColor='white'
var ThumbnailBorderWidth='1px'
var bgImgBorderColor='white'
var bgImgBorderWidth='2px'

var thumbnailPath='thumbnails/'
var bigImagesPath='images/'
var ThumbnailDivPositionLEFT		= 160; 	// Set position of thumbnail viewer DIV from LEFT of page
var ThumbnailDivPositionTOP		= 90;       // Set position of thumbnail viewer DIV from TOP of page
var ThumbnailDivWidth              =175        //Set width of Thumbnail image viewer DIV
var ThumbnailDivHight              =470        //Set hight of Thumbnail image viewer DIV
var bgImgDivPositionLEFT		= 460; 	// Set position of big image viewer DIV from LEFT of page
var bgImgDivPositionTOP		      = 90;       // Set position of big image viewer DIV from TOP of page
var bgImgDivWidth                   =400        //Set width of big image viewer DIV
var bgImgDivHight                   =450        //Set hight of big image viewer DIV
var ButtonBGColor			= '#333333'; 		// Set color of [Button] Background
var ButtonFontColor		= 'white'; 		// Set color of [Button] Font
var ButtonBorderColor		= 'black'; 		// Set color of [Button] border

var ControlsFontColor        = 'white'; 		// Set color of [Control Area] Font

// Image Alignment
var ImageValignment		= 'bottom'; 		// Set verticle alignment within viewer (options: top, bottom. middle)

var largeImageList = new Array()
for ( k=0; k< ImageArray.length ; k++)
{ 
largeImageList[k]=new Image();
largeImageList[k].src=bigImagesPath + ImageArray[k];
}




//=============================================================================
function InitializePage()
{

MaxSlideSet=Math.ceil(ImageArray.length/MaxThumbnails)

for ( i=1; i<=MaxSlideSet ; i++)
{ CreatSlideSet(i)}


for ( i=1; i<=MaxSlideSet ; i++)
{ 
   setStyles('SlideSet_'+i)
 }
CreatLargeImageDiv()



//document.getElementById('LargeImage').src=largeImageList[0].src;
document['LargeImage'].src=largeImageList[0].src;
document.getElementById('SlideSet_1').style.visibility="visible";
}
//-----------------------------------------------
function CreatSlideSet(setNumber)
{

//create rows (TR) for thumbnails
var thumbNailRows=""
for (j=1; j <= MaxRow; j++)
{
thumbNailRows= thumbNailRows + "<TR  id='"+ setNumber +"_thumbnial_Container_"+ j + "'></TR>"
}
thumbNailRows= thumbNailRows + "<TR  id='"+ setNumber +"_control'></TR>"

FirstDIV=document.createElement('DIV')
document.body.appendChild(FirstDIV)
FirstDIV.innerHTML=""+
"<DIV id='SlideSet_"+ setNumber +"'  ' style='visibility:hidden; background-color:#000000; position:absolute; width:"+ThumbnailDivWidth+"px; height:"+ThumbnailDivHight+"px; top:"+ThumbnailDivPositionTOP+"px; left:"+ThumbnailDivPositionLEFT+"px;' >" +
"	<DIV id='ViewingArea'  style='overflow=auto;'>" +
"	<TABLE  id='thumbnailTable_"+ setNumber +"' border='0' cellspacing='0' cellpadding='3'>" + thumbNailRows +
"	</TABLE>" + 
"	</DIV>" + 
"</DIV>"





if (ImageArray!=null)
	{
         for (j=1; j <= MaxRow; j++)
          {
            raw_name=setNumber+'_thumbnial_Container_'+j

            for (k=1; k <= MaxCol; k++)
               {
		     TDElement=document.createElement("TD");
                 TDElement.setAttribute('valign','top');
                 if (ImageArray[thumbnailCount] !=null )
                   {
                      if ( ImageArray[thumbnailCount]!= "" )
                        {
TDElement.innerHTML="<IMG border='0' src='"+thumbnailPath+ImageArray[thumbnailCount]+"' "+
"onMouseOver='img_mouseOver("+ thumbnailCount + ")'  "+
"onMouseClick='img_mouseOver("+ thumbnailCount + ")' >"
                      }
                      else  TDElement.innerHTML='&nbsp;'
                      thumbnailCount = thumbnailCount + 1
                   }
                 else  {TDElement.innerHTML='&nbsp;'}

		        document.getElementById(raw_name).appendChild(TDElement)
               }	
          }
}

//if first set, don't display "previous" button
if (setNumber > 1)
{
	TDcontrol1=document.createElement("TD");
	TDcontrol1.setAttribute('align','left');
	TDcontrol1.innerHTML="<INPUT onclick='moveLeft("+setNumber+")' type='button'  value='&lt;--'>&nbsp;<font size=2 face=Georgia color='"+ControlsFontColor+"'>Previous</font>"
	document.getElementById(setNumber +"_control").appendChild(TDcontrol1)
}
else
{
	TDcontrol1=document.createElement("TD");
	TDcontrol1.setAttribute('align','left');
	TDcontrol1.innerHTML="<font size=2 face=Georgia >&nbsp;&nbsp;</font>"
	document.getElementById(setNumber +"_control").appendChild(TDcontrol1)
}


TDcontrol2=document.createElement("TD");
TDcontrol2.setAttribute('align','right');
if (setNumber < MaxSlideSet )
 {TDcontrol2.innerHTML="<font size=2 face=Georgia color='"+ControlsFontColor+"'>Next</font>&nbsp;<INPUT onclick='moveRight("+setNumber+")' type='button'  value='--&gt;'>" }
else { TDcontrol2.innerHTML='&nbsp;'}
document.getElementById(setNumber +"_control").appendChild(TDcontrol2)  
 

///---------------
}//end of init

//-------------------------------------------------
function setStyles(setNumber)
{
// thumbnail Image Styles
IMGCol=document.getElementById(setNumber).getElementsByTagName('IMG');
if (IMGCol!=null)
	{for (im=0; im<IMGCol.length; im++)
		{
		IMGCol.item(im).style.borderStyle='solid';
		IMGCol.item(im).style.borderWidth=ThumbnailBorderWidth;
		IMGCol.item(im).style.borderColor=ThumbnailBorderColor;
		}
	}


// Button Styles
BTNCol=document.getElementById(setNumber).getElementsByTagName('INPUT');
if (BTNCol!=null)
	{for (p=0; p<BTNCol.length; p++)
		{
		BTNCol.item(p).style.borderStyle='solid';
		BTNCol.item(p).style.borderWidth="1px";
		BTNCol.item(p).style.backgroundColor=ButtonBGColor;
		BTNCol.item(p).style.color=ButtonFontColor;
		BTNCol.item(p).style.borderColor=ButtonBorderColor;
		}
	}

// Table Cell Styles
TDCol=document.getElementById(setNumber).getElementsByTagName('TD');
if (TDCol!=null)
	{for (td=0; td<TDCol.length; td++)
		{TDCol.item(td).style.verticalAlign=ImageValignment;}}

// Set thumbnail container window  position
document.getElementById(setNumber).style.left= ThumbnailDivPositionLEFT+"px";
document.getElementById(setNumber).style.top= ThumbnailDivPositionTOP+"px";
}
//-----------------------------------------------
function CreatLargeImageDiv()
{
LargeDIV=document.createElement('DIV')
document.body.appendChild(LargeDIV)  
LargeDIV.innerHTML=""+
"<DIV id='LargeImageDIV' ' style='visibility:visable; position: absolute; width:"+bgImgDivWidth+"px; height:"+bgImgDivHight+"px; top:"+bgImgDivPositionTOP+"px; left:"+bgImgDivPositionLEFT+"px;' >" +
"<IMG style='border:2px;  border-style:solid; border-color:#FFFFFF;' border='0' name='LargeImage' src=''>" +
"</DIV>"

//big image styles
//document.getElementById('LargeImage').style.borderStyle='solid';
//document.getElementById('LargeImage').style.borderWidth=bgImgBorderWidth;
//document.getElementById('LargeImage').style.borderColor=bgImgBorderColor;
}
//-----------------------------------------------------
function moveLeft(slideNo)
{
var temp= slideNo - 1
if ( temp > 0 && temp < MaxSlideSet)
  { 
   document.getElementById('SlideSet_'+slideNo).style.visibility="hidden";
   document.getElementById('SlideSet_'+ temp).style.visibility="visible";
  }
}
//-------------------------------------------------------

function moveRight(slideNo)
{
var temp= slideNo + 1
if ( temp > 0 && temp <= MaxSlideSet)
  { 
   document.getElementById('SlideSet_'+slideNo).style.visibility="hidden";
   document.getElementById('SlideSet_'+ temp).style.visibility="visible";
  }


}
//-------------------------------------------------------
function img_mouseOver(id) 
{

 //alert(id);
	if (document.images) 
           {
           //document.getElementById('LargeImage').src=largeImageList[id].src;
		//document.LargeImage.src=largeImageList[0].src;
            document['LargeImage'].src=largeImageList[id].src;
		}

     
}
//-------------------------------------------------------