var PhotoAlbums=new Array(); //declare space for all albums  --Album1,Album2;

//constructor for instance of PhotoAlbum Class
function PhotoAlbum(AlbumXMLURL,AlbumDivName, AlbumObjectName)
{
 
 PhotoAlbum.prototype.dtm;
 
 this.dtm="custom message: "+AlbumXMLURL;
 //alert("this.dtm in constructor="+this.dtm);

 this.AlbumXMLText="*XML data not loaded yet - loading now.*";
 this.AlbumXMLURL=AlbumXMLURL;
 this.AlbumDivName=AlbumDivName;
 
 this.AlbumXMLTextRecieved=0;
 this.FullPictures=new Array(); //holds full images
 
 this.PictureTitles=new Array();
 this.PicturePaths=new Array();

 this.ImageDisplayHeights=new Array();
 this.ImageDisplayWidths=new Array();

 this.MaxPictureWidth=380;
 this.MaxPictureHeight=264;

 this.MaxThumbnailWidth=72;
 this.MaxThumbnailHeight=66;

 this.ThumbnailDisplayHeights=new Array();
 this.ThumbnailDisplayWidths=new Array();
 
 this.ThumbnailDisplayHeights=new Array();
 this.ThumbnailDisplayWidths=new Array();

 this.AlbumTitle="No Title Specified";

 this.NumberOfPictures;
 this.LeftPictureNumber;
 this.RightPictureNumber;
 this.NumberOfPicturesPerScreen=4;

 this.InLeftArrow=0;
 this.InRightArrow=0;

 this.PendingRight=0;
 this.PendingLeft=0; 

 //this.include=include;
 //this.HandleXMLLoad=postFileReady;

 //this.doc;

 //this.testfx=testfx;
 //this.testfx();
 
 //setup album display div
 AlbumDivText="<center><div id=\""+AlbumObjectName  //had <center>  at start
    +"Picture\" style=\"height: 320px;background: transparent;border:0;margin:0px;padding: 0px;\">&nbsp;</div>   <div name=\""
    +AlbumObjectName
    +"ThumbnailRow\" style=\"height: 80px;width: 400px;background: transparent;border:0px #ff0000 solid;margin:0;\">"
    +"<div style=\"width: 400px;text-align: center;\"><div style=\"border: 0px #ff0000 solid;width: 40px;height: 80px;margin: 0px;float: left;\"><img onMouseOver=\""
    +AlbumObjectName+".InLeftArrow=1;DelayedLeft("+AlbumObjectName+")\" onMouseOut=\""+AlbumObjectName
    +".InLeftArrow=0;PendingLeft=0;\" onClick=\"MoveLeft("+AlbumObjectName
    +");\" src=\"left-arrow2.jpg\" class=\"ArrowClass\"></div>    <div id=\""+AlbumObjectName+"Thumbnails\" style=\"width: 320px;float: left;\"> 	<div id=\""
    +AlbumObjectName+"Thumbnail0\" style=\"border: 0px #ff0000 solid;width: 80px;height: 80px;float: left;\">&nbsp;</div>     <div id=\""
    +AlbumObjectName+"Thumbnail1\" style=\"border: 0px #ff0000 solid;width: 80px;height: 80px;float: left;\">&nbsp;</div> 	<div id=\""
    +AlbumObjectName+"Thumbnail2\" style=\"border: 0px #ff0000 solid;width: 80px;height: 80px;float: left;\">&nbsp;</div> 	<div id=\""
    +AlbumObjectName+"Thumbnail3\" style=\"border: 0px #ff0000 solid;width: 80px;height: 80px;float: left;\">&nbsp;</div>"
    +"</div>   <div style=\"border: 0px #ff0000 solid;width: 40px;height: 80px;margin: 0px;float: left;\"><img onClick=\"MoveRight("
    +AlbumObjectName+");\" onMouseOver=\""+AlbumObjectName+".InRightArrow=1;DelayedRight("+AlbumObjectName+");\" onMouseOut=\""
    +AlbumObjectName+".InRightArrow=0;PendingRight=0;\" src=\"right-arrow2.jpg\" class=\"ArrowClass\"></div> </div></div>";
    
    
 
//-----------------------------------------------------
 AlbumDivText="<center><div id=\""+AlbumObjectName  //had <center>  at start
    +"Picture\" style=\"height: 320px;background: transparent;border:0;margin:0px;padding: 0px;\">&nbsp;</div>"
    
    //Start of Definition for Thumbnail Row
    +"<div name=\""
    +AlbumObjectName
    +"ThumbnailRow\" style=\"height: 80px;width: 400px;background: transparent;border:0px #ff0000 solid;margin:0;\">"
    
    //+"<div style=\"width: 400px;text-align: center;\">"
    
    //left arrow graphic and control specs
    +"<div Class=\"ArrowContainer\">"
    +"<img onMouseOver=\""
    +AlbumObjectName+".InLeftArrow=1;DelayedLeft("+AlbumObjectName+")\" onMouseOut=\""+AlbumObjectName
    +".InLeftArrow=0;PendingLeft=0;\" onClick=\"MoveLeft("+AlbumObjectName
    +");\" src=\"left-arrow2.jpg\" class=\"ArrowClass\"></div>"
    //END: left arrow graphic and control specs

    //start of thumbnails definition
    +"<div id=\""+AlbumObjectName+"Thumbnails\" style=\"width: 320px;float: left;\">" 
    
    +"<div id=\""+AlbumObjectName+"Thumbnail0\" style=\"border: 0px #ff0000 solid;width: 80px;height: 80px;float: left;\">&nbsp;</div>"  //slot 0
    +"<div id=\""+AlbumObjectName+"Thumbnail1\" style=\"border: 0px #ff0000 solid;width: 80px;height: 80px;float: left;\">&nbsp;</div>"  //slot 1
    +"<div id=\""+AlbumObjectName+"Thumbnail2\" style=\"border: 0px #ff0000 solid;width: 80px;height: 80px;float: left;\">&nbsp;</div>"  //slot 2
    +"<div id=\""+AlbumObjectName+"Thumbnail3\" style=\"border: 0px #ff0000 solid;width: 80px;height: 80px;float: left;\">&nbsp;</div>"  //slot 3
    
    +"</div>" //End of Thumbnails definition
    
    //right arrow graphic and control specs
//    +"<div style=\"border: 0px #ff0000 solid;width: 40px;height: 80px;margin: 0px;float: left;\">"
    +"<div Class=\"ArrowContainer\">"
    +"<img onClick=\"MoveRight("
    +AlbumObjectName+");\" onMouseOver=\""+AlbumObjectName+".InRightArrow=1;DelayedRight("+AlbumObjectName+");\" onMouseOut=\""
    +AlbumObjectName+".InRightArrow=0;PendingRight=0;\" src=\"right-arrow2.jpg\" class=\"ArrowClass\"></div>"
    //END: right arrow graphic and control specs
    
    
    //+"</div>"
    
    +"</div>"; //end of definition for thumbnail row

 //alert(AlbumDivName); //
 document.getElementById(AlbumDivName).innerHTML= AlbumDivText;
 
 this.ShowThumbnail=ShowThumbnail;
 this.AlbumObjectName=AlbumObjectName;
 this.ShowPicture=ShowPicture;
 this.IncludeFile=IncludeFile;

 this.IncludeFile(this,this.AlbumXMLURL);
}//END: PhotoAlbum()  - constructor for instance of PhotoAlbum Class

