// code for bubbles to not go off the page!
// if you hover over the bubble, cancel the timer till you leave lest you click on somthing underneath by accident!
// how to pause the timer and resume where you left off?
// put the x to close box in the bubble, once you click on that box, set a cookie and never show that bubble again!
// do not include empty directories!
// calculate the edge of the page correctly when showing the thumbs!
var paThumbsDiv,paBigDiv,paBigImg;
var paCurMenu=null;
var paMenuTimer=null;
var paDirTree=['Albums'];
var paHints=-1;
var paNodeCounts=[];

function paBigDivHide(){
 hideBubble(true);
 paThumbsDiv.style.display='block';
 paBigDiv.style.display='none';
}

var thebigshow;

function paBigDivNext(){
 hideBubble(true);
 thebigshow=thebigshow.next;
 paBigDivNextTag(thebigshow.src);
}

function paBigDivPrev(){
 hideBubble(true); 
 thebigshow=thebigshow.prev;
 paBigDivNextTag(thebigshow.src);
}

function paBigDivNextTag(src){
 var old=paBigImg;
 paBigImg=document.createElement('img');
 paBigImg.border='0';
 paBigImg.id='paBigImg';
 paBigImg.onclick=paBigDivHide;
 paBigImg.src=src;
 paBigImg.title='Click to return to thumbs';
 scaleToFit(paBigImg,maxW,maxH);
 paBigDiv.replaceChild(paBigImg,old);
 paBigDiv.style.visibility='visible';
}

var maxH;
var maxW;

function paBigDivShow(){
 hideBubble(true);
 thebigshow=this;
 if(paBigImg){ // this is the last item in the onload event handler to initialize
  paBigDiv.style.visibility='hidden';
  paBigDiv.style.display='block';
  getViewPortSize();
  paThumbsDiv.style.display='none';
  paBigDiv.style.visibility='hidden';
  paBigDiv.style.display='block';
  paBigDivNextTag(this.src);
  var x=(this.parentNode.childNodes.length<3)?'hidden':'visible';
  document.getElementById('bignavPrev').style.visibility=x;
  document.getElementById('bignavNext').style.visibility=x;
  if(paHints & 4){
   paHints=paHints^4;
   preparebig('paBigImg','Click on the enlarged image|to return to the thumbs',-50,-50);
  }else{
   showBubbles();
  }
 }else{
  alert('Document is still loading');
 }
}

function getViewPortSize(){
  maxH=(document.body.clientHeight-paBigDiv.offsetTop-35);
  maxW=(document.body.clientWidth-paBigDiv.offsetLeft);
  var top=0;
  var wid=0;
  var e=paBigDiv;
  while(e){
   top+=e.offsetTop;
   wid+=e.offsetLeft;
   e=e.offsetParent;
  }
  var rc=getWindowSize();
  maxW=rc[0]-wid;
  maxH=rc[1]-top;
  // alert(maxW+'x'+maxH);
}

function getWindowSize(){
 var windowHeight=0;
 var windowWidth=0;
 if (typeof(window.innerHeight)=='number'){
  windowHeight=window.innerHeight;
  windowWidth=window.innerWidth;
 }else{
  if (document.documentElement && document.documentElement.clientHeight){
   windowHeight=document.documentElement.clientHeight;
   windowWidth=document.documentElement.clientWidth;
  }else{
   if (document.body&&document.body.clientHeight){
    windowHeight=document.body.clientHeight;
    windowWidth=document.body.clientWidth;
   }else{
    windowHeight=400; // fix this!!!!!!!!!!!!!!!!!!
    windowWidth=780;
   }
  }
 }
 return [windowWidth,windowHeight];
}


