// JavaScript Document
var imgArray=document.getElementById("img-box").getElementsByTagName("li");
var barArray=document.getElementById("img-num").getElementsByTagName("li");
var cnt=imgArray.length;
var cur=0;
var slide=function(){
  imgArray.item(cur).style.display="none";
  imgArray.item((cur+1)%cnt).style.display="block";
  barArray.item(cur).style.background="#E8BBBB";
  barArray.item((cur+1)%cnt).style.background="#A30407";
  cur=(cur+1)%cnt;
}

var start=setInterval(slide,2500);

var slideStop=function(){
  clearInterval(start);
};

var slideStart=function(){
  start=setInterval(slide,2500);
};

var changeImg=function(e){
  slideStop();
  var obj=e.srcElement ? e.srcElement : e.target; 
  if(obj.tagName.toLowerCase()=="li"){
    var next=obj.innerHTML-1;
    imgArray.item(cur).style.display="none";
    imgArray.item(next).style.display="block";
    barArray.item(cur).style.background="#E8BBBB";
    barArray.item(next).style.background="#A30407";
    cur=next;
    slideStart();
  }
}

if(window.addEventListener){
  document.getElementById("img-box").addEventListener("mouseover",slideStop);
  document.getElementById("img-box").addEventListener("mouseout",slideStart);
  document.getElementById("img-num").addEventListener("mouseover",changeImg);
}else{
  document.getElementById("img-box").attachEvent("onmouseover",slideStop);
  document.getElementById("img-box").attachEvent("onmouseout",slideStart);
  document.getElementById("img-num").attachEvent("onmouseover",changeImg);
}