var addImageOn = new Image();
addImageOn.src = "images/upload_photos1.gif";
var addImageOff = new Image();
addImageOff.src = "images/upload_photos0.gif";

// Simple UI Stuff:
function fanUploadHover(ev) {
	var evt = ev ? ev : event; 
	var el = evt.target ? evt.target : evt.srcElement;	
	if (evt.type == "mouseover") {
		el.setAttribute("src", addImageOn.src);
	} else {
		el.setAttribute("src", addImageOff.src);
	}	
}

function galleryThumbHover(ev) {
	var evt = ev ? ev : event; 
	var el = evt.target ? evt.target : evt.srcElement;	
	
	if (!el.src || el.src.indexOf("spacer.gif") > -1) {
		return;	
	}
	
	if (evt.type == "mouseover") {
		el.parentNode.className = "photo_container1";
	} else {
		el.parentNode.className = "photo_container0";
	}
}

function doUploadImageOnclick() {
	if (!window.upUserName) {
		showLoginForm('http://' + location.hostname + location.pathname + "?page=" + currentPageNumber + "&sectionId=" + sectionId);
	} else {
		var newWin = window.open("popups/upload_gallery_photo.php", "newWin", "width=500, height=580, scrollbars=no, location=no, status=no");	
		newWin.focus();
	}
} // End doUploadImageOnclick() function

function recenterElement(el) {
	//alert('recenter called');
	try {
		el.style.marginTop = -(el.offsetHeight/2) + "px";
		el.style.marginLeft = -(el.offsetWidth/2) + "px";
	} catch (e) {
		alert(e);	
	}	
} // End recenterElement()

// End Simple UI Stuff


// Classes:
function GalleryImage(id, name, caption, url, thumbUrl, hasExtraLargeImg) {
	this.id = id;
	this.name = name;
	this.caption = caption;
	this.url = url;
	this.thumbUrl = thumbUrl;
	this.hasExtraLargeImg = hasExtraLargeImg;
}
// End Classes
// State Vars:
var currentDetailImgId;
var currentDetailImage;

function doDetailImagePostLoad() {
	//alert(currentDetailImageIndex);
	var imgObj = currentDetailImage; //retObj.images[currentDetailImageIndex];
	// make sure the controls don't interfere with the positioning:
	document.getElementById("galleryDetailControls").width = "20px";
		
	var detWrap = document.getElementById("galleryDetailContent");
	detWrap.innerHTML = "";
	var detImg = document.createElement("img");
	detImg.id = "detailImg";
	detImg.setAttribute("src", imgObj.url);
	detImg.setAttribute("alt", imgObj.caption);
	detWrap.appendChild(detImg);
	
	var detLyr = document.getElementById("detailLayer");
	detLyr.style.display = "block";
	recenterElement(detLyr);
	// Caption:
	var cap = document.createElement("div");
	cap.className = "gallery_detail_caption";
	cap.innerHTML = imgObj.name;
	detWrap.appendChild(cap);	
	document.getElementById("detailLayer").className = "visibleDetail";
	showHideScrim("visible");
	
	// prev and next nav:
	document.getElementById("galleryDetailControls").width = detImg.width + "px";
	if (imgObj.id == sectionMinImageId) {
		document.getElementById("galleryDetailNext").style.visibility = "hidden";
	} else {
		document.getElementById("galleryDetailNext").style.visibility = "visible";
	}
	if (imgObj.id == sectionMaxImageId) {
		document.getElementById("galleryDetailPrevious").style.visibility = "hidden";
	} else {
		document.getElementById("galleryDetailPrevious").style.visibility = "visible";
	}		
}

function loadDetailForImage(imgObj) {
	currentDetailImage = imgObj;
	tmpImage = new Image(); //Global
	tmpImage.src = imgObj.url;
	if (tmpImage.complete == true) {
		doDetailImagePostLoad();
	} else {
		tmpImage.onload = doDetailImagePostLoad; //function() {
	}
} // End loadDetailForImage(imgObj) function

