//-----------------------------------------------------------------------------
// FIRST Element Template 
//-----------------------------------------------------------------------------

var tpl_First = '<table width="250" border="0" cellspacing="0" cellpadding="0" style="margin:3px 10px 10px 10px;">';
 		tpl_First +='<tr>';
   			tpl_First +='<td width="45" height="5" valign="bottom"><img src="/img/bg_top_1_up.gif" alt=""></td>';
    		tpl_First +='<td rowspan="3" width="5"><img src=/img/blank.gif width=5 alt=""></td>';
    		tpl_First +='<td rowspan="3" style="background-color:#666666;" valign="top">';
				tpl_First += '<div id="Upright-black"><img src="/img/blank.gif" height="5" width="5" alt=""></div>';
				tpl_First += '<div style="padding:5px; height: 35px;">';
					tpl_First += '<a href="{GAME_LINK}" title="{GAME_NAME} {PLATFORM_ABBREVIATION}"><h2>{GAME_NAME}</h2></a>';
					tpl_First += '{SELLER_NAME}';
					tpl_First += '<br>';
					tpl_First += '<span style="color: {PLATFORM_TEXT_COLOR}">{PLATFORM_ABBREVIATION}</span>';
				tpl_First += '</div>';
				tpl_First += '<div id="Downright-grey"><img src="/img/blank.gif" height="5" width="5" alt=""></div>';
			tpl_First += '</td>';
 		tpl_First +='</tr>';
  		tpl_First +='<tr>';
    		tpl_First +='<td width="45" height="40" style="background-color:#FFD900;"><img src="/img/bg_top_1_mid.gif" border="0" alt=""></td>';
  		tpl_First +='</tr>';
  		tpl_First +='<tr>'
    		tpl_First +='<td width="45"><img src="/img/bg_top_1_down.gif" border="0" alt=""></td>';
		tpl_First +='</tr>';
	tpl_First +='</table>';
	tpl_First += '<div style="float:right; margin:0px 10px 10px 10px;">';
		tpl_First += '<a href="{GAME_LINK}" title="{GAME_IMAGE_ALT}"><img src="{GAME_IMAGE_SRC}" alt="{GAME_IMAGE_ALT}" width="{GAME_IMAGE_WIDTH}" height="{GAME_IMAGE_HEIGHT}" border="0" align="left" class="Scr"></a>';
	tpl_First += '</div>';
	tpl_First += '<div style="margin-left:10px">';
		tpl_First += '<div id="highlightDesc"></div>';
		tpl_First += '<div id="TopHighlited_Price" class="Hidden">';
		tpl_First += '</div>';
	tpl_First += '</div>';

//-----------------------------------------------------------------------------
// OTHERS ROWS Template
//-----------------------------------------------------------------------------

var	tpl_Others_Pre 	= '<table class="Results" cellspacing="0" cellpadding="2" border="0">';
	tpl_Others_Pre += '<tr class="par">';
		tpl_Others_Pre += '<td colspan="4">';
			tpl_Others_Pre += '<div id="Upleft-black"><img src="/img/blank.gif" height="5" width="5" alt=""></div>';
			tpl_Others_Pre += '<div id="Upright-black"><img src="/img/blank.gif" height="5" width="5" alt=""></div>';
			tpl_Others_Pre += '<div><img src="/img/blank.gif" height="4" width="4" alt=""></div>';
		tpl_Others_Pre += '</td>';
	tpl_Others_Pre += '</tr>';

	var tpl_Others  = '<tr class="{CLASS_NAME}" style="height: 20px">';
			tpl_Others += '<td width="5%" align="center" align="center"><div class="Posicion"><b>{I}</b></div></td>';
			tpl_Others += '<td width="50%" align="left"><b><a href="{GAME_LINK}" title="{GAME_NAME} {PLATFORM_ABBREVIATION}">{GAME_NAME}</a></b></td>';
			tpl_Others += '<td width="15%" align="left"><span style="color: {PLATFORM_TEXT_COLOR}">{PLATFORM_ABBREVIATION}</span></td>';
			tpl_Others += '<td width="30%" align="left">{KIND_NAME}</td>';
		tpl_Others += '</tr>';

var	tpl_Others_Post  = '<tr class="par">';
		tpl_Others_Post += '<td colspan="4">';
			tpl_Others_Post += '<div id="Downleft-dark"><img src="/img/blank.gif" height="5" width="5" alt=""></div>';
			tpl_Others_Post += '<div id="Downright-dark"><img src="/img/blank.gif" height="5" width="5" alt=""></div>';
			tpl_Others_Post += '<div><img src="/img/blank.gif" height="4" width="4" alt=""></div>';
		tpl_Others_Post += '</td>';
	tpl_Others_Post += '</tr>';
	tpl_Others_Post += '</table>';

//-----------------------------------------------------------------------------
// DO NOT EDIT AFTER THIS SECTION
//-----------------------------------------------------------------------------

var fContainer = null;
var oContainer = null;

//-----------------------------------------------------------------------------

/**
 * Show waiting image while loading top
 *
 * @access	public
 * @param	boolean		show		True/False if must be showed
 */
function showWaitingImage( show )
{
	if( show )
		$("div#Loading").removeClass( 'Hidden' ).addClass( 'Visible' );
	else
		$("div#Loading").removeClass( 'Visible' ).addClass( 'Hidden' );
}

//-----------------------------------------------------------------------------

/**
 * Show containers
 *
 * @access	public
 * @param	boolean		show		True/False if must be showed
 */
