I'm trying to cobble together a way of scrolling to various divs using jquery scrollTo plugin. I have script for diagonal, horizontal and vertical, but how would I get them to work together?

My intention is to have four areas, with different layouts in each.

The problem I'm having is getting the navigation to go left, it only seems to work properly if it goes horizontal -right, vertical or diagonal- right.

I want it to direct to the position of the div specified in the link.

Ive also attached a pic of what i mean.

Any assistance will be helpful.

here is the code im using:

[CODE]

$(document).ready(function() {

$('a.panel').click(function () {

$('a.panel').removeClass('selected');

$(this).addClass('selected');

current = $(this);

$('#wrapper').scrollTo($(this).attr('href'), 800);

return false;

});

$(window).resize(function () {

resizePanel();

});

});

function resizePanel() {

width = $(window).width();

height = $(window).height();

mask_width = width * $('.item').length;

mask_width = width * $('.item').length;

$('#debug').html(width  + ' ' + height + ' ' + mask_width + ' ' + mask_height);

$('#wrapper, .item').css({width: width, height: height});

$('#mask').css({width: mask_width, height: height});

$('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}

[/CODE]