function scaleToFit(img,maxW,maxH){
  var msg='Original '+img.width+'x'+img.height+'\n';
  if(img.height<=maxH){
   if(img.width<=maxW){
     // alert(img.width+'x'+img.height+'\nLet it ride');
     return;
   }else{
    img.height=maxW/img.width*img.height;
    img.width=maxW;
   }
  }else{
   // resize in proportion
   var x=maxH/img.height*img.width;
   if (x<=maxW){
    img.width=x;
    img.height=maxH;
   }else{
    img.height=maxW/img.width*img.height;
    img.width=maxW;
   }
  }
 // alert(msg+'resized to '+img.width+'x'+img.height);
}

function paLoadAlbum(p1){
 var h=document.createElement('span');
 h.id='btc';
 h.onclick=hideBubble;
 h.setAttribute('id','btc');
 h.style.cursor='default';
 // h.style.display='none';
 h.style.position='absolute';
 h.title='Click to hide';
 document.getElementsByTagName('body')[0].appendChild(h);
 var theSpot=document.getElementById(p1);
 paBigDiv=document.createElement('div');
 paBigDiv.id='paBigDiv';
 paBigDiv.style.display='None';
 paBigDiv.style.height='';
 paBigDiv.style.width='';
 theSpot.parentNode.appendChild(paBigDiv);
 paBigImg=document.createElement('img');
 paBigImg.id='paBigImg';
 paBigImg.border='0'
 paBigImg.onclick=paBigDivHide;
 paBigImg.src='';
 paBigImg.style.display='inline';
 paBigImg.title='Click to return to thumbs';
 paBigDiv.appendChild(paBigImg);

 h=document.createElement('div');
 h.id='bignav';
 h.style.display='inline';
 h.style.position='absolute';
 h.style.right='5px';
 h.style.top='200px'; // ugh! how to calculate

 var x=document.createElement('img');
 x.border='0';
 x.id='bignavprev';
 x.onclick=paBigDivPrev;
 x.src='prevButton.gif';
 x.style.cursor='hand';
 x.title='Click to view the previous photo';
 h.appendChild(x);

 x=document.createElement('img');
 x.border='0';
 x.onclick=paBigDivHide;
 x.src='index.gif';
 x.style.cursor='hand';
 x.title='Click to return to the thumbs';
 h.appendChild(x);

 x=document.createElement('img');
 x.border='0';
 x.id='bignavnext';
 x.onclick=paBigDivNext;
 x.src='nextButton.gif';
 x.style.cursor='hand';
 x.title='Click to view the next photo';
 h.appendChild(x);

 paBigDiv.appendChild(h);

 paThumbsDiv=document.createElement('div');
 paThumbsDiv.id='paThumbsDiv';
 theSpot.parentNode.replaceChild(paThumbsDiv,theSpot);
 include_rpc('albumTest.php?Albums');// document.getElementById('paLoadJS').src='albumTest.php?Albums';
 return;
}


function loadDir(dirs,pics){
 // alert('the length of dir tree is '+paDirTree.length+'\nThe dir tree is '+paDirTree+'\nThe number of dirs in this node is '+dirs.length+'.');
 paNodeCounts[paDirTree.length-1]=dirs.length;
 paLoadCrumbs(paDirTree);
 paLoadThumbs(paDirTree.join('/'),pics);
 paLoadMenu(paDirTree.length,dirs);
 if(pics.length==0){
  paDirTree[paDirTree.length]=dirs[0];
  include_rpc('albumTest.php?'+paDirTree.join('/'));
 }else{
  document.getElementById('innerTitle').innerText=paDirTree[paDirTree.length-1];
//showBubbles();
  if(paHints & 1){
   paHints=paHints^1;
   preparebig('paTrace','Hover over the blue links to|navigate the albums and pages',-150,-60);
  }
 }
}

function include_rpc(url) { // this was document.getElementById('paLoadJS').src=url; but is did not fire 100% of the time, not sure why.
 var script=document.getElementById('paRPC');
 if(script){script.parentNode.removeChild(script);}
 script=document.createElement('script'); 
 script.id='paRPC';  // or script.setAttribute('language','javascript');
 script.language='javascript';
 script.type='text/javascript';
 script.src=url;
 document.getElementsByTagName('head').item(0).appendChild(script); 
 return false; 
} 

