/*purpose: 
 -set initial styling for javascript methods
 -expand the summary section text in project pages, 
 -scroll down when anchor tag redirects to an element on the page.
 -images in #content need to display their alt tags when mouse overed.
	
*/

/*GLOBALS*/
var $description;
var $fullArticle;
var $textExpander;
var $projectDetails;
var $header;
var $mediaNavigator;
var $summaryParagraph;
var $mediaSection;
var cssHide;
var cssShow;

function summaryExpander(isExpandable, isScrollable){

	setVars();
	
	if (isExpandable){
		setExpansion();
	}
	
	if(isScrollable){
		setScroller();
	}
	
	displayImageAlts($mediaSection)
}

function setVars(){

	$description=$("div#description");
	$mediaNavigator= $("#projectNavigation");
	$summaryParagraph=$("div#description h3").next();
	$projectDetails = $("#projectDetails");
	setFurnitureStyles();	
	
	$header = $("#header");
	$mediaSection = $("#mediaSection");

	setMediaMargin();

}
function setFurnitureStyles(){
	$projectDetails.css("position", "fixed");
	$mediaNavigator.css({"border-bottom":"1px solid #6E6E6E",
						"position":"absolute",
						"bottom":"0px",
	})

}

function setMediaMargin(){
	var projectDetailsHeight = getTotalHeight($projectDetails);
	var mediaTopMargin=  projectDetailsHeight;
	$mediaSection.css("margin-top", mediaTopMargin+"px");

}
function setCSSvars(expandedHeight){
	cssHide = { "height":"0px",
				"position":"absolute",
				"overflow":"hidden",
				};

	cssShow = { "height": expandedHeight,
				"position":"absolute",
				"overflow":"hidden",	
				};
}
/*
set:  text expansion.
	  scrolling
*/
function setExpansion(){	
	//Set Vars
	$fullArticle= $("div#fullArticle");
	$lastParagraph = $("div#fullArticle p:last-child");
	$summaryParagraph.append("<span id='readMore'>More.</span>");
	$textExpander=$("span#readMore");
	//set height vars
	var additionalInfoHeight = 25; 
	$fullArticle.children().each(function(){
		additionalInfoHeight+=getTotalHeight($(this));
	});
	setCSSvars(additionalInfoHeight);
	$fullArticle.css(cssHide);
	//set expansion behaviours
	tweenDuration=200;
	$textExpander.toggle(function() {
		$lastParagraph.append(" ");
		$lastParagraph.append($textExpander);
		$textExpander.html("Less.");
		$fullArticle.animate(cssShow,tweenDuration);
	}, function() {
		$summaryParagraph.append($textExpander);
		$fullArticle.animate(cssHide, tweenDuration);
		$textExpander.html("More.");
	});
}

function setScroller(){
	$("a.scrollLink").click(function(e){
		e.preventDefault();
		var name = $(this).attr("href");
		var headerHeight = getTotalHeight($header);
		var projectDetailsHeight = getTotalHeight($projectDetails);
		var mediaTopMargin= headerHeight + projectDetailsHeight;
		var $target = $("a[name='"+name+"']").offset().top - mediaTopMargin + 20;

		$('html, body').animate({
			scrollTop:$target
		},'slow');
	});
}
function getTotalHeight(objectSelector){

	height= 0;
	height+= NaNChecker(objectSelector.height());
	height+= NaNChecker(objectSelector.css("margin-top")); 
	height+= NaNChecker(objectSelector.css("margin-bottom"));
	height+= NaNChecker(objectSelector.css("padding-top")); 
	height+= NaNChecker(objectSelector.css("padding-bottom"));
	// alert("IE Testing: "+ height);
	return height
}
function NaNChecker(numb){
	numb = parseInt(numb);
	if (isNaN(numb)){
		return 0;
	} else{
		return numb
		
	}
	
}
//TODO:Delete this function
function setError(string){
	$("#footer").append(string);
}

// Set mouse over events for "#mediaSection img"
function displayImageAlts(selector){
	var heights = new Array();
	selector.find('img').each(function(index){
		$(this).load(function() {
			if (this.alt){
				var altText="<p>"+this.alt+"</p>";
				$(this).before('<div class="expander">+</div>');
				$(this).before(altText);

				heights[index]= getTotalHeight($(this).prev('p'));
				$(this).prev('p').css("height", "0px").prev(".expander").toggle(function(){
					var y = parseInt($(this).offset().top);
					
					$(this).next('p').css("top", y+"px");
					$(this).next('p').animate({
						height:heights[index]+"px",
						"padding-top":"18px",
						"padding-bottom":"7px"
					},50);
					$(this).html('-');
				}, function(){
					$(this).next('p').animate({
						height:"0px",
						"padding-top":"0px",
						"padding-bottom":"0px"
						}
						, 50);
					$(this).html('+');
				})
			}
	    });
	})
}