var position = 0;
var speed = 1000;

function offset (position) {
    return Math.floor((867-$("#pane li:eq("+position+")").width())/2)
}

function do_scroll () {
    $("#pane").scrollTo("li:eq("+position+")",speed,{'offset':-offset(position)});
}

function rebind() {
    $("#pane li").css('cursor','default');
    $("#pane li").unbind();
    prev = $("#pane li:eq("+(position-1)+")");
    this_and_next = $("#pane li:eq("+position+"),#pane li:eq("+(position+1)+")")
    if (position >= $("#pane li").size()-1) {
        prev.click(prev_click);
        prev.css('cursor','pointer');
    } else if (position < 1) {
        this_and_next.css('cursor','pointer');
        this_and_next.click(next_click);
    } else {
        prev.click(prev_click);
        this_and_next.click(next_click);
        $("#pane li").css('cursor','pointer');
    }
}

function next_click () {
    $("#howto").hide();
    position += 1;
    do_scroll();
    rebind();
};

function prev_click () {
    $("#howto").hide();
    position -= 1;
    do_scroll();
    rebind();
}

$(document).ready(function(){
    $("#pane").before('<div id="howto">click on the images<br>to move back and forth</div>');
    $("#pane").css('overflow','hidden');
    first_offset = Math.floor((867 - $("#pane li:eq(0) img").width())/2)
    $("#pane li:eq(0)").css("margin-left",first_offset+"px");
    rebind();
});