/**
 * Key Note control
 *
 * @author Ollie Maitland
 * @copyright Byng Systems LLP
 * @requires BaseCode-0.2.4.0
 * @requires MooTools-1.2.1
 */
Byng.register('kn.calendar', 
{	
	Implements : [Options, Events],
	
	elements : [],
	fx : [],
	
	initialize : function (options)
	{
		this.setOptions(options);
	
		if (this.options.input.retrieve('calendar')) {
			return;
		} else {
			this.options.input.store('calendar', this);
		}
		
		this.options.input.set('hasFocus', true);
		
		if (this.options.input.get('value')) {
			try {
				var date = this.options.input.get('value').split('/');
				this.options.date = new Date();
				this.options.date.setDate(1)
				this.options.date.setMonth(parseInt(date[0]) - 1)
				this.options.date.setFullYear(parseInt(date[1]));
				
			} catch (e) {}
		}
				
		if (!this.options.date) {
			this.options.date = new Date();
		}
		
		this.build();
	},
	
	build : function ()
	{
		var position = this.options.input.getCoordinates($('kn-centre'));

		this.elements.picker = new Element('div',{'class': 'kn-calendar_picker'})
									.setStyles({
										'top' 	: position.top + position.height,
										'left'  : position.left + position.width + 10,
										'visibility' : 'visible',
										'opacity' : 0,
										'display' : 'inline'
									}).set('html',
		'<div class="pickerBackground"><div class="kn-calendar">'+
		'	<span class="indication">'+
		'		<div class="arrowRight"></div>'+
		'		<div class="arrowLeft"></div>'+
		'		<span class="label">{year}</span>'+
		'	</span>'+
		'	<div class="container"></div>'+
		'</div>').addEvent('mouseout', function() {
			if (this.options.input.get('hasFocus') == false) {
				this.timeOut = this.fireEvent.delay(1000, this, ['blur']);
			}
		}.bind(this)).addEvent('click', function(e) {
			if (this.timeOut) {
				$clear(this.timeOut);
				delete this.timeOut;
			}
		}.bind(this));
		
		// find and set the label
		this.elements.label = this.elements.picker.getElement('.label').set('text', this.options.date.getFullYear());
		
		// controls
		this.elements.picker.getElement('.arrowRight').addEvent('click', this.navigate.bindWithEvent(this, 'right'));
		this.elements.picker.getElement('.arrowLeft').addEvent('click', this.navigate.bindWithEvent(this, 'left'));		
		
		this.elements.container = this.elements.picker.getElement('.container');
		
		var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
		var tr = null;
		var tbody = new Element('tbody').inject(new Element('table',{'class' : 'year'}).inject(this.elements.container));
		
		// add the months into a table
		months.each(function(m,i) {
			if (!tr || i % 4 == 0) tr = new Element('tr').inject(tbody);
			new Element('td').store('month', i).addEvent('click', function(e){
				this.fireEvent('select', [$(e.target)]);
			}.bind(this))
				.set('text', m).inject(tr)
				.addClass((i == this.options.date.getMonth() ? 'selected' : null))
				
		}.bind(this));
		
		// add to the document
		this.elements.picker.inject(document.getElement('body'));
		
		// add destroy events
		this.addEvent('destroy', function(){
			this.hide(true);
		}.bind(this));
		
		this.addEvent('select', function(cell){
			this.options.date.setMonth(cell.retrieve('month'));
			this.options.input.set('value', [
						this.options.date.getMonth() + 1,
						this.options.date.getFullYear()
					].join('/'));
			this.fireEvent('destroy');
		}.bind(this));
		
		// add a new fade effect
		this.fx = new Fx.Morph(this.elements.picker, {
			transition: 'linear',
			duration: 150
		}).start({
			opacity : 1
		});
		
		this.addEvent('blur', function(e) {
			if (this.timeOut) {
				$clear(this.timeOut);
				delete this.timeOut;
			}
			this.timeOut = this.fireEvent.delay(1000, this, ['destroy']);			
		}.bind(this));
		
	},
	
	navigate : function (e, direction)
	{
		e.stop();
		this.elements.label.set('text', this.options.date.getFullYear() + ( direction == 'right' ? 1 : -1));
		this.options.date.setFullYear( this.options.date.getFullYear() + ( direction == 'right' ? 1 : -1) );
		if (this.timeOut) {
			$clear(this.timeOut);
			delete this.timeOut;
		}
	},
	
	hide : function ( destroy )
	{
		this.fx.addEvent('complete', (destroy ? function(){
			this.destroy();
		}.bind(this) : $empty)).start(1,0);
	},
	
	destroy : function ()
	{
		this.elements.picker.empty().dispose();
		this.options.input.store('calendar', null);
	}

});