<script src="jquery.js" type="text/javascript"></script>
<script src="jquert.alt.text.plugin.js" type="text/javascript"></script>
<form method="post">
<div id="search-category">
					  <input name="category" type="hidden" value="All" />
					  <span>All</span>
					  <span><a href="javascript:void(null)">Prime</a></span>
                      <span><a href="javascript:void(null)">Ultima</a></span>
                      <span><a href="javascript:void(null)">Delta</a></span>
					  <span class="last"><a href="javascript:void(null)">Sigma</a></span></div>
<div id="search-box">
					  <input id="q" title="Click to enter search query" alt="Search All..." name="q" type="textbox" /></div>
<button class="verify {e:['#q'],s:'You must enter search query.'}">Search</button>
			  </form>

$(function()
{
 
	// search categories
	$('#search-category span').click(function()
	{
		var category = $('a', this);
 
		if (category.length)
		{
			$('#search-category span').not(this).each(function()
			{
				$(this).html('<a href="javascript:void(null)">' + $(this).text() + '</a>');
			});
 
			var text = $(category).text();
 
			$(category).parent().html(text);
			$('#search-category input').val(text);
 
			$('#search-box input').attr('alt', $('#search-category').attr('alt') + ' ' + text + '...')
			.attr('title', $('#search-box input')[0].hoverText).altText();
		}
	});
	// --
 
	// alternative text on inputs - call from plugin
	$('#search-box input, .block-subscribe input').altText();
	// --
 
});

// jquery.alttext plugin
(function($)
{
	$.fn.altText = function($options)
	{
		var opts = $.extend({}, $.fn.altText.settings, $options || {});
 
		return $(this).each(function()
		{
			var $this = $(this);
 
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
 
			this.valBackup = '';
			this.focused = false;
			this.altText = $this.attr(o.source);
			this.hoverText = o.hoverState ? $this.attr(o.hoverSource) : null;
 
			if (o.hoverSource == 'title')
			{
				this.title = '';
			}
 
			$(this).unbind();
 
			$this.val(this.altText).css('color', o.inactiveColor)
 
			.focus(function()
			{
				this.focused = true;
				this.valBackup = $(this).val();
 
				if (this.valBackup == this.altText || (this.valBackup == this.hoverText))
				{
					$(this).val('');
				}
 
				$(this).css($.extend({'color': o.activeColor}, o.activeCSS));
			})
 
			.blur(function()
			{
				this.focused = false;
 
				if ($(this).val() == '')
				{
					$(this).val(this.altText);
				}
 
				$(this).css($.extend({'color': o.inactiveColor}, o.inactiveCSS));
			})
 
			.hover
			(
				function()
				{
					if (!o.hoverState) return;
 
					if (($(this).val() == '' || $(this).val() == this.altText) && !this.focused)
					{
						this.valBackup = $(this).val();
						$(this).val(this.hoverText);
					}
 
					$(this).css($.extend({'color': o.hoverColor}, o.hoverCSS));
				},
 
				function()
				{
					if (!o.hoverState) return;
 
					if ($(this).val() == this.hoverText)
					{
						$(this).val(this.valBackup);
					}
 
					$(this).css($.extend({'color': this.focused ? o.activeColor : o.inactiveColor}, this.focused ? o.activeCSS : o.inactiveCSS));
				}
			);
		});
	};
 
	// isEmpty test function
	$.fn.isEmpty = function()
	{
		return	($(this).val() == '') ||
				($(this).val() == $(this)[0].altText) ||
				($(this).val() == $(this)[0].hoverText);
	};
 
	// global settings
	$.fn.altText.settings =
	{
		source: 'alt',
		hoverState: true,
		hoverSource: 'title',
		hoverCSS: { 'font-style': 'italic' },
		inactiveColor: '#666',
		inactiveCSS: { 'font-style': 'normal' },
		activeColor: '#333',
		activeCSS: { 'font-style': 'normal' },
		hoverColor: '#444'
	};
 
})(jQuery);