// Rimnetics Examples page PhotoLink & PhotoDiv popups
var PhotoLinkID = "";
$(document).ready(function(){											 
	// Start all PhotoLinks hidden
	$(".PhotoLink").css({opacity:0});
	// animate each PhotoLink's entry, and setup click event to open PhotoDivs
	$(".PhotoLink").each(function() {
		if ($(this).attr("rel") == "blank")
			$(this).css({cursor:"default",display:"block"}).animate({opacity: 0}, Math.ceil(Math.random()*500)).animate({opacity: 1}, 250);
		else
			$(this).css({display:"block"}).animate({opacity: 0}, 500+Math.ceil(Math.random()*1500)).animate({opacity: 1}, 500);
		$(this).click(function(event){
			event.stopPropagation();												 
			PhotoLinkID = $(this).attr("rel");
			hideAllPhotoDivs(function(){
				$("#"+PhotoLinkID).customFadeIn(500);
			});
		});
	});
	
	// setup body click handler to hide PhotoDiv
	$("body").click(function(){
		hideAllPhotoDivs();
	});
	// stop propogation of body click event
	$(".PhotoDiv,.nextBackLink").click(function(event){
		event.stopPropagation();
	});
	
	var PhotoControlDivHTML = "";
	PhotoControlDivHTML += '<div style="margin:0 auto;width:150px;padding:10px 0 0 0;text-align:center;">';
	PhotoControlDivHTML += '	<div class="floatLeft">';
	PhotoControlDivHTML += '		<a href="javascript:void(0);" onclick="photoDiv(false);" class="nextBackLink"><img src="images/arrowLt.gif" width="6" height="16" border="0" style="vertical-align:middle;" /><span style="vertical-align:middle;">&nbsp;PREV</span></a>';
	PhotoControlDivHTML += '	</div>';
	PhotoControlDivHTML += '	<div class="floatRight">';
	PhotoControlDivHTML += '		<a href="javascript:void(0);" onclick="photoDiv(true);" class="nextBackLink"><span style="vertical-align:middle;">NEXT&nbsp;</span><img src="images/arrowRt.gif" width="6" height="16" border="0" style="vertical-align:middle;" /></a>';
	PhotoControlDivHTML += '	</div>';
	PhotoControlDivHTML += '	<div class="clear"></div>';
	PhotoControlDivHTML += '</div>';

	$(".PhotoDiv").each(function(){
		$(this).html('<div class="abs" style="top:5px; right:10px;"><a href="javascript:void(0);" onclick="hideAllPhotoDivs();"><img src="images/close.gif" width="10" height="10" border="0" title="Close" class="closeControl" /></a></div>' + $(this).html());
		$(this).find("td.bottom,td.right").html( $(this).find("td.bottom,td.right").html() + PhotoControlDivHTML ); 
	});
	// hide PhotoDivs onclick on any image inside
	$(".PhotoDiv * img:not(.closeControl)").css({"cursor":"pointer"}).click(function(){															
		photoDiv(true);
	});

	// preload all rollovers, and add roll class to all images in table
	$(".structuralEnclosureTable * img").each(function(){
		$.preloadImages($(this).attr("src").replace(".gif","-over.gif"));
		if ($(this).attr("src").indexOf("blank.gif") == -1) {
			$(this).attr("class","roll");
		}
	});
	$(".roll").hover(function(){
		if ($(this).attr("src").indexOf("-over.gif") == -1)
			$(this).attr("src",$(this).attr("src").replace(".gif","-over.gif"));
	},
	function() {
		if ($(this).attr("src").indexOf("-over.gif") != -1)
			$(this).attr("src",$(this).attr("src").replace("-over.gif",".gif"));
	});

});

function hideAllPhotoDivs(callback) {
	var elems = $(".PhotoDiv:visible");
	var count = elems.length;
	if (count == 0) {
		if (callback != undefined)
			callback();
	}
	else {
		elems.each(function(){
			$(this).customFadeOut(100, function(i) { 
				if (!--count) {
					if (callback != undefined) callback();
				}
			});
		});
	}
}

function photoDiv(advance) {
	if (PhotoLinkID == "")
		PhotoLinkID = $(".PhotoDiv:first").attr("id");
	else if (advance) {
		newID = $("#"+PhotoLinkID).next("div.PhotoDiv").attr("id");
		if (newID == undefined)
			PhotoLinkID = $(".PhotoDiv:first").attr("id");
		else
			PhotoLinkID = newID;
	}
	else {
		newID = $("#"+PhotoLinkID).prev("div.PhotoDiv").attr("id");
		if (newID == undefined)
			PhotoLinkID = $(".PhotoDiv:last").attr("id");
		else
			PhotoLinkID = newID;		
	}
	hideAllPhotoDivs(function(){
		$("#"+PhotoLinkID).customFadeIn(500);
	});
}