var nav_position = 0;
var nav_total = 1;
function createGallery(id, url){
    var holder = $(id);
    holder.className = 'gallery';
    var navigation = document.createElement('p');
    navigation.id = id+'nav';
    navigation.className = 'gallery-nav';
    var nav_next = document.createElement('a');
    var nav_prev = document.createElement('a');
    var nav_desc = document.createElement('span');
    
    nav_next.id = id+'nav-next';
    nav_prev.id = id+'nav-prev';
    nav_desc.id = id+'nav-desc';
    nav_next.className = 'gallery-nav-next';
    nav_prev.className = 'gallery-nav-prev';
    nav_desc.className = 'gallery-nav-desc';
    nav_next.innerHTML = 'next';
    nav_prev.innerHTML = 'prev';
    nav_next.href = 'javascript:getPhoto(\''+id+'\', \''+url+'\', 1);';
    nav_prev.href = 'javascript:getPhoto(\''+id+'\', \''+url+'\', -1);';
    navigation.appendChild(nav_next);
    navigation.appendChild(nav_prev);
    navigation.appendChild(nav_desc);
    holder.appendChild(navigation);
    
    var image = document.createElement('img');
    image.id = id+'img';
    image.className = 'gallery-img';
    holder.appendChild(image);
    
    var caption = document.createElement('p');
    caption.id = id+'caption';
    caption.className = 'gallery-caption';
    caption.innerHTML = 'caption';
    holder.appendChild(caption);

    getPhoto(id, url, 0);
}
function getPhoto(id, url, increment){
    nav_position += increment;
    if((nav_position+1) > nav_total){
        nav_position = nav_total-1;
    }else if(nav_position < 0){
        nav_position = 0;
    }else{
    new Ajax.Request(url,
        {   method:'get',
            parameters:{'position':nav_position},
            onSuccess: function(FillImageInfo){
                var jsonText = FillImageInfo.responseText || "no response text";
                var jsonObj = eval("("+jsonText+")");
                
                var caption = $(id+'caption');
                var image = $(id+'img');
                
                caption.innerHTML = jsonObj.caption;
                nav_total = jsonObj.total;
                
                image.src = jsonObj.image;
                updateNavigation(id);
            }
        });
    }
}
function updateNavigation(id){
    var navigation = $(id+'nav-desc');
    navigation.innerHTML = (nav_position+1) + ' of '+nav_total; 
}