// JavaScript Document

var n = 0;
var selSt = 0;
var selID = 0;
var imgs;
var imgc;

function onLoad() {
	$.get("?Action=ImageList&ID=" + querySt("ID"), loadedData);
}

function loadedData (data) {
	if (data.substr(0,1)=="-") {
		$("#main-area").text("Error - the portfolio does not exist!");
	}
	else {
		imgs = data.split("|");
		imgc = imgs.length;
		
		thumbView();
		
	}
	$("#ajax-loader").slideUp("slow");
	$("#ajax-loader").fadeOut("slow",function() {
		$("#main-area").slideDown("slow");
	});

}

function thumbView() {
		html = "<table cellspacing=\"7\" cellpadding=\"7\" style=\"margin: 0 auto;\"><tr>";
		col = 0;
		row = 1;
		
		for (i = 0; i < imgc; i++) {
			col++;
			if (col == 9) {
				col = 1;
				row++;
				html += "</tr><tr>";
			}
			imdat = imgs[i];
			imid = imdat.split(":")[0];
			imnm = imdat.split(":")[1];
			image = "<td onclick=\"showImage(" + i + ");\" class=\"image-frame\" style=\"width: 100px;\">";
			ins = imnm;
			if (ins.length > 12) ins = ins.substr(0,9) + "...";
			image += "<table cellpadding=\"0\" cellspacing=\"0\" style=\"width: 100px;\" onmouseover=\"document.getElementById('title-" + i + "').innerHTML='<marquee>" + imnm + "</marquee>';\" onmouseout=\"document.getElementById('title-" + i + "').innerHTML='" + ins + "';\"><tr><td id=\"title-" + i + "\" class=\"image-title\">" + ins;
			image += "</td></tr><tr><td>";
			image += "<div style=\"width: 100px; height: 100px; background-position: center; background-repeat: no-repeat; background-image: url('/images/db/?type=thumb&ID=" + imid + "');\">&nbsp;</div>";
			image += "</td></tr></table></td>";
			html += image;
		}
		
		for (i = col; i < 8; i++) {
			html += "<td style=\"width: 100px;\">&nbsp;</td>";
		}
		
		html += "</tr></table>";

		$("#main-area").html(html);
}

function showThumbView() {
	$("#main-area").fadeOut("fast", function() {
		thumbView();
		updateRibbon();
		$("#main-area").fadeIn("fast");
	});
}

function showImage(id) {
	selID = id;
	$("#main-area").fadeOut("fast", function() {
		html = "";

		imdat = imgs[selID];
		imid = imdat.split(":")[0];
		imnm = imdat.split(":")[1];

		html += "<h3 id=\"file-name\">" + imnm + "</h3><div style=\"height: 500px\"><img id=\"preview-image\" src=\"/images/db/?ID=" + imid + "\" /></div>";
											 
		html += "<div class=\"ribbon\"><table style=\"margin: 0 auto;\"><tr>";
		
		html += "<td><div id=\"prev-button\"><a onclick=\"prevPreview();\" href=\"#\">&lt;</a></div></td>";
		for (i = 0; i < 8; ++i) {
			html += "<td id=\"ribbon-" + i + "\" class=\"image-bar\" style=\"width: 100px;\">&nbsp;</td>";
		}
		
		html += "<td><div id=\"next-button\"><a onclick=\"nextPreview();\" href=\"#\">&gt;</a></div></td>";
		html += "</tr></table></div><br /><a href=\"#\" onclick=\"showThumbView();\">Back to Thumbnail View</a>";
		$("#main-area").html(html);
		updateRibbon();

		$("#main-area").fadeIn("fast");
	});
}

function changePreview(id) {
	selID = id;
	updatePreview();		
}

function nextPreview() {
	if (selID < imgc - 1) {
		selID++;
		updatePreview();		
	}
}

function prevPreview() {
	if (selID > 0) {
		selID--;
		updatePreview();		
	}
}

function updatePreview() {
	$("#preview-image").fadeOut("slow", function() {
		imdat = imgs[selID];
		imid = imdat.split(":")[0];
		imnm = imdat.split(":")[1];
		$("#file-name").text(imnm);
		$("#preview-image").attr("src","/images/db/?ID=" + imid);
		$("#preview-image").fadeIn("slow");
	});	

	updateRibbon();
}

function updateRibbon() {

	if (selID < selSt || selID > (selSt + 7))
		selSt = selID;
	
	for (i = 0; i < 8; ++i) {
		if (imgc - selSt < 8) {
			if (imgc > 7)
				x = (imgc - 8) + i;
			else				
				x = i;
		} else {
			x = selSt + i;
		}
		if (x > -1 && x < imgc) {
			imdat = imgs[x];
			imid = imdat.split(":")[0];
			imnm = imdat.split(":")[1];
			
			if (x == selID)
				$("#ribbon-" + i).attr("class","image-selected");
			else			
				$("#ribbon-" + i).attr("class","image-bar");
							
	
			$("#ribbon-" + i).html("<a href=\"#\" onclick=\"javascript: changePreview(" + x + ");\"><img src=\"/images/db/?type=thumb&ID=" + imid + "\" /></a>");
		} else {
			$("#ribbon-" + i).html("&nbsp;");
		}
	}
}

function querySt(ji) {
	hu = window.location.search.substring(1);
	gy = hu.split("&");
	for (i=0;i<gy.length;i++) {
		ft = gy[i].split("=");
		if (ft[0] == ji) {
			return ft[1];
		}
	}
}