$(document).ready(function(){
	$(".scroll").hide();
});

function makeTrans(bgNum) {
	$("div.contentWindow").fadeOut("slow"),									 
	$("div.brandLogo").animate({ top:"-175px" }, 1000),
	$("div.topBar").animate({ top:"-150px" }, 1000),
	$("div.topBar").queue(function() {
		$(this).animate({ top:"-38px" }, 1000);
		switch (bgNum) {
			case 4:	
				$(this).css({ backgroundImage: "none", backgroundColor: "#270a26" });
				break;
			case 3:
				$(this).css({ backgroundImage: "none", backgroundColor: "#4b3c18" });
				break;
			case 1:
				$(this).css({ backgroundImage: "none", backgroundColor: "#3f1b10" });
				break;
		}
		$(".morphBg").css({ backgroundImage: "url('images/bg_fig"+bgNum+".gif')", backgroundRepeat: "repeat", backgroundPosition: "0px 0px" });
		$(".morphBg").fadeIn();
		$(this).dequeue();
	}),
	//$("div.bottomBar").animate({ marginTop:"-300px", opacity:0.0 }, 1000),
	$("div.bottomBar").fadeOut(),
	//$("div.morphFlash").animate({opacity: 1.0}, 2000),
	$("div.morphFlash").show();
}

function deTrans() {   
	$("div.morphFlash").fadeOut("slow"),
	$("div.bottomBar").animate({opacity: 1.0}, 2000),
	$("div.bottomBar").fadeIn(),	
	$("div.topBar").animate({ top:"-150px" }, 1000),
	$("div.topBar").queue(function() {
		$(this).css({ backgroundImage: "url('images/bg_wallpaper.gif')" });
		$(".morphBg").fadeOut();
		$(this).dequeue();
	}),
	$("div.topBar").animate({ top:"75px" }, 1000),
	$("div.brandLogo").animate({opacity: 1.0}, 2000),
	$("div.brandLogo").animate({ top:"0px" }, 1000);
	$("div.contentWindow").animate({opacity: 1.0}, 1000),
	$("div.contentWindow").fadeIn("slow");	
}

// div scrolling functions
// set variables that are used by scrollDiv function
var scrollTimeout;
var maskId = "cw_mask"; // id of the <div> container that masks the scroll content
var scrollId = "cw_text"; // id of the <div> containing the content to be scrolled
var btnId = "scroll"; // id of the <div> that has the buttons used to call scrollDiv function

function scrollDiv ( dir, incr ) {
	clearTimeout ( scrollTimeout );
	scrollTimeout = null;
	if ( dir != "stop" ) {
		// get the mask height... the window that the content scrolls in
		var oMask = document.getElementById ( maskId );
		var maskH = oMask.clientHeight;
		// get the content height and y position of the scrolling layer
		var oScroll = document.getElementById ( scrollId );
		var scrollY = Number ( oScroll.style.top.replace ( "px", "" ) );
		var scrollH = oScroll.clientHeight;
		// buttons
		var oBtns 	= document.getElementById ( btnId );
		switch ( dir ) {
			case "init" :
				// ---	if there isn't anything to scroll, hide the buttons
				if ( maskH > scrollH ) 	{
					oBtns.style.display = "none";
					diff = maskH - scrollH;
					halfDiff = diff / 2;
					oScroll.style.top = halfDiff + "px";
				}
				else {
					oScroll.style.top = "0px";
					$(".scroll").show();
				}
				break;
			case "up" :
				if ( scrollY < 0 ) {
					oScroll.style.top = ( scrollY + incr ) + "px";
				}
				else {
					oScroll.style.top = "0px";
				}
				break;
			case "down" :
				if ( scrollY > ( maskH - scrollH ) ) {
					oScroll.style.top = ( scrollY - incr ) + "px";
				}
				else {
					oScroll.style.top = ( maskH - scrollH ) + "px";
				}
				break;
		}
		if ( dir != "init" ) {
			// ---	keep the scroll going until dir = "stop"
			funct = "scrollDiv('" + dir + "'," + incr + ");";
			scrollTimeout = setTimeout ( funct, 10 );
		}
	}
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft];
}

function activeIndicator(id) {
	lnkPosLeft = findPos(document.getElementById('nav' + id));
	lnkWidth = document.getElementById('nav' + id).offsetWidth;
	
	document.getElementById('active_marker').style.display = 'block';
	document.getElementById('active_marker').style.left = (lnkPosLeft * 1 + lnkWidth / 2 - 69) + 'px';
	
	lnkSrc = $("a#nav" + id + " img").attr("src");
	lnkSrc = lnkSrc.replace('_nm', '_hv');
	
	$("a#nav" + id + " img").attr("src", lnkSrc);
	$("a#nav" + id + " img").mouseover( function () { $(this).attr("src", lnkSrc); } );
	$("a#nav" + id + " img").mouseout( function () { $(this).attr("src", lnkSrc); } );
}

var currentGalItem;

function selectGalItem (id, dir) {
	currentGalItem = id;
	
	boatPos = $("#cw_text").offset();
	divPos = $("#galItem_" + id).offset();

	boatPos = boatPos.top;
	divPos = divPos.top;
	targetPos = "-" + (divPos - boatPos) + "px";
		
	$("#cw_text").stop();
	$("#cw_text").animate({ marginTop:targetPos }, 1000);
	
	if ( $("#galItem_" + id + " .hide").html() ) {
		//$(".gal_outsideText").hide();
		$(".gal_outsideText").html( $("#galItem_" + id + " .hide").html() ),
		$(".gal_outsideText").show();		
	}
	else {
		$(".gal_outsideText").hide();	
	}
	
	if ( $("#galItem_" + id + " .more").html() ) {
		$(".scroll").show();
		changeExample("reset");
	}
	
	else {
		$(".scroll").hide();	
	}
}

function changeExample (dir) {
	exampleCount = $("#galItem_" + currentGalItem + " .more").html();
	curExampleSrc = $("#galItem_" + currentGalItem + " #multipleExamples").attr("src");
	
	exNumPos = curExampleSrc.indexOf(".");
	exNumPos = exNumPos - 1; //Returns a number value relative to the position of the image number inside of the image source
	
	exNum = curExampleSrc.substr(exNumPos, 1);
	newExNum = (exNum * 1) + dir;

	if (dir == "reset") {
		newExNum = 1;	
	}
	if ( $("#galItem_" + currentGalItem + " .more").html() ) {
		if (0 < newExNum) {
			if (newExNum <= exampleCount) {
				setExampleSrc = curExampleSrc.replace("_" + exNum + ".", "_" + newExNum + ".");
				$("#galItem_" + currentGalItem + " #multipleExamples").attr("src", setExampleSrc);
				$("#outOf").text(newExNum + " of " + exampleCount);
			}
		}
	}
}

function showBio(id) {
	for (i = 1; i <= 3; i++) {
		document.getElementById('bio'+i).style.display = "none";
	}
	if(id == 'none') {
		$(".scroll").hide();
		return;
	}
	document.getElementById(id).style.display = "block";
	scrollDiv('init',0);
}

setInterval(maintainBody, 500);

function maintainBody() {
	if ($(window).width() < 980) {
		$(".bottomBar").css({ width: "980px" });
		$(".topBar").css({ width: "980px" });
	}
	else {
		$(".topBar").css({ width: "100%" });
		$(".bottomBar").css({ width: "100%" });	
	}
	if ($(window).height() < 768) {
		docH = 768;
	}
	else {
		docH = $(window).height();
	}
	docW = $(document).width();
	$(".morphBg").css({ width: docW, height: docH });
	
}