/**
 * Flash games javascript class
 */

/**
 * Create a Syn.games_browse component instance
 * @constructor
 */
Syn.GamesBrowse = Syn.Component.extend (
{
	/**
	 * Initialize the component class. This is called automatically by the default constructor.
	 * @member Syn.GamesBrowse
	 * @param {Object} config The configuration data structure
 	*/
	init: function(config)
	{
		this._super(config);
		this.page_index  = config['page_index'];
		this.browse_num  = config['browse_num'];
		this.game_name   = config['game_name'];
		this.game_search = config['game_search'];
		this.game_url    = config['game_url'];
		this.provider    = config['provider'];
		this.sort_by     = config['sort_by'];
		this.games_provider    = config['games_provider'];
		this.games_browse_find_state = 'initialized';


		$( '#'+this.uniqueKey('next_page_top')+',#'+this.uniqueKey('next_page_bot') )
			.connect('click',this,'submit',[ {page_index:this.page_index+this.browse_num,browse_num:this.browse_num,game_search:this.game_search,games_provider:this.games_provider,sort_by:this.sort_by} ])
			.connect('click',this,'showLoading');

		$( '#'+this.uniqueKey('prev_page_top')+',#'+this.uniqueKey('prev_page_bot') )
			.connect('click',this,'submit',[ {page_index:this.page_index-this.browse_num,browse_num:this.browse_num,game_search:this.game_search,games_provider:this.games_provider,sort_by:this.sort_by} ])
			.connect('click',this,'showLoading');
		
		$( '#'+this.uniqueKey('15_top')+' a,#'+this.uniqueKey('15_bot') + ' a' )
			.connect('click',this,'submit',[ {page_index:0,browse_num:15,game_search:this.game_search,games_provider:this.games_provider,sort_by:this.sort_by} ])
			.connect('click',this,'showLoading')
			.connect('mouseover mouseout', this, 'toggleOnState');
		$( '#'+this.uniqueKey('25_top')+' a,#'+this.uniqueKey('25_bot') + ' a' )
			.connect('click',this,'submit',[ {page_index:0,browse_num:25,game_search:this.game_search,games_provider:this.games_provider,sort_by:this.sort_by} ])
			.connect('click',this,'showLoading')
			.connect('mouseover mouseout', this, 'toggleOnState');
		$( '#'+this.uniqueKey('50_top')+' a,#'+this.uniqueKey('50_bot') + ' a' )
			.connect('click',this,'submit',[ {page_index:0,browse_num:50,game_search:this.game_search,games_provider:this.games_provider,sort_by:this.sort_by} ])
			.connect('click',this,'showLoading')
			.connect('mouseover mouseout', this, 'toggleOnState');
		
		/**
		 * Simplified loop reduces code duplication while connecting click event handlers
		 * to elements with ascending/descending behaviors.
		 */
		var asc_desc_elements_array = ['name_asc', 'name_desc', 'genre_asc', 'genre_desc', 'rank_asc', 'rank_desc', 'rating_asc', 'rating_desc']
		for (x in asc_desc_elements_array)
		{
			this.uniqueElmt(asc_desc_elements_array[x])
				.connect('click', this, 'submit', [ {browse_num:this.browse_num, game_search:this.game_search, games_provider:this.games_provider, sort_by:asc_desc_elements_array[x]} ])
				.connect('click', this, 'showLoading');
		}

		this.uniqueElmt('provider_list')
			.connect('change',this,'onProviderChange')
			.connect('change',this,'showLoading');

		this.uniqueElmt('games_browse_form')
			.connect('submit',this,'showLoading')
			.connect('submit',this,'onSearchSubmit');

		this.uniqueElmt('games_browse_find')
			.connect('focus',this,'textHint');

		this.uniqueElmt('games_browse_find')
			.connect('blur',this,'textHint1');

		$('#'+this.uniqueKey('top_page')+ ' li:not(:first):not(:last) a,#'+this.uniqueKey('bot_page')+ ' li:not(:first):not(:last) a')
				.connect('click',this,'onPageNumClick')
				.connect('click',this,'showLoading')
				.connect('mouseover mouseout', this, 'toggleOnState');

		for (var i=0; this.uniqueElmt('game'+i).length; i++)
		{
			this.uniqueElmt('game'+i).find('a').connect('click',this,'launchGame');
		}

		for (var i=0; this.uniqueElmt('game_list'+i).length; i++)
		{
			this.uniqueElmt('game_list'+i).find('a').connect('click',this,'launchGame');
		}

	},

	/**
	 * Toggle the "on" class for elements.
	 * @member Syn.GamesBrowse
	 */
	toggleOnState: function(elmt, ev)
	{
		$(elmt).parent().toggleClass('on');
	},

	/**
	 * Event Handler when page number is clicked
	 * @member Syn.GamesBrowse
	 */
	onPageNumClick: function(elmt,ev)
	{
		this.submit({page_index:$(elmt).attr('rel')*this.browse_num,browse_num:this.browse_num,game_search:this.game_search,games_provider:this.games_provider,sort_by:this.sort_by});
	},
	
	/**
	 * Event Handler for provider dropdown change
	 * @member Syn.GamesBrowse
	 */
	onProviderChange: function()
	{
		this.submit({games_provider:this.uniqueElmt('provider_list').attr('value'),sort_by:this.sort_by});
	},

	/**
	 * Event Handler when page number is clicked
	 * @member Syn.GamesBrowse
	 */
	onSearchSubmit: function()
	{
		this.submit({game_search:this.uniqueElmt('games_browse_find').attr('value'),sort_by:this.sort_by});
	},

	/**
	 * Shows loading graphic when retrieving data
	 * @member Syn.GamesBrowse
	 */
	showLoading: function()
	{
		this.uniqueElmt('loading').show().css( { 'width':this.container().width(), 'height':this.container().height() } );
	},
	
	/**
	 * Sets search text to empty
	 * @member Syn.GamesBrowse
	 */
	textHint: function()
	{
		if (this.games_browse_find_state == 'initialized' && (this.uniqueElmt('games_browse_find').val() == "Enter Game Title..."))
		{
			this.uniqueElmt('games_browse_find').val('');
		}
		else
		{
			this.uniqueElmt('games_browse_find').attr('value', this.uniqueElmt('games_browse_find').val());
		}

		this.uniqueElmt('games_browse_find').css('color', 'black');
	},

	/**
	 * Sets search text to Enter Game Title
	 * @member Syn.GamesBrowse
	 */
	textHint1: function()
	{
		if (this.games_browse_find_state == 'initialized' && (this.uniqueElmt('games_browse_find').val() == ''))
		{
			this.uniqueElmt('games_browse_find').val('Enter Game Title...');
			this.uniqueElmt('games_browse_find').css('color', 'gray');
		}
		else
		{
			this.games_browse_find_state = 'modified';
		}
	},

	/**
	 * Launches the popup window with the flash game
	 * @member Syn.GamesBrowse
	 */
	launchGame: function (elmt,ev)
	{
		this.submit({'log_game_token':$(elmt).attr('rel')});
		if ($(elmt).attr('href') !== '#')
		{
			window.open($(elmt).attr('href'), 'syn_gameblast_games', 'height=740,width=746,resizable=yes,menubar=no,toolbar=no,scrollbars=no');
		}
	}

});