var harryPotter = new Object();
harryPotter.imageCount = document.getElementById("gallery_container").getElementsByTagName("li").length;
harryPotter.currentIndex = 0;

function addText()
{
    var container = document.getElementById("navigator_container");
    var items = container.getElementsByTagName("li");
    var firstItemHTML =  "<li class=\"first\">"+items[0].innerHTML + "</li>";
    var lastItemHTML = "<li class=\"last\">"+items[1].innerHTML + "</li>";
    var additionalItemHTML = "<li id=\"indexText\"><span>Image 1 OF " +  harryPotter.imageCount + "</span></li>";
    container.getElementsByTagName("ul")[0].innerHTML = firstItemHTML + additionalItemHTML + lastItemHTML;  
}

window.onload = function()
{
    addText();
    document.getElementById("linkPrevious").onclick = function()
   {
        navigator(false);
   }  
   
    document.getElementById("linkNext").onclick = function()
   {
        navigator(true);
   }  
}

function navigator(isToNext)
{
    var container =document.getElementById("gallery_container");
    var items =  container.getElementsByTagName("li");
   
    if(isToNext)
   {
        if(harryPotter.currentIndex == harryPotter.imageCount-1)
        {
            harryPotter.currentIndex = 0;
        }
        else
        {
            harryPotter.currentIndex +=1;
        }
   } 
   else
   {
         if(harryPotter.currentIndex == 0)
        {
            harryPotter.currentIndex = harryPotter.imageCount-1;
        }
        else
        {
            harryPotter.currentIndex -=1;
        }
   }
    
    for(var i=0;  i<items.length;i++)
    {  
            if(i==harryPotter.currentIndex)
            {
                
                items[i].style.display = "block";
            }
            else
            {
                items[i].style.display = "none";
            }
    } 
   
   document.getElementById("indexText").innerText = "Image " + (harryPotter.currentIndex + 1) + " OF " + harryPotter.imageCount;
}