function picMenu( myname, parents, x, y, tnxsize, tnysize, tnstyle, tnstyle2, picid ){

  this.instname = myname;  
  this.opacity = 60;
  this.maxpicperrow = 8;
  this.maxpicperline = 2; 
  this.parentsid = parents;
  this.xstart = x;
  this.ystart = y;
  this.xsize = tnxsize;
  this.ysize = tnysize;
  this.style = tnstyle;
  this.style2 = tnstyle2;
  this.showpicid = picid;
  this.picdata = new Array();
  this.infoid = "addinfo";
  this.indexmenuid = "picmenuindex";
  this.indexpic = "../images/index"
  this.tmppic = "../images/window.gif";
  this.nextpage = false;
  this.prepage = false;
  this.nextpageadress;
  this.prepageadress;
  this.blang = false;
  this.langparam = "lang=1";
  
  this.addContent = addContent;
  this.showMenu = showMenu;
  this.toColor = toColor;
  this.toGray = toGray;
  this.showImg = showImg;
  this.chageTnstyle = chageTnstyle;
  this.restoreTnstyle = restoreTnstyle;
  this.nextImg = nextImg;
  this.previousImg = previousImg;
  this.setNextpage = setNextpage;
  this.setPrepage = setPrepage;
  this.makeParam = makeParam;
  
  var countmenu = 0;
  var currentpage = 0;
  var currentpic = undefined;
  var numpages;
  var numperpage;
  var maxpage = 6;
  
  function addContent( thumbnail, img, style, height, width, info ){
    this.picdata[countmenu] = new picInfo( thumbnail, img, style, height, width, info );
    countmenu++;  
  }

  function showMenu( page ){
    if( currentpage == page ){return;}
    numperpage = this.maxpicperrow * this.maxpicperline;
    numpages = (countmenu%numperpage == 0) ? (countmenu/numperpage) : (countmenu/numperpage+1);
    numpages = Math.floor(numpages);
    if( (page < 1) || (page > numpages ) )return;
    currentpage = page;
    var pagecls = new picMenuIndex( this.instname + ".showMenu", numpages, this.indexmenuid, this.indexpic );
    pagecls.preloadImg( maxpage );
    pagecls.show( currentpage );
    var pnode = document.getElementById( this.parentsid );
    var i;
    //var numperpage = this.maxpicperrow * this.maxpicperline;
    for( i=numperpage-1; i>=0; i-- ){
       if( pnode.childNodes[i] != undefined ){
          //if(pnode.childNodes[i].childNodes[0] != undefined){
          //   pnode.childNodes[i].removeChild( pnode.childNodes[i].childNodes[0] );
          //}
          pnode.removeChild( pnode.childNodes[i] );
       }
    }
    var toppostion = this.ystart;
    var leftpostion;
    var j=0;
    for( i=numperpage*(page-1); i<numperpage*page && i<countmenu; i++ ){
       var linknode = document.createElement( 'a' );
       this.picdata[i].boxid = 'tn' + i;
       linknode.setAttribute( 'id', 'tn' + i );
       //linknode.setAttribute( 'href', '#' );
       linknode.setAttribute( 'href', "javascript:" + this.instname + ".showImg(" + i + ")" );
       var imgid = 'tn' + i + 'img';
       this.picdata[i].tnid = imgid;
       pnode.appendChild( linknode );
       pnode.childNodes[j].className = this.style;
       (j%2==0) ? leftpostion=this.xstart : leftpostion=this.xstart+this.xsize;
       if( leftpostion == this.xstart && j != 0 ){
          toppostion = toppostion + this.ysize + 1;
       }
       pnode.childNodes[j].style.top = toppostion + 'px';
       pnode.childNodes[j].style.left = leftpostion + 'px';
       //pnode.childNodes[j].style.background = '#AA9773';
       pnode.childNodes[j].onmouseover = new Function( this.instname + ".toColor('" + imgid + "')" );
       pnode.childNodes[j].onmouseout = new Function( this.instname + ".toGray(" + i + ",'" + imgid + "')" );
       //pnode.childNodes[j].onclick = new Function( this.instname + ".showImg(" + i + ")" );
       //pnode.childNodes[j].onmousedown = new Function( "enableTnDrag(" + this.instname + ".picdata[" + i + "])" );
       
       var imgnode = document.createElement( 'img' );
       imgnode.setAttribute( 'id', imgid );
       imgnode.setAttribute( 'name', imgid );
       imgnode.setAttribute( 'src', this.picdata[i].tn );
       imgnode.setAttribute( 'border', '0' );
       imgnode.setAttribute( 'height', this.xsize );
       imgnode.setAttribute( 'width', this.ysize );
       //imgnode.setAttribute( 'background-color', '#AA9773' );
       pnode.childNodes[j].appendChild( imgnode );
       pnode.childNodes[j].childNodes[0].className = this.style2;
       pnode.childNodes[j].childNodes[0].style.top = 0;
       pnode.childNodes[j].childNodes[0].style.left = 0;
       this.toGray( i, imgid );
       
       j++;
    }
    if( currentpic != undefined ){
       this.chageTnstyle( currentpic );
    }
  }
  
  function toColor( id ){
    document.getElementById(id).style.filter = 'alpha(opacity=100)';
  }
  
  function toGray( index, id ){
    var filter = 'alpha(opacity=';
    if( this.picdata[index].looked ){
       //filter += (this.opacity+30) + ')';
       filter += (100) + ')';
       filter += ' gray()';
    }
    else{
       filter += this.opacity + ')';
    }
    document.getElementById(id).style.filter = filter;
  }
  
  function showImg( index ){
    var boxstyle;
    var tnstyle;
    if( (index < (currentpage-1)*numperpage) || (index >= currentpage*numperpage) ){
       var newpage = Math.floor(index / numperpage) + 1;
       this.showMenu( newpage );
    }
    //else{
       if( currentpic != undefined ){
          this.restoreTnstyle( currentpic );
       }
    //}
    
    this.chageTnstyle( index );
    currentpic = index;
    
    document.getElementById( this.showpicid ).className = this.picdata[index].openimgstyle;
    var nextindex = ((index+1)==countmenu) ? 0 : index+1;
    document.getElementById( this.showpicid ).onclick = new Function (this.instname + ".showImg(" + nextindex + ")");
    eval("document." + this.showpicid + ".alt='click to next picture'");
    eval("document." + this.showpicid + ".src='" + this.tmppic + "'");
    eval("document." + this.showpicid + ".height='" + this.picdata[index].openimgh + "'");
    eval("document." + this.showpicid + ".width='" + this.picdata[index].openimgw + "'");
    eval("document." + this.showpicid + ".src='" + this.picdata[index].openimg + "'");
    this.picdata[index].looked = true;
    
    var tnperpage = this.maxpicperrow * this.maxpicperline;
    var border = ((tnperpage*currentpage)>countmenu) ? countmenu : (tnperpage*currentpage);
    if( (index >= tnperpage*(currentpage-1)) && (index < border) ){
       this.toGray( index, this.picdata[index].tnid );
    }
    else{
       if( (index==0) && numpages!=1 ){
          this.showMenu( 1 );
       }
       else{
          this.showMenu( currentpage+1 );
       }
    }
    
    document.all[this.infoid].innerHTML = this.picdata[index].addinfo;
  }
  
  function chageTnstyle( index ){
    if( document.getElementById( this.picdata[index].boxid ) ){
       var boxstyle = document.getElementById( this.picdata[index].boxid ).style;
       boxstyle.top = parseInt(boxstyle.top) + 25;
       boxstyle.left = parseInt(boxstyle.left) + 25;
       boxstyle.width = this.xsize - 50;
       boxstyle.height = this.ysize - 50;
       tnstyle = document.getElementById( this.picdata[index].tnid ).style;
       tnstyle.width = this.xsize - 50;
       tnstyle.height = this.ysize - 50;
    }
  }
  
  function restoreTnstyle( index ){
    if( document.getElementById( this.picdata[index].boxid ) ){
       boxstyle = document.getElementById( this.picdata[index].boxid ).style;
       boxstyle.top = parseInt(boxstyle.top) - 25;
       boxstyle.left = parseInt(boxstyle.left) - 25;
       boxstyle.width = this.xsize;
       boxstyle.height = this.ysize;
       tnstyle = document.getElementById( this.picdata[index].tnid ).style;
       tnstyle.width = this.xsize;
       tnstyle.height = this.ysize;
    }
  }
  
  function nextImg(){
    if( currentpic == (countmenu-1) && this.nextpage == true ){
      var addparam = this.makeParam( 1 );
      if( this.blang == true ){
        location.href = this.nextpageadress + addparam;
      }else{
        location.href = this.nextpageadress;
      }
    }else{
      var next = 0;
      if( currentpic != undefined ){
         next = (currentpic==(countmenu-1)) ? 0 : (currentpic+1);
      }
      this.showImg( next );
    }
  }
  
  function previousImg(){
    if( currentpic == 0 && this.prepage == true ){
      var addparam = this.makeParam( -1 );
      if( this.blang == true ){
        location.href = this.prepageadress + addparam;
      }else{
        location.href = this.prepageadress;
      }
    }else{
      var previous = countmenu - 1;
      if( currentpic != undefined ){
         previous = (currentpic==0) ? previous : (currentpic-1);
      }
      this.showImg( previous );
    }
  }
  
  function setNextpage( nextadress ){
    this.nextpage = true;
    this.nextpageadress = nextadress;
  }
  
  function setPrepage( preadress ){
    this.prepage = true;
    this.prepageadress = preadress;
  }

  function makeParam( orientation ){
    var addparam;
    try{
      if( orientation == -1 ){
        addparam = this.prepageadress.split('?')[1];
      }else if( orientation == 1 ){
        addparam = this.nextpageadress.split('?')[1];
      }
      if( addparam == undefined ){
        addparam = '?' + this.langparam;
      }else{
        addparam = '&' + this.langparam;
      }
    }catch(e){
    }finally{
      if( orientation == 1 ){
        addparam = '?' + this.langparam;
      }
      else{
        addparam = '&' + this.langparam;
      }
    }
    return addparam;
  }
  
  return this;
}