function detailShowPrevious() {
	var nIndx = currentDetailImageIndex - 1;
	if (typeof(retObj.images[nIndx]) != "object") {

		getNextOrPreviousImageFromDb(currentDetailImgId, sectionId, "previous");
	} else {
		var newImg = retObj.images[nIndx];
		currentDetailImageIndex--;
		currentDetailImgId = newImg.id;
		loadDetailForImage(newImg);
	}			
} // End detailShowPrevious() 

function detailShowNext() {
	var nIndx = currentDetailImageIndex + 1;
	
	if (typeof(retObj.images[nIndx]) != "object") {
		getNextOrPreviousImageFromDb(currentDetailImgId, sectionId, "next");
	} else {
		var newImg = retObj.images[nIndx];
		currentDetailImageIndex++;
		currentDetailImgId = newImg.id;
		loadDetailForImage(newImg);
	}
} // End detailShowNext()

function getNextOrPreviousImageFromDb(imageId, section, direction) {
	var tmp = section.split("_");
	var sys = tmp[0];
	var sectionId = tmp[1];
	
	if (direction != "previous") {
		direction = "next";
	}	
	var onSuccessFunc = function(req) { handleGetNextOrPreviousImageFromDb(req, direction); }
	var onErrorFunc = function(req) { alert('Error!\nStatusText='+req.statusText+'\nContents='+req.responseText); }
	var onTimeOutFunc = function(req) { alert('Timed Out!'); }
	var reqUrl = 'ajax_requests/gallery_next_or_previous.php';
	var req = AjaxRequest.post({'url':reqUrl, 'imageId':imageId, 'system':sys, 'sectionId':sectionId ,'direction':direction, 'onSuccess': onSuccessFunc, 'onError': onErrorFunc, 'onTimeout': onTimeOutFunc });
} // End getNextOrPreviousImageFromDb()

function handleGetNextOrPreviousImageFromDb(reqObj, dir) {
		var obj = eval("(" + reqObj.responseText + ")");	
		if (obj.type == "error") {
			return;	
		}
		currentDetailImgId = obj.id;

		if (dir == "next") {
			currentDetailImageIndex++;
		} else {
			currentDetailImageIndex--;
		}
		loadDetailForImage(obj);		
}

function doGallerySelect() {
	var el = document.getElementById("gallerySectionSelector");
	sectionId = el[el.selectedIndex].value;
	currentPageNumber = 1;
	/*
	var tmp = document.getElementById("galleryPaginationControlRow");
	try {
		tmp.innerHTML = "";
	} catch(e) { 
		while (tmp.getElementsByTagName("td").length > 0) {
			tmp.deleteCell(0);
		}
	}
	*/
	getGalleryThumbnails();
}

function showDetailImage(ev) {
	var evt = ev ? ev : event; 
	var el = evt.target ? evt.target : evt.srcElement;
	var tmp = el.id;
	tmp = tmp.split("_");
	
	try {
		currentDetailImageIndex = parseInt(tmp[1]);
		currentDetailImgId = retObj.images[tmp[1]].id;
		loadDetailForImage(retObj.images[tmp[1]]);
	} catch(e) {
		alert(e);	
	}
} // End showDetailImage(ev) function

function hideDetailImage() {
	document.getElementById("detailLayer").className = "hidden"; //Detail";
	document.getElementById("galleryDetailPrevious").style.visibility = "hidden";
	document.getElementById("galleryDetailNext").style.visibility = "hidden";
	document.getElementById("detailLayer").style.display = "none";
	showHideScrim("hidden");
}

function getGalleryThumbnails() {
	var onSuccessFunc = function(req) { handleGetGalleryThumbnailsResponse(req); }
	var onErrorFunc = function(req) { alert('Error!\nStatusText='+req.statusText+'\nContents='+req.responseText); }
	var onTimeOutFunc = function(req) { alert('Timed Out!'); }
	var reqUrl = 'ajax_requests/gallery.php';
	var req = AjaxRequest.post({'url':reqUrl, 'artistId':artistId, 'sectionId':sectionId, 'imgsPerPage':imgsPerPage, 'pageNumber':currentPageNumber, 'onSuccess': onSuccessFunc, 'onError': onErrorFunc, 'onTimeout': onTimeOutFunc });
}

