$(document).ready(function(){
	
	// Globals
	var tweet_message = $('.message').val();
	var tags = [];
	var active_input_field = $('.first-tag');
	var number_of_tag_elements = $('.tag').size() - 1;
	
	//  Utility functions
	//  --------------------------------
	// counts the words!
	var max = 140;
	function opdateCount(){ 
		var current = max - jQuery("textarea.message").val().split("").length
		$("span#counter").html(current);
	}
	
	// Filters the tag-names that doesn't match search string
	function filterSearch(searchString){
		
		var positive = jQuery("div#tag-helper ul li:contains('"+searchString+"')");
		var negative = jQuery("div#tag-helper ul li").not(positive);	
			
		negative.each(function() {jQuery(this).hide();});	
		positive.each(function() {jQuery(this).show();});
	}	
	// Hide the tag helper
	function hide_tag_helper() {
		$("div#tag-helper").fadeOut(500);
	}	
	// Show the tag helper
	function show_tag_helper() {
		$("div#tag-helper").animate({
			'left' : active_input_field.offset().left -3,
			'top' : active_input_field.offset().top + active_input_field.height() + 5
		}, 100);
	}
	// update the message with the tag
	function update_tag(string, tag_count){
		if (string.length == 0){}
		else {
			var tag = "#" + string;
			if (tag != tags[tag_count]) tags[tag_count] = tag;
		}
	}	
	function update_message_with_tags(){
		var temp_message = tweet_message;
		$.each(tags, function(i,n){
			temp_message += ' ' + tags[i];
		});
		$('.message').val(temp_message);
		opdateCount();
	}
	function find_the_previous_visible_tag(start_tag) {
		var tagishidden = false;
		start_tag = start_tag.prev();
		if (start_tag.is(':hidden')) tagishidden = true;
		while(tagishidden) {
			start_tag = start_tag.prev();
			tagishidden = start_tag.is(':hidden') ? true : tagishidden = false; 
		}
		return start_tag;
	}
	function find_the_next_visible_tag(start_tag) {
		var tagishidden = false;
		start_tag = start_tag.next();
		if (start_tag.is(':hidden')) tagishidden = true;
		while(tagishidden) {
			start_tag = start_tag.next();
			tagishidden = start_tag.is(':hidden') ? true : tagishidden = false; 
		}
		return start_tag;
	}
	
	// 	Key bindings
	//  --------------------------------
	
	// Bindings for the tag-input fields	
	$("input.tag").each(function(){

		
		// when it louses focus
		$(this).bind('blur',function(event){
			hide_tag_helper($(this));
			update_tag(active_input_field.val(), active_input_field.prevAll().length );
			update_message_with_tags()
		});		
		// When it gains focus
		$(this).bind('focus',function(){ 
			active_input_field = $(this);
			show_tag_helper($(this));
		});		
		// when any key is released
		$(this).bind('keyup',function(event){
			$("div#tag-helper").fadeIn(300); // this will only happen if it's hidden
				
			switch(event.keyCode)
			{
				case(40): // down 
					var active_tag = jQuery('#tag-helper ul li.active');
					if ( active_tag.size() == 0 ) { 
						active_tag = jQuery('#tag-helper ul li').eq(0);
						console.log('first')
					} else {
						active_tag.removeClass('active');
						active_tag = find_the_next_visible_tag(active_tag);
					}
					active_tag.addClass('active');
					active_input_field.val(active_tag.text());
					break;
				case(38): // up
					var active_tag = jQuery('#tag-helper ul li.active');
					if ( active_tag.size() == 0 ) { 
						active_tag = jQuery('#tag-helper ul li').eq(0);
					} else {
						active_tag.removeClass('active');
						active_tag = find_the_previous_visible_tag(active_tag);
					}
					active_tag.addClass('active');
					active_input_field.val(active_tag.text());
					break;
				case(27):
					hide_tag_helper(null);
				default:
					filterSearch($(this).val());
					break;
			}
			return false;
		});
		

	});
	
	// When the users clicks an suggestion.
	$('#tag-helper ul li').bind('click', function(){
		
		// find the input field that is selected
		active_input_field.val($(this).text());
		active_input_field.blur();
		active_input_field.next().focus();
		
		
	});
		
	// When the user types in the textarea - update the counter
	$("textarea.message").bind('keyup', function(event){
		opdateCount();
	});
	
	
});