var AsperMap = new Class({
	
	Implements: Options,
	
	options: {
		'cell_size' : 10,	
		'grid' : false,
		'url' : null,
		'width' : null,
		'height' : null,
		'form' : false,
		'unselectable' : [],
		'current' : -1	
	},
	
	initialize: function( options ){
		
		this.setOptions(options);
		
		this.map = $(this.options.id);
		this.content = this.map.getElement('div.asper_map_content');
		if( this.options.grid ){
			this.grid = this.map.getElement('div.asper_map_grid');
		}
		if( this.options.bubbles ){
			this.bubble = this.map.getElement('div.asper_map_bubble');
			this.bubble_content = this.map.getElement('div.asper_map_bubble_content');
		}
		
		this.setSizes();
		
		if(this.options.grid){
			this.mkGrid();
		}
		
		this.mkCells();
		
	},
	
	setSizes: function(){
		var divs = [ this.map, this.content ];
		if( this.options.grid ){
			divs.push(this.grid);
		}
		divs.each(function(el){
			el.setStyles({
				'width' : this.options.width,
				'height' : this.options.height
			});
		}.bind(this));
	},
	
	mkCells: function(){
		var div = new Element( 'div', {
			'styles': {
				'width' : this.options.cell_size,
				'height' : this.options.cell_size
			},
			'class': 'asper_map_cell'
		});
		if( this.options.form ){
			var input = this.map.getElement('input');	
		}	
		( this.options.rows * this.options.cols ).times( function(i){
			var cell = div.clone().set('rel',i);
			if( this.options.form ){
				var selectable = true;
				this.options.unselectable.each(function(option){
					if(option == i){
						selectable = false;
					}
				});
				if( selectable ){
					cell.addEvent('click', function(){
						this.content.getElements('div.asper_map_cell').removeClass('selected');
						cell.addClass('selected');
						input.set('value', cell.get('rel'));
					}.bind(this));
				}
				else {
					cell.addClass('unselectable');
				}
			}
			if(this.options.current == i){
				selectable = true;
				cell.addClass('selected');
			}
			if( 
				this.options.bubbles 
				&& $chk(this.options.bubbles[i]) 
			){
				cell.addClass('bubble');
				cell.addEvents({
					'mouseover': function(){
						this.showBubble( cell );
					}.bind(this),
					'mouseout': function(){
						this.hideBubble( cell );
					}.bind(this)					
				});	
				cell.addEvent('click', function(){
					this.updateRight( this.options.bubbles[cell.get('rel')] );
				}.bind(this));									
			}
			cell.inject(this.content);
		}.bind( this ));
	},
	
	showBubble : function( cell ){
		this.content.getElements('div.asper_map_cell div.asper_map_bubble').setStyle('display', 'none');
		var bubble = cell.getElement('div.asper_map_bubble');
		if(!bubble){
			this.bubble_content.set('html', this.options.bubbles[cell.get('rel')]);
			var bubble = this.bubble.clone().inject(cell).setStyles({
				'bottom' : this.options.cell_size + 6,
				'left' : this.options.cell_size / 2 - 26 
			});
		}
		bubble.setStyle('opacity', 0);
		bubble.setStyle('display', 'block');
		bubble.fade('in');
		//(function(){this.hideBubble( cell );}.bind(this)).delay(5000);
	},
	
	hideBubble : function( cell ){
		var bubble = cell.getElement('div.asper_map_bubble');
		if(bubble.getStyle('display') == 'block'){
			bubble.fade('out');
			(function(){ bubble.setStyle('display', 'none'); }).delay(500);
		}
		
	},
	
	updateRight: function(content){
		$('contact_reciever').setStyle('display', 'block').set('html', content);
	},
	
	mkGrid: function(){
		var div = new Element( 'div', {
			'styles': {
				'width' : this.options.width,
				'height' : this.options.height
			}
		});
		
		var rows = div.clone().addClass('asper_map_grid_rows').inject(this.grid);	
		var row = new Element( 'div', {
			'styles': {
				'width' : this.options.width,
				'height' : this.options.cell_size - 1
			},
			'class': 'asper_map_grid_row'
		});
		this.options.rows.times( function(){
			row.clone().inject(rows);
		});
		
		var columns = div.clone().addClass('asper_map_grid_columns').inject(this.grid);
		var col = new Element( 'div', {
			'styles': {
				'height' : this.options.height,
				'width' : this.options.cell_size - 1
			},
			'class': 'asper_map_grid_column'
		});
		this.options.cols.times( function(){
			col.clone().inject(columns);
		});		 
	}
	
});