function paLoadCrumbs(dirs){
 var x=paThumbsDiv;
 paThumbsDiv=document.createElement('div');
 paThumbsDiv.id='paThumbsDiv';
 x.parentNode.replaceChild(paThumbsDiv,x);
 var paTrace=document.createElement('span');
 paTrace.id='paTrace';
 if(false){paTrace.style.display='none';} // temp until they make some directories
 paThumbsDiv.appendChild(paTrace);
 for(var i=0;i<dirs.length;i++){
  if(i>0){paTrace.appendChild(document.createTextNode('  =>  '));}
  var span=document.createElement('span');
  if(paNodeCounts[i]>1){
   span.onmouseover=paMenuShow;
   span.target='paMenu'+(i+1);
  }else{
   span.className='empty';
  }
  span.appendChild(document.createTextNode(dirs[i]));
  paTrace.appendChild(span);
 }
}

function paLoadMenu(id,nodes){
 // alert(nodes); // we are coming here, even for a childless node or a node with only one entry!
 // alert(nodes.length);
 if(nodes.length<2){
  // set the crumb to black and turn off the onhover?
 }else{
  var div=document.createElement('div');
  div.id='paMenu'+id;
  div.style.position='absolute';
  div.style.display='none';
  div.onmouseover=paMenuDivEnter;
  div.onmouseout=paMenuDivLeave;
  var table=document.createElement('table');
  table.className='paMenu';
  table.paDir=paDirTree.join('|');
  // alert(table.paDir);
  div.appendChild(table);
  var tbody=document.createElement('tbody');
  table.appendChild(tbody);
  for(i=0;i<nodes.length;i++){
   var txt=document.createTextNode(nodes[i]);
   var td=document.createElement('td');
   td.onclick=paMenuCellClick;
   td.paDir=paDirTree.join('|'); //  pass in this parm instead of imploding it each time?  put it in the div or the table just once instead of each td?
   td.appendChild(txt);
   var tr=document.createElement('tr');
   tr.onmouseover=paMenuRowEnter;
   tr.onmouseout=paMenuRowLeave;
   tr.appendChild(td);
   tbody.appendChild(tr);
  }
  var x=document.getElementById(div.id);
  if(x){
   document.body.replaceChild(div,x)
  }else{
   document.body.appendChild(div);
  }
 }
}

function paLoadThumbs(path,pictures){
 var div=null; 
 var prev=null;
 var first=null;
 var wide=0;
 var width=screen.width-350; // should calculate the offset of the left edge  of the div, subract that and an allowance for the scroll bar!
 var nobr=null;
 var span;
 getViewPortSize();
 width=maxW;
 for(var i=0;i<pictures.length;i++){
  var img=document.createElement('img');
  if(prev){prev.next=img;}else{first=img;}
  img.border=0;
  img.onclick=paBigDivShow;
  img.prev=prev;
  img.src=path+'/'+pictures[i];
  img.title='Click to enlarge this Photo';
  if(img.height){img.width=100/img.height*img.width;}
  img.height=100;
  // if(nobr===null || (nobr.lastChild.offsetLeft+img.width)>width){
  if(nobr===null || (wide+img.width)>width){
   wide=0; 
   div=document.createElement('div');
   div.className='filmStrip';
   paThumbsDiv.appendChild(div);
   var nobr=document.createElement('nobr');
   div.appendChild(nobr); 
   var span=document.createElement('span');
   nobr.appendChild(span); 
  }
  nobr.appendChild(img); 
  prev=img;
  wide+=img.width+10;
  // alert(wide+' down, '+width+' to go');
 }// end for i 
 if(first){
  first.prev=img;
  img.next=first;
 }
}

