/**
 * The Syn.GamesChannelNavigation Component Class 
 */

/**
 * Create a Syn.GamesChannelNavigation component instance 
 * @constructor
 */

Syn.GamesChannelNavigation = Syn.Component.extend(
{
	trigger: 1,
	title: 'enter text...',

	/**
	 * Initialize the component class. This is called automatically by the default constructor.
	 * @member Syn.GamesChannelNavigation
	 * @param {Object} config The configuration data structure 
	 */
	init: function(config)
	{
		this._super(config);
		this.uniqueElmt("games_search_box").connect("focus", this, "toggleDefaultSearchTextFocus");
		this.uniqueElmt("games_search_box").connect("blur", this, "toggleDefaultSearchTextBlur");
		
		var search = this.uniqueElmt("games_search_box");
		search.val(this.title);

		// Replaces suckerfish
		this.fixHovers();
	},

	/**
	 * Fix hover states for IE
	 */
	fixHovers: function()
	{
		/**
		 * JQuery's browser function doesn't seem to work correctly.
		 * So I am using a regex on the navigator.userAgent property
		 * to detect IE6 - and then add the 'over' class to the li
		 * on mouseover, remove it on mouseout, and hide all select
		 * elements for thse two events as well.
		 * So for IE6, all SELECT html elements will be hidden when
		 * you mouse over menu items - on purpose.
		 */
		if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
		{
			var ieversion = new Number(RegExp.$1);
			if (ieversion == 6)
			{
				$('#games_navigation_nav li').hover(function() {
					$(this).addClass('over');
					$('select').css('visibility', 'hidden');
				}, function() {
					$(this).removeClass('over');
					$('select').css('visibility', 'visible');
				});
			}
		}
	},

	/**
	 * Resets "enter text..." on blur if empty
	 */
	toggleDefaultSearchTextBlur: function()
    {
		var search = this.uniqueElmt("games_search_box");
		
		if (search.val() == '') 
		{
			this.trigger = 1;
			search.val(this.title);
			search.removeClass("games_search_box_selected");
			search.css('color', '#bbb')
		}
		
	},
	
	/**
	 * Removes default "enter text..."
	 */
	toggleDefaultSearchTextFocus: function()
	{
		var search = this.uniqueElmt("games_search_box");

		if (search.val() == this.title && this.trigger !== 0) 
		{
			this.trigger = 0;
			search.val('');
			search.addClass("games_search_box_selected");
			search.css('color', '#444')			
		}
	}
});