var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
ta = document.getElementById(thumbid);
ia = document.getElementById(imgid);
t = ta.getElementsByTagName('li')
ie = document.all ? true : false;
st = 3;
ss = 3;
ft = 10;
fs = 5;
xp,yp = 0;
document.onmousemove = getPos;

function slideShow(){
  var taw = ta.parentNode.offsetWidth;
  var taa = taw / 4;
  bxs = leftPos(ta);
  bxe = bxs + taa;
  fxe = bxs + taw;
  fxs = fxe - taa;
  ys = topPos(ta);
  ye = ys + ta.offsetHeight;
  var len = t.length;
  tar = [];
  for(i=0; i < len; i++){
    var id = t[i].id;
    tar[i] = id; 
    t[i].onclick = new Function("getImg('" + id + "')");
    if(i == 0) {
      getImg(id);
    }
  }
  tarl = tar.length;
}

function cnclScrl(){clearTimeout(ta.timer)}

function getImg(id){
  var hl = id.indexOf('_');
  var is,ip,il;
  if(hl != -1){
    ip = id.split('_');
    is = ip[0];
    il = ip[1];
  }else{
    is = id;
  }
  if(auto){clearTimeout(ia.timer)}
  if(ci != null){
    var ts = ia.getElementsByTagName('img');
    var tsl = ts.length;
    var x = 0;
    for(x; x < tsl; x++){
      if(ci.id != id){
        var o = ts[x];
        clearInterval(o.timer);
        o.timer = setInterval(function(){fdOut(o)},fs);
      }
    }
  }
  var i;
  if(!document.getElementById(ie)){
    if(hl != -1){
      a = document.createElement('a');
      a.setAttribute('href',il);
      ia.appendChild(a);
      i = document.createElement('img');
      a.appendChild(i);
    }else{
      i = document.createElement('img');
      ia.appendChild(i);
    }
    i.id = id;
    i.av = 0;
    i.style.opacity = 0;
    i.style.filter = 'alpha(opacity=0)';
    i.src = imgdir + '/' + is;

i.onclick= function(){ 
  location.href= id ; 
}

  }else{
    i = document.getElementById(is);
    clearInterval(i.timer);
  }
  i.timer = setInterval(function(){fdIn(i)},fs);
}

function imgNav(d){
  var curr = 0;
  var ae,ie;
  for(key in tar){
    ae = tar[key].split('_');
    if(ae[0] == ci.id){
      curr = key;
    }
  }
  if(tar[parseInt(curr) + d]){
    ie = tar[parseInt(curr) + d];
  }else{
    if(d == 1){
      ie = tar[0];
    }else{
      ie = tar[tarl - 1];
    }
  }
  getImg(ie);
}

function autoSlide(){
  ia.timer = setInterval(function(){imgNav(1)}, autodelay * 1000);
}

function fdIn(i){
  if(i.complete){
    i.av = i.av + fs;
    i.style.opacity = i.av / 100;
    i.style.filter = 'alpha(opacity=' + i.av + ')';
  }
  if(i.av >= 100){
    if(auto){autoSlide()}
    clearInterval(i.timer);
    ci = i;
  }
}

function getPos(e){
  if(ie){
    xp = event.clientX + document.body.scrollLeft;
    yp = event.clientY + document.body.scrollTop;
  }else{
    xp = e.pageX;
    yp = e.pageY;
  }  
  if(xp < 0){xp = 0}
  if(yp < 0){yp = 0}
  if(xp > bxs && xp < bxe && yp > ys && yp < ye){
    scrlThumbs(-1);
  }else if(xp > fxs && xp < fxe && yp > ys && yp < ye){
    scrlThumbs(1);
  }else{
    cnclScrl();
  }
}

function leftPos(t){
  var left = 0;
  if(t.offsetParent){
    while(1){
      left += t.offsetLeft;
      if(!t.offsetParent){break}
      t = t.offsetParent;
    }
  }else if(t.x){
    left += t.x;
  }
  return left;
}

function topPos(t){
  var top = 0;
  if(t.offsetParent){
    while(1){
      top += t.offsetTop;
      if(!t.offsetParent){break}
      t = t.offsetParent;
    }
  }else if(t.y){
    top += t.y;
  }
  return top;
}

#image {position:relative; width:899px; height:260px; padding:0px; border:0; url(../images/loading.gif) center center no-repeat}
#image img {position:absolute; top:4px; left:0px; margin:0; border:0; padding:0}
.imgnav {position:absolute; height:200px; z-index:100; height:200px; width:20%; z-index:100; outline:none; cursor:pointer; margin:0; padding:0}
#thumbs {list-style:none; margin:0; padding:0}
#previmg {left:0; background:url(../images/left.png) left center no-repeat;}
#nextimg {right:0; background:url(../images/right.png) right center no-repeat;}

    <div id="image">
      <a href="javascript:imgNav(-1)" class="imgnav " id="previmg"></a>
      <a href="javascript:imgNav(1)" class="imgnav " id="nextimg"></a>
    </div>

        <ul id="thumbs">

<?php  
if ($handle = opendir('slide')) { 
   while (false !== ($file = readdir($handle))) {  
       if ($file != "." && $file != "..") {  
           echo '<li id="'.$file.'"></li>';  
       }  
   } 
   closedir($handle);  
} 
?>


        </ul>

<script type="text/javascript">
var imgid = 'image';
var imgdir = 'slide';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 10;
</script>
<script type="text/javascript" src="js/slide.js"></script>