document.observe("dom:loaded", function() {
	  // attach all event handlers...
	  if($('tag-search')) { $('tag-search').observe('keypress', tagSearchKeyHandler);	} // user tag search keypress handler
	  if($('search')) { $('search').observe('keypress', searchKeyHandler); }	// global tag search keypress handler

	});

	function searchKeyHandler(event) {
	  var key = event.which || event.keyCode;
	  if (key == Event.KEY_RETURN){
		  var element = event.element();
		  this.submitting = true;
		  location.href = rootURL + 'tags/' + urlencode(element.value);
	  }	
	}
	
	function tagSearchKeyHandler(event) {
	  var key = event.which || event.keyCode;
	  if (key == Event.KEY_RETURN){
		  var element = event.element();
		  this.submitting = true;
		  location.href = rootURL + username + '/' + urlencode(element.value);
	  }	
	}
	
	function elasticInput(event){
		var element = event.element();
		$(element).style.width = getTextSize($(element).value, $('crumb')) + 10 + 'px';
	}

	function urlencode(str) {
		str = escape(str);
		str = str.replace('+', '%2B');
		str = str.replace(/%20/g, '+');
		str = str.replace('*', '%2A');
		str = str.replace('/', '%2F');
		str = str.replace('@', '%40');
		return str;
	}

	function urldecode(str) {
		str = str.replace('+', ' ');
		str = unescape(str);
		return str;
	}
	
	function getTextStyle(o){
		return { fontSize: getStyle(o, 'font-size'), fontFamily: getStyle(o, 'font-family'), fontWeight: getStyle(o, 'font-weight') }
	}
	
	function makeTextSize(style, appendTo){
		style = extend({zborder: '1px solid red', visibility: 'hidden', position: 'absolute', top: 0, left: 0}, style)
		var div = create('div', {style: style})
		appendTo.appendChild(div)
		return div
	}
	
	function getTextSize(text, o){
		o.innerHTML = text.replace(/ /g, ' ')
		return o.offsetWidth
	}
	
	function toggleTag(tag) {
	  
		if ($(tag).hasClassName('selected') == true) {
			$(tag).removeClassName('selected');
		} else {
      $(tag).addClassName('selected');
		}
    
		var text = '';
		var selected = $$('#common-tags a.selected').each(function(s) {
      if (text == '') {
        text = s.innerHTML;
      } else {
        text = text + ',' + s.innerHTML;
      }
    });
    
		$('common_tags_input').value = text;
	}
	
	function addElement(destination, type) {
		
		//setup the new id for the <li>
		var newId = type + "_id_" + Math.round(Math.random() * 100000);
		
		//setup the new remove tag
		var removeTag = '<a href="#" onClick="$(\'' + newId + '\').remove(); return false;" class="remove">remove</a>';
		
		//create the new block of ingredient HTML from the blank HTML, new <li>, and remove tag
		if (type == 'ingredient') {
			var newHTML = '<li class="' + type + '" id="' + newId + '">' + blankIngredient.replace(/_blank/g, rolling_id) + removeTag + '</li>';
		}
		
		//create the new block of step HTML from the blank HTML, new <li>, and remove tag
		if (type == 'step') {
			var newHTML = '<li class="' + type + '" id="' + newId + '">' + blankStep.replace(/_blank/g, rolling_id) + removeTag + '</li>';
		}
		
		//insert the new block of HTML
		new Insertion.Bottom(destination, newHTML);
		
		//increase the id counter
		rolling_id = rolling_id + 1;
	}