// Declare Widgets namespace.
var Widgets = {};

/**
 * Control login slide panel at top of the page.
 */
Widgets.LoginPanel = {
	init: function(){
		$('.login-form').hide();
		
		$(document).bind('click', function(e) {
			if($(e.target).closest('#login_form').length == 0) {
				//do nothing if click on an opened login form.
				//click login button. toggling slide a login form down.
				if($(e.target).closest('#bt_login_header').length != 0) {
				    // best to watermark here to prevent dead watermarks due to JS belonging to the page itself (see RHS ready event)
                    $('.userpassword-input').each(function(i){
                        $(this).watermark($(this).attr('title'));
                    });
					$('.login-form').slideToggle('fast');
				}else{
					$('.login-form').hide();
				}
			}
		});
	}
};

/**
 * Manage slideshow in homepage.
 */
Widgets.FeaturedContents = {
	_learnMoreSelector: 'a.learn-more-button',
	_datasource: null,
	_activeIndex: 0,
	_interval: 6000,
	_timeoutHandler: null,
	_jsonReady: function(data){	    
		Widgets.FeaturedContents._datasource = data;
		
		// Build index
		var allItemHTML = '';
		var template = '<li{0} onclick="Widgets.FeaturedContents.change({1})">{2}</li>';
		$.each(data, function(i, item){			
			var additionalAttr = '';
			if(i === 0){
				// First item.
				additionalAttr = ' class="first"';
			}
			else if(i===(data.length-1)){
				// Last item
				additionalAttr = ' class="last"';
			}
			
			allItemHTML += Widgets.Util.format(template, [additionalAttr, i, i+1]);
		});
		
		// Append node to list.
		$('.feature-contents-nav .dynamic-index').append('<ul>' + allItemHTML + '</ul>');

		// Show first item.
		Widgets.FeaturedContents.change(0);
		
		// Show navigation.
		$('.feature-contents-nav').show();
	},
	
	init: function(url){		
		$.ajax({
		    url: url,
		    dataType: 'text',
		    success: function(data, status, request) {
			    Widgets.FeaturedContents._jsonReady(eval(data));
		    }
		});
		
		$('#wrapper').before('<div class="home-body-mask"></div>');
			$('.home-body-mask').hide();
	},
	
	_masking: function(isShow, fn){
		$('.home-body-mask').height($('#doc').height());
		
		if(isShow){
			$('.home-body-mask').fadeIn('fast', fn);
			$('.home-body-mask').show();
//			fn();
		}else{
			$('.home-body-mask').hide();
//			fn();
			$('.home-body-mask').fadeOut('slow', fn);
		}
	},
	
	change: function(index){
		// Clear previous timer if exists.
		clearTimeout(this._timeoutHandler);
		
		// Update status.
		this._activeIndex = index;
		var item = this._datasource[index];
		var self = this;

		// Change desktop background.
		this._masking(true, function(){
			// Change title
			$('.feature-contents-title h1').text(item.Title);
			$('.feature-contents-title h2').text(item.SubTitle);
			
			// Update hyperlink
			$(Widgets.FeaturedContents._learnMoreSelector).attr('href', item.details_link);
			
			// Update navigation status.
			var activeClass = 'selected';
			$('.dynamic-index li.' + activeClass).removeClass(activeClass);
			$('.dynamic-index li:eq(' + index + ')').addClass(activeClass);
			
			// Preload image before change background.
			var preloadImg = new Image();
			$(preloadImg).load(function(){
				// Update item loaded status.
				item.loaded = true;
				
				// Preload next item.
				var nextItemIndex = index + 1;
				if(nextItemIndex < self._datasource.length){
					var nextItem = self._datasource[nextItemIndex];
					if(!nextItem.loaded){
						(new Image()).src=nextItem.BackgroundImage;
					}
				}
				
				// Update loaded background image.
				$(document.body).css('background-image', 'url(' + item.BackgroundImage + ')');

				// Unmask then set timer in next item.
				self._masking(false, function(){
					self._timeoutHandler = setTimeout(function(){Widgets.FeaturedContents.move(1)}, self._interval);
				});
			});

			// Loading current image.
			preloadImg.src = item.BackgroundImage;
		});
	},
	
	move: function(direction){
		var maxLength = Widgets.FeaturedContents._datasource.length;
		var newIndex = Widgets.FeaturedContents._activeIndex + direction;
		if(newIndex < 0){
			newIndex = maxLength -1;
		}
		else if (newIndex >= maxLength){
			newIndex = 0;
		}
		Widgets.FeaturedContents.change(newIndex);
	}
};

