var RotatorSquare = new Class(
{
	Implements:	[Options],
	options:	
	{
		tile_width:		210,
		tile_height:	130,
		timeout:	   8000
		
	},
	viewport: 	null,
	tiles: 		null,
	step:		0,
	transforms: [ {x: 0, y:1}, {x: 1, y: 0}, {x: 0, y: -1}, {x: -1, y: 0} ],
	
	initialize: function(viewport, options)
	{
		this.viewport = $(viewport);
		this.setOptions(options);
		
		this.tiles = this.viewport.getElements(".view_tile");
		
		this.tiles.each(function(tile) { tile.setStyle('position', 'absolute'); });
		
		this.tiles[0].setStyles({'top': 0, 'left': 0});
		this.tiles[1].setStyles({'top': this.options.tile_height, 'left': 0});
		this.tiles[2].setStyles({'top': this.options.tile_height, 'left': this.options.tile_width});
		this.tiles[3].setStyles({'top': 0, 'left': this.options.tile_width});

		this.start();
	},
	
	start: function()
	{
		this.timer = this.next.periodical(this.options.timeout, this);
	},
	
	stop: function()
	{
		if (this.timer == null) return;
		
		$clear(this.timer);
		this.timer = null;
	},
		
	next: function()
	{
		var transform = this.transforms[this.step];
		this.tiles.each(function(tile)
		{
			var x = tile.offsetLeft;
			var y = tile.offsetTop;
			
			tile.morph({'left': x - (transform.x * this.options.tile_width),
					    'top': y - (transform.y * this.options.tile_height)});
		}.bind(this));
		
		this.step = (this.step + 1) % 4;
	}
});