Beach = Class.create({
	imagePaths: $R(361,421).collect(function(num){return 'images/IMG_0' + num + '.JPG'}),
	imageLocations: {
		bottom: $R(361,411).collect(function(num){return 'images/IMG_0' + num + '.JPG'}),
		up: $A($R(412,414)).collect(function(num){return 'images/IMG_0' + num + '.JPG'}),
		right: $A($R(415,420)).collect(function(num){return 'images/IMG_0' + num + '.JPG'}),
		zoom: ['images/IMG_0421.JPG']
	},
	currentX: 0,
	currentY: 0,
	
	initialize: function() {
		this.preloadImages();
		this.container = $('showContainer');
	},
	
	preloadImages: function() {
		this.preloader = new Preloader({
			onImageLoad: function(image,loader) {
				$('percent').update(loader.getPercentageComplete() + '%');
			},
			onComplete: function(images,loader) {
				$('percentLoaded').update(loader.loadedCount + ' images loaded, show beginning...');
				this.run();
			}.bind(this)
		});
		this.preloader.add(this.imagePaths).load();
	},
	
	doNextFrame: function() {
		var imgPath = this.imagePaths.shift();
		this.placeholderImg.src = imgPath;
		if(this.imagePaths.length == 0) {
			this.pe.stop();
		}
	},
	
	doNextBottom: function() {
		var imgPath = this.imageLocations.bottom.shift();
		this.placeholderImg.src = imgPath;
		if(this.imageLocations.bottom.length == 0) {
			this.pe.stop();
			this.pe = new PeriodicalExecuter(this.doNextUp.bind(this), .5);
		}
	},
	
	doNextUp: function() {
		var imgPath = this.imageLocations.up.shift();
		this.newImage(imgPath,0,this.currentY+100);
		if(this.imageLocations.up.length == 0) {
			this.pe.stop();
			this.pe = new PeriodicalExecuter(this.doNextRight.bind(this), .75);
		}
	},
	
	doNextRight: function() {
		var imgPath = this.imageLocations.right.shift();
		this.newImage(imgPath,this.currentX + 75,this.currentY);
		if(this.imageLocations.right.length == 0) {
			this.pe.stop();
			this.doZoom.bind(this).delay(2);
		}
	},
	
	doZoom: function() {
		var imgPath = this.imageLocations.zoom.shift();
		this.newImage(imgPath,0,0);
	},
	
	newImage: function(path,posX,posY) {
		var elem = new Element('img',{src: path, style: 'bottom:' + posY + 'px; left:' + posX + 'px;'});
		this.container.appendChild(elem);
		this.currentX = posX;
		this.currentY = posY;
		return elem;
	},
	
	run: function() {
		var firstImage = this.imageLocations.bottom.shift();
		this.placeholderImg = this.newImage(firstImage,0,0);
		this.pe = new PeriodicalExecuter(this.doNextBottom.bind(this), .25);
	}
});