/**
 * Contains widget utility methods.
 */
Widgets.Util = {
	format: function(formatStr, args) {
		var pattern = /\{\d+\}/g;
		return formatStr.replace(pattern, function(capture){ return args[capture.match(/\d+/)]; });
	}	
};


/**
 * Render activity feed for following structure.
 *
	<div class="player-activity">
		<div class="player-status">Winner!</div>
		<div class="player-name">Ranger</div><!--Hidden-->
		<div class="player-game-name">DotA</div>
		<img class="player-country" src="skin/vg/images/flags/IT.png" alt="country"/>
		<img class="player-trophy" src="skin/vg/images/icon/trophy.png" alt="trophy"/>                                 	
	</div>
	 <div class="player-activity last">
		<div class="player-status">Challenge</div>
		<div class="player-name">Yuri</div><!--Hidden-->
		<div class="player-game-name">Red Alert 3</div>
		<img class="player-country" src="skin/vg/images/flags/US.png" alt="country"/>                                	
	</div>                    
 */
Widgets.ActivityFeed = {
	_datasource: null,
	_timerHandler: null,
	_timeout: 15000, //miliseconds
	_pageNumber: 1, // current page.
	_pageSize: 5,
	_containerClass: '',
	_summaryClass: '',

	_jsonReady: function(data){
		this._datasource = data;
		this._renderWidget();
	},
	
	_renderWidget: function(){
		// Find offset records.
		var offset = this._findIndex();

		// Render activity
		for(var i=offset.start; i<=offset.stop; i++){
			var act = this._datasource.Activity[i];
			this._renderActivity(act);
		}
		
		// Add specific class.
		$(this._containerClass + ' .player-activity:first').addClass('first');
		$(this._containerClass + ' .player-activity:last').addClass('last');
		
		// Render summary if available this._summaryClass
		if(this._summaryClass != ''){
			$(this._summaryClass).text(this._datasource.Online+" Online");
			$(this._summaryClass).css('margin-right', '25px');
		}
		
		// Settimeout.
		this._timerHandler = setTimeout(function(){Widgets.ActivityFeed.next()}, this._timeout);
	},
	
	_renderActivity: function(activity){
		if(!activity){
			return;
		}
		
		var template = '<div class="player-activity"><div class="player-status">{0}</div><div class="player-game-name">{1}</div><img class="player-country" src="http://static.virgingaming.com/common/skin/vg/images/flags/32/{2}.png" alt="country"/></div>';
		if(activity.type === 5){
			template = '<div class="player-activity winner"><div class="player-status">{0}</div><div class="player-game-name">{1}</div><img class="player-country" src="http://static.virgingaming.com/common/skin/vg/images/flags/32/{2}.png" alt="country"/><img class="player-trophy" src="http://static.virgingaming.com/static/skin/vg/images/icon/trophy.png" alt="trophy"/></div>';
		}
		
		var newNode = Widgets.Util.format(template, 
						[	activity.title,
							activity.subtitle,
							activity.country
						]);
		$(this._containerClass).append(newNode);
	},
	
	_findIndex: function(){
		var offset = {start: 0, stop: 0};
		offset.start = (this._pageNumber -1) * this._pageSize;
		offset.stop = ((offset.start + this._pageSize)-1);
		
		// Fill full page index if available.
		var itemCount = this._datasource.Activity.length;
		if(offset.stop >= itemCount){
			// Overflow in last page so try to fill in page range.
			offset.stop = itemCount - 1;
			offset.start = Math.max(0, itemCount - this._pageSize);
		}
		
		return offset;
	},
	
	next: function(){
		var maxPageNumber = Math.round(this._datasource.Activity.length / this._pageSize);
		var newPageNumber = this._pageNumber+1;
		if(newPageNumber > maxPageNumber){
			this._pageNumber = 1; // Reset to first page.
		}
		else {
			this._pageNumber = newPageNumber;
		}

		var self = this;
		var isRendered = false;
		$('.player-activity').fadeOut('fast', function(){
			if(!isRendered){
				isRendered = true;
				$(self._containerClass).empty();
				self._renderWidget();				
			}
		});
	},
	
	init: function(url, containerClass, length, summaryClass){
		this._pageSize = length;
		this._containerClass = containerClass;
		this._summaryClass = summaryClass || '';
		$.ajax({
		    url: url,
		    dataType: 'text',
		    success: function(data, status, request) {
			     Widgets.ActivityFeed._jsonReady(eval('(' + data + ')'));
		    }
		});
	}
};