function picInfo( thumbnail, img, style, height, width, info ){

  this.tn = thumbnail;
  this.boxid;
  this.tnid;
  this.openimg = img;
  this.openimgh =height;
  this.openimgw = width;
  this.openimgstyle = style;
  this.addinfo = info;
  this.looked = false;

  return this;
}

function picMenuIndex( showfunction, pages, parent, indexpic ){

  this.showfunc = showfunction;
  this.numpages = pages;
  this.parentid = parent;
  this.pic = indexpic;
  this.ext = "gif";
  this.selpicmark = "s";
  this.xsize = 25;
  this.ysize = 25;
  this.offset = 150;
  
  this.preloadImg = preloadImg;
  this.show = show;
  
  var imgobj = new Array();
  
  function preloadImg( count ){
    var i=0; var j=0;
    for( var i=0; i<count*2; j++ ){
       imgobj[i] = new Image();
       imgobj[i].src = this.pic + (j+1) + "." + this.ext;
       imgobj[++i] = new Image();
       imgobj[i++].src = this.pic + (j+1) + this.selpicmark + "." + this.ext;
    }
  }
  
  function show( selected ){
    var node = document.getElementById( this.parentid );
    var i;
    for( i=this.numpages-1; i>=0; i-- ){
       if( node.childNodes[i] != undefined ){
          node.removeChild( node.childNodes[i] );
       }
    }
    var imgnode;
    var linknode;
    var leftpostion = 0;
    for( i=0; i<this.numpages; i++ ){
       var tmpnode = node;
       if( (i+1) != selected ){
          linknode = document.createElement( 'a' );
          linknode.setAttribute( 'href', "javascript:" + this.showfunc + "(" + (i+1) + ")" );
          tmpnode.appendChild( linknode );
          tmpnode = tmpnode.childNodes[i];
       }
       imgnode = document.createElement( 'img' );
       if( (i+1) == selected ){
          imgnode.setAttribute( 'src', this.pic + (i+1) + this.selpicmark + "." + this.ext );
       }
       else{
          imgnode.setAttribute( 'src', this.pic + (i+1) + "." + this.ext );
       }
       imgnode.setAttribute( 'border', '0' );
       imgnode.setAttribute( 'height', this.xsize );
       imgnode.setAttribute( 'width', this.ysize );
       tmpnode.appendChild( imgnode );
       //node.childNodes[i].style.postion = "absolute";
       //node.childNodes[i].style.left = leftpostion + 'px';
       //leftpostion = leftpostion + this.xsize + this.offset;
    }
  }
  
  return this;
}

