var html = "";
html += "<div id=\"Gallery_ContainerIndex\"></div>\n";
html += "<div id=\"Gallery_ContainerZoom\" style=\"display: none;\"></div>\n";
var Gallery_Container = html;


// Index
var html = "";
html += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n%main%\n</table>\n";
var Gallery_IndexContainer = html;

var html = "";
html += "<tr>\n";
var Gallery_IndexRowBegin = html;

var html = "";
html += "</tr>\n";
var Gallery_IndexRowEnd = html;

var html = "";
html += "<td style=\"padding: 5px; cursor: pointer;\">";
var Gallery_IndexColBegin = html;

var html = "";
html += "</td>\n";
var Gallery_IndexColEnd = html;

var html = "";
html += "<div style=\"background-color: transparent;\" onMouseOut=\"this.style.backgroundColor = 'transparent';\" onMouseOver=\"this.style.backgroundColor = '#a0a0a0';\" onClick=\"%onClick%\">";
html += "<img src=\"%img_url%\" style=\"margin: 5px; border: solid 1px black;\">";
html += "</div>";
var Gallery_IndexThumbnail = html;

// Zoom
var html = "";
html += "<div id=\"Gallery_ContainerFull%id%\" style=\"display: none;\">\n";
//html += "<p style=\"text-align: center;\"><a href=\"javascript:void(null);\" onClick=\"%onClick%\">&laquo; ЗАКРЫТЬ</a></p>\n";
html += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>\n";
html += "<td style=\"width: 50%;\"></td>";
html += "<td>";
html += "<img src=\"%img_url%\" style=\"cursor: pointer; border: solid 1px black; margin: 10px 0px 10px 0px;\" onClick=\"%onClick%\"><br>\n";
html += "<p style=\"text-align: center;\">%desc%</p>\n";
html += "</td>";
html += "<td style=\"width: 50%;\"></td>";
html += "</tr></table>\n";
html += "<p style=\"text-align: center; margin-top: 10px;\"><a href=\"javascript:void(null);\" onClick=\"%onClick%\">&laquo; ЗАКРЫТЬ</a></p>\n";
html += "</div>\n";
var Gallery_ContainerFull = html;


function Gallery( g )
{
	// Wygeneruj Index
	var Index = Gallery_MakeIndex( g );

	// Wygeneruj Zoom
	var Zoom = Gallery_MakeZoom( g );

	// Wstaw Container
	document.write( Gallery_Container );

	// Wstaw Index
	document.getElementById( "Gallery_ContainerIndex" ).innerHTML = Index;

	// Wstaw Zoom
	document.getElementById( "Gallery_ContainerZoom" ).innerHTML = Zoom;
}

function Gallery_MakeIndex( g )
{
	var res = "";
	var row = 0;
	var col = 0;
	var col_max = 2;
	for( img_no = 0; img_no < g.length; img_no++ )
	{
		// Img
		var img = g[ img_no ];

		// Row
		if( col == 0 ) res += Gallery_IndexRowBegin;

		// Column
		var column = Gallery_IndexColBegin+Gallery_IndexThumbnail+Gallery_IndexColEnd;
		column = column.replace( "%img_url%", g[ "path" ]+g[ "size_thumb" ]+"/"+img[ "file" ]+".jpg" );
		column = column.replace( "%onClick%", "GalleryShow( "+img_no+" );" );
		res += column;

		// Wypelnij pozostale col pustym kodem
		if( img_no == g.length - 1 && col < col_max )
		{
			for( col = col; col < col_max; col++ )
			{
				res += Gallery_IndexColBegin+Gallery_IndexColEnd;
				img_no++;
			}
		}

		// Zarzadzaj podzialem na wiersze w indeksie
		if( col >= col_max || img_no >= g.length - 1 ) { col = 0; row++; res += Gallery_IndexRowEnd; }
		else { col++; }
	}

	// Wstaw w Conteiner
	var container = Gallery_IndexContainer;
	res = container.replace( "%main%", res );

	return res;
}


function Gallery_MakeZoom( g )
{
	// Res
	var res = "";

	for( img_no = 0; img_no < g.length; img_no++ )
	{
		// Img
		var img = g[ img_no ];

		// Container
		var container = Gallery_ContainerFull;
		container = container.replace( "%id%", img_no );
		container = container.replace( "%img_url%", g[ "path" ]+g[ "size_full" ]+"/"+img[ "file" ]+".jpg" );
		container = container.replace( /%onClick%/g, "GalleryShow( -1 );" );
		container = container.replace( "%desc%", img[ "desc" ] );

		res += container;
	}

	return res;
}


var GalleryShow_Image = null;
var GalleryShow_Image_prev = null;
function GalleryShow( img_no )
{
	var ContainerIndex_obj = document.getElementById( "Gallery_ContainerIndex" );
	var ContainerZoom_obj = document.getElementById( "Gallery_ContainerZoom" );

	if( img_no >= 0 )
	{
		var ContainerFull_obj = document.getElementById( "Gallery_ContainerFull"+img_no );
		ContainerIndex_obj.style.display = "none";
		ContainerZoom_obj.style.display = "block";
		ContainerFull_obj.style.display = "block";
	}
	else
	{
		var ContainerFull_obj = document.getElementById( "Gallery_ContainerFull"+GalleryShow_Image_prev );
		ContainerIndex_obj.style.display = "block";
		ContainerZoom_obj.style.display = "none";
		ContainerFull_obj.style.display = "none";
	}
	GalleryShow_Image_prev = img_no;

}