/*Append supported game on the right column*/
Widgets.SupportedGameRightPanel = {
	_containerClass: '',
	_base_url: '#',
	_jsonReady: function(data){
		this._datasource = data;
		if(data.Games != null && data.Games.length != null){
			for(var i = 0; i <= data.Games.length; i++){
				var game = data.Games[i];
				if(game != null){
					this._renderBanner(game);
				}
			}
		}
			$(this._containerClass).append('<a href="'+this._base_url+'games.html" class="red-link">&gt; See All Games</a>');
	},
	_renderBanner: function(game){
		var template = '<div class="supported-game-div position-relative"><div class="header-bar"><strong>{0}</strong></div><a title="See More" href="{3}{2}" class="inner-button">See More</a><img class="right-game-banner" alt="{0}" src="{1}" /></div>';
		var newNode = Widgets.Util.format(template, 
						[	game.title,
							game.img_path,
							game.target_link,
							this._base_url
						]);
		$(this._containerClass).append(newNode);
	},
	
	init: function(url, containerClass){
		this._base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
		this._containerClass = containerClass;
		$.ajax({
		    url: url,
		    dataType: 'text',
		    success: function(data, status, request) {
			    Widgets.SupportedGameRightPanel._jsonReady(eval('(' + data + ')'));
		    }
		});
	}
};

/*slide show in @about_virgin_gaming_page*/
Widgets.SlideShow = {
	init:function(){
		base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
		$(".lightbox-2").lightbox({
			fitToScreen: true,
			fileLoadingImage : 'http://static.virgingaming.com/static/skin/vg/images/lightbox/loading.gif',
			fileBottomNavCloseImage : 'http://static.virgingaming.com/static/skin/vg/images/lightbox/closelabel.gif'
		});
	}
};

/*for "Expand entire story" link in @about_virgin_gaming_page*/
Widgets.SeeMore = {
	init:function(){
		$('<a class="red-link clickable expandable-link">&gt; Expand entire story</a>').insertBefore('.expandable-content');
		$('.expandable-link').click(function(){
			$(this).nextAll('.expandable-content').show();
			$(this).hide();
		});
	}
}

