// produces (nested) tabs to show photos - December 2006
// May 2010 - cache information, add clever hovers if available

var canal_photo_cache = [];

function Photo_Tabs() {
  var photospertab = 10;
  if(cp_info.photos == 0)
    return;       // nothing at all if no photos
  var tid = document.getElementById('photo_tab');
  if(cp_info.photos == 1) { // one photo - so no tabs
    Show_Photo(tid,cp_info.photo_i[0]);
    tid.style.border="1px solid black";
    tid.style.padding="5px";
    return;
  }
  if(cp_info.photos > photospertab) {   // nested tabs
    var otabs = new Tabs(tid);
    var tctr = -1;
    for(var i=0;i<= Math.floor(cp_info.photos/photospertab);i++) {
      ++tctr;
      Create_Inner_Phototab(otabs,tctr,i,photospertab,photospertab*tctr+1+' ...');
    }
  } else {    // only one level
    var tabs = new Tabs(tid);
    if(cp_info.photos_index == 'on')
      Add_Index(tabs,photospertab,0);
    for(var i=0; i<cp_info.photos;i++) {   
      Create_Photo_Tab(tabs,i);
    }
  }
}

function Create_Inner_Phototab(otabs,tctr,i,photospertab,label) {
  // we come here for 0 on the tab - return instead
  if(tctr*photospertab >= cp_info.photos)
    return;
  otabs.Add(label,function(paneElement) {
    if (paneElement.innerHTML == '') {
      var tname = 'pho_tab_'+tctr;
      paneElement.innerHTML = '<div id="'+tname+'"></div>';
      var itab = new Tabs(document.getElementById(tname),'#48D1CC,#C3B371');
      if(cp_info.photos_index == 'on')
        Add_Index(itab,photospertab,tctr*photospertab);
      for(i=0;i<photospertab;i++) {
        var num = tctr*photospertab+i;
	if(num < cp_info.photos)
          Create_Photo_Tab(itab,num);
      }
    }
  });
}

function Create_Photo_Tab(tab,index) {
  var nt = tab.Add(index+1,function(paneElement) {
    if (paneElement.innerHTML == '') {
      // before anything else, put a skeleton in, to prevent collapse
      paneElement.innerHTML = '<div width="330" height="330" style="height: 330px; width:440px;">&nbsp;</div>';
      Show_Photo(paneElement,cp_info.photo_i[index]);
    }
  });
}

function Show_Photo(where,index) {
  if(canal_photo_cache[index]) {
    Display_Photo(where,index,canal_photo_cache[index]);
  } else {
    var xmlhttp=null;
    if (window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest()
    } else if (window.ActiveXObject) {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
    if (xmlhttp == null) {
      alert("Sorry, your browser can't do this");
      return false;
    }
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4) {
        if (xmlhttp.status==200) {
          canal_photo_cache[index] = xmlhttp.responseText;
	  Display_Photo(where,index,xmlhttp.responseText);
        }  
      }
    };
    xmlhttp.open("GET","../cgi-bin/photo_info.cgi?"+index,true);
    xmlhttp.send(null);
  }
}

// my curly-bracket escapes aren't wanted here
function deCurl(txt) {
  txt = txt.replace(/\{and\}/g,'&');
  txt = txt.replace(/\{quotes\}/g,'"');
  txt = txt.replace(/\{quote\}/g,"'");
  txt = txt.replace(/\{\{/g,'<');
  txt = txt.replace(/\}\}/g,'>');
  return txt;
}

function Display_Photo(where,index,xm) {
  var inf = eval('('+xm+')');
  r = '<table><tr><td>';
  r += '<div id="phedit_'+index+'_show" style="border: 1px solid transparent; float:left; width:'+inf.normal_width+'px; height:'+inf.normal_height+'px">';
  var ur = inf.normal_url.replace('@',cp_info.photobase); 
  if(ur.indexOf('.jpg')==-1)
      ur += '.jpg';
  var ses = '';
  if(cp_info.sessionid) 
      ses = '&session='+cp_info.sessionid;
  // used standalone (say in showing user's photos)
  if(typeof(Perhaps_Make_Editable) != 'function') {
      if(cp_info.url_rewrite) {
	  var nses = ses;
	  if(nses)
	      nses=nses.replace('&','?');
	  r += '<a class="quiet" href="../photo/'+inf.id+nses+'"><img src="'+ur+'"></div></a>';
      } else {
	  r += '<a class="quiet" href="../cgi-bin/showstuff.cgi?mode=photo&id='+inf.id+ses+'"><img src="'+ur+'"></div></a>';
      }
  } else {
      r += '<img src="'+ur+'"></div>';
  }
  r += '</td><td valign="top">';
  r += '<div style="float:right; font-size:90%; padding:5px;">';
  r += '<div style="font-style:italic">'+inf.caption+'</div>';
  r += '<div>Copyright <a class="quiet" href="../cgi-bin/showstuff.cgi?mode=user&id='+inf.puserid+ses+'">'+inf.copyright+'</a></div>';
  if(inf.taken != 'date unknown')
    r += '<div>Taken '+inf.taken+'</div>';
  if(inf.description)
      r += '<p>'+inf.description+'</p>';
  r += '</div></td></tr></table>';
  r += '<div style="clear:both"></div>';
  r += '<div class="photoclickmsg">Click on the photo to ';
  r += (amiloggedon && typeof(Perhaps_Make_Editable) != 'undefined') ? 'show edit menu' : 'see it full size';
  r += '</div>';
  if(typeof(Display_Photo_Callback) == 'function') {
      Display_Photo_Callback(where,inf,r);
  } else
      where.innerHTML = r;
  // because this is created after page load, we need to (perhaps) make
  // it editable
  if(typeof(Perhaps_Make_Editable) == 'function') {
      var len=edit_boxes.push({field:"phedit_"+index,mode:"photo"});
      Perhaps_Make_Editable(len-1);
  }
}

