var curprodimage;
var firstpackshotimage;
var packshotimages = 4;
var loadedsmallimages;
var timeouts;

function ShowProductImage(id) {
  if(!(!curprodimage && curprodimage!=0)) {
    if(curprodimage==id) return false;
    SetTransparency(document.getElementById('bigpackshotimg'),0);
    
    var oldimage = document.getElementById('pssmall_'+curprodimage);
    var newimage = document.getElementById('pssmall_'+id);
    if(oldimage) {
      oldimage.className = 'smallpackshotimg';
      SetTransparency(oldimage,80);
    }
    newimage.className = 'smallpackshotimg curimage';
    SetTransparency(newimage,100);
  }
  curprodimage = id;
  var psdiv = document.getElementById('bigpackshotdiv');
  psdiv.innerHTML = '<img title="'+tip2+'" onmouseover="javascript: this.style.border = \'1px solid rgb(100, 100, 100)\';" onmouseout="javascript: this.style.border=\'1px solid black\';" onclick="javascript: ShowFullScreen('+id+');" onload="javascript:FadeInImg();" id="bigpackshotimg" class="invisible" style="cursor: pointer; border: 1px solid black; padding: 2px; " src="'+prodimages[id][0]+'" alt="" />';
  psdiv.style.backgroundImage = 'url(\'./gfx/loader.gif\')';
  
  AjaxLoad('./bincms/fabrizio_ajax_getdesc.php?img='+prodimagespath+prodimages[id][4]+'&defaultimagesdesc='+defaultimagesdesc+'&prodid='+prodid+'&root='+root, 'imagedesc');
}

function DrawPackshotImages() {
  var packshotdiv = document.getElementById('packshotdiv');
  var html ='<table class="packshots"><tr><td id="larr" class="arrowcell">';
  loadedsmallimages = 0;
  
  var lastimg = firstpackshotimage+packshotimages;
  if(lastimg>prodimages.length) lastimg = prodimages.length;  
  
  for(i=firstpackshotimage; i<lastimg; i++) {
    if(i==curprodimage) var cladd = ' curimage'; else var cladd='';
    html+='<td><img title="'+tip1+'" onclick="javascript: ShowProductImage('+i+');" onmouseover="javascript: HoverMe(this);" onmouseout="javascript: UnHoverMe(this);" id="pssmall_'+i+'" onload="javascript: loadedsmallimages++; UpdateTransparency();" class="smallpackshotimg invisible'+cladd+'" src="'+prodimages[i][1]+'" alt="" /></td>';
  }
  html+='<td id="rarr" class="arrowcell"></td></tr></table>';
  packshotdiv.innerHTML = html;
  
  UpdateArrows();
}

function UpdateArrows() {
  var larr = document.getElementById('larr');
  var rarr = document.getElementById('rarr');
  if(firstpackshotimage!=0) larr.innerHTML = '<a class="arrow aleft" onclick="javascript: MovePSLeft(); return false;" href="#">&nbsp;</a>';
  else larr.innerHTML = '<div class="arrowplaceholder">&nbsp;</div>';
  
  if(prodimages.length>(firstpackshotimage+packshotimages)) rarr.innerHTML = '<a class="arrow aright" onclick="javascript: MovePSRight(); return false;" href="#">&nbsp;</a>';
  else rarr.innerHTML = '<div class="arrowplaceholder">&nbsp;</div>';
}

function HoverMe(obj) {
  if(obj.className.indexOf('curimage')==-1 && obj.className.indexOf('invisible')==-1) {
    obj.className = 'smallpackshotimg pshover';
    SetTransparency(obj, 100);
  }
}

function UnHoverMe(obj) {
  if(obj.className.indexOf('curimage')==-1 && obj.className.indexOf('invisible')==-1) {
    obj.className = 'smallpackshotimg';
    SetTransparency(obj, 80);
  }
}

function FadeInImg() {
  for(i=0; i<=10; i++) setTimeout("SetTransparency(document.getElementById('bigpackshotimg'), "+i+"*10)", (parseInt(i*25)));
  setTimeout("document.getElementById('bigpackshotdiv').style.backgroundImage='none'", (parseInt(i*25)));
}

function MovePSLeft() {
  firstpackshotimage-=packshotimages;
  DrawPackshotImages();
}

function MovePSRight() {
  firstpackshotimage+=packshotimages;
  DrawPackshotImages();
}

function UpdateTransparency() {
  
  var imgs = packshotimages;
  if (firstpackshotimage+packshotimages>prodimages.length) imgs = prodimages.length - firstpackshotimage;  
  if (loadedsmallimages==imgs) {
    var j = 0;
    for(i=firstpackshotimage; i<firstpackshotimage+imgs; i++) {
      if(i==curprodimage) var hopacity = 10; else var hopacity = 8;
      for(k=0; k<=hopacity; k++) setTimeout("if(document.getElementById('pssmall_"+i+"')) SetTransparency(document.getElementById('pssmall_"+i+"'), "+k+"*10)", (parseInt((j+k)*25)));
      
      if(i==curprodimage) var clname = 'smallpackshotimg curimage'; else var clname = 'smallpackshotimg';
      setTimeout("if(document.getElementById('pssmall_"+i+"')) document.getElementById('pssmall_"+i+"').className=\'"+clname+"\'", (parseInt((j+k)*25)));
      j+=10;
    }
  }
}

function ShowFullScreen(id) {
  // Viewport
  
  var brwh;
  var brww;
  
  if( typeof( window.innerWidth ) == 'number' ) { brwh = window.innerHeight; brww = window.innerWidth; } 
  else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { brwh = document.documentElement.clientHeight; brww = document.documentElement.clientWidth; } 
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { brwh = document.body.clientHeight; brww = document.body.clientWidth; }  
  
  if(document.all && !window.opera) brww+=20; // IE shows dimensions without scrollbar
  
  var safex = brww - 40;
  var safey = brwh - 50;
  
  
  var dimensions = GetResizedDimensions(prodimages[id][2], prodimages[id][3], safex, safey);
  
  ShowBig('./imageget.php?width='+dimensions[0]+'&height='+dimensions[1]+'&image='+prodimagespath+prodimages[id][4]+'&quality=90', dimensions[0], dimensions[1]);
}

function SaveSound(s) {
  var qajax = GetXmlHttpObject();
  qajax.open("GET",'./bincms/fabrizio_ajax_setsound.php?s='+s,true);
  qajax.send(null);
}