// product page functions
function compact(){
  if (!document.getElementById('spec')) return;
  showInfo('prod_descrip');
}
function showInfo(showid){
  var divs = new Array('prod_descrip', 'spec', 'template');
  for(i in divs){
    var dis = (divs[i]==showid)? "block" : "none";	
	document.getElementById(divs[i]).style.display = dis;
  }
}
function flipProdImage(showid){
  var divs = new Array('diagramblock', 'imageblock');
  for(i in divs){
    var dis = (divs[i]==showid)? "block" : "none";
	document.getElementById(divs[i]).style.display = dis;
  }
}
function zoomimg(w, h, yn){
  var isimg = (document.getElementById("imageblock") && document.getElementById("imageblock").style.display=="block");
  var vis = (yn==1)? 'block' : 'none';
  var zim = (isimg)? document.getElementById('imagezoom') : document.getElementById('diagzoom');
  var sim = (isimg)? document.getElementById('imageblock'): document.getElementById('diagramblock');
  var zdiag = (isimg)? document.getElementById('zoomimage') : document.getElementById('zoomdiag');
  if (zim.parent != document.body){
    zim.parentNode.removeChild(zim);
	document.body.appendChild(zim);
  }
  makeDraggable(zim, 1, 1, zim);  
  var spos = getPos(sim);
  zim.style.left = spos.x+"px";
  zim.style.top = spos.y+"px";
  zim.style.height = (h+50) +"px";
  zim.style.width = (w+40) +"px";  
  zim.style.display=vis;
}
function getPos(el){
  var px = py = 0;
  while (el){
    px += el.offsetLeft;
    py += el.offsetTop;
    el = el.offsetParent;
  }
  return {x:px, y:py};
}

// apply filter tags from query
function initTagFilter(){
  var listing = document.getElementById("listing");
  if (!listing) return; // only on index pages!

  var prodtype = "presentation folder,folder brochure,ring binder,ticket folder wallet,CD/DVD packaging";
  var size = "A4,A5,A7";
  var format = "portrait,landscape,square,6 page,8 page,12 page";
  var pockets = "single pocket,double pocket,fold-in flap,glued pocket,interlocking";
  var capacity = "no capacity,capacity,3mm capacity,3.5mm capacity,4mm capacity,5mm capacity,6mm capacity,8mm capacity,10mm capacity";
  var cards = "business card slots,85x55mm landscape,55x85mm portrait,50x90mm portrait,90x55mm landscape,90x60mm landscape,60x90mm portrait";
  var fTagList = {"Product Type":prodtype, "Size":size, "Format":format, "Pockets":pockets, "Capacity":capacity, "Card Slots":cards};
    
  var tagboard = document.createElement("DIV");
  tagboard.id = "tagboard";
  var h = document.createElement("h3");
  h.appendChild(document.createTextNode("Show\u00A0only:\u00A0"));
  tagboard.appendChild(h);
  for (var j in fTagList){
    var filterTagList = fTagList[j].split(",");
	var b = document.createElement("strong");
	b.appendChild(document.createTextNode(j+":\u00A0"));	
	tagboard.appendChild(b);
    var spacer="";	
    for (var i=0; i<filterTagList.length; i++){
      var tagtext = filterTagList[i].replace(/ /, "\u00A0", "g");
      var tip = document.createElement("input");
	  tip.type="checkbox";
	  tip.id = "tagcb"+i;
	  tip.name = "tagcb"+i;
	  tip.value = filterTagList[i];
      tip.onclick=applyfilters;
	  tagboard.appendChild(tip);
	  var lfor = document.createElement("label");
	  lfor.appendChild(document.createTextNode(spacer+tagtext+"\u00A0"));
	  lfor.htmlFor = tip.id;
	  tagboard.appendChild(lfor);
	  tagboard.appendChild(tip);
	  spacer="\u00A0\u00A0\u00A0";	
	}
	tagboard.appendChild(document.createElement("br"));
  }
  var closea = document.createElement("a");
  closea.href="javascript:showtagboard(0);";
  closea.appendChild(document.createTextNode("close"));
  var opena = document.createElement("a");
  opena.id = "filterlink";
  opena.appendChild(document.createTextNode("filter by characteristics"));
  opena.href="javascript:showtagboard(1);";  
  tagboard.appendChild(closea);
  tagboard.style.display="none";
  tagboard.style.background="#eeeeee";
  tagboard.style.border="1px solid #333333";
  tagboard.style.margin="0px 10px 10px";
  tagboard.style.fontSize="11px";
  tagboard.style.padding="3px 10px";
  var lhead = listing.getElementsByTagName("h2")[0];
  opena.style.position="absolute";
  opena.style.top=(listing.offsetTop+15)+"px";
  opena.style.left="740px";
  opena.style.width="150px";
  opena.style.textAlign="right";
  opena.style.fontSize="11px";
  document.body.appendChild(opena);
  var firstentry = listing.getElementsByTagName("div")[0];
  listing.insertBefore(tagboard, firstentry);
}
// shows/hides the tagboard
function showtagboard(show){
  show = show % 2;
  var disp = ["none", "block"];
  document.getElementById("tagboard").style.display=disp[show];
  document.getElementById("filterlink").style.display=disp[1-show];
}
// apply filters from tagboard
function applyfilters(){
  var tb = document.getElementById("tagboard");
  var ips = tb.getElementsByTagName("input");
  var filtertags = "";
  var spacer = "";
  for (var i=0; i<ips.length; i++){
    var cb = ips[i];
	if (cb.checked){
	  filtertags = filtertags+spacer+cb.value;
	  spacer = ",";
	}
  }
  filterByTags(filtertags);
}
// hide non-matching list elements
function filterByTags(taglist){
  document.getElementById("tagboard").style.display="block";
  var tags = taglist.split(",");
  var linktext = (taglist=="")? "filter by characteristics" : "filters applied ("+tags.length+")";
  var flink = document.getElementById("filterlink");
  if (flink) flink.replaceChild(document.createTextNode(linktext), flink.firstChild);
  var showlist = new Array();
  var list = document.getElementById("listing");
  var subdivs = list.getElementsByTagName("DIV");
  for (var i=0; i<subdivs.length; i++){  
      var sdiv = subdivs[i];
	  if (sdiv.parentNode!=list) continue;		  
	  if (sdiv.id=="tagboard") continue;
      if (taglist==""){
	    sdiv.style.display="block";
		continue;
	  }
	  var ip = sdiv.getElementsByTagName("INPUT");
	  if (ip.length==0) continue;
	  ip = ip[0].value;     
	  var mip=","+ip+",";
	  var found=0; 
      for (var j=0; j<tags.length; j++){
	    var regpat = new RegExp(".*,"+tags[j]+",.*", "i");
	    if (mip.match(regpat)) found++;
	  }
      if (found==tags.length) sdiv.style.display="block";
	  else sdiv.style.display="none";
  }
}