function loadGalleryPage(pageNumber) {
	if (pageNumber == currentPageNumber) {
		return;	
	} 
	currentPageNumber = pageNumber;
	getGalleryThumbnails();
	var pager = document.getElementById("galleryPaginationControl");
	var cells = pager.getElementsByTagName("td");
	for (var i=0; i<cells.length; i++) {
		if (i == (pageNumber - 1)) {
			cells[i].className = "page_num1";
		} else {
			cells[i].className = "page_num0";
		}
	}
} // End loadGalleryPage(pageNumber) function

function handleGetGalleryThumbnailsResponse(reqObj) {
	retObj = eval("(" + reqObj.responseText + ")");	
	sectionMinImageId = retObj.sectionMinImageId;
	sectionMaxImageId = retObj.sectionMaxImageId;
		
	var len = retObj.images.length;
	var preImg = new Image();
	for (var i=0; i<len; i++) {
		preImg.src = retObj.images[i].thumbUrl;	
	}
	// Only show the upload link if appropriate:
	if (retObj.type == "fanuploads") {
		document.getElementById("uploadImage").style.visibility = "visible";	
	} else {
		document.getElementById("uploadImage").style.visibility = "hidden";	
	}
	// Update the paging control:
	var paging = document.getElementById("galleryPaginationControlTable");
	try {
		paging.innerHTML = "";
	} catch(e) {
		while (paging.rows.length > 0) {
			paging.deleteRow(0);
		}
	}
	//var newRow = document.createElement("tr");
	var newRow = paging.insertRow(-1);
	for (var i=1; i<=retObj.totalPageCount; i++) {
		if (i == currentPageNumber) {
			var classMark = "1";
		} else {
			var classMark = "0";
		}
		try {
			var newTd = newRow.insertCell(-1);
			newTd.id = "pagination_" + i;
			newTd.className = "page_num" + classMark;
			newTd.innerHTML = '<a class="gallery_pagination_item" onclick="loadGalleryPage(' + i + '); return false;" href="#">' + i + '</a>';
		} catch(e) {		
			newRow.innerHTML = newRow.innerHTML + '<td id="pagination_' + i + '" class="page_num' + classMark + '"><a class="gallery_pagination_item" onclick="loadGalleryPage(' + i + '); return false;" href="#">' + i + '</a></td>';
		}
		if (i % 28 == 0) {
			//paging.insertRow(-1);
			//paging.appendChild(newRow);
			//var newRow = document.createElement("tr");	
			var newRow = paging.insertRow(-1);
		}
	} // for
	//paging.appendChild(newRow);
	
	/*
	var paging = document.getElementById("galleryPaginationControlRow");
	if (paging.getElementsByTagName("td").length == 0) {
		for (var i=1; i<=retObj.totalPageCount; i++) {
			if (i == currentPageNumber) {
				var classMark = "1";
			} else {
				var classMark = "0";
			}
			try {
				var newTd = paging.insertCell(-1);
				newTd.id = "pagination_" + i;
				newTd.className = "page_num" + classMark;
				newTd.innerHTML = '<a class="gallery_pagination_item" onclick="loadGalleryPage(' + i + '); return false;" href="#">' + i + '</a>';
			} catch(e) {		
				paging.innerHTML = paging.innerHTML + '<td id="pagination_' + i + '" class="page_num' + classMark + '"><a class="gallery_pagination_item" onclick="loadGalleryPage(' + i + '); return false;" href="#">' + i + '</a></td>';
			}
		}
	}
	*/
	
	// Update the actual thumb imgs:
	var wrap = document.getElementById("gallery_wrap");
	wrap.innerHTML = "";
	var len = retObj.images.length;
	
	for (i=0; i<len; i++) {
		var tmp = document.createElement("div");
		tmp.className = "photo_wrap";
		tmp.innerHTML = '&nbsp;<img src="' + retObj.images[i].thumbUrl + '" alt="' + retObj.images[i].name + '" title="' + retObj.images[i].name + 
				'" id="img_' + i + '"class="thumb" onmouseover="handleThumbHover(this, event);" onmouseout="handleThumbHover(this, event);" onclick="showDetailImage(event);" />&nbsp;';
		wrap.appendChild(tmp);
	}
} // End handleGetGalleryThumbnailsResponse(reqObj) function