function move(dir) {
    var thumbs = document.getElementById('thumbs');    
    var cur = document.getElementById('current');
    var pid = document.getElementById('p_id');    
    var offset = document.getElementById('offset');
    var thumbsbox = $('thumbs');
    var fx = thumbsbox.effects({duration: 1000, transition: Fx.Transitions.Cubic.easeOut});    
    var prev = $('prev');
    var next = $('next');
    var num = 0;
    var line = 3;
    var width = 65+2+1;
    var left = 1;
    var right = 1;
    
    //alert(eval(offset.value));
    //return;
    for(var i=0;i<thumbs.childNodes.length;i++) { if(thumbs.childNodes[i].tagName == 'LI') { num++; } }

    if ((eval(offset.value)-line)<0) { left=0; prev.addClass('no'); } else { left=1; prev.removeClass('no'); }
    if ((eval(offset.value)+line)>num-1) { right=0; next.addClass('no'); } else { right=1; next.removeClass('no'); }

    if (dir==0) {
        thumbs.style.width = ((width) * num)+'px' ;
        thumbs.style.marginLeft = -eval(offset.value)*width+'px';
    } else {  
        if ((dir==-1 && left) || (dir==1 && right)) { 
            offset.value=eval(offset.value)+line*dir;
        }
            fx.start({
                'margin-left': -eval(offset.value)*width
            });
    }

    if ((eval(offset.value)-line)<0) { left=0; prev.addClass('no'); } else { left=1; prev.removeClass('no'); }
    if ((eval(offset.value)+line)>num-1) { right=0; next.addClass('no'); } else { right=1; next.removeClass('no'); }

}

function view(id) {
    var box = document.getElementById('photobox');
    var img = document.getElementById('photo');
    var offset = document.getElementById('offset');
    var photobox = $('photobox');
    var fx = photobox.effects({duration: 777, transition: Fx.Transitions.Cubic.easeOut});
    var photoimg = $('photo');
    var photoimg = $('curid');
    var photoimg = $('pid');

    var photo_url = '/gallery/image/'+id+'/?img';
    var photoinfo_url = '/gallery/image/'+id+'/?info';
    var dummy; 

    box.style.width = img.width+'px';
    box.style.height = img.height+'px';

// photo loading
    photobox.addClass('loading'); 
    var ajax_photo = new Ajax(photo_url, { 
        update: $('photobox'),
        method: 'get',
        onComplete: function() {
            var box = document.getElementById('photobox');
            var img = document.getElementById('photo');

            if (box.style.height!=(img.height+'px')) {
                fx.start({
                    'width':  img.width,
                    'height': img.height
                }).chain(function(){
                    photobox.removeClass('loading');
                });
            } else {
                photobox.removeClass('loading');
            }
        },
        onCancel: function() {
            box.style.width = img.width+'px';
            box.style.height = img.height+'px';
            photobox.removeClass('loading');
        }
    });
    dummy = $random(0, 100);
    ajax_photo.request(dummy);
// end photo loading
    var ajax_counters = new Ajax('/gallery/image/'+id+'/?counters', { 
            update: $('counters'),
            method: 'get',
            onComplete: function() {
            },
            onCancel: function() {
            }
        });
    ajax_counters.request();
// photoinfo loading
    var ajax_photoinfo = new Ajax(photoinfo_url, { 
        update: $('photoinfo'),
        method: 'get',
        onComplete: function() {
        },
        onCancel: function() {
        }
    });
    ajax_photoinfo.request();
// end photoinfo loading
}