/**
 * The Syn.GamesDcc Component Class
 */ 

/**
 * Create a Syn.GamesDcc component instance
 * @constructor
 */
Syn.GamesDcc = Syn.Component.extend(
{
	/**
	 * timer id for auto-scroll
	 */
	timer_id: 0,
	
	/**
	 * Initialize the component class. This is called automatically by the default constructor.
	 * @member Syn.GamesDcc
	 * @param {Object} config
	 */
	init: function(config)
	{
		this._super(config);

		this.uniqueElmt('carousel_container').jCarouselLite(
		{
			btnNext: '#' + this.uniqueKey('next'),
			btnPrev: '#' + this.uniqueKey('prev'),
			visible: (config.items != null) ? config.items : 6,
			start: 0,
			afterEnd: this.animationEnd
		});

		// Attach click function to thumbnails
		this.uniqueElmt('carousel_container').find('a').connect('click', this, 'showGame');
		this.uniqueElmt('carousel_container').find('li a img').connect('click', this, 'showProfile');
	
		// Force previous and next buttons to activate next slide
		this.uniqueElmt('next').connect('click', this, 'showNextGame');
		this.uniqueElmt('prev').connect('click', this, 'showPrevGame');

		// Auto-scroll
		this.resetAutoScroll();
	},

	/**
	 * Reset auto-scroll timer
	 */
	resetAutoScroll: function()
	{
		if (this.timer_id != 0)
		{
			window.clearInterval(this.timer_id);
		}
		
		// Auto-scroll
		var self = this;
		this.timer_id = window.setInterval(function() 
		{
			self.uniqueElmt('next').click();
		}, 7000);
	},

	/**
	 * Callback when carousel animation ends
	 * @param {Object} array of elements that are now visible
	 * @member Syn.GamesDcc
	 */
	animationEnd: function(elements)
	{
		$(elements[0]).find('a').click();
	},

	/**
	 * Shows game slide when thumbnail clicked
	 * @member Syn.GamesDcc
	 * @param {Object} target
	 * @param {Object} event
	 */
	showGame: function(target, event)
	{
		// Hide all slides then show the one requested
		var slide_id = $(target).attr('rel');
		$('#'+slide_id).parent().find('.games_dcc_right').css('display', 'none');
		$('#'+slide_id).css('display', 'block');

		// Set large image src attribute
		var image_source = $('#'+slide_id).find('a.dcc_image_src').attr('rel');
		$('#'+slide_id).parent().parent().find('.games_dcc_left img').attr('src', image_source);

		// Set appropriate link
		var game_profile_link = $('#'+slide_id).find('a.dcc_profile_href').attr('rel');
		this.uniqueElmt().find('.games_dcc_left a').attr('href', game_profile_link);

		// Apply proper classes to li tags
		$(target).parents('ul.games_dcc_car').find('li').removeClass('on');
		$(target).parent().addClass('on');
	},
	
	/**
	 * Shows game profile page when thumbnail clicked
	 * @member Syn.GamesDcc
	 * @param {Object} target
	 * @param {Object} event
	 */
	showProfile: function(target, event)
	{
		var slide_id = $(target).parents().attr('rel');		
		var game_profile_link = $('#'+slide_id).find('a.dcc_profile_href').attr('rel');
		window.location.href = game_profile_link;
	},

	/**
	 * Shows next game slide
	 * @member Syn.GamesDcc
	 * @param {Object} target
	 * @param {Object} event
	 */
	showNextGame: function(target, event)
	{
		this.uniqueElmt('carousel_container').find('ul li.on').next().find('a').click();

		this.resetAutoScroll();
	},

	/**
	 * Shows previous game slide
	 * @member Syn.GamesDcc
	 * @param {Object} target
	 * @param {Object} event
	 */
	showPrevGame: function(target, event)
	{
		this.uniqueElmt('carousel_container').find('ul li.on').prev().find('a').click();

		this.resetAutoScroll();
	}
	
});


/***************************************/
/* Platform DCC has different behavior */
/***************************************/

/**
 * Create a Syn.GamesPlatformDcc component instance
 * @constructor
 */
