var Gallery = function () {

	var container = null;

	var thumbSize = [100, 75];
	
	var elements = new Array();
	var Photos = new Array();
	var TPhotos = new Array();
	var PhotosDir = "";
	
	var Draw = function () {
	
		var photosCount = Photos.length;
		var area = [800, 450];
		var tWidth = 20;
		var tHeight = 20;
		var positions = new Array();
		
		for (var i = 0; i < photosCount; i++) {
		
			while (true) {
			
				var top = Math.round(Math.random() * area[0]);
				var left = Math.round(Math.random() * area[1]);
				
				// check
				var exists = false;
				for (var h = 0; h < positions.length; h++) {
				
					if (InRange(top, [positions[h][0] - (tHeight / 2), positions[h][0] + (tHeight / 2)])) {
					
						exists = true;
						break;
					}
					
					if (InRange(left, [positions[h][1] - (tWidth / 2), positions[h][1] + (tWidth / 2)])) {
					
						exists = true;
						break;
					}
				}
				
				if (exists)
					continue;
				
				if (left > area[1] - 120) 
					left -= 100;
				
				Photo(Photos[i], TPhotos[i], top, left);
				positions.push([top, left]);
				break;
			}
		}
	};
	
	var Photo = function (photo, thumb, top, left) {

		var c = "<table cellpadding='0' cellspacing='0'>";
		
			c += "<tr>";
				
				c += "<td id='t1_1'></td>";
				c += "<td id='t1_2'></td>";
				c += "<td id='t1_3'></td>";
				
			c += "</tr>";
			
			c += "<tr>";
				
				c += "<td id='t2_1'></td>";
				c += "<td>";
				
					c += "<a id='" + "a_" + top + "_" + left + "' href='" + photo + "' rel='lightbox[photos]' title='" + thumb[3] + " " + thumb[4] + "'>";
					c += "<img id='" + "i_" + top + "_" + left + "' src='" + thumb[0] + "' style='border:0px;width:" + thumb[1] + "px;height:" + thumb[2] + "px;' />";
					c += "</a>";
				
				c += "</td>";
				c += "<td id='t2_3'></td>";
				
			c += "</tr>";
			
			c += "<tr>";
				
				c += "<td id='t3_1'></td>";
				c += "<td id='t3_2'>";
				c += "<div style='font-family:Arial;font-size:8pt;font-weight:bold;'>" + thumb[3] + "</div>";
				c += "</td>";
				c += "<td id='t3_3'></td>";
				
			c += "</tr>";
		
		c += "</table>";
		
		var element = document.createElement('div');
		element.id = "p_" + top + "_" + left;
		element.style.position = "absolute";
		element.style.left = left + "px";
		element.style.top = top + "px";
		element.style.cursor = "move";
		element.style.zIndex = 50;
		element.innerHTML=c;
		container.appendChild(element);
		
		var img = document.getElementById("i_" + top + "_" + left);
		var pht = document.getElementById("a_" + top + "_" + left);
		
		img.style.cursor = "pointer";
		
		new Draggable(element);
		container.appendChild(element);
		
		elements.push([img, element]);
		
		var lock = false;
		
		element.onmouseup = function (e) {
		
			window.setTimeout(function () {
				//UpdateZIndex(element);
			}, 50);
		}
		
		pht.onmouseover = function (e) {
		
			if (lock)
				return;
			
			Show(element, img);
		}
		
		pht.onmouseout = function (e) {
		
			if (lock)
				return;
			
			Hide(element, img);
		}
	};
	
	var UpdateZIndex = function (element) {
	
		var z = ConvertToInt(element.style.zIndex);
		element.style.zIndex = '' + (z + 1);
		
		var count = elements.length;
		for (var p = 0; p < count; p++) {
		
			if (elements[p][1] == undefined)
				continue;
			
			if (elements[p][1].id == element.id)
				continue;
			
			z = ConvertToInt(elements[p][1].style.zIndex);
			
			if (z > 1)
				elements[p][1].style.zIndex = '' + (z - 1);
		}
	};
	
	var Show = function (element, img) {
	
		element.style.zIndex = '800';
		var step = 2;
		var wMax = (ConvertToInt(img.style.width) + 20);
		var hMax = (ConvertToInt(img.style.height) + 15);
		
		var hx = window.setInterval(function () {
		
			lock = true;
			var w = ConvertToInt(img.style.width);
			var h = ConvertToInt(img.style.height);
			var x = ConvertToInt(element.style.left);
			var y = ConvertToInt(element.style.top);
			
			if (w >= wMax || h >= hMax) {
			
				lock = false;
				window.clearInterval(hx);
			}
			else {
			
				h += step;
				x -= step / 2;
				
				w += step;
				y -= step / 2;
			}
			
			element.style.left = x;
			element.style.top = y;
			img.style.width = w + "px";
			img.style.height = h + "px";
			
		}, 3);
	};
	
	var Hide = function (element, img) {
	
		element.style.zIndex = '1';
		var step = 2;
		var wMin = thumbSize[0];
		var hMin = thumbSize[1];
		var hw = window.setInterval(function () {
		
			lock = true;
			var w = ConvertToInt(img.style.width);
			var h = ConvertToInt(img.style.height);
			var x = ConvertToInt(element.style.left);
			var y = ConvertToInt(element.style.top);
			
			if (w <= wMin || h <= hMin) {
			
				lock = false;
				window.clearInterval(hw);
			}
			else {
			
				h -= step;
				x += step / 2;
				
				w -= step;
				y += step / 2;
			}
			
			element.style.left = x;
			element.style.top = y;
			img.style.width = w + "px";
			img.style.height = h + "px";
		}, 3);
	};
	
	var ConvertToInt = function (value) {
	
		value = "" + value;
		
		if (value.search('px') == -1)
			return parseInt(value);
		
		return parseInt(value.substr(0, value.indexOf('px')));
	};
	
	var InRange = function (value, range) {
	
		return value > range[0] && value < range[1];
	};
	
	return {
		
		Init : function (containerName, photos, thumbs) {
			
			TPhotos = thumbs;
			Photos = photos;
			container = document.getElementById(containerName);
			Draw();
		}
	};
}();