// HTML

<div id="bd">
	<div class="screen"><img src="/images/juliao/1.jpg"></div>
	<div class="screen"><img src="/images/juliao/2.jpg"></div>
	<div class="screen"><img src="/images/juliao/3.jpg"></div>
</div>

(...)

<div id="setas" class="yui-u">
	<img src="/images/setas/up.gif" id="up" class="pointer faded">
	<img src="/images/setas/down.gif" id="down" class="pointer">
</div>


// JAVASCRIPT

(function() {

	// sets up event triggers (what the up/down arrows should do) when looking at picture 1
	var position1 = function() {
		YAHOO.util.Event.on('down', 'click', function() {
			downAnim = new YAHOO.util.Scroll('bd', {scroll: { to: [0, 650] }}, 0.5, YAHOO.util.Easing.easeBoth);	// scroll the div
			downAnim.onComplete.subscribe(position2);	// setup the triggers for the new position
			downAnim.animate();
		});
	}

	// event triggers for pic 2
	var position2 = function() {
		YAHOO.util.Event.on('up', 'click', function() {
			downAnim = new YAHOO.util.Scroll('bd', {scroll: { to: [0, 0] }}, 0.5, YAHOO.util.Easing.easeBoth);
			downAnim.onComplete.subscribe(position1);
			downAnim.animate();
		});

		YAHOO.util.Event.on('down', 'click', function() {
			downAnim = new YAHOO.util.Scroll('bd', {scroll: { to: [0, 1300] }}, 0.5, YAHOO.util.Easing.easeBoth);
			downAnim.onComplete.subscribe(position3);
			downAnim.animate();
		});
	}

	// event triggers for pic 3
	var position3 = function() {
		YAHOO.util.Event.on('up', 'click', function() {
			downAnim = new YAHOO.util.Scroll('bd', {scroll: { to: [0, 650] }}, 0.5, YAHOO.util.Easing.easeBoth);
			downAnim.onComplete.subscribe(position2);
			downAnim.animate();
		});
	}


	// page opens in picture 1, so we setup the event triggers
	position1();

})();