$(function() {
	var ul = $('ul:first');
	var width = 0;

	$('#new-vehicle-menu li').each(function() {
		width += $(this).outerWidth(true);
	});
	$('#new-vehicle-menu ul:first').width(width);

	var triggerButtonStates = function() {
		var t = $('#new-vehicle-menu ul');
		var left = parseInt(t.css('left')) || 0;
		var width = t.outerWidth();
		var viewWidth = $('#new-vehicle-menu .view-port').width();

		var l_but = $('#new-vehicle-menu .left-button').removeClass('disabled-left-button');
		var r_but = $('#new-vehicle-menu .right-button').removeClass('disabled-right-button');

		if (left >= 0) {
			l_but.addClass('disabled-left-button');
			t.css('left', '0px');
		}

		if ((left + width) <= viewWidth) {
			r_but.addClass('disabled-right-button');
			t.css('left', (viewWidth - width) + 'px');
		}
	};

	$('#new-vehicle-menu .left-button').click(function() {
		if ($(this).hasClass('disabled-left-button'))
			return false;

		var t = $('#new-vehicle-menu ul');
		var left = parseInt(t.css('left')) || 0;
		var viewWidth = $('#new-vehicle-menu .view-port').width();
		var priorLeft = [0, 0];

		$('#new-vehicle-menu li').each(function() {
			var pos = $(this).position();

			if (pos.left >= (-left)) {
				t.animate({ left: -priorLeft[priorLeft.length - 1] + 'px' }, 'slow', 'swing', function() {
					triggerButtonStates();
				});
				return false;
			}

			for (var i = priorLeft.length - 1; i > 0; i--) {
				priorLeft[i] = priorLeft[i - 1];
			}
			priorLeft[0] = pos.left;
		});

		return false;
	});
	$('#new-vehicle-menu .right-button').click(function() {
		if ($(this).hasClass('disabled-right-button'))
			return false;

		var t = $('#new-vehicle-menu ul');
		var left = parseInt(t.css('left')) || 0;
		var viewWidth = $('#new-vehicle-menu .view-port').width();
		var prevLeft = 0;
		var counter = 2;
		var moved = false;

		$('#new-vehicle-menu li').each(function() {
			var pos = $(this).position();

			if (pos.left > (viewWidth - left)) {
				if (counter <= 0) {
					left -= (pos.left - prevLeft) + $(this).outerWidth(true);
					t.animate({ left: left + 'px' }, 'slow', 'swing', function() {
						triggerButtonStates();
					});
					moved = true;
					return false;
				}
				else
					counter--;
			}

			prevLeft = pos.left;
		});

		if (!moved) {
			left = viewWidth - t.width();
			t.animate({ left: left + 'px' }, 'slow', 'swing', function() {
				triggerButtonStates();
			});
		}

		return false;
	});

	triggerButtonStates();
});