// JQuery and Javascript effects

function dropMenu() { // Bouncy sub navigation.
	$('nav ul li ul').hide();
	
	//puts a hidden button that can be used to close the sub navigation panels.
	$('nav ul.subnav').prepend("<span></span>");
	$('nav ul.subnav span').click(function() {
		$(this).parent().slideUp(800, 'easeOutBounce');
		$(this).fadeTo(0, 0);
	})
	.hover(function() {
		$(this).fadeTo(750, 1);
	},
	(function() {
		$(this).fadeTo(500, 0);
	})
	);
	
	//opens sub navigation panels when user hovers over menu items
	$('nav ul li a').hover(function() { //open subnav
		$(this).next().delay(600).slideDown(1200, 'easeOutElastic');
	}, function() {
		$(this).next().clearQueue();
	});	
}

function galDesc() {// Hover over images in gallery puts description on bottom
	var origDesc = $('.description').text();
	$('#gallery img').hover(
		function() {
			var desc = $(this).attr("alt");
			$('.description').text(desc);
		},
		function() {
			$('.description').text(origDesc);
		});
}

function keepOpen() {
	var bodyclass = $('body').attr("class");
	var bodyID = $('body').attr("id");
	var album = [
	"portfolio_page",
	"album0_page",
	"album1_page",
	"album2_page",
	"album3_page",
	"album4_page",
	"album5_page",
	"album6_page",
	"album7_page",
	"album8_page",
	"album9_page"];
	for(i=-1;i<album.length;i++) {
	if (bodyID == album[i]) { //open portfolio navigation on Portfolio pages
		$('nav ul li#nPortfolio ul').show();
	}}
	if (bodyclass == "info") { //open about navigation on About and Resume page
		$('nav ul li#nAbout ul').show();
	}
}

