var WA_sp=-1;
var WA_cp=1;
var WA_r=4;
var WA_c=3;
var WA_np=Math.ceil(WebsAlbum.TOTAL_PICS/(WA_r*WA_c));

function makeSafe(fs) {
  fs = fs.replace(/ /g, " ");
  fs = fs.replace(/</g, "&lt;");
  fs = fs.replace(/>/g, "&gt;");
  fs = fs.replace(/"/g, "&quot;");
  fs = fs.replace(/\n/g, "<BR>");
  return fs;
}

function drawWebsAlbum() {
  document.write('<div id="WATitle">'+makeSafe(WebsAlbum.title)+'</div>');
  document.write('<div id="WAMain"></div>');
  var main=document.getElementById("WAMain");

  var t=document.createElement("div");
  t.id="wa-t";
  var nav='<a href="#" class="wa-bf" onclick="gotoPage(1);return false;">&laquo; First</a> <a href="#" class="wa-bf" onclick="gotoPage(WA_cp-1);return false;">&lt;</a> ';
  nav+='<a href="#" name="wa-p-1" class="wa-pn-on" onclick="gotoPage(1);return false;">1</a> ';
  for(var i=1;i<WA_np;i++) {
    nav+='<a href="#" name="wa-p-'+(i+1)+'" class="wa-pn" onclick="gotoPage('+(i+1)+');return false;">'+(i+1)+'</a> ';
  }
  nav+='<a href="#" class="wa-bf" onclick="gotoPage(WA_cp+1);return false;">&gt;</a> <a href="#" onclick="gotoPage(WA_np);return false;" class="wa-bf">Last &raquo;</a>';
  t.innerHTML=nav;

  var m=document.createElement("div");
  m.id="wa-m";
  var b=t.cloneNode(true);
  b.id="wa-b";

  var t2=document.createElement("div");
  t2.style.display="none";
  t2.id="wa-t2";
  var t2i='<div style="float:left;width:110px;text-align:left;margin-left:1px;"><a href="#" class="wa-bf" onclick="gotoPage(getCurrPage());return false;">&laquo; Back to slides</a></div>';
  t2i+='<div style="float:left;width:274px;text-align:center;">';
  t2i+='<a href="#" class="wa-bf" onclick="clickPic(WA_sp-1);return false;">&lt;prev</a>';
  t2i+='<span class="wa-bf" style="padding-bottom:1px;">'+1+' of '+WebsAlbum.TOTAL_PICS+'</span>';
  t2i+='<a href="#" class="wa-bf" onclick="clickPic(WA_sp+1);return false;">next&gt;</a>';
  t2i+='</div>';
  t2i+='<div style="float:left;width:110px;text-align:right;margin-right:1px;"><a href="#" class="wa-bf" onclick="newWin(WA_sp);return false;">Full Size</a></div>';
  t2.innerHTML=t2i;
  var b2=t2.cloneNode(true);
  b2.style.display="none";
  b2.id="wa-b2";

  main.appendChild(t);
  main.appendChild(t2);
  main.appendChild(m);
  main.appendChild(b);
  main.appendChild(b2);

  if(document.all) {
    m.innerHTML=getPageEl(WA_cp).outerHTML;
  } else {
    m.appendChild(getPageEl(WA_cp));
  }
}

function gotoPage(num) {
  if(num==0) {
    num=WA_np;
  } else if(num==WA_np+1) {
    num=1;
  } else {
    if(num<1 || num>WA_np)
      return;
    if(num==WA_cp && WA_sp==-1)
      return;
  }
  var m=document.getElementById("wa-m");
  var n=getPageEl(num);
  if(document.all) {
    m.innerHTML=n.outerHTML;
  } else {
    m.replaceChild(n,m.childNodes[0]);
  }

  var els=document.getElementsByName("wa-p-"+WA_cp);
  if(document.all) {
    els[0].className="wa-pn";
    els[1].className="wa-pn";
  } else {
    els[0].setAttribute("class","wa-pn");
    els[1].setAttribute("class","wa-pn");
  }
  els=document.getElementsByName("wa-p-"+num);
  if(document.all) {
    els[0].className="wa-pn-on";
    els[1].className="wa-pn-on";
  } else {
    els[0].setAttribute("class","wa-pn-on");
    els[1].setAttribute("class","wa-pn-on");
  }

  WA_cp=num;

  if(WA_sp!=-1) {
    document.getElementById("wa-t").style.display="block";
    document.getElementById("wa-b").style.display="block";
    document.getElementById("wa-t2").style.display="none";
    document.getElementById("wa-b2").style.display="none";
  }
  WA_sp=-1;
}

function getPageEl(num) {
  var row,col;
  var ps=(num-1)*WA_r*WA_c;
  var tab=document.createElement("table");
  tab.align='center';
  for(var i=0;i<WA_r*WA_c;i++) {
    if(i%WA_r==0) {
      row=document.createElement("tr");
    }
    col=document.createElement("td");
    col.style.backgroundColor='#fff';
    if(ps+i<WebsAlbum.TOTAL_PICS) {
      col.style.width='120px';
      col.style.height='148px';
      col.style.textAlign='center';
      var tn=document.createElement("img");
      tn.src=WebsAlbum.thumbs[ps+i];
      tn.style.width=WebsAlbum.thumbWidth(ps+i,100)+'px';
      tn.style.height=WebsAlbum.thumbHeight(ps+i,100)+'px';
      tn.style.border='1px solid #888';
      tn.style.marginTop=(59-WebsAlbum.thumbHeight(ps+i,100)*.5)+'px';
      var pd=document.createElement("div");
      pd.setAttribute("onclick","clickPic("+(ps+i)+")");
      pd.style.cursor='pointer';
      pd.style.height='120px';
      pd.style.background="url('http://images.freewebs.com/Images/WebsAlbum/slideFrame.png') no-repeat top center";
      pd.appendChild(tn);
      col.appendChild(pd);
      var cap=document.createElement("div");
      cap.title=WebsAlbum.titles[ps+i];
      cap.setAttribute("class","wa-tcap");
      cap.style.backgroundColor='#fff';
      cap.style.height='16px';
      cap.style.cursor='pointer';
      cap.innerHTML=WebsAlbum.titles[ps+i].substring(0,19)+(WebsAlbum.titles[ps+i].length>19?'...':'');
      col.appendChild(cap);
    } else {
      col.innerHTML='&nbsp;';
    }
    row.appendChild(col);
    if(i%WA_r==2) {
      tab.appendChild(row);
    }
  }

  return tab;
}

function genImgPage(num) {
  var ls=((355/480)*WebsAlbum.widths[num])>WebsAlbum.heights[num];
  var el=document.createElement("div");
  var t=document.createElement("div");
  t.setAttribute("class","wa-pt");
  t.innerHTML=WebsAlbum.titles[num];
  var m=document.createElement("div");
  m.setAttribute("class","wa-pm");
  var b=document.createElement("div");
  b.setAttribute("class","wa-pb");
  b.innerHTML=WebsAlbum.captions[num];

//  var h=Math.min(WebsAlbum.heights[num],ls?WebsAlbum.thumbHeight(num,480):WebsAlbum.thumbHeight(num,355));
//  var w=Math.min(WebsAlbum.widths[num],ls?WebsAlbum.thumbWidth(num,480):WebsAlbum.thumbWidth(num,355));
  var h=WebsAlbum.thumbHeight(num,480,355);
  var w=WebsAlbum.thumbWidth(num,480,355);
  if(WebsAlbum.heights[num]<h || WebsAlbum.widths[num]<w) {
    h=WebsAlbum.heights[num];
    w=WebsAlbum.widths[num];
  }

  m.innerHTML='<img src="'+WebsAlbum.pics[num]+'" onclick="newWin('+num+');" style="cursor:pointer;border:1px solid black;width:'+
w
+
'px;height:'
+
h
+'px;margin-top:'+((355-h)/2)+'px;">';
  el.appendChild(t);
  el.appendChild(m);
  el.appendChild(b);
  return el;
}

function clickPic(num) {
  if(num<0) num=WebsAlbum.TOTAL_PICS-1;
  else if(num>=WebsAlbum.TOTAL_PICS) num=0;

  var m=document.getElementById("wa-m");
  var n=genImgPage(num);
  var t=document.getElementById("wa-t");
  var b=document.getElementById("wa-b");
  var t2=document.getElementById("wa-t2");
  var b2=document.getElementById("wa-b2");

  if(document.all) {
    m.innerHTML=n.outerHTML;
  } else {
    m.replaceChild(n,m.childNodes[0]);
  }

  if(WA_sp==-1) {
    t.style.display="none";
    t2.style.display="block";
    b.style.display="none";
    b2.style.display="block";
  }

  var potext = (num+1)+' of '+WebsAlbum.TOTAL_PICS;
  t2.getElementsByTagName("span")[0].innerHTML=potext;
  b2.getElementsByTagName("span")[0].innerHTML=potext;

  WA_sp=num;
}

function getCurrPage() {
  return Math.ceil((WA_sp+1)/(WA_r*WA_c));
}

function newWin(i) {
  var newwin = window.open();
  var str='<div style="text-align:center;">';
  str+='<button onclick="window.close();">Close this window</button>';
  str+='<h1>'+makeSafe(WebsAlbum.titles[i])+'</h1>';
  str+='<div><img alt="'+makeSafe(WebsAlbum.titles[i])+'" src="'+WebsAlbum.pics[i]+'" width="'+WebsAlbum.widths[i]+'" height="'+WebsAlbum.heights[i]+'"></div>';
  str+='<h3>'+makeSafe(WebsAlbum.captions[i])+'</h3>';
  str+='<button onclick="window.close();">Close this window</button>';
  str+='</div>';
  newwin.document.write(str);
  newwin.document.title=WebsAlbum.titles[i];
}