/** For games landing page **/
Widgets.Games = {
		_dataSource: null,
		_length_f: 6,
		_length_sg: 6,
		_containerClass: '',
		_bgContainerID: '',
		_jsonReady: function(data){
			this._dataSource = data;
			/** Set featured Game in header. **/
			if(data.GamesHeader.flag == '1')
			{
				$(".games-header-contents h2").text(data.GamesHeader.name);
				$(".games-header-contents h3").text(data.GamesHeader.subtitle);
				$(".games-get-in-game-button").append('<a href="/go/displayPlayerRegistration.do?f=GAM_0A_001" class="action-button" title="GET IN THE GAME"><span class="action-button-sub-title">Get In The</span><span class="action-button-title">Game</span></a>');
			}
			var startIndex = 0, endIndex = data.FeaturedGames.length - 1;
			/** Set featured Games list, this will show just only 6 and sepeates into 2 columns for 3:3(Start) **/
			for(var i = startIndex; i<=endIndex; i++){
				var check = 0;
				if(i%2 == 0)
				{
					this._containerClass = '#games-featured-games-content .yui-left';
				}
				else
				{
					
					this._containerClass = '#games-featured-games-content .yui-right';
				}
				
				for(var j = 0; j<=data.AllGames.length - 1;j++)
				{
					// IE is throwing errors due to a trailing , in the JSON.  Since it is
					// a generated file, it is likely to happen again so let's just handle it
					if (data.FeaturedGames[i] == null || data.FeaturedGames[i] == undefined) {
						break;
					}
					if(data.FeaturedGames[i].id == data.AllGames[j].id && check == 0)
					{
						check = 1;
						var game_f = data.AllGames[j];
						this._featureGame(game_f, i+1);
					}
				}
			}
			
			/** Set featured Games list(End) **/
			/** Set All Supported Games list(Start) **/
			if(this._length_sg < 0)
			{
				endIndex = data.AllGames.length - 1;
			}
			else
			{
				endIndex = this._length_sg;
			}
			for(var i=startIndex; i<=endIndex; i++){
				if(i%2 == 0)
				{
					this._containerClass = '#games-supported-games-content .yui-left';
				}
				else
				{
					this._containerClass = '#games-supported-games-content .yui-right';	
				}
				var game_sg = data.AllGames[i];
				this._supportedGames(game_sg, i+1, data.AllGames.length);
			}
			/** Set All Supported Games list(End) **/	
		},
		
		/** Featured Games list setting(Start) **/
		
		_featureGame: function(game, i){
			var template = '<div id="fg-list-container{0}" class="fg-list-container"><div class="fg-list-content-name bold-700">{1}</div><div class="fg-list-content-detail">{2}</div><div class="fg-console-image">{3}</div><div id="seemore-btn{4}" class="fg-button-bottom-right clickable"><a href=\'{5}\' class="inner-button">SEE MORE</a></div></div>';
			
			var newNode = Widgets.Util.format(template,
						[	i,
						 	game.name,
						 	game.description,
					    	this._platformsIMG(game),
						 	i,
							game.details_link
						]);
			$(this._containerClass).append(newNode);
			this._bgContainerID = "#fg-list-container"+i;
			$(this._bgContainerID).css({
				'background-image': 'url("'+game.backgroundImage_feature+'")'					
			});
		},
		/** Featured Games list setting(End) **/
		/** Show platforms logo(Start) **/
		_platformsIMG: function(game){
			var startIndex = 0;
			var endIndex = game.platforms.length - 1;
			var imgsrc = '';
			for(var i = startIndex;i <= endIndex;i++)
			{
				var consoleimg = game.platforms[i];
				var x = 'http://static.virgingaming.com';	// build
				imgsrc = imgsrc + '<img src="' + x.split('?')[0] + '/static/skin/vg/images/icon/'+consoleimg+'_logo.png" alt="'+game.platforms[i]+'">'
			}
			return imgsrc;
		},
		/** Show platforms logo(End) **/
		/** All Supported Games list setting(Start) **/
		_supportedGames: function(game, i, endIndex){
			var template = '<div id="all-support-games-list-container{0}" class="all-support-games-list-container"><span class="all-support-games-button-center-left clickable"><a href=\'{1}\' class=\'inner-button\'>>></a></span><span class="all-support-games-content-name bold-700">{2}</span></div>';
			var newNode = Widgets.Util.format(template,
					[	i,
						game.details_link,
						game.name
					]);
			$(this._containerClass).append(newNode);
			this._bgContainerID = "#all-support-games-list-container"+i;
			$(this._bgContainerID).css({
				'background-image': 'url("'+game.backgroundImage+'")'					
			});
		},
		
		/** All Supported Games list setting(End) **/
		
		init: function(url, containerClass, length_f, length_sg){
			this._length_f = length_f;
			this._length_sg = length_sg;
			this._containerClass = containerClass;
			$.ajax({
			    url: url,
			    dataType: 'text',
			    success: function(data, status, request) {
				    Widgets.Games._jsonReady(eval('(' + data + ')'));
			    }
			});
		}
	};


/** For game details page **/

Widgets.GameDetails = {
	_dataSource: null,
	_containerClass: '',
	_game: '',
	_jsonReady: function(data){
		this._dataSource = data;
		var startIndex = 0, endIndex = -1;
		if (data[this._game] != undefined) {
			endIndex = data[this._game].length - 1;
		}
		if(data[this._game].length == 1 && data[this._game][0].bg != undefined){
			$(".game-details-player-activity-feed-panel").hide();
		}
		var hasPlayerActivity = false;
		for(var i = startIndex; i <= endIndex; i++)
		{
			if(data[this._game][i].bg != undefined)
			{
				$(document.body).css({
					'background-image': 'url("'+data[this._game][i].bg+'")'
				});
			}
			else
			{
				this._playerActivityList(data[this._game][i]);
				hasPlayerActivity = true;
			}
		}
		if (!hasPlayerActivity) {
			// no detailed activity -- hide container and heading
			$(this._containerClass).parent().parent().hide();
		}
	},
	_playerActivityList: function(data){
		
		var template = '<tr><td class="game-details-player-activity-status">{0}</td><td class="font-white" style="font-size: 1.45em; padding: 0em 0.2em;">-</td><td class="game-details-player-activity-value">{1}</td></tr>';
		var newNode = Widgets.Util.format(template,
					[	data.title,
					 	data.value
					]);
		$(this._containerClass).append(newNode);
	},
	init: function(url, containerClass, game){
		this._containerClass = containerClass;
		this._game = game;
		$.ajax({
		    url: url,
		    dataType: 'text',
		    success: function(data, status, request) {
			    Widgets.GameDetails._jsonReady(eval('(' + data + ')'));
		    }
		});
	}
};