function galPopup() {
	var markup = '<div id="cloudBox"> \
					<div id="cb_content"> \
						<div class="cb_loaderCloud"><img src="/images/loading.gif" width="160" height="120" /></div> \
						<div id="cb_full_content"></div> \
					</div> \
					<div id="cb_controls"> \
						<a class="cb_prev" href="#">&laquo;</a> \
						<a class="cb_close" href="#">close</a> \
						<a class="cb_next" href="#">&raquo;</a> \
					</div> \
				</div> \
				<div id="cb_overlay"></div>';
	var image_markup = '<img id="fullImage" src="" />';
//	var iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>',
	var cb_containerWidth;
	var cb_containerHeight;
	var windowHeight = $(window).height();
	var cb_opacity = 0.80;
	//var cbPop;
	cb_close = function() {
		$('#cloudBox').fadeOut('fast', function() {
			$('#cb_overlay').fadeOut('fast', function() {
				$('#cb_overlay').remove();
				$('#cloudBox').remove();
			});
		});
	};
	function cb_center() {
	//	shrinkToFit();
		cb_containerWidth = $('#cloudBox').outerWidth();
		cb_containerHeight = $('#cloudBox').outerHeight();
		var cb_left = $(window).width() / 2 - cb_containerWidth / 2;
		var cb_top = $(window).height() / 2 - cb_containerHeight / 2;
		if (cb_top < 0) {cb_top=0;}
		if (cb_left < 0) {cb_left=0;}
		cb_scroll();
		$('#cloudBox').css({
		'top':cb_top + "px",
		'left':cb_left + "px"});
	};
	// Scroll not needed if fitting function works properlys
	function cb_scroll() {
		cb_containerHeight = $('#cloudBox').outerHeight();
		var scrollPosY = $(window).scrollTop();
		
		if ((scrollPosY > 0) && (cb_containerHeight > windowHeight)) {
		// WIP: For tall overlay, allow scrolling to bottom but no more.
		//	alert('too small: ' + cb_containerHeight);
			overY = -(scrollPosY + cb_containerHeight - windowHeight);
		} else if (scrollPosY > (windowHeight-cb_containerHeight)) {
			overY = -(cb_containerHeight-windowHeight);
		} else {
			overY = 0;
		}
		if (overY<0) {
			$('#cloudBox').css({
			'top':overY + "px"});
		}
	};
	function _addNext() {
		$('#cb_full_content a.cb_prev').bind('click', cb_browse);
		$('#cb_full_content a.cb_next').bind('click', cb_browse);
	};
	function _getUrlType(urlSrc) {
		if (urlSrc.match(/\b.htm\b/i) || urlSrc.match(/\b.html\b/i) || urlSrc.match(/\b.php\b/i)) {
			return 'html';
		}else{
			return 'image';
		}
	};
	function cb_browse(c) {
		c.preventDefault();
		$('#cloudBox #cb_content .cb_loaderCloud').css("display","block");
		newUrl = $(this).attr('href');
	//	loadContent();
		if (_getUrlType(newUrl)=="html") {//load html page
			$('#cb_full_content').fadeOut('fast', function() {
				$('#cb_full_content').fadeIn('fast').load(newUrl,'',completeLoad); //TEST: load next url.
			}).html("");
			cb_center();
		}else if(_getUrlType(newUrl)=="image") { //load image
			$('#cb_full_content').fadeOut('fast', function() {
				$('#cb_full_content').fadeIn('fast').html(image_markup);
				$('#cb_full_content img#fullImage').attr('src',newUrl);
				completeLoad();
			}).html("");
		}
	};
	function loadContent() {
	//	var cbPop = $(this).attr('href');
		alert('Loading '+cbPop);
	//	$('#cloudBox #cb_content .cb_loaderCloud').css("display","block");
	/*	if(_getUrlType(cbPop)=="html") {
			$('#cb_full_content').load(cbPop,'');
			completeLoad();
		} else if(_getUrlType(cbPop)=="image") {
			$('#cb_full_content').html(image_markup);
			$('#cb_full_content img#fullImage').attr('src',cbPop);
			completeLoad();
		}else{
			alert('failure');
		} */
	};
	function completeLoad() {
		$('#cloudBox #cb_content .cb_loaderCloud').css("display","none");
		shrinkToFit();
		cb_center();
		_addNext();
	};
	/*
		Function to shrink box if size is too big to fit in window/browser.
		Still a WIP, needs to be checked for different sizes
		• Some distortion in width on tall images with description is viewed in small browser window
		• Setting resize to use this function only works to REDUCE the size, NOT make it bigger.
		\-> May need to write an function for enlarging the image overlay during resizing
	*/
	function shrinkToFit() {
		$('#cloudBox').width('');//reset box width
		var windowH = $(window).height();
		var windowW = $(window).width();
		var vScrollBar = $(window).scrollTop();
		var boxH = $('#cloudBox').outerHeight();
		var boxW = $('#cloudBox').outerWidth();
		var imgBox = $('#cloudBox #cb_content #cb_full_content #cb_image');
		var boxRatio = boxW/boxH;
		var imgW = $('#cloudBox #cb_content #cb_full_content img').width();
		var imgH = $('#cloudBox #cb_content #cb_full_content img').height();
		var imgRatio = imgW/imgH;
		if ((imgW >= windowW) || (boxW >= windowW)) {
			//set box width
			if (windowW <= imgW) {
				diffW = imgW-windowW;
			}
			if (vScrollBar == 0) {
				addTo = 30;
			} else {
				addTo = 30+16;
			}
			if (windowW <= imgW) {
				useWidth = windowW;//-60
			} else {
				useWidth = imgW-diffW;
			}
			$('#cloudBox').width(useWidth); //-addTo
				boxW = $('#cloudBox').width();
	//		$('#cloudBox').height(boxW/boxRatio);
	//			boxH = $('#cloudBox').height();
			$('#cloudBox #cb_content #cb_full_content img').width(boxW);
				imgW = $('#cloudBox #cb_content #cb_full_content img').width();
			$('#cloudBox #cb_content #cb_full_content img').height(imgW/imgRatio); //-diffH
				imgH = $('#cloudBox #cb_content #cb_full_content img').height();
			
			imgBox.css({'width':imgW+'px'});
	//		$('#cloudBox').height('');
		}
		//get new width and height for feature box and image before checking HEIGHT
/*		boxH = $('#cloudBox').height();
		boxW = $('#cloudBox').width();
		imgW = $('#cloudBox #cb_content #cb_full_content img').width();
		imgH = $('#cloudBox #cb_content #cb_full_content img').height();
		alert('Window Height: '+windowH+'\nBox Height: '+boxH);*/
		if ((imgH >= windowH) || (boxH >= windowH)) {//check for height
			var diffH = boxH-imgH;
		/*	if (hScrollBar > 0) {
				addTo = 60+16;
			} else {
				addTo = 60;
			}*/
			$('#cloudBox').height(windowH-76);
				boxH = $('#cloudBox').height();
			$('#cloudBox').width(boxH*boxRatio);
				boxW = $('#cloudBox').width();
			$('#cloudBox #cb_content #cb_full_content img').height(boxH-diffH);
				imgH = $('#cloudBox #cb_content #cb_full_content img').height();
			$('#cloudBox #cb_content #cb_full_content img').width(imgH*imgRatio);
				imgW = $('#cloudBox #cb_content #cb_full_content img').width();
			$('#cloudBox').width(imgW);
			imgBox.css({'width':imgW+'px'});
			$('#cloudBox').height('');
		}		
	}
	function growToFit() { //testing enlargement function...
	/*
		Issue:
		• Enlarging grows box to fill window
		• Image gets distorted and stretched
	*/
		//Variables may be redundant and unnecessary 
		var windowH = $(window).height();
		var windowW = $(window).width();
		var vScrollBar = $(window).scrollTop();
		var boxH = $('#cloudBox').height();
		var boxW = $('#cloudBox').width();
		var imgBox = $('#cloudBox #cb_content #cb_full_content #cb_image');
		var boxRatio = boxW/boxH;
		var imgW = $('#cloudBox #cb_content #cb_full_content img').width();
		var imgH = $('#cloudBox #cb_content #cb_full_content img').height();
			//max image W&H to keep image from growing bigger than original size..
		var imgMaxW = $('#cloudBox #cb_content #cb_full_content img').attr(width);
		var imgMaxH = $('#cloudBox #cb_content #cb_full_content img').attr(height);
		
		var imgRatio = imgW/imgH;
		if ((imgH <= windowH) || (boxH <= windowH)) {//revised for height
			var diffH = boxH-imgH;
			$('#cloudBox').height(windowH-76);
				boxH = $('#cloudBox').height();
			$('#cloudBox').width(boxH*boxRatio);
				boxW = $('#cloudBox').width();
			$('#cloudBox #cb_content #cb_full_content img').height(boxH-diffH);
				imgH = $('#cloudBox #cb_content #cb_full_content img').height();
			$('#cloudBox #cb_content #cb_full_content img').width(imgH*imgRatio);
				imgW = $('#cloudBox #cb_content #cb_full_content img').width();
			$('#cloudBox').width(imgW);
			imgBox.css({'width':imgW+'px'});
			$('#cloudBox').height('');
		}
		if ((imgW <= windowW) && (boxW <= windowW)) {
			//set box width
			if (windowW >= imgW) {
				diffW = imgW-windowW;
			}
			if (vScrollBar == 0) {
				addTo = 30;
			} else {
				addTo = 30+16;
			}
			if (windowW >= imgW) {
				useWidth = windowW-60;
			} else {
				useWidth = imgW-diffW;
			}
			$('#cloudBox').width(useWidth); //-addTo
				boxW = $('#cloudBox').width();
			$('#cloudBox').height(boxW/boxRatio);
				boxH = $('#cloudBox').height();
			$('#cloudBox #cb_content #cb_full_content img').width(boxW);
				imgW = $('#cloudBox #cb_content #cb_full_content img').width();
			$('#cloudBox #cb_content #cb_full_content img').height(imgW/imgRatio); //-diffH
				imgH = $('#cloudBox #cb_content #cb_full_content img').height();
			imgBox.css({'width':imgW+'px'});
			$('#cloudBox').height('');
		}
	}
	//adds function to links
	$('a[rel*=cloudBox]').click(function(c) {
		c.preventDefault();
		var cbPop = $(this).attr('href');
		//open cloudBox and overlay
		$('body').append(markup);
		
		//initially hide new markup
		$('#cloudBox').hide();
		$('#cb_overlay').hide();
		
		//show new overlay, then cloudBox, then load content
		$('#cb_overlay').fadeIn('fast', function() {
			cb_center();
			//$('#cloudBox').slideDown(800, 'easeOutElastic')
			$('#cloudBox').fadeIn('slow', function() {
				$('#cloudBox #cb_content .cb_loaderCloud').css("display","block");
				if(_getUrlType(cbPop)=="html") {
					$('#cb_full_content').load(cbPop,'',completeLoad);
				} else if(_getUrlType(cbPop)=="image") {
					$('#cb_full_content').html(image_markup);
					$('#cb_full_content img#fullImage').attr('src',cbPop);
					completeLoad();
				}
			});
		});
	//	loadContent();
		$('#cloudBox #cb_controls .cb_close').bind('click', cb_close);
		$('#cb_overlay').bind('click', cb_close);
	});
	$(window).resize(cb_center);
	$(window).resize(shrinkToFit);
//	$(window).resize(growToFit);
//	$(window).scroll(cb_scroll);

	//Add functionality for browsing using Next and Prev links.
}

