var Tiler = Class.create({
	initialize: function(container) {
		this.duration		= 0.2;
		this.container	= container = $(container);
		this.centerTile	= container.getElementsBySelector('.centerTile')[0];
		
		var tiles			= $A(container.getElementsBySelector('.tile'));
		var subTiles	= $A(container.getElementsBySelector('.subTile'));
		
		var toPosition = function(tiles, tile) {
			tile = $(tile);
			tile.positionTag = tile.classNames().find(function(s){return s.match(/[tmb][lcr]/)});
			tiles[tile.positionTag] = tile;
			return tiles;
		}
		var tilesByPositionTag		=	tiles.inject({}, toPosition);
		var subTilesByPositionTag	= subTiles.inject({}, toPosition);

		// TILE CLASS
		var Tile = Class.create({
			tiler: this,
			initialize: function(tile, subTile) {
				this.tile = tile = $(tile);
				this.subTile = subTile = $(subTile);
				this.positionTag = tile.positionTag;
				
				tile.sibTile = subTile;
				subTile.tile = tile;
				
				tile.observe('mouseover', this.slideIn.bind(this));
				tile.observe('mouseout',  this.slideOut.bind(this));
			},
			resetSubTile: function() {
				this.subTile.setStyle({
					top: this.tile.getStyle('top'),
					left: this.tile.getStyle('left')
				})
				this.subTile.hide();
			},
			cancelAnimation: function() {
				// if (this.effect) console.dir({EFFECT:this.effect})
				if (this.effect && typeof this.effect.cancel == 'function') this.effect.cancel();
			},
			slideIn: function() {
				// console.log('sliding in '+this.positionTag);
				this.cancelAnimation();
				// this.resetSubTile();	
				this.subTile.setStyle({'zIndex':2});
				this.subTile.show();
				var to = this._getTo();
				this.effect = new Effect.MoveBy( this.subTile, to.y, to.x, {duration: this.tiler.duration} );
			},
			slideOut: function(positionTag) {
				this.subTile.getStyle('top');
				
				this.cancelAnimation();
				this.subTile.setStyle({'zIndex':1});
				var back = this._getBack();
				this.effect = new Effect.MoveBy( 
					this.subTile, 
					back.y,
					back.x,
					{
						duration: this.tiler.duration,
						afterFinish: function() {
							this.resetSubTile();
						}.bind(this)
					} 
				);
			},
			_getBack: function() {
				return {
					y: ( parseInt(this.tile.getStyle('top')) - parseInt(this.subTile.getStyle('top')) ), 
					x: ( parseInt(this.tile.getStyle('left')) - parseInt(this.subTile.getStyle('left')) )
				}
			},
			_getTo: function() {
				return {
					y: ( parseInt(this.tiler.centerTile.getStyle('top')) - parseInt(this.subTile.getStyle('top')) ), 
					x: ( parseInt(this.tiler.centerTile.getStyle('left')) - parseInt(this.subTile.getStyle('left')))
				}
			}
		});

		this.tile = tiles.inject({}, function(tiles, tile) {
			tiles[tile.positionTag] = new Tile(tile, subTilesByPositionTag[tile.positionTag])
			return tiles;
		});
		this.tiles = $H(this.tile).values();

		// console.dir(this);
	}
});