function paMenuCellClick(){
 paMenuHide();
 paDirTree=this.paDir.split('|');
 paDirTree[paDirTree.length]=so_getText(this);
 include_rpc('albumTest.php?'+paDirTree.join('/'));
}

function so_getText(obj){
 if(obj.nodeType == 3) return obj.nodeValue;// return the data of obj if its a text node
 var txt=new Array();
 var i=0;
 while(obj.childNodes[i]){ // loop over the children of obj and recursively pass them back to this function
		txt[txt.length]=so_getText(obj.childNodes[i]);
		i++;
	}
 return txt.join(''); // return the array as a string
}

function paMenuDivEnter(){menuTimerStop(this);}
function paMenuDivLeave(){menuTimerStart(this);}

function paMenuHide(){
 if(!paCurMenu) return;
 paCurMenu.style.display='none';
 paCurMenu=null;
 return;
}

function paMenuShow(){
 // alert(this.target);
 hideBubble(true);
 paMenuHide();
 paCurMenu=document.getElementById(this.target);
 var top=0;
 var lft=0;
 var e=this;
 while(e){
  top+=e.offsetTop;
  lft+=e.offsetLeft;
  e=e.offsetParent;
 }
 // get these values from humo site!
 paCurMenu.style.top=top+'px';
 paCurMenu.style.left=lft+'px';
 var x=findFirstChildByTagName(paCurMenu,'tr');
 while(x){
  y=findFirstChildByTagName(x,'td');
  y.style.width=this.offsetWidth;
  x=x.nextSibling;
  x=null; // on the theory that I only need to set the width in one cell?????
 }
 paCurMenu.style.display='block';
}

function paMenuRowEnter(){this.firstChild.style.color='blue';}
function paMenuRowLeave(){this.firstChild.style.color='';}

function menuTimerStart(){
 menuTimerStop();
 paMenuTimer=setTimeout("paMenuTimerTimeout();",250);
}
function menuTimerStop(){
 if(paMenuTimer){
  clearTimeout(paMenuTimer);
  paMenuTimer=null;
 }
}

function paMenuTimerTimeout(){paMenuHide();}

function findFirstChildByTagName(e,tag){ // used?
 if(e){
  tag=tag.toUpperCase();
  var ce=e.firstChild;
  while(ce){
   if(ce.tagName==tag){return ce;}
   ce=ce.firstChild;
  }
 }
 return null;
}

function findParentByTagName(e,tag){ // used?
 if(e){
  tag=tag.toUpperCase();
  var ce=e.parentNode;
  while(ce){
   if(ce.tagName==tag){return ce;}
   ce=ce.parent.Element;
  }
 }
 return null;
}

/*javascript for Bubble Tooltips by Alessandro Fulciniti- http://pro.html.it - http://web-graphics.com */

function enableTooltips(id){
 var links,i,h;
 if(!document.getElementById || !document.getElementsByTagName) return;
 // AddCss();
 h=document.createElement('span');
 h.id='btc';
 h.setAttribute('id','btc');
 h.style.position='absolute';
 document.getElementsByTagName('body')[0].appendChild(h);
 /*
 if(id==null) links=document.getElementsByTagName('a');else links=document.getElementById(id).getElementsByTagName('a');
 for(i=0;i<links.length;i++){
  Prepare(links[i]);
 }
 */
}


/*
function Prepare(el){
 var tooltip,t,b,s,l;
 t=el.getAttribute('title');
 if(t==null || t.length==0) t='link:';
 el.removeAttribute('title');
 tooltip=CreateEl('span','tooltip');
 s=CreateEl('span','top');
 s.appendChild(document.createTextNode(t));
 tooltip.appendChild(s);
 b=CreateEl('b','bottom');
 l=el.getAttribute('href');
 if(l.length>30) l=l.substr(0,27)+'...';
 b.appendChild(document.createTextNode(l));
 tooltip.appendChild(b);
 setOpacity(tooltip);
 el.tooltip=tooltip;
 el.onmouseover=showTooltip;
 el.onmouseout=hideTooltip;
 el.onmousemove=Locate;
}

function showTooltip(e){
 document.getElementById('btc').appendChild(this.tooltip);
 Locate(e);
}

function hideTooltip(e){
 var d=document.getElementById('btc');
 if(d.childNodes.length>0) d.removeChild(d.firstChild);
}
*/

