// JavaScript Document
<!--

// Adjust Template settings here:
// *****************************************************
	//var numberOfImages = ?;  		change number of images in preloadImages()
	var folder = "";				// set when page_loaded() is called
	var imagePreFix = "image_";  	// constant
	var currentImageNum = 1;
	var navVisible = false;
	var myCount = 2;				// for function main_image_interval()
// *****************************************************
// Adjust Template settings above


function page_loaded(current_folder)
{
	document.getElementById("seniorLink").onmouseover = displayNav;		// registering onmouseover event with links
	document.getElementById("weddingLink").onmouseover = displayNav;
	document.getElementById("portraitLink").onmouseover = displayNav;
	
	document.getElementById("nav").onmouseout = hideNav;;   // registering onmouseout event with id="nav"
	
	var main_image_style = document.getElementById('main_image').style;
	
	folder = current_folder; 						// where the large images are stored
	opacity('progress_bar', 100, 0, 500);
	opacity('loading', 100, 0, 500);
	setTimeout("display_none()", 500);
	
	main_image_style.display = 'inline';
	
	opacity('main_image', 0, 100, 500);
}

function display_none()
{
	var progress_bar_style = document.getElementById('progress_bar').style;
	var loading_style = document.getElementById('loading').style;
	
	progress_bar_style.display = 'none';
	loading_style.display = 'none';
}

function change(picture_num, w, h)
{
	opacity('largeImage', 100, 0, 500)  // id, opacity start, opacity end, milliseconds

	setTimeout("changeImage("+ picture_num +", "+ w +", "+ h +")", 500)
}

function changeImage(picture_num, w, h)
{
	var preFix = folder + "/" + imagePreFix
	  
	document.largeImage.src = preFix + picture_num + ".jpg"
	document.largeImage.width = w
	document.largeImage.height = h
	
	currentImageNum = picture_num

	opacity('largeImage', 0, 100, 500)

}

function opacity(id, opacStart, opacEnd, millisec)
{
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id)
{
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
} 

function borderOn(id, millisec)
{
	//speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
	
	//changeColor('red', id);
	//setTimeout("changeColor(0,'" + id + "')",(timer * speed));
    for(i = 0; i <= 9; i++)
	{
        setTimeout("changeColor(" + i + ",'" + id + "')",(timer * speed));
        timer++;
    }
}

function borderOff(id, millisec)
{
	//speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
	
	//changeColor('red', id);
	//setTimeout("changeColor(0,'" + id + "')",(timer * speed));
    for(i = 9; i >= 0; i--)
	{
        setTimeout("changeColor(" + i + ",'" + id + "')",(timer * speed));
        timer++;
    }
}

function changeColor(color, id)
{
	var object = document.getElementById(id).style;
	//alert("#" + color + color + color);
	object.borderColor = "#" + color + color + color;
}

function displayNav(e)
{
	if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;	// getting the element who fired the event
	
	//speed for each frame millisec
    var speed = 10;
    var timer = 0;
	
	var myNav_style = document.getElementById("nav").style;
	var myLink1 = document.getElementById('link1');			// getting link1 and link2 elements
	var myLink2 = document.getElementById('link2');
	
	if(tg.id == "seniorLink")								// changing the links
	{
		myLink1.innerHTML = "Senior Portfolio";
		myLink1.href = "http://www.traciegrizzle.com/seniors_portfolio.asp";
		
		myLink2.innerHTML = "Senior Info";
		myLink2.href = "http://www.traciegrizzle.com/seniors.asp";
	}
	else if(tg.id == "weddingLink")
	{
		myLink1.innerHTML = "Wedding Portfolio";
		myLink1.href = "http://www.traciegrizzle.com/weddings.asp";
		
		myLink2.innerHTML = "Wedding Info";
		myLink2.href = "http://www.traciegrizzle.com/weddingprice.asp";
	}
	else if(tg.id == "portraitLink")
	{
		myLink1.innerHTML = "Portrait Portfolio";
		myLink1.href = "http://www.traciegrizzle.com/portraits.asp";
		
		myLink2.innerHTML = "Portrait Info";
		myLink2.href = "http://www.traciegrizzle.com/portraitprice.asp";
	}

		if(!navVisible)													// only do this when not already visible
		{
			myNav_style.display = 'block';
			
			for(i = 0; i <= 20; i++)
			{
				setTimeout("changeHeight(" + i + ")",(timer * speed));	// dropping down the border
        		timer++;
			}
			
			setTimeout("document.getElementById('nav_inner').style.display='inline'", 400);
			setTimeout("opacity('nav_inner', 0, 100, 500)", 400);		// increasing opacity to make visible
			setTimeout("navVisible = true", 400);
		}
}

function hideNav(e)
{																	// this code makes sure the mouseout took place when mouse actually left the div layer
	if (!e) var e = window.event;									// e is the event 'onmouseout'
	var tg = (window.event) ? e.srcElement : e.target;				// getting the target layer where the 'onmouseout' occured
	if (tg.nodeName != 'DIV') return;								// if it was not the div, end function immediately because the mouse has not left the div
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;	// did the mouse leave the div or enter a link inside the div?
	while (reltg != tg && reltg.nodeName != 'BODY')					// running through the bubble nodes until we hit 'body'
		reltg= reltg.parentNode										// (in which case the mouse did move out of the div)
	if (reltg== tg) return;											// or until we determine the target was the div
																	// (in which case the mouse did not leave the div and so we end the function immediately)
	// the code below handles the mouse out event
	
	//speed for each frame millisec
    var speed = 10;
    var timer = 0;
	
	if(navVisible)		// only do this when already visible
		{
			opacity('nav_inner', 100, 0, 500);
			setTimeout("document.getElementById('nav_inner').style.display='none'", 500);
			
			for(i = 20; i >= 0; i--)
			{
				setTimeout("changeHeight(" + i + ")",(timer * speed + 500));
        		timer++;
			}
			
			setTimeout("document.getElementById('nav').style.display='none'", 800);
			setTimeout("navVisible = false", 800);
		}
}

function changeHeight(h)
{
	var nav_style = document.getElementById('nav').style;
	
	nav_style.height = h + "px";
	//alert(nav_style.height);
}

function main_image_interval()
{
	var t;
	
	change(myCount, 700, 438);
	myCount = myCount + 1;
	if(myCount > 6) myCount = 1;
	
	t = setTimeout("main_image_interval()", 6000);
	
}

/*  not being used
function preLoadImages(num, setFolder)
{
	folder = setFolder;
	
	var numberOfImages = num;	
	var myImages = new Array();
	
	var preFix = folder + "/" + imagePreFix
	
	for(var i = 1; i <= numberOfImages; i++)
	{
		myImages[i - 1] = new Image();
		//myImages[i - 1].onload = alert(i - 1);
		myImages[i - 1].src = preFix + i + ".jpg"
		
		//alert(i);
		//(new Image()).src = preFix + i + ".jpg"
	}
	
}
*/

-->