var slideIndex = 0;
var arrPos = 0;

function selectThumb(id){
    //id is based on slide order
    //loop through our array
    for(x=0;x<arrSlideIds.length;x++){
        document.getElementById("slideItem" + arrSlideIds[x]).style.border = "2px solid #ded3c2";
    }
    //turn on the selected item
   document.getElementById(id).style.border = "2px solid #f29f28";
   //populate main area
   var slideId = id.replace("slideItem", "");
   slideIndex = slideId;
   //build string up
   //var mainImg = "<img src=/uploadImages/waldenStory/" + arrSlideImg[slideIndex-1] + ">";
   //var mainImg = "<img src=/modules/imageHandler.aspx?t=6&w=432&h=412&sp=" + arrSlideImg[slideIndex-1] + ">";
   var mainImg  = document.getElementById("slideLarge" + slideIndex).innerHTML;
   document.getElementById("mainSlideCaption").innerHTML = document.getElementById("slideCaption" + slideIndex).innerHTML;
   document.getElementById("mainSlideText").innerHTML = document.getElementById("slideMain" + slideIndex).innerHTML;
   document.getElementById("mainSlideImage").innerHTML = mainImg;
   
}

function goNext(){
    //handle the next button click
    var slideItem = parseInt(slideIndex) + 1;
    
    if(slideItem<=arrSlideIds.length){
        selectThumb("slideItem" + slideItem);
        
        //if last item in array, we need to shift things over, unfortunately
        if(slideItem>4){
            //how many items over
            var slideToHide = slideItem-4;
            document.getElementById("slideItem" + slideToHide).style.display="none";
            document.getElementById("slideItem" + slideToHide).style.visibility="hidden";
           
            //show current
            document.getElementById("slideItem" + slideItem).style.display="";
            document.getElementById("slideItem" + slideItem).style.visibility="visible";
            arrPos = slideItem;
        }
        
    }else{
        //select first
        document.getElementById("slideItem1").style.display="";
        document.getElementById("slideItem1").style.visibility="visible";
        selectThumb("slideItem1");
        for(x=0;x<4;x++){
            document.getElementById("slideItem" + arrSlideIds[x]).style.visibility="visible";
            document.getElementById("slideItem" + arrSlideIds[x]).style.display="";
        }
        for(x=4;x<arrSlideIds.length;x++){
            document.getElementById("slideItem" + arrSlideIds[x]).style.visibility="hidden";
            document.getElementById("slideItem" + arrSlideIds[x]).style.display="none";
        }
    }
}

function goPrev(){
    //don't worry, i don't understand it either...

    var slideItem = parseInt(slideIndex) - 1;
    if(slideItem==0){
        slideItem = arrSlideIds.length;
    }
    
    selectThumb("slideItem" + slideItem);
   
    for(x=slideItem-1;x>=slideItem-4;x--){
        if(x>=0){
            //show slides
            document.getElementById("slideItem" + arrSlideIds[x]).style.visibility="visible";
            document.getElementById("slideItem" + arrSlideIds[x]).style.display="";
            
        } else {
            
        }
        
    }
   //hide slides
  
    for(z=slideItem-5;z>=0;z--){
        document.getElementById("slideItem" + arrSlideIds[z]).style.visibility="hidden";
        document.getElementById("slideItem" + arrSlideIds[z]).style.display="none";
    }
  
    if(slideItem<arrSlideIds.length){
        //hide ones higher than, since we are going backwards...
        for(p=slideItem;p<arrSlideIds.length;p++){
            if(slideItem>3){
                document.getElementById("slideItem" + arrSlideIds[p]).style.visibility="hidden";
                document.getElementById("slideItem" + arrSlideIds[p]).style.display="none";
            }
        }
    }      
}