function testfx()
{
 //alert("in testfx: dtm="+this.dtm);
}

//include a file (used to request XML callback
function IncludeFile(AlbumObject,pURL) 
{
 var thingie; //indirect reference to "this" that can be preserved in the onreadystatechange callback
 
 thingie=AlbumObject;
 
    if (window.XMLHttpRequest) { // code for Mozilla, Safari, ** And Now IE 7 **, etc
        thingie.xmlhttp=new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE
        thingie.xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
    if (typeof(thingie.xmlhttp)=='object') 
     {
        //xmlhttp.attachEvent('onreadystatechange',this.postFileReady); 
	//element.addEventListener('click',doSomething,false)
	//xmlhttp.addEventListener('onreadystatechange',this.postFileReady,false)
	//this.currentTransport.onreadystatechange = this.postFileReady;
        
//function postFileReady()
thingie.xmlhttp.onreadystatechange=// function to handle asynchronous call
function postFileReady() 
{ 
//alert("in postFileREady- thing.dtm="+thingie.dtm+"  xmlhttp ready state="+thingie.xmlhttp.readyState);
   if (thingie.xmlhttp.readyState==4) 
     {
      if (thingie.xmlhttp.status==200) 
        {
         thingie.AlbumXMLText=thingie.xmlhttp.responseText;
	 
	 thingie.doc=ParseXML(thingie,thingie.AlbumXMLText);
	
	thingie.NumberOfPictures=thingie.PictureTitles.length;
	thingie.LeftPictureNumber=0;  //allways, not matter what- we start with the first picture
	thingie.RightPictureNumber=thingie.NumberOfPicturesPerScreen-1; //max that it could be; 
	if(thingie.NumberOfPictures< (thingie.RightPictureNumber+1) )
	 thingie.RightPictureNumber=thingie.NumberOfPictures-1;  //The right may never be more than the max pic index
	
	for(i=0;i<thingie.PictureTitles.length;i++)
	 {
	  //alert("Picture["+i+"].PictureTitle="+PictureTitles[i]);
	  //alert("Picture["+i+"].PicturePath="+PicturePaths[i]);
	  
	  //FullPictures[i]=new Image();
	  
	  ThisPicture=new Image();
	  thingie.FullPictures[i]=ThisPicture;
	  
	  
	  thingie.ImageDisplayWidths[i]=-1;
	  thingie.ImageDisplayHeights[i]=-1;
	  thingie.FullPictures[i].PictureNumber=i;
	  //FullPictures[i].onmplete="alert(\"image["+i+"] loaded width=\"+FullPictures[i].width);";
	  
	  thingie.FullPictures[i].onload=LoaderResponse;

	  //ThisPicture.onReadyStateChange=imagesstatechange(i);//"function(){alert(\"image["+i+"] loaded width=\"+FullPictures[i].width);}";
	  PictureString=thingie.PicturePaths[i];
	  
	   //setup pointer to display version
	  FirstPart=PictureString.substr(0,PictureString.lastIndexOf("."));
	  LastPart=PictureString.substr(PictureString.lastIndexOf("."),PictureString.length-PictureString.lastIndexOf("."));
	  DisplayString=FirstPart+"-Display"+LastPart;

	  thingie.FullPictures[i].src=DisplayString;
	  
	  //alert(thingie.FullPictures[i].src);
	  //ThisPicture.onCompleted=imagescompleted(i);//"function(){alert(\"image["+i+"] loaded width=\"+FullPictures[i].width);}";
	  
	  //alert("Image #"+i+" loaded");
	 }

         }//if (xmlhttp.status==200) 
   } //if (xmlhttp.readyState==4) 
}; //function postFileReady() {

function LoaderResponse()
{
 //alert(this.src);
 //alert(this.width);
 
 //alert('Pic# '+this.PictureNumber+' width='+this.width);
 
 
 //if we ARE smaller than both max dimentions
 if( (this.width <= thingie.MaxPictureWidth) && (this.height <= thingie.MaxPictureHeight) )
  {
   ThumbnailDisplayHeight=20;
   ThumbnailDisplayWidth=20;
   thingie.DisplayHeight=this.height;
   thingie.DisplayWidth=this.width;

    //now setup the thumbnail sizes
    if( (this.width<this.height) 
     || 
     ( ( (this.height/this.width)*thingie.MaxThumbnailWidth) > thingie.MaxThumbnailHeight)  //handle approximately square landscape or true portrait pictures
     )
   {
    //DisplayHeight=MaxPictureHeight;
    //DisplayWidth=MaxPictureHeight*(this.width/this.height);
    
    thingie.ThumbnailDisplayHeight=thingie.MaxThumbnailHeight;
    thingie.ThumbnailDisplayWidth=thingie.MaxThumbnailHeight*(this.width/this.height);
   }
  else 
   {
    //DisplayWidth=MaxPictureWidth;
    //DisplayHeight=MaxPictureWidth*(this.height/this.width);
    
    thingie.ThumbnailDisplayWidth=thingie.MaxThumbnailWidth;
    thingie.ThumbnailDisplayHeight=thingie.MaxThumbnailWidth*(this.height/this.width);
   }

  }
 else //if we are NOT smaller than both max dimentions
 {
 if( 
     (this.width<this.height) 
     || 
     ( ( (this.height/this.width)*thingie.MaxPictureWidth) > thingie.MaxPictureHeight)  //handle approximately square landscape or true portrait pictures
     || 
     ( ( (this.height/this.width)*thingie.MaxThumbnailWidth) > thingie.MaxThumbnailHeight)  //handle approximately square landscape or true portrait pictures
     )
   {
    thingie.DisplayHeight=thingie.MaxPictureHeight;
    thingie.DisplayWidth=thingie.MaxPictureHeight*(this.width/this.height);
    
    thingie.ThumbnailDisplayHeight=thingie.MaxThumbnailHeight;
    thingie.ThumbnailDisplayWidth=thingie.MaxThumbnailHeight*(this.width/this.height);
    
   }
  else 
   {
    thingie.DisplayWidth=thingie.MaxPictureWidth;
    thingie.DisplayHeight=thingie.MaxPictureWidth*(this.height/this.width);
    
    thingie.ThumbnailDisplayWidth=thingie.MaxThumbnailWidth;
    thingie.ThumbnailDisplayHeight=thingie.MaxThumbnailWidth*(this.height/this.width);
    
   }
 }
 thingie.PictureNumber=this.PictureNumber;

 thingie.ImageDisplayWidths[thingie.PictureNumber]=thingie.DisplayWidth;
 thingie.ImageDisplayHeights[thingie.PictureNumber]=thingie.DisplayHeight;
 
 thingie.ThumbnailDisplayWidths[thingie.PictureNumber]=thingie.ThumbnailDisplayWidth;
 thingie.ThumbnailDisplayHeights[thingie.PictureNumber]=thingie.ThumbnailDisplayHeight;
 
 thingie.PictureNumber=this.PictureNumber;

//show first four thumbnails
if(thingie.PictureNumber==0)
 {
  ShowPicture(thingie,0);
  ShowThumbnail(thingie,0,0);
}
else if(thingie.PictureNumber==1)
 {
  ShowThumbnail(thingie,1,1);
 }
else if(thingie.PictureNumber==2)
 {
  ShowThumbnail(thingie,2,2);
 }
else if(thingie.PictureNumber==3)
 {
  ShowThumbnail(thingie,3,3);
 }

 
}//LoaderResponse()


	//this.postFileReady;   //this.HandleXMLLoad(this.dtm);
        thingie.xmlhttp.open('GET', pURL, true);
        thingie.xmlhttp.send(null);
     }
}//function IncludeFile(pURL) 

function imagesloaded(i)
{
 
 //alert('some image just finished loading '+i+' width='+FullPictures[i].width+' complete='+FullPictures[i].complete);
 
 //alert(FullPictures[i].width);
 //alert('end of imagesloaded('+i+')');
}

function imagescompleted(i)
{
 //alert('image completed '+i+' width='+FullPictures[i].width+' complete='+FullPictures[i].complete);
// alert('event.readyState='+event.readyState);
 
  //alert(FullPictures[i].width);
 //alert('end of imagesloaded('+i+')');
}

function imagesstatechange(i)
{
 //alert('image state change '+i+' width='+FullPictures[i].width+' complete='+FullPictures[i].complete);
 //alert('event.readyState='+event.readyState);
  //alert(FullPictures[i].width);
 //alert('end of imagesloaded('+i+')');
}

function ShowPicture(AlbumObject,PictureNumber)
{
 //alert('Picturenumber='+PictureNumber);
 //alert('AlbumObject.AlbumObjectName='+AlbumObject.AlbumObjectName);
 PictureString=AlbumObject.PicturePaths[PictureNumber];
 
 //setup pointer to display version
 FirstPart=PictureString.substr(0,PictureString.lastIndexOf("."));
 LastPart=PictureString.substr(PictureString.lastIndexOf("."),PictureString.length-PictureString.lastIndexOf("."));
 DisplayString=FirstPart+"-Display"+LastPart;
 
 document.getElementById(AlbumObject.AlbumObjectName+'Picture').innerHTML='<div class="AlbumTitle">'+AlbumObject.AlbumTitle+'</div><a href="'+PictureString+'"><img src='+DisplayString+' height='+AlbumObject.ImageDisplayHeights[PictureNumber]+' width='+AlbumObject.ImageDisplayWidths[PictureNumber]+'  class=PictureClass></a><div class=PictureTitle>'+AlbumObject.PictureTitles[PictureNumber]+'</div>';
}//function ShowPicture(PictureNumber)

function ShowThumbnail(AlbumObject,PictureNumber,ThumbnailNumber)
{
  PictureString=AlbumObject.PicturePaths[PictureNumber];
  
  //setup pointer to thumbnail
  FirstPart=PictureString.substr(0,PictureString.lastIndexOf("."));
  LastPart=PictureString.substr(PictureString.lastIndexOf("."),PictureString.length-PictureString.lastIndexOf("."));
  ThumbnailString=FirstPart+"-Thumbnail"+LastPart;

  StringToAssign='<img class=ThumbnailClass src='+ThumbnailString+' height='+AlbumObject.ThumbnailDisplayHeights[PictureNumber]+' width='+AlbumObject.ThumbnailDisplayWidths[PictureNumber];
  //StringToAssign+=" onMouseover=\"this.style.border='2px #e0e020 solid';\" ";    
  StringToAssign+=" onMouseover=\"this.className='ThumbnailHoverClass';\" ";    // NOTE!!!!!: the proper reference is this.className,  not this.class
  //StringToAssign+=" onMouseout=\"this.style.border='2px #808080 solid';\" ";    
  StringToAssign+=" onMouseout=\"this.className='ThumbnailClass';\" ";    

  
  StringToAssign+=" onClick=\"ShowPicture("+AlbumObject.AlbumObjectName+","+PictureNumber+")\" ";    
  
  //StringToAssign+=" onMouseout=\"this.class='ThumbnailClass';\" ";    
  StringToAssign+='>';
  
  ThumbnailName=AlbumObject.AlbumObjectName+'Thumbnail'+ThumbnailNumber;
  //alert(ThumbnailName);
  
  //alert("Thumbnail data:  "+StringToAssign);
  document.getElementById(ThumbnailName).innerHTML=StringToAssign;
}//function ShowThumbnail(PictureNumber,ThumbnailNumber)

function ParseXML(container,text) //container to feed results into and text to parse
{
if (window.ActiveXObject)
  {
  var doc=new ActiveXObject("Microsoft.XMLDOM");
  doc.async="false";
  doc.loadXML(text);
  }
// code for Mozilla, Firefox, Opera, etc.
else
  {
  var parser=new DOMParser();
  var doc=parser.parseFromString(text,"text/xml");
  }
  
 var x=doc.documentElement;
 
 var AlbumTitles = doc.getElementsByTagName('AlbumTitle');
 
 container.AlbumTitle=AlbumTitles[0].childNodes[0].nodeValue;
 //alert('Album Title='+AlbumTitle);

 //alert(AlbumTitles.length);
 
 var Pictures = doc.getElementsByTagName('Picture');
 
 //alert("Pictures.length="+Pictures.length);
   
 for (i=0;i<Pictures.length;i++)
  {
   container.PictureTitles[i]=x.getElementsByTagName("PictureTitle")[i].childNodes[0].nodeValue;
   container.PicturePaths[i]=x.getElementsByTagName("PicturePath")[i].childNodes[0].nodeValue;
  } //for(i
  
 //alert(x.childNodes.length); 
  
 return doc;
}//function ParseXML(text)

//slide the thumbnails to the right upon request when it is appropriate to do so
function MoveRight(AlbumName)
{
 //alert('inMoveRight() function');
 //ShowThumbnail(PictureNumber,ThumbnailNumber)
 
 //are we allowed to do a move right?
 if(AlbumName.RightPictureNumber < (AlbumName.NumberOfPictures-1) )
  { 
   AlbumName.RightPictureNumber++;
   AlbumName.LeftPictureNumber++;
   
   //now show the new thumbnails
   for(i=AlbumName.LeftPictureNumber;i<=AlbumName.RightPictureNumber;i++)
    {
     ShowThumbnail(AlbumName,i,i-AlbumName.LeftPictureNumber);
    } //show thumbnail loop
  }//yeah, we can move right
 
}//MoveRight()

//slide the thumbnails to the left upon request when it is appropriate to do so
function MoveLeft(AlbumObject)
{
 //are we allowed to do a move left?
 if(AlbumObject.LeftPictureNumber >0 )
  { 
   AlbumObject.LeftPictureNumber--;
   AlbumObject.RightPictureNumber--;
   
   //now show the new thumbnails
   for(i=AlbumObject.LeftPictureNumber;i<=AlbumObject.RightPictureNumber;i++)
    {
     ShowThumbnail(AlbumObject,i,i-AlbumObject.LeftPictureNumber);
    } //show thumbnail loop
  }//yeah, we can move right
 
}//MoveLeft()

//delay for mouse over in right arrow thumbnail scroll thingie
function DelayedRight(AlbumObject)
{
 container=AlbumObject; //preserve for callbacks
 
 //alert("DelayedRight for "+container.AlbumTitle);
 //alert("DelayedRight for "+container.AlbumTitle+" InRightArrow="+container.InRightArrow);
// alert("DelayedRight for "+container.AlbumTitle+" PendingRight="+container.PendingRight);

 if( (container.InRightArrow==1) && (container.PendingRight==1) )
    {
     MoveRight(container);
     RightTimeout=setTimeout("DelayedRight(container)",500)
    }
   else if((container.InRightArrow==1) && (container.PendingRight==0) )
    {
     container.PendingRight=1;
     RightTimeout=setTimeout("DelayedRight(container)",500)
    } 
   else if( (container.InRightArrow==0) && (container.PendingRight==1) )
    {
     container.PendingRight=0;
    } 
 
}//function DelayedRight()

//delay for mouse over in left arrow thumbnail scroll thingie
function DelayedLeft(AlbumObject)
{
 container=AlbumObject; //preserve for callbacks
 
 if( (container.InLeftArrow==1) && (container.PendingLeft==1) )
    {
     MoveLeft(container);
     LeftTimeout=setTimeout("DelayedLeft(container)",500)
    }
   else if((container.InLeftArrow==1) && (container.PendingLeft==0) )
    {
     container.PendingLeft=1;
     container.LeftTimeout=setTimeout("DelayedLeft(container)",500)
    } 
   else if( (container.InLeftArrow==0) && (container.PendingLeft==1) )
    {
     container.PendingLeft=0;
    } 
 
}//function DelayedLeft()