function showContainers( show, fContainer, oContainer )
{
	if( show )
	{
		$("div#"+ fContainer).removeClass( 'Hidden' ).addClass( 'Visible' );
		$("div#"+ oContainer).removeClass( 'Hidden' ).addClass( 'Visible' );
	}
	else
	{
		$("div#"+ fContainer).removeClass( 'Visible' ).addClass( 'Hidden' );
		$("div#"+ oContainer).removeClass( 'Visible' ).addClass( 'Hidden' );
	}
}

//-----------------------------------------------------------------------------

/**
 * Load the Description of Highlight product
 *
 * @access	public
 * @param	integer		idGame				Game Id
 * @param	string		descContainer		ID for container DIV for Description
 */
function showHighlightDesc( idGame, descContainer )
{
	$.post("/game_stats.phtml", {
		action: "getField",
		object: 'InDepth',
		field: 'head',
		length: 100,
		id_game: idGame
	}, function( xml ) {
		var content = $("response/field", xml).text();

		$("div#"+ descContainer ).html( content );
	});
}

//-----------------------------------------------------------------------------

/**
 * Render a single TOP at bottom of HOME page
 *
 * @access	public
 * @param	string		topName					Name = [topViews|topEsales|topVotes]
 * @param	integer		platformID				Platform ID
 * @return	integer								ID of Highlight Game
 */
function renderTops( topName, platformID )
{
     $.post("/game_stats.phtml", {
		action: "load",
		name: topName,
		id_platform: platformID
	 }, function( xml ) {
		if( $("stats message",xml).text() == 'empty' )
		{
			$("div#"+ fContainer ).html( '' );
			$("div#"+ oContainer ).html( 'No hay registros coincidentes para mostrar.' );
		}
		else
		{
			var content = tpl_Others_Pre;

			$("response stats", xml).each(function() {
				var i						= $("i",this).text();
				var id_game					= $("id_game",this).text();
				var URL						= $("URL",this).text();
				var game_name				= $("game_name",this).text();
				var game_price				= $("game_price",this).text();
				var game_imageSrc			= $("game_imageSrc",this).text();
				var game_imageAlt			= $("game_imageAlt",this).text();
				var game_imageWidth			= $("game_imageWidth",this).text();
				var game_imageHeight		= $("game_imageHeight",this).text();
				var seller_name				= $("seller_name",this).text();
				var platform_id				= $("platform_id",this).text();
				var platform_abbreviation	= $("platform_abbreviation",this).text();
				var platform_text_color		= $("platform_text_color",this).text();
				var kind_name				= $("kind_name",this).text();

				if( i == 1 )
				{
					var buffer = new String( tpl_First );
						buffer = buffer.replace( /{ID_GAME}/gi, id_game );
						buffer = buffer.replace( /{GAME_IMAGE_SRC}/gi, game_imageSrc );
						buffer = buffer.replace( /{GAME_IMAGE_ALT}/gi, game_imageAlt );
						buffer = buffer.replace( /{GAME_IMAGE_WIDTH}/gi, game_imageWidth );
						buffer = buffer.replace( /{GAME_IMAGE_HEIGHT}/gi, game_imageHeight );
						buffer = buffer.replace( /{GAME_LINK}/gi, URL );
						buffer = buffer.replace( /{GAME_NAME}/gi, game_name );
						buffer = buffer.replace( /{GAME_PRICE}/gi, game_price );
						buffer = buffer.replace( /{SELLER_NAME}/gi, seller_name );
						buffer = buffer.replace( /{PLATFORM_TEXT_COLOR}/gi, platform_text_color );
						buffer = buffer.replace( /{PLATFORM_ABBREVIATION}/gi, platform_abbreviation );

					showHighlightDesc( id_game, 'highlightDesc' );

					$("div#"+ fContainer ).html( buffer );

					// Onlye show the price, if current game is on sale

					if( game_price > 0 )
						$("div#TopHighlited_Price").removeClass( 'Hidden' ).addClass( 'Visible' );
					else
						$("div#TopHighlited_Price").removeClass( 'Visible' ).addClass( 'Hidden' );
				}
				else
				{
					var class_name = ( ( i % 2 ) == 0 ) ? 'par' : 'impar';

					var buffer = new String( tpl_Others );
						buffer = buffer.replace( /{I}/gi, i );
						buffer = buffer.replace( /{ID_GAME}/gi, id_game );
						buffer = buffer.replace( /{CLASS_NAME}/gi, class_name );
						buffer = buffer.replace( /{GAME_NAME}/gi, game_name );
						buffer = buffer.replace( /{GAME_LINK}/gi, URL );
						buffer = buffer.replace( /{KIND_NAME}/gi, kind_name );
						buffer = buffer.replace( /{PLATFORM_TEXT_COLOR}/gi, platform_text_color );
						buffer = buffer.replace( /{PLATFORM_ABBREVIATION}/gi, platform_abbreviation );

					content += buffer;
				}
			});

			content += tpl_Others_Post;

			$("div#"+ oContainer ).html( content );
		}
     });
}

//-----------------------------------------------------------------------------

/**
 * Load a single TOP at bottom of HOME page
 *
 * @access	public
 * @param	string		topName					Name = [topViews|topEsales|topVotes|topSJ|topUser]
 * @param	string		firstContainerID		ID for container DIV for FIRST row
 * @param	string		othersContainerID		ID for container DIV for OTHERS rows
 */
function loadTop( topName, firstContainerID, othersContainerID, platformID )
{
	fContainer = firstContainerID;
	oContainer = othersContainerID;

	showWaitingImage( true );
	showContainers( false, firstContainerID, othersContainerID );

	renderTops( topName, platformID );

	setTimeout( 'showWaitingImage(false)', 2200 );
	showContainers( true, firstContainerID, othersContainerID );
}

//-----------------------------------------------------------------------------