//will not work with new cloudBox function
function shrinkImg() { //Reduce images to fit 700 by 400 and adds a link to full image.
	var fullImgWidth = $('#cb_full_content #cb_image img').attr('width');
	var fullImgHeight = $('#cb_full_content #cb_image img').attr('height');
	var imgLink = $('#cb_full_content #cb_image img').attr('src');
	var linkTag = "<a href=\""+imgLink+"\" target=\"_blank\" title=\"Click to view Full Image\"></a>";
	if ((fullImgWidth > 700) || (fullImgHeight > 400)) {
		if (fullImgWidth > 700) {
			var reduceSize = 700/fullImgWidth;
			var reduceHeight = fullImgHeight*reduceSize;
			var reduceWidth = fullImgWidth*reduceSize;
		}
		if (fullImgHeight > 400) {
			var reduceSize = 400/fullImgHeight;
			var reduceHeight = fullImgHeight*reduceSize;
			var reduceWidth = fullImgWidth*reduceSize;
		}
		$('#cb_full_content #cb_image img').attr('width', reduceWidth).attr('height', reduceHeight);
		var wStyle = "width:"+reduceWidth+"px;";
	//	$('#full_image #main').attr('style', wStyle);
		$('#cb_full_content #cb_image img').wrap(linkTag);
	}
}

$(document).ready(function() {
	dropMenu();
	keepOpen();
	galDesc();
	galPopup();
//	shrinkImg();
});