// javascript bgr animation -- not very reusable outside of bgr as a whole.. but parts can be
// written by brandon burkett for elemental blend
// 09-25-06

// minor globals for reusability and customization
var thumbFadeMin = 50;
var thumbFadeMax = 100;
var thumbFadeInit = 50;
var thumbFadeTime = 100;
var thumbArray = new Array();

var layerFadeMin = 0;
var layerFadeMax = 70;
var layerFadeInit = 0;
var layerFadeTime = 5;

var detailFadeMin = 0;
var detailFadeMax = 90; // was 80
var detailFadeInit = 0;
var detailFadeTime = 5;

// globals for functionality, mainly for fades
var thumbFade1;
var thumbFade2;
var thumbFade3;
var thumbFade4;
var thumbFade5;
var layerFade;
var detailsFade;
var moreProjectsFade;
var currentThumb;
var nextLarge = 2;
var activeCategory;

// define object
var bgrAnimation = 
{
	// will add an event to id/element
	addEvent: function(elem, eventType, funct)
	{
		if(elem.addEventListener)
		{
			elem.addEventListener(eventType,funct,false);
		}
		else if(elem.attachEvent)
		{
			elem.attachEvent('on'+eventType, funct);
		}
		else
		{
			elem['on'+eventType] = funct;
		}

		

	},

	// initalizer function
	init: function()
	{		
		// get all images
		if(document.getElementsByTagName('img'))
		{
			images = document.getElementsByTagName('img');			
		}

		// for all images on page look for ones with thumbnail class
		for(i=0;i<images.length;i++)
		{
			// add event to image with thumbnail class
			if(images[i].className == 'thumbnail')
			{
				var thisElem = document.getElementById(images[i].getAttribute('id'));				
				bgrAnimation.addEvent(thisElem,'click',bgrAnimation.showSmall);
				thumbArray.push(thisElem);
			}				
		}

		// there is at most 5, so add init fade value
		if(document.getElementById('thumbnail_1'))
		{
			thumbFade1 = new Fadomatic(document.getElementById('thumbnail_1'), thumbFadeTime, 100, thumbFadeMin, thumbFadeMax);
			// set current
			currentThumb = 'thumbnail_1';

			// update parent element to show active state
			document.getElementById('thumbnail_1').parentNode.className = 'thumbActive';
			

			// add hover events			
			bgrAnimation.addEvent(document.getElementById('thumbnail_1'),'mouseover',bgrAnimation.mouseOverState);
			bgrAnimation.addEvent(document.getElementById('thumbnail_1'),'mouseout',bgrAnimation.mouseOutState);
		}
		if(document.getElementById('thumbnail_2'))
		{
			thumbFade2 = new Fadomatic(document.getElementById('thumbnail_2'), thumbFadeTime, thumbFadeInit, thumbFadeMin, thumbFadeMax);

			// add hover events			
			bgrAnimation.addEvent(document.getElementById('thumbnail_2'),'mouseover',bgrAnimation.mouseOverState);
			bgrAnimation.addEvent(document.getElementById('thumbnail_2'),'mouseout',bgrAnimation.mouseOutState);
		}
		if(document.getElementById('thumbnail_3'))
		{
			thumbFade3 = new Fadomatic(document.getElementById('thumbnail_3'), thumbFadeTime, thumbFadeInit, thumbFadeMin, thumbFadeMax);

			// add hover events			
			bgrAnimation.addEvent(document.getElementById('thumbnail_3'),'mouseover',bgrAnimation.mouseOverState);
			bgrAnimation.addEvent(document.getElementById('thumbnail_3'),'mouseout',bgrAnimation.mouseOutState);
		}
		if(document.getElementById('thumbnail_4'))
		{
			thumbFade4 = new Fadomatic(document.getElementById('thumbnail_4'), thumbFadeTime, thumbFadeInit, thumbFadeMin, thumbFadeMax);

			// add hover events			
			bgrAnimation.addEvent(document.getElementById('thumbnail_4'),'mouseover',bgrAnimation.mouseOverState);
			bgrAnimation.addEvent(document.getElementById('thumbnail_4'),'mouseout',bgrAnimation.mouseOutState);
		}
		if(document.getElementById('thumbnail_5'))
		{
			thumbFade5 = new Fadomatic(document.getElementById('thumbnail_5'), thumbFadeTime, thumbFadeInit, thumbFadeMin, thumbFadeMax);

			// add hover events			
			bgrAnimation.addEvent(document.getElementById('thumbnail_5'),'mouseover',bgrAnimation.mouseOverState);
			bgrAnimation.addEvent(document.getElementById('thumbnail_5'),'mouseout',bgrAnimation.mouseOutState);
		}

		// init for project details
		if(document.getElementById('detailsContainer'))
		{
			bgrAnimation.addEvent(document.getElementById('showProjectDetails'),'click',bgrAnimation.showDetails);
			bgrAnimation.addEvent(document.getElementById('closeDetails'),'click',bgrAnimation.hideDetails);
			detailsFade = new Fadomatic(document.getElementById('detailsContainer'), detailFadeTime, detailFadeInit, detailFadeMin, detailFadeMax);
			document.getElementById('detailsContainer').style.zIndex = '8';
		}

		// init for more project info
		if(document.getElementById('moreProjectsContainer'))
		{
			if(document.getElementById('moreProjects'))
			{
				bgrAnimation.addEvent(document.getElementById('moreProjects'),'click',bgrAnimation.showThisProject);
			}

			bgrAnimation.addEvent(document.getElementById('closeProjects'),'click',bgrAnimation.hideMoreProjects);
			moreProjectsFade = new Fadomatic(document.getElementById('moreProjectsContainer'), detailFadeTime, detailFadeInit, detailFadeMin, detailFadeMax);
			document.getElementById('moreProjectsContainer').style.zIndex = '98';
		}

		// init layer fade and hide
		if(document.getElementById('blackFade'))
		{
			layerFade = new Fadomatic(document.getElementById('blackFade'), layerFadeTime, layerFadeInit, layerFadeMin, layerFadeMax);
			layerFade.hide();
		}
		
	},

	showThisProject: function()
	{
		// get this category
		var cat_id = document.getElementById('thisCatId').value;
		var title = document.getElementById('thisCatTitle').value;

		activeCategory = cat_id;

		// get projects by category
		var ajax = new ajaxRequest;
		var returnHTML = ajax.dispatchHTML('ajaxProject.php?type=projectList&cat_id='+cat_id,"");

		// update project list
		document.getElementById('moreProjectsTitle').innerHTML = title+' Projects';
		document.getElementById('moreProjectText').innerHTML = returnHTML;
		
		// run show animation
		bgrAnimation.showMoreProjects();
	},
	
	showOtherProject: function(cat_id,title)
	{
		// get projects by category
		var ajax = new ajaxRequest;
		var returnHTML = ajax.dispatchHTML('ajaxProject.php?type=projectList&cat_id='+cat_id,"");

		// update project list
		document.getElementById('moreProjectsTitle').innerHTML = title+' Projects';
		document.getElementById('moreProjectText').innerHTML = returnHTML;

		activeCategory = cat_id;
		
		// run show animation
		bgrAnimation.showMoreProjects();
	},

	mouseOverState: function(e)
	{
		// get event for multiple browsers
		if(!e)
		{
			e = window.event;
		}
		if(e.target)
		{
			targ = e.target;
		}
		else if(e.srcElement)
		{
			targ = e.srcElement;
		}
		if(targ.nodeType == 3) // defeat Safari bug
		{
			targ = targ.parentNode;
		}
		// end get e

		if(targ.id == 'thumbnail_1')
		{
			thumbFade1.fadeIn();
		}		
		if(targ.id == 'thumbnail_2')
		{
			thumbFade2.fadeIn();
		}
		if(targ.id == 'thumbnail_3')
		{
			thumbFade3.fadeIn();
		}
		if(targ.id == 'thumbnail_4')
		{
			thumbFade4.fadeIn();
		}
		if(targ.id == 'thumbnail_5')
		{
			thumbFade5.fadeIn();
		}
		
	},

	mouseOutState: function(e)
	{
		// get event for multiple browsers
		if(!e)
		{
			e = window.event;
		}
		if(e.target)
		{
			targ = e.target;
		}
		else if(e.srcElement)
		{
			targ = e.srcElement;
		}
		if(targ.nodeType == 3) // defeat Safari bug
		{
			targ = targ.parentNode;
		}
		// end get e

		if(currentThumb != targ.id)
		{
			if(targ.id == 'thumbnail_1')
			{
				thumbFade1.fadeOut();
			}		
			if(targ.id == 'thumbnail_2')
			{
				thumbFade2.fadeOut();
			}
			if(targ.id == 'thumbnail_3')
			{
				thumbFade3.fadeOut();
			}
			if(targ.id == 'thumbnail_4')
			{
				thumbFade4.fadeOut();
			}
			if(targ.id == 'thumbnail_5')
			{
				thumbFade5.fadeOut();
			}
		}		
	},

	showSmall: function(e)
	{
	
		// get event for multiple browsers
		if(!e)
		{
			e = window.event;
		}
		if(e.target)
		{
			targ = e.target;
		}
		else if(e.srcElement)
		{
			targ = e.srcElement;
		}
		if(targ.nodeType == 3) // defeat Safari bug
		{
			targ = targ.parentNode;
		}
		// end get e

		// get event attributes
		thisId = targ.getAttribute('id');

		// fade out current thumb and fade in clicked thumb
		if(currentThumb != thisId)
		{
			
			// fade out
			if(currentThumb == 'thumbnail_1')
			{
				thumbFade1.haltFade();
				thumbFade1.fadeOut();

				// update parent element to show inactive state
				document.getElementById('thumbnail_1').parentNode.className = 'thumbInactive';
			}
			else if(currentThumb == 'thumbnail_2')
			{
				thumbFade2.haltFade();
				thumbFade2.fadeOut();

				// update parent element to show inactive state
				document.getElementById('thumbnail_2').parentNode.className = 'thumbInactive';
			}
			else if(currentThumb == 'thumbnail_3')
			{
				thumbFade3.haltFade();
				thumbFade3.fadeOut();

				// update parent element to show inactive state
				document.getElementById('thumbnail_3').parentNode.className = 'thumbInactive';
			}
			else if(currentThumb == 'thumbnail_4')
			{
				thumbFade4.haltFade();
				thumbFade4.fadeOut();

				// update parent element to show inactive state
				document.getElementById('thumbnail_4').parentNode.className = 'thumbInactive';
			}
			else if(currentThumb == 'thumbnail_5')
			{
				thumbFade5.haltFade();
				thumbFade5.fadeOut();

				// update parent element to show inactive state
				document.getElementById('thumbnail_5').parentNode.className = 'thumbInactive';
			}

			// fade in
			if(thisId == 'thumbnail_1')
			{
				thumbFade1.haltFade();
				thumbFade1.fadeIn();
				currentThumb = thisId;

				// update parent element to show active state
				document.getElementById('thumbnail_1').parentNode.className = 'thumbActive';
			}
			else if(thisId == 'thumbnail_2')
			{
				thumbFade2.haltFade();
				thumbFade2.fadeIn();
				currentThumb = thisId;

				// update parent element to show active state
				document.getElementById('thumbnail_2').parentNode.className = 'thumbActive';
			}
			else if(thisId == 'thumbnail_3')
			{
				thumbFade3.haltFade();
				thumbFade3.fadeIn();
				currentThumb = thisId;

				// update parent element to show active state
				document.getElementById('thumbnail_3').parentNode.className = 'thumbActive';
			}
			else if(thisId == 'thumbnail_4')
			{
				thumbFade4.haltFade();
				thumbFade4.fadeIn();
				currentThumb = thisId;

				// update parent element to show active state
				document.getElementById('thumbnail_4').parentNode.className = 'thumbActive';
			}
			else if(thisId == 'thumbnail_5')
			{
				thumbFade5.haltFade();
				thumbFade5.fadeIn();
				currentThumb = thisId;

				// update parent element to show active state
				document.getElementById('thumbnail_5').parentNode.className = 'thumbActive';
			}
			

			bgrAnimation.showLarge(thisId);			
		}			
	},

	showLarge: function(thisThumbId)
	{
		// get large image
		var thumbSrc = document.getElementById(thisThumbId).getAttribute('src');
		var largeSrc = thumbSrc.replace('s.jpg','l.jpg');
		var parentElem = document.getElementById(thisThumbId).parentNode.parentNode;
		var thisNum = parentElem.id.replace('thumb','').replace('Container','');

		// get new height / width
		var width = document.getElementById('largeWidth'+thisNum).value;
		var height = document.getElementById('largeHeight'+thisNum).value;
		
		// find empty display div
		var largeImg = document.getElementById('large_1');

		// fade out large image and update with new image
		$(largeImg).fadeOut('slow', function()
		{
			// force image to load
			var newImage = new Image(); 
			newImage.src = largeSrc;
			
			if(newImage.complete)
			{
				// change attributes			
				$(largeImg).attr('width', width);
				$(largeImg).attr('height', height);
				$(largeImg).attr('src', newImage.src);
			
				// fade back in
				$(largeImg).fadeIn('slow');
			}
			else
			{
				newImage.onload = function()
				{
					// change attributes			
					$(largeImg).attr('width', width);
					$(largeImg).attr('height', height);
					$(largeImg).attr('src', newImage.src);

					// fade back in
					$(largeImg).fadeIn('slow');
				}								
			}								

		});
		
		//largeImg.src = largeSrc;
		//largeImg.width = width;
		//largeImg.height = height;
	},

	showDetails: function(e)
	{
		detailsFade.haltFade();
		detailsFade.fadeIn();		
	},

	hideDetails: function(e)
	{
		detailsFade.haltFade();
		detailsFade.fadeOut();		
	},

	showMoreProjects: function(e)
	{
		moreProjectsFade.haltFade();
		moreProjectsFade.fadeIn();

		if(document.getElementById('blackFade'))
		{
			// show black layer
			layerFade.show();
		}

		// update nav based on project
		var activeNav = document.getElementById('active');
		activeNav.id = '';

		var newActiveNav = document.getElementById('nav'+activeCategory);
		newActiveNav.firstChild.id = 'active';
	},

	hideMoreProjects: function(e)
	{
		moreProjectsFade.haltFade();
		moreProjectsFade.fadeOut();

		if(document.getElementById('blackFade'))
		{
			// show black layer
			layerFade.hide();
		}

		// update nav based on project
		var activeNav = document.getElementById('active');
		activeNav.id = '';

		var newActiveNav = document.getElementById('nav'+document.getElementById('thisCatId').value);
		newActiveNav.firstChild.id = 'active';
	}
}

// load object after dom loads
$(document).ready( function(){ bgrAnimation.init() });