function setOpacity(el){
 var x='85';
 el.style.filter='alpha(opacity:'+x+')';
 el.style.KHTMLOpacity='0.'+x+'';
 el.style.MozOpacity='0.'+x+'';
 el.style.opacity='0.'+x+'';
}

function CreateEl(t,c){
 var x=document.createElement(t);
 x.className=c;
 x.style.display='block';
 return(x);
}

/*
function AddCss(){
 var l=CreateEl('link');
 l.setAttribute('type','text/css');
 l.setAttribute('rel','stylesheet');
 l.setAttribute('href','bt.css');
 l.setAttribute('media','screen');
 document.getElementsByTagName('head')[0].appendChild(l);
}

function Locate(e){
 var posx=0,posy=0;
 while(e){
  posx+=e.offsetLeft;
  posy+=e.offsetTop;
  e=e.offsetParent;
 }
 var btc=document.getElementById('btc');
 btc.style.top=(posy-40)+'px';
 btc.style.left=(posx+40)+'px';
}
*/

function preparetrk(p1,txt,x,y){
 var el=document.getElementById(p1)
 var top=CreateEl('span','ntop btn');
 preparetext(top,txt);
 var bot=CreateEl('span','nbot btn');
 bot.appendChild(document.createTextNode(''));
 showBubble(top,bot,el,x,y);
}

function preparebig(p1,txt,x,y){
 var el=document.getElementById(p1)
 var top=CreateEl('span','rtop btr');
 preparetext(top,txt);
 var bot=CreateEl('span','rbot btr');
 bot.appendChild(document.createTextNode(''));
 showBubble(top,bot,el,x,y);
}

function preparetext(el,txt){
 var a=txt.split('|');
 for(var i=0;i<a.length;i++){
  if(i){el.appendChild(document.createElement('br'));}
  el.appendChild(document.createTextNode(a[i]));
 }
 return;
}

function showBubble(top,bot,el,x,y){
 var tooltip=CreateEl('span','tooltip');
 tooltip.appendChild(top);
 tooltip.appendChild(bot);
 setOpacity(tooltip);
 var btc=document.getElementById('btc');
 btc.appendChild(tooltip);
 var posx=0,posy=0;
 var e=el;
 while(e){
  posx+=e.offsetLeft;
  posy+=e.offsetTop;
  e=e.offsetParent;
 }
 btc.style.top=(posy+y)+'px';
 btc.style.left=(posx+x)+'px';
 // btc.style.display='block';
 e=setTimeout('hideBubble();',5000);
 btc.saveTimer=e;
}

function hideBubble(p1){
 var btc=document.getElementById('btc');
 if(btc.saveTimer){
  clearTimeout(btc.saveTimer);
  btc.saveTimer=null;
 }
 while(btc.childNodes.length>0){btc.removeChild(btc.firstChild);}
 if(!p1){
  showBubbles();
 }
} 

function showBubbles(){
 if(paHints & 2 && document.getElementById('paThumbsDiv').style.display!='none'){
  paHints=paHints^2;
  preparebig('paTrace','Click on a thumbnail to|enlarge the photograph',-100,-20);
 }
 if(paHints & 8 && document.getElementById('bignavPrev').style.visibility=='visible'){
  paHints=paHints^8;
  preparebig('bignavPrev','Use this navagation control to scroll forward and back through the photos on an album page',-140,-65);
 }
}