/**
 * The Syn.GamesImgGallery Component Class 
 */

/**
 * Create a Syn.GamesImgGallery component instance 
 * @constructor
 */
Syn.GamesImgGallery = Syn.Component.extend(
{
	/**
	 * Initialize the component class. This is called automatically by the default constructor.
	 * @member Syn.GamesImgGallery
	 * @param {Object} config The configuration data structure 
	 */
	init: function(config)
	{
		this._super(config);
		this.full_img_list = config['full_img_list'];
		this.current_index = config['start_image'];

		if (this.full_img_list.length > 6 )
		{
			this.uniqueElmt('carousel').jCarouselLite({
				btnNext: '#'+this.uniqueKey('carousel_next'),
				btnPrev: '#'+this.uniqueKey('carousel_prev'),
				start: this.current_index,
				visible: 6,
				speed: 100,
				scroll: 1,
				afterEnd: this.animationEnd()
			});
		}

		this.uniqueElmt('carousel').find('li a').connect('click',this,'updateSlideImage');
		this.uniqueElmt('full_image').connect('load', this, 'imageLoaded' );
		this.uniqueElmt('full_size_link').connect('click', this, 'showFullSizeImage' );
	},

	/**
	 * Triggered when animation ends after clicking next/prev button
	 * This is where the first thumbnail visible will be clicked
	 */
	animationEnd: function()
	{
		var self = this;
		return function(a)
		{
			$(a[0]).find('a').click();
		}
	},

	/**
	 * Shows next image in carousel (and changes the main image)
	 * @member Syn.GamesImgGallery
	 * @param {Object} target
	 * @param {Object} event
	 */
	showNextImage: function(target, event)
	{
		this.uniqueElmt('carousel').find('li.on').next().find('a').click();
	},
	
	/**
	 * Shows previous image in carousel (and changes the main image)
	 * @member Syn.GamesImgGallery
	 * @param {Object} target
	 * @param {Object} event
	 */
	showPrevImage: function(target, event)
	{
		this.uniqueElmt('carousel').find('li.on').prev().find('a').click();
	},

	/**
	 * Changes main img element when thumbnail is clicked
	 * @member Syn.GamesImgGallery
	 * @param {Object} tgt
	 * @param {Object} evnt
	 */
	updateSlideImage: function(tgt,evnt)
	{
		var index = parseInt($(tgt).attr('rel'));
		this.current_index = index;
		this.showLoading();
		this.uniqueElmt('cur_img').html(1+index);
		this.uniqueElmt('carousel').find('li').removeClass('on');
		$(tgt).parent().addClass('on');
		this.uniqueElmt('full_image').attr('src', this.full_img_list[index] );
		this.uniqueElmt('paste_url').attr('value', this.uniqueElmt('paste_url').attr('value').replace(/games_img_gallery_start_image=\d+$/,'games_img_gallery_start_image='+index) );
	},
	
	/**
	 * Hides loading animation for main image element
	 * @member Syn.GamesImgGallery
	 */
	imageLoaded: function()
	{
		this.uniqueElmt('loading').hide(); 
	},

	/**
	 * Shows full size image when "Show full size" clicked 
	 * @member Syn.GamesImgGallery
	 */
	showFullSizeImage: function()
	{
		var m = this.full_img_list[this.current_index].match(/\/(http:\/\/.+)$/);
		window.open(m[1],'games_channel_full_image');
	},

	/**
	 * Set the cookie for the component state 
	 * @member Syn.NewsGallery
	 * @param {String} provider The news provider id
	 * @param {Number} index The story index
	 */
	showLoading: function()
	{
		var i = this.uniqueElmt('image_area');
		this.uniqueElmt('loading').width(i.width()).height(i.height()).show(); 
	}

});