var products = Array();

var p_tmpl = "";
// Product_Index
p_tmpl += '<p style="clear: both;"></p>';
p_tmpl += '<div id="Product%p_no%_Index">';
p_tmpl += '<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; margin: 10px;">';
p_tmpl += '<tr valign="top">';
p_tmpl += '<td style="padding-right: 10px;"><div style="background: transparent url(%img_dir%70x70/%p_img%.jpg) no-repeat center center; border: solid 1px #F3C6C6; text-align: center; vertical-align: center; cursor: pointer;" onClick="ProductsDetails( %p_no%, 1 );"><img src="i/n.gif" style="width: 76px; height: 76px;"></div></td>';
p_tmpl += '<td width="100%" style="vertical-align: top; padding-top: 8px;">';
p_tmpl += '<p class="ProductName"><a href="javascript:void(null);" onClick="ProductsDetails( %p_no%, 1 );" class="ProductName">%p_name%</a></p>';
p_tmpl += '<p class="ProductID">%p_symb%</p>';
p_tmpl += '<p class="ProductSize">%p_size%</p>';
//p_tmpl += '<p class="Text" style="clear: both;">%p_descr%</p>';
p_tmpl += '<p class="ProductMore"><a href="javascript:void(null);" onClick="ProductsDetails( %p_no%, 1 );" class="ProductMore">%p_more_open%</a> &raquo;</p>';
p_tmpl += '</td>';
p_tmpl += '</tr>';
p_tmpl += '</table>';
// Product_Details
p_tmpl += '</div>';
p_tmpl += '<div id="Product%p_no%_Details" style="display: none; width: 500px;">';
p_tmpl += '<table border="0" cellspacing="0" cellpadding="0">';
p_tmpl += '<tr valign="top">';
p_tmpl += '<td style="padding-right: 10px;"><div style="background: transparent url(%img_dir%150x150/%p_img%.jpg) no-repeat center center; border: solid 1px #F3C6C6; text-align: center; vertical-align: center; cursor: pointer;" onClick="ProductsDetails( %p_no%, 0 );"><img src="i/n.gif" style="width: 156px; height: 156px;"></div></td>';
p_tmpl += '<td style="vertical-align: top; padding-top: 8px;">';
p_tmpl += '<p class="ProductName"><a href="javascript:void(null);" onClick="ProductsDetails( %p_no%, 0 );" class="ProductName">%p_name%</a></p>';
p_tmpl += '<p class="ProductID">%p_symb%</p>';
p_tmpl += '<p class="ProductSize">%p_size%</p>';
p_tmpl += '<p class="ProductMore">&laquo; <a href="javascript:void(null);" onClick="ProductsDetails( %p_no%, 0 );" class="ProductMore">%p_more_close%</a></p>';
p_tmpl += '<div><p class="Text" style="clear: both;">%p_descr%</p></div>';
p_tmpl += '<div><p class="Text" style="clear: both;">%p_more%</p></div>';
p_tmpl += '</td>';
p_tmpl += '</tr>';
p_tmpl += '</table>';
p_tmpl += '</div>';
p_tmpl += '<div style="border-top: solid 1px #F3C6C6; margin: 0px 5px 0px 5px;"></div>';

function ProductsConstructor( p_arr )
{
	if( !p_arr ) p_arr = products;
	var res = "";
	for( p_no = 0; p_no < p_arr.length; p_no++ )
	{
		p = p_arr[p_no];
		//p_href_zoom = "javascript:ProductImageZoom(  );";
		res += p_tmpl;
		res = res.replace( /%p_no%/g, p_no );
		res = res.replace( /%p_img%/g, p["img"] );
		res = res.replace( /%p_name%/g, p["name"] );
		res = res.replace( /%p_id%/g, "" );

		// Symb (jako string)
		if( typeof(p["symb"]) == "string" ){
			if( p["symb"] ) { if( p["symb"].length > 0 ) res = res.replace( /%p_id%/g, p["symb"] ); } else res = res.replace( /%p_id%/g, "" );
			if( p["symb"] ) { if( p["symb"].length > 0 ) res = res.replace( /%p_symb%/g, p["symb"] ); } else res = res.replace( /%p_symb%/g, "" );
		}

		// Symb (jako tablica)
		else if( typeof(p["symb"]) == "object" ){
			var res_symb = "";
			for( symb_no = 0; symb_no < p["symb"].length; symb_no++ ){

				// symb - zawiera informacje dotyczace tego symbolu
				var symb = p["symb"][ symb_no ];

				// p_id - Zmien tylko w chwili przetwarzania pierwszego symbolu
				res = res.replace( /%p_id%/g, symb["symb"] );

				// Buduj symbol
				res_symb += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr valign=\"middle\">";
				if( symb["color"] ){
					res_symb += "<td>";
					res_symb += "<div style=\"width: 15px; height: 15px; background-color: "+symb["color"]+"; border: solid 1px black;\">&nbsp;</div>";
					res_symb += "</td>";
				}
				res_symb += "<td style=\"height: 20px;\">";
				res_symb += "<p class=\"ProductID\" style=\"margin: 0px; margin-left: 5px;\">";
				if( symb["symb"] ){ res_symb += symb["symb"]; }
				if( symb["name"] ){ res_symb += " ("+symb["name"]+")"; }
				res_symb += "</p>";
				res_symb += "</td>";
				res_symb += "</tr></table>";
			}
			//alert( res_symb );
			res = res.replace( /%p_symb%/g, res_symb );
		}


		// p_size
		if( p["symb"] ) { if( p["symb"].length > 0 ) { if( p["size"] ) { if( p["size"].length > 0 ) { p["size"] = ""+p["size"]; } } } }
		if( p["size"] ) { if( p["size"].length > 0 ) res = res.replace( /%p_size%/g, p["size"] ); } else res = res.replace( /%p_size%/g, "" );

		if( products["img_dir"] ) { res = res.replace( /%img_dir%/g, products["img_dir"] ); } else { res = res.replace( /%img_dir%/g, "i/products/" ); }
		res = res.replace( /%p_more_open%/g, products["text_more_open"] );
		res = res.replace( /%p_more_close%/g, products["text_more_close"] );
		if( p["more"] ) { if( p["more"].length > 0 ) res = res.replace( /%p_more%/g, p["more"] ); } else res = res.replace( /%p_more%/g, "" );
		res = res.replace( /%p_descr%/g, p["descr"] );
	}
	document.write( res );
}

var ProductsDetails_prev = "none";
function ProductsDetails( p_no, mode )
{
	if( ProductsDetails_prev != "none" )
	{
		document.getElementById( "Product"+ProductsDetails_prev+"_Index" ).style.display = "block";
		document.getElementById( "Product"+ProductsDetails_prev+"_Details" ).style.display = "none";
	}
	if( mode == 1 )
	{
		document.getElementById( "Product"+p_no+"_Index" ).style.display = "none";
		document.getElementById( "Product"+p_no+"_Details" ).style.display = "block";
	}
	else if( mode == 0 )
	{
		document.getElementById( "Product"+p_no+"_Index" ).style.display = "block";
		document.getElementById( "Product"+p_no+"_Details" ).style.display = "none";
	}
	ProductsDetails_prev = p_no;
}