/**
 * Manage supported games links categorized by game console.
 */
Widgets.FooterDetails = {
	_dataSource: null,
	_containerClass: '',
	_countLine : 0,
	_trNode : '',
	_alt: 0,
	_jsonReady: function(data){
		this._dataSource = data;
		this._FindGameCategory('sport');
		this._alt = 0;
		this._FindGameCategory('action');
	},
	_countGameCategory: function(category){
		var countGame = 0;
		for(var i = 0;i<= this._dataSource.AllGames.length-1;i++)
		{
			if(this._dataSource.AllGames[i].category == category)
			{
				countGame = countGame + 1;
			}
		}
		return countGame;
	},
	_FindGameCategory: function(category){
		for(var i = 0;i<= this._dataSource.AllGames.length-1;i++)
		{
			var numIndex = this._countGameCategory(category);
			var presentIndex = i;
			if(this._dataSource.AllGames[i].category == category)
			{
				this._countLine = this._countLine + 1;
				this._renderFooter(this._dataSource.AllGames[i], category, presentIndex, numIndex);
			}
		}
	},
	_renderFooter: function(data, category, presentIndex, numIndex){
		var template = '<td><a href="{0}">{1}</a></td><td>{2}</td>';
		var newNode = '';
		if(category == 'sport')
		{
			this._containerClass = '.tbody-sports-content';
		}
		else if(category == 'action')
		{
			this._containerClass = '.tbody-actions-content';
		}
		
		if(this._countLine == 1)
		{
			this._trNode = '';
			newNode = Widgets.Util.format(template,
					[	
					 	data.details_link,
						data.name,
						this._platformsIMG(data)
					]);
			
			if(this._alt == 0)
			{
				newNode = '<tr>' + newNode;
			}
			else
			{
				newNode = '<tr class="alt">' + newNode;
			}
			this._trNode = this._trNode + newNode;
			if(numIndex == presentIndex){
				this._trNode = this._trNode + '<td></td><td></td></tr>';
				$(this._containerClass).append(this._trNode)
			}
		}
		else if(this._countLine == 2)
		{
			this._countLine = 0;
			newNode = Widgets.Util.format(template,
					[	
					 	data.details_link,
						data.name,
						this._platformsIMG(data)
					]);
			
			if(this._alt == 0)
			{
				this._alt = 1;	
			}
			else
			{
				this._alt = 0;
			}
			newNode = newNode + '</tr>';
			this._trNode = this._trNode + newNode;
			$(this._containerClass).append(this._trNode);
		}
	},
	_platformsIMG: function(game){
		var startIndex = 0;
		var endIndex = game.platforms.length - 1;
		var platformsAvailable = 0;
		var imgsrc = '';
		var allPlatforms = ['xbox360','ps3'];
		for(var i = 0;i <= allPlatforms.length-1;i++)
		{
			platformsAvailable = 0;
			for(var j = startIndex;j <= endIndex;j++)
			{	
				if(allPlatforms[i] == game.platforms[j])
				{
					platformsAvailable = 1;
					j = endIndex + 1;
				}
			}
			if(platformsAvailable == 1)
			{
				if(i == 0)
				{
					imgsrc = imgsrc + '<img src="http://static.virgingaming.com/common/skin/vg/images/footer/green_square.png" alt="Xbox 360" />'
				}
				else if(i == 1)
				{
					imgsrc = imgsrc + '<img src="http://static.virgingaming.com/common/skin/vg/images/footer/navy_square.png" alt="Playstation 3" />'
				}	
			}
			else
			{
				imgsrc = imgsrc + '<img src="http://static.virgingaming.com/common/skin/vg/images/footer/trans_square.png" alt="Trans square" />'		
			}
		}
		return imgsrc;
	},
	init: function(url){
		$('.tbody-sports-content').empty();
		$('.tbody-actions-content').empty();
		$.ajax({
		    url: url,
		    dataType: 'text',
		    success: function(data, status, request) {
			    Widgets.FooterDetails._jsonReady(eval('(' + data + ')'));
		    }
		});
	}
};