Syn.GamesPlatformDcc = Syn.Component.extend(
{
	/**
	 * Automatically move to next slide
	 */
	automate: false,
	
	/**
	 * Number of seconds between automatic moving
	 */
	automation_delay: 5,
	
	/**
	 * timer ID
	 */
	timer_id: 0,

	/**
	 * Current slide id
	 */
	current_slide_id: 0,

	/**
	 * Initialize the component class. This is called automatically by the default constructor.
	 * @member Syn.GamesPlatformDcc
	 * @param {Object} config
	 */
	init: function(config)
	{
		this._super(config);

		// Attach click function to thumbnails
		this.uniqueElmt().find('div.games_dcc_platform_nav a.games_dcc_slide_prev').connect(     'click', this, 'showPreviousSlide')
		this.uniqueElmt().find('div.games_dcc_platform_nav a.games_dcc_slide_pause').connect('click', this, 'toggleAutomation')
		this.uniqueElmt().find('div.games_dcc_platform_nav a.games_dcc_slide_next').connect(     'click', this, 'showNextSlide');

		// Set current slide id
		this.current_slide_id = this.uniqueElmt().find('div.games_dcc_gameslist div.games_dcc_right').get(0).id;

		// Start automation
		this.toggleAutomation();
	},


	/**
	 * Shows previous slide 
	 * @member Syn.GamesPlatformDcc
	 */
	showPreviousSlide: function()
	{
		var current_slide = $(document.getElementById(this.current_slide_id));
		var first_slide   = current_slide.parents('div.games_dcc_gameslist').find('div.games_dcc_right:first');
		var last_slide    = current_slide.parents('div.games_dcc_gameslist').find('div.games_dcc_right:last');

		// Hide current slide
		current_slide.hide();

		// Show previous slide
		if (current_slide.attr('id') == first_slide.attr('id'))
		{
			slide_to_show = last_slide;
		}
		else
		{
			slide_to_show = current_slide.prev();
		}
		this.current_slide_id = slide_to_show.attr('id');
		slide_to_show.show();
		this.uniqueElmt('slide_image').attr('src', slide_to_show.find('a.dcc_image_src').attr('rel'));
		this.uniqueElmt('slide_href').attr('href', slide_to_show.find('a.dcc_image_href').attr('rel'));
	},

	/**
	 * Shows next slide 
	 * @member Syn.GamesPlatformDcc
	 */
	showNextSlide: function()
	{
		var current_slide = $(document.getElementById(this.current_slide_id));
		var first_slide   = current_slide.parents('div.games_dcc_gameslist').find('div.games_dcc_right:first');
		var last_slide    = current_slide.parents('div.games_dcc_gameslist').find('div.games_dcc_right:last');

		// Hide current slide
		current_slide.hide();

		// Show previous slide
		if (current_slide.attr('id') == last_slide.attr('id'))
		{
			slide_to_show = first_slide;
		}
		else
		{
			slide_to_show = current_slide.next();
		}
		this.current_slide_id = slide_to_show.attr('id');
		slide_to_show.show();
		this.uniqueElmt('slide_image').attr('src', slide_to_show.find('a.dcc_image_src').attr('rel'));
		this.uniqueElmt('slide_href').attr('href', slide_to_show.find('a.dcc_image_href').attr('rel'));

		// Handle automation if enabled
		if (this.automate)
		{
			if (this.timer_id != 0)
			{
				window.clearTimeout(this.timer_id);
			}
			var self = this; // this is a trick to allow showNextSlide to be called within the context of 'this'
			this.timer_id = window.setTimeout(function(){ self.showNextSlide(); }, this.automation_delay * 1000);
		}
	},

	/**
	 * Toggle automationo
	 * @member Syn.GamesPlatformDcc 
	 */
	toggleAutomation: function()
	{
		if (this.automate)
		{
			this.automate = false;
			window.clearTimeout(this.timer_id);
			this.timer_id = 0;

			this.uniqueElmt().find('.games_dcc_platform_nav a.games_dcc_slide_pause')
				.removeClass('games_dcc_slide_pause')
				.addClass('games_dcc_slide_play');
		}
		else
		{
			this.automate = true;
			var self = this; // this is a trick to allow showNextSlide to be called within the context of 'this'
			this.timer_id = window.setTimeout(function(){ self.showNextSlide(); }, this.automation_delay * 1000);

			this.uniqueElmt().find('.games_dcc_platform_nav a.games_dcc_slide_play')
				.removeClass('games_dcc_slide_play')
				.addClass('games_dcc_slide_pause');
		}
	}
});