// create an array to store the names of images
var myArr = new Array();
myArr[0] = '../slices/sister_content1.jpg';
myArr[1] = '../slices/sister_content2.jpg';
myArr[2] = '../slices/sister_content3.jpg';


// A global variable
var hiddenArrayIndex;

// this function will change the image to the previous image
// stored in the array
function movePrevious(){
   
    // get the value stored in the hidden field
    hiddenArrayIndex = document.getElementById('hiddenValue').value;
   
    // if the value is not 0 then decrement the value by 1 and
    // store it back into the hidden field.
    if(hiddenArrayIndex != 0) {
        document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) - 1;
       
        // re-assign the value to the hiddenArrayIndex variable
        hiddenArrayIndex = document.getElementById('hiddenValue').value;
    }
               
    // set the background-image stored at the specified Array Index dynamically
    document.getElementById("content").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";
   
    if(hiddenArrayIndex == 0) {
        document.getElementById('back').style.visibility = 'hidden';
    }
    document.getElementById('more').style.visibility = 'visible';
}

// this function will change the image to the next image
// stored in the array
function moveNext(){

    // get the value stored in the hidden field
    hiddenArrayIndex = document.getElementById('hiddenValue').value;
   
    // if the value is not equal to the upper index of the array
    // then increment the value by 1 and store it back into the hidden field
    if(hiddenArrayIndex != (myArr.length - 1)) {
        document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) + 1;
       
        // re-assign the value to the hiddenArrayIndex variable
        hiddenArrayIndex = document.getElementById('hiddenValue').value;
    }
            
    // set the background-image stored at the specified Array Index dynamically
    document.getElementById("content").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";

    if(hiddenArrayIndex == (myArr.length-1)) {
        document.getElementById('more').style.visibility = 'hidden';
    }
    document.getElementById('back').style.visibility = 'visible';
}