function Add_Index(tab,photospertab,start) {
		tab.Add('Index',function(pe) {
						if(pe.innerHTML == '') {
								pe.innerHTML = Photo_Index(tab,photospertab,start);
								Add_Tooltips(start,photospertab);						
						}
				});
}

function Photo_Index(tab,photospertab,start) {
		var r = '<table>';
		var perline = 5;
		var tl = 0;

		// for each inner tab set there is one used for the outer tab, and one for the index
		var tabid = Tabs.globalItems.length;   // first sub-tab on this pane
		var howmany = photospertab;
		if(start+photospertab > cp_info.photos) {
				howmany = cp_info.photos - start;
		}
		for(i=0;i<howmany;i++) {
				if(tl == 0) {
						r+='<tr>';
				}
				r += '<td><img id="tnp_'+start+'" src="../photos/thumbnails/'+cp_info.photo_i[start]+'.jpg" onclick="Tabs.Switch('+tabid+')"><div class="photo_label">'+(start+1)+'</div></td>';
				++tl;
				++start;
				++tabid;
				if(tl == perline) {
						r+='</tr>';
						tl = 0;
				}
		}
		if(tl != perline)
				r+='</tr>';
		r+='</table>'
				return r;
}

// Automatic hover code - May-July 2010

function Add_Tooltips(start, number) {
		for(var i=start; i< start+number; i++) {
				var x = document.getElementById('tnp_'+i);
				if(x) {
						Add_Image_Tooltip(x,cp_info.photo_i[i]);
				}
		}
}
	
function Add_Image_Tooltip(where, what) {
  if(typeof(Tip) != 'function')   // if library not loaded, quit silently
    return;
  if(typeof(where.onmouseover) == 'function') {  // we've got something
			//    console.log("Got func");
  } else {  // never been here before
    if(canal_photo_cache[what]) {  // we have the info, so display it
      Set_Tips(where, TipText(canal_photo_cache[what]));
    } else {
      Set_Autotip(where, what);
    }
  }
}

function TipText(txt) {
  var pdat = eval('('+txt+')');
  // create hover title text
  var tit = '';
  if(pdat.caption) tit = '<b>'+pdat.caption+'</b><br>';
  tit += '<i>By '+pdat.copyright + '</i>';
  tit += '<br>Taken '+pdat.taken;
	return tit;
}

// additional functions causes proper closure creation and so differing tips
function Set_Tips(bx,tit) {
    bx.onmouseover = function() {Tip(tit,FONTSIZE,'1em');};
    bx.onmouseout = function() {UnTip();};
}

function Set_Autotip(where, what) {
		/* by the time the tip appears, the mouse may have moved - so we
		 * track if the mouse is over the element or not so as to know
		 * whether to create it */
		where.onmouseover = function() {
				where.hasmouse = true;
				Grab_Photo_Inf(where, what);
		}
		where.onmouseout = function() {
				where.hasmouse = false;
		}
}

function Grab_Photo_Inf(where, index) {
  var xmlhttp=null;
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest()
  } else if (window.ActiveXObject) {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
  if (xmlhttp == null) {
    alert("Sorry, your browser can't do this");
    return false;
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4) {
      if (xmlhttp.status==200) {
        canal_photo_cache[index] = xmlhttp.responseText;
				Set_Tips(where, TipText(canal_photo_cache[index]));
				// if the mouse is still there activate it
				if(where.hasmouse)
						where.onmouseover();
      }  
    }
  };
  xmlhttp.open("GET","../cgi-bin/photo_info.cgi?"+index,true);
  xmlhttp.send(null);
}