//window.document.window.onmousemove = dragTn;
//window.document.window.onmouseup = disableDrag;
//document.getElementById("window").onmousemove = dragTn;

//var tndrug = false;

//function winPos(){
//  this.x = 0;
//  this.y = 0;
//  return this;
//}
//var ntpos = new winPos();
//var dragtnid;
//var xoffset;
//var yoffset;

//function enableTnDrag( tndata ){
//  
//  if( tndrug ) return;
//  tndrug = true;
//  var obj = document.getElementById( "page" );
//  var winwidth = document.body.clientWidth;
//  var pagewidth = parseInt( obj.style.width );
//  var winheight = document.body.clientHeight;
//  var pageheight = parseInt( obj.style.height );
//  if( winwidth > pagewidth ){
//     xoffset = (winwidth - pagewidth) / 2;
//  }
//  if( winheight > pageheight ){
//     yoffset = (winheight - pageheight) / 2 - 10 - 64;
//  }
//  ntpos.x = event.x - xoffset;
//  ntpos.y = event.y - yoffset;
//  dragtnid = "copytn";
//  var imgnode = document.createElement( 'img' );
//  imgnode.setAttribute( 'id', dragtnid );
//  imgnode.setAttribute( 'src', tndata.tn );
//  imgnode.setAttribute( 'border', '0' );
//  document.getElementById("window").appendChild( imgnode );
//  var dragtnobj = document.getElementById(dragtnid);
//  dragtnobj.style.position = "absolute";
//  dragtnobj.style.top = ntpos.y;
//  dragtnobj.style.left = ntpos.x;
//  dragtnobj.style.zindex = 3;
//  //alert('enableTnDrag');
//}
//
//function dragTn(){
//  if( tndrug ){
//     var obj = document.getElementById( dragtnid );
//     obj.style.left = event.x - 75/2 - xoffset;
//     obj.style.top = event.y - 75/2 - yoffset;
//     ntpos.x = event.x;
//     ntpos.y = event.y;
//  }
//}
//
//function disableTnDrag(){
//  tndrug = false;
//  var node = document.getElementById("window");
//  if(document.getElementById(dragtnid)){
//     node.removeChild( document.getElementById(dragtnid) );
//  }
//}
//
//