document.addEvent('domready', function () {
	if($$('.commentTextArea')) {
		$$('.commentTextArea').each(function(element) {
			new commentTextArea({
				element: element
			});
		});
	}
	/*
	if($('selectCompetitionId') && $$('.tournament')[0]) {
		$('selectCompetitionIdDropdown').addEvent('change', function(evt) {
			evt.preventDefault();
			console.log($('selectCompetitionId').get('value'));
			
			//sendRankingFormCompetitionId($('selectCompetitionId').get('value'));
		});
	}
	
	if($$('#selectLocationIdDropdown .option')[0]) {
		$$('#selectLocationIdDropdown .option').addEvent('mouseup', function(evt) {
			evt.preventDefault();
			//sendRankingFormLocationEditionId($('selectLocationId').get('value'));
		});
	}
	*/
	if($$('.countDown').length > 0) {
		var pp = new PeriodicalPool({
			period: 1000
		});

		$$('.countDown').each(function (el, index) {
			var countDownBin = new CountdownBin(pp, {
				container: el, 
				registerTo: pp
			});
		});
	}
	
	if($$('.mainEntry').length > 0) {
		$$('.mainEntry').each(function(el, index) {
			if(el.getElement('.deleteMessage')) {
				var deleteMsg = el.getElement('.deleteMessage');
				el.addEvents({
					'mouseenter': function () {
						deleteMsg.setStyle('display','block');
					},
					'mouseleave': function () {
						deleteMsg.setStyle('display','none');
					}
				});
			}
		});
	}
});


var commentTextArea = new Class ({
	Implements: [Options, Events],
	options: {
		element:''
	}, 
	initialize: function (options) {
		this.setOptions(options);
		
		this.element = this.options.element;
		this.text = this.element.get('text');
		
		this.element.addEvents({
			'focus': function(elem) {
				if(!this.element.getNext('.submitButton')){
					this.element.value = '';
					this.setAppearance();
					this.addCommentButton();
					
					
				}
			}.bind(this), 
			'blur': function(elem) {
				if(this.element.value.length == 0){
					this.element.value = this.text;
					this.setDefault();
					this.destroyButton();	
				
				}
			}.bind(this)
		});
	}, 
	setAppearance: function () {
		this.element.setStyle('height', this.element.getStyle('height').toInt()*2);	
	}, 
	setDefault: function () {
		this.element.setStyle('height', 14);
	}, 
	addCommentButton: function () {
		var button = new Element('input', {
			type: 'submit',
			value: 'submit'
		}).addClass('submitButton');

		
		var container = this.element.getParent();
		container.grab(button);
	},
	destroyButton: function () {
		if(this.element.getNext('.submitButton')){
			this.element.getNext('.submitButton').dispose();
		}	
	}
});



window.addEvent('domready', function() {
	// Class for the Main SendMessage Element
	if ($$('.sendMessage')) {
		new counter({
			elements: $$('.sendMessage'),
			maxChars: 140
		});
		new autoGrow ({
			textArea: $$('.autoGrow'),
			margin: 20
		});
	}	
	// Class for the Comment/Response Elements
	if ($$('.commentTextArea')) {
		new counter({
			elements: $$('.commentTextArea'),
			maxChars: 140
		});
		new autoGrow ({
			textArea: $$('.commentTextArea.autoGrow'),
			margin: 20
		});
		
		$$('.commentTextArea').each(function(ele) {
		
			ele.getPrevious('.counter').hide();
		
			ele.addEvents({
				'focus': function () {
					ele.getPrevious('.counter').show();
				},
				'blur': function() {
					ele.getPrevious('.counter').hide();
				}			
			});
		});
	}	
});

// Counter Class 
var counter = new Class ({
	Implements: [Options, Events],
	options: {
		elements:'',
		maxChars:''
	},
	initialize: function (options) {
		this.setOptions(options);
		this.elements = this.options.elements;
		this.maxChars = this.options.maxChars;
		this.setup();
	},
	setup: function () {
		this.elements.each(function(ele) {
						
			var indicator = new Element('span', {
				text : this.maxChars
			}).addClass('counter').inject(ele, 'before');
					
			ele.addEvent('keyup', function() {
				this.checkLength(ele, indicator);
			}.bind(this));
		}.bind(this));
	},
	checkLength: function(ele,indicator) {	
		maxChars = this.maxChars;
		currentValue = ele.value;
		currentLength = currentValue.length;
		remainingChars = maxChars - currentLength;
		indicator.set('text', remainingChars);
		
		this.updateIndicator(indicator, currentLength, maxChars);
		this.updateButton(ele, indicator, currentLength, maxChars);
	},
	updateIndicator: function(indicator, currentLength, maxChars) {
		if (currentLength < maxChars) {
			if (indicator.hasClass('stop')) {
				indicator.removeClass('stop');
			}
		}
		if (currentLength >= maxChars) {	
			if (indicator.hasClass('stop')) {
			} else {
				indicator.addClass('stop');
			}
		}
	},
	updateButton: function(ele, indicator, currentLength, maxChars) {
		var form = ele.getParent('form');
		var button = form.getElement('input[type=submit]');
		if (currentLength <= maxChars) {
			button.removeProperty('disabled');
		}
		if (currentLength > maxChars) {
			button.set('disabled', 'disabled');
		}
	}
});

// AutoGrow Class
var autoGrow = new Class ({
	Implements: [Options, Events],
	options: {
		textArea:'',
		margin: ''
	},
	initialize: function (options) {
		this.setOptions(options);
		this.textArea = this.options.textArea;
		this.setup();
	},
	setup: function() {
		this.textArea.each(function(ele) {
			
			var minHeight = ele.clientHeight;
		
			var dummy = new Element('div', {
				styles: {
					'position' : 'absolute',
					'top' : '0',
					'left': '-9999px'
				}
			}).addClass('dummy').setStyles(ele.getStyles('font-size', 'font-family', 'width', 'line-height', 'padding')).inject(ele, 'after');
			
			ele.addEvent('keyup', function () {
				this.resize(ele, dummy, minHeight);
			}.bind(this));
		}.bind(this));
	},
	resize: function(ele, dummy, minHeight) {
	
		var msgText = ele.get('value').replace(/\n|\r\n/g, '<br />&nbsp;');
	
		if(dummy.get('html') != msgText) {
			dummy.set('html', msgText);
			var dummyText = dummy.get('html');
			var dummyHeight = dummy.getSize().y + this.options.margin;
			if (ele.clientHeight != dummyHeight) {
				var newHeight = Math.max(minHeight, dummyHeight);
				ele.tween('height', newHeight);
			}
		}		
	}
});