/*******************************************************************************
 IXF1.11 :: Image cross-fade 
 ------------------------------------------------------------------------------
 Copyright (c) 2004 James Edwards (brothercake)          <cake@brothercake.com>
 BSD License                          See license.txt for licensing information
 Info/Docs       http://www.brothercake.com/site/resources/scripts/transitions/
 ------------------------------------------------------------------------------
*******************************************************************************/
//global object
var ixf = { 'clock' : null, 'count' : 1 }
/*******************************************************



/*****************************************************************************
 List the images that need to be cached
*****************************************************************************/

ixf.imgs = [
	'images/love/love_marches_on_1.jpg',
	'images/love/love_marches_on_2.jpg',
	'images/love/love_marches_on_3.jpg',
	'images/love/love_marches_on_4.jpg',
	'images/archaeology/archaeology_1.jpg',
	'images/archaeology/archaeology_2.jpg',
	'images/archaeology/archaeology_3.jpg',
	'images/archaeology/archaeology_4.jpg',
	'images/immersion/immersion_1.jpg',
	'images/immersion/immersion_2.jpg',
	'images/immersion/immersion_3.jpg',
	'images/immersion/immersion_4.jpg',
	'images/riverbank/riverbank_1.jpg',
	'images/riverbank/riverbank_2.jpg',
	'images/riverbank/riverbank_3.jpg',
	'images/riverbank/riverbank_4.jpg',
	'images/rothko/rothko_1.jpg',
	'images/rothko/rothko_2.jpg',
	'images/rothko/rothko_3.jpg',
	'images/rothko/rothko_4.jpg',
	'images/rothko2/rothko_1.jpg',
	'images/rothko2/rothko_2.jpg',
	'images/rothko2/rothko_3.jpg',
	'images/rothko2/rothko_4.jpg',
	'images/injection/injection_1.jpg',
	'images/injection/injection_2.jpg',
	'images/injection/injection_3.jpg',
	'images/injection/injection_4.jpg',
	'images/dawn/dawn_1.jpg',
	'images/dawn/dawn_2.jpg',
	'images/dawn/dawn_3.jpg',
	'images/dawn/dawn_4.jpg',
	'images/syncretism/syncretism_3.jpg',
	'images/dusk/dusk_1.jpg',
	'images/dusk/dusk_3.jpg',
	'images/dusk/dusk_4.jpg',
	'images/euler/euler_1.jpg',
	'images/euler/euler_2.jpg',
	'images/euler/euler_3.jpg',
	'images/euler/euler_4.jpg',
	'images/okeefe/flower_4.jpg',
	'images/okeefe/flower_51.jpg',
	'images/okeefe/flower_4n.jpg',
	'images/okeefe/ripple.jpg',
	'images/sketches/flower_17.jpg',
	'images/sketches/flower_20.jpg',
	'images/sketches/flower_26.jpg',
	'images/sketches/flower_42.jpg',
	'images/music/coltrane.jpg',
	'images/music/moons.jpg',
	'images/music/sabrina.jpg',
	'images/music/unity.jpg',
	'images/pendulum/pendulum_01.jpg',
	'images/pendulum/pendulum_03.jpg',
	'images/pendulum/pendulum_04.jpg',
	'images/pendulum/pendulum_15.jpg',
	'images/nature/nature_1.jpg',
	'images/nature/nature_2.jpg',
	'images/nature/nature_3.jpg',
	'images/nature/nature_4.jpg',
	'images/syncretism/syncretism_11.jpg',
	'images/syncretism/syncretism_21.jpg',
	'images/syncretism/syncretism_31.jpg',
	'images/syncretism/syncretism_41.jpg',
	'images/chameleon/stacks.jpg',
	'images/chameleon/funky.jpg',
	'images/chameleon/bees.jpg',
	'images/chameleon/chameleon.jpg',
	'images/photos/four_square.jpg',
	'images/photos/four_leaf_clover.jpg',
	'images/photos/temple.jpg',
	'images/photos/peace_and_archaeology.jpg'
	];

var titles= new Array(72);

titles[0]	= '<br><center>Love Marches On (No. 1)</center>';
titles[1]	= '<br><center>Love Marches On (No. 3)</center>';
titles[2]	= '<br><center>Impression</center>';
titles[3]	= '<br><center>On Cloud Nine</center>';
titles[4]	= '<br><center>Archaeology</center>';
titles[5]	= '<br><center>Written in Stone</center>';
titles[6]	= '<br><center>Portal</center>';
titles[7]	= '<br><center>Starburst</center>';
titles[8]	= '<br><center>Sour Apple</center>';
titles[9]	= '<br><center>Honey Dew</center>';
titles[10]	= '<br><center>Carved in Stone</center>';
titles[11]	= '<br><center>Love Marches On (No. 5)</center>';
titles[12]	= '<br><center>Sentinel</center>';
titles[13]	= '<br><center>Pandora\'s Box</center>';
titles[14]	= '<br><center>Bamboo Mask</center>';
titles[15]	= '<br><center>Anthroscopic Surgery</center>';
titles[16]	= '<br><center>Untitled</center>';
titles[17]	= '<br><center>Untitled</center>';
titles[18]	= '<br><center>Untitled</center>';
titles[19]	= '<br><center>Untitled</center>';
titles[20]	= '<br><center>Untitled</center>';
titles[21]	= '<br><center>Untitled</center>';
titles[22]	= '<br><center>Untitled</center>';
titles[23]	= '<br><center>Untitled</center>';
titles[24]	= '<br><center>Bubble Bath (No 1)</center>';
titles[25]	= '<br><center>Alvin Ailey</center>';
titles[26]	= '<br><center>Clay Jars II</center>';
titles[27]	= '<br><center>Twin Creation</center>';
titles[28]	= '<br><center>In Awe of the Sun</center>';
titles[29]	= '<br><center>In Awe of the Wind</center>';
titles[30]	= '<br><center>Peace</center>';
titles[31]	= '<br><center>A Page From God\'s Notebook</center>';
titles[32]	= '<br><center>Memphis</center>';
titles[33]	= '<br><center>Ocean Sky</center>';
titles[34]	= '<br><center>Touch You, Touch Me</center>';
titles[35]	= '<br><center>When I Came to the Lord (No 2)</center>';
titles[36]	= '<br><center>We Are the Change We Want</center>';
titles[37]	= '<br><center>Glass Jars</center>';
titles[38]	= '<br><center>Clown Folk Art</center>';
titles[39]	= '<br><center>Chinese Medallion</center>';
titles[40]	= '<br><center>O\'Keefe (No. 4)</center>';
titles[41]	= '<br><center>O\'Keefe (No. 51)</center>';
titles[42]	= '<br><center>O\'Keefe (No. 4n)</center>';
titles[43]	= '<br><center>Shimmer</center>';
titles[44]	= '<br><center>Stingray</center>';
titles[45]	= '<br><center>Blue Sketch (No. 17)</center>';
titles[46]	= '<br><center>Blue Sketch (No. 26)</center>';
titles[47]	= '<br><center>Balloon (No. 5)</center>';
titles[48]	= '<br><center>Coltrane</center>';
titles[49]	= '<br><center>Moons</center>';
titles[50]	= '<br><center>Sabrina\'s Path</center>';
titles[51]	= '<br><center>Unity</center>';
titles[52]	= '<br><center>Pendulum (No 1)</center>';
titles[53]	= '<br><center>Pendulum (No 3)</center>';
titles[54]	= '<br><center>Pendulum (No 4)</center>';
titles[55]	= '<br><center>Pendulum (No 15)</center>';
titles[56]	= '<br><center>Three Butterflies</center>';
titles[57]	= '<br><center>Japanese Fall Through Shuttered Windows</center>';
titles[58]	= '<br><center>Birds Eye</center>';
titles[59]	= '<br><center>Birds Nest</center>';
titles[60]	= '<br><center>Napa Valley Sunset</center>';
titles[61]	= '<br><center>French Horn</center>';
titles[62]	= '<br><center>Winged Flight</center>';
titles[63]	= '<br><center>Arboretum</center>';
titles[64]	= '<br><center>Stacks</center>';
titles[65]	= '<br><center>Funky (No 14)</center>';
titles[66]	= '<br><center>Bees</center>';
titles[67]	= '<br><center>Chameleon No 1</center>';
titles[68]	= '<br><center>Four Square</center>';
titles[69]	= '<br><center>Four Leaf Clover</center>';
titles[70]	= '<br><center>Temple</center>';
titles[71]	= '<br><center>Archaeology and Peace</center>';

var artistInfo	= '<br>Eric L. Hayes graduated from MIT with a bachelor’s degree in electrical engineering in 1990,<br>and performed graduate studies at Stanford University. He is a self-taught artist<br>who has participated in numerous art shows and corporate exhibitions.<br>He currently resides in Washington DC.';
var artInfo		= '<br>The images are the graphical representations of sets of mathematical equations.<br> My art explores the intersection that exists between the left and right brain.<br>While colors serve as my palette, math serves as the brush.<br>This is the connection between art and math.';

/*****************************************************************************
*****************************************************************************/



//cache the images
ixf.imgsLen = ixf.imgs.length;
ixf.cache = [];
for(var i=0; i<ixf.imgsLen; i++)
{
	ixf.cache[i] = new Image;
	ixf.cache[i].src = ixf.imgs[i];
}

var banner = new Image;
banner.src = 'images/eric3.jpg';

//crossfade setup function
function crossfade()
{
	//if the timer is not already going
	if(ixf.clock == null)
	{
		//copy the image object 
		ixf.obj = arguments[0];
		
		//copy the image src argument 
		ixf.src = arguments[1];
		
		//store the supported form of opacity
		if(typeof ixf.obj.style.opacity != 'undefined')
		{
			ixf.type = 'w3c';
		}
		else if(typeof ixf.obj.style.opacity != 'undefined')
		{
			ixf.type = 'moz';
		}
		else if(typeof ixf.obj.style.KhtmlOpacity != 'undefined')
		{
			ixf.type = 'khtml';
		}
		else if(typeof ixf.obj.filters == 'object')
		{
			//weed out win/ie5.0 by testing the length of the filters collection (where filters is an object with no data)
			//then weed out mac/ie5 by testing first the existence of the alpha object (to prevent errors in win/ie5.0)
			//then the returned value type, which should be a number, but in mac/ie5 is an empty string
			ixf.type = (ixf.obj.filters.length > 0 && typeof ixf.obj.filters.alpha == 'object' && typeof ixf.obj.filters.alpha.opacity == 'number') ? 'ie' : 'none';
		}
		else
		{
			ixf.type = 'none';
		}
		
		//change the image alt text if defined
		if(typeof arguments[3] != 'undefined' && arguments[3] != '')
		{
			ixf.obj.alt = arguments[3];
		}
		
		//if any kind of opacity is supported
		if((ixf.type != 'none') && (BrowserDetect.browser != 'Firefox'))
		{
			//create a new image object and append it to body
			//detecting support for namespaced element creation, in case we're in the XML DOM
			ixf.newimg = document.getElementsByTagName('body')[0].appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img'));

			//set positioning classname
			ixf.newimg.className = 'idupe';
			
			//set src to new image src
			ixf.newimg.src = ixf.src

			//move it to superimpose original image
			ixf.newimg.style.left = ixf.getRealPosition(ixf.obj, 'x') + 'px';
			ixf.newimg.style.top = ixf.getRealPosition(ixf.obj, 'y') + 'px';
			
			//copy and convert fade duration argument 
			ixf.length = parseInt(arguments[2], 10) * 1000;
			
			//create fade resolution argument as 20 steps per transition
			ixf.resolution = parseInt(arguments[2], 10) * 20;
			
			//start the timer
			ixf.clock = setInterval('ixf.crossfade()', ixf.length/ixf.resolution);
		}
		
		//otherwise if opacity is not supported
		else
		{
			//copy and convert fade duration argument 
			ixf.length = parseInt(arguments[2], 10) * 1000;
			
			//create fade resolution argument as 20 steps per transition
			ixf.resolution = parseInt(arguments[2], 10) * 20;
			
			//start the timer
			ixf.clock = setInterval('ixf.crossfade()', ixf.length/ixf.resolution);

			//just do the image swap
			ixf.obj.src = ixf.src;
		}
		
	}
};


//crossfade timer function
ixf.crossfade = function()
{
	//decrease the counter on a linear scale
	ixf.count -= (1 / ixf.resolution);

	
	//if the counter has reached the bottom
	if((ixf.count < (1 / ixf.resolution)) || (gImageIsSelected == true))
	{
		//clear the timer
		clearInterval(ixf.clock);
		ixf.clock = null;
		
		//reset the counter
		ixf.count = 1;
		
		//set the original image to the src of the new image
		ixf.obj.src = ixf.src;

		if(gImageIsSelected == true)
		{
			window.clearInterval(gIntervalID);
			document.artPix.src	=ixf.imgs[gSelectedIndex];
			highlightThumbnail(gSelectedIndex);

			gPixIndex			= (gSelectedIndex + 1) % ixf.imgs.length;
			gIntervalID			= window.setInterval("rotatePic()", rotate_delay);
			gImageIsSelected	= false;
		}
		else
			gPixIndex			=  (++gPixIndex)%ixf.imgs.length;

		if((gPixIndex%4) == 0)
		{
			gGroupIndex			= (++gGroupIndex)%(ixf.imgs.length / 4);
			handleGroupTransition(gGroupIndex + 10);
		}

		var displayContainer;
		displayContainer			= document.getElementById('title');
		displayContainer.innerHTML	= titles[gPixIndex];
	}
	
	handleOpacity(true);
};



//get real position method
ixf.getRealPosition = function()
{
	this.pos = (arguments[1] == 'x') ? arguments[0].offsetLeft : arguments[0].offsetTop;
	this.tmp = arguments[0].offsetParent;
	while(this.tmp != null)
	{
		this.pos += (arguments[1] == 'x') ? this.tmp.offsetLeft : this.tmp.offsetTop;
		this.tmp = this.tmp.offsetParent;
	}
	
	return this.pos;
};




	var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};

	var gPixIndex			= 1;
	var gSelectedIndex		= 1;
	var gGroupIndex			= 0;

	var gGroupID			= 10;
	var gIntervalID			= -1;

	var gImageIsSelected	= false;
	var rotate_delay		= 11000;		// delay in milliseconds (5000 = 5 secs)


	function doResize()
	{
		window.resizeTo(1080,980);
	}

	function handleGroupClick(selectedIndex)
	{
		document.getElementById(gGroupID).style.color	='#888888';
		document.getElementById(selectedIndex).style.color	='#FFFF00';
		gGroupID			= selectedIndex;
		gGroupIndex			= selectedIndex - 10;
		gPixIndex			= gGroupIndex*4;
		gSelectedIndex		= gPixIndex;
		gImageIsSelected	= true;

		clearInterval(ixf.clock);
		window.clearInterval(gIntervalID);

		ixf.clock			= null;
		ixf.count			= 1;
		ixf.obj.src			= ixf.imgs[gSelectedIndex];

		document.artPix.src	= ixf.imgs[gSelectedIndex];
		highlightThumbnail(gSelectedIndex);

		gPixIndex			= (gSelectedIndex + 1) % ixf.imgs.length;
		gIntervalID			= window.setInterval("rotatePic()", rotate_delay);
		gImageIsSelected	= false;

		var displayContainer;
		displayContainer			= document.getElementById('title');
		displayContainer.innerHTML	= titles[gPixIndex - 1];

		handleOpacity(false);
		handleSwapFade(1);
}

	function handleGroupOut(selectedIndex)
	{
		if(selectedIndex == gGroupID)
			document.getElementById(selectedIndex).style.color	='#FFFF00';
		else
			document.getElementById(selectedIndex).style.color	='#888888';
	}

	function handleGroupOver(selectedIndex)
	{
		if(selectedIndex == gGroupID)
			document.getElementById(selectedIndex).style.color	='#FFFF00';
		else
			document.getElementById(selectedIndex).style.color	='#FFFFFF';
	}

	function handleGroupTransition(selectedIndex)
	{
		document.getElementById(gGroupID).style.color	='#888888';
		document.getElementById(selectedIndex).style.color	='#FFFF00';
		gGroupID	= selectedIndex;
		handleSwapFade(0);
		setToDull(document.getElementById('thumb3'),1);
	}

	function handleImageOver()
	{
		var displayContainer;
		displayContainer			= document.getElementById('info');
		displayContainer.innerHTML	= artInfo;
	}

	function handleImageOut()
	{
		var displayContainer;
		displayContainer			= document.getElementById('info');
		displayContainer.innerHTML	= '';
	}

	function handleNameOver()
	{
		var displayContainer;
		displayContainer			= document.getElementById('info');
		displayContainer.innerHTML	= artistInfo;
	}

	function handleNameOut()
	{
		var displayContainer;
		displayContainer			= document.getElementById('info');
		displayContainer.innerHTML	= '';
	}

	function handleOpacity(doRemoveChild)
	{
		switch(BrowserDetect.browser)
		{
			case 'Explorer' :
				ixf.obj.filters.alpha.opacity = ixf.count * 100;
				ixf.newimg.filters.alpha.opacity = (1 - ixf.count) * 100;
				break;
				
			case 'Safari' :
				ixf.obj.style.KhtmlOpacity = ixf.count;
				ixf.newimg.style.KhtmlOpacity = (1 - ixf.count);
				break;
				
			case 'Firefox' : 
				//restrict max opacity to prevent a visual popping effect in firefox
				//ixf.obj.style.opacity = (ixf.count == 1 ? 0.9999999 : ixf.count);
				//ixf.newimg.style.opacity = (1 - ixf.count);
				break;
				
			default : 
				//restrict max opacity to prevent a visual popping effect in firefox
				ixf.obj.style.opacity = (ixf.count == 1 ? 0.9999999 : ixf.count);
				ixf.newimg.style.opacity = (1 - ixf.count);
		}
		
		if(BrowserDetect.browser != 'Firefox')
		{
			//now that we've gone through one fade iteration 
			//we can show the image that's fading in
			ixf.newimg.style.visibility = 'visible';
			
			//keep new image in position with original image
			//in case text size changes mid transition or something
			ixf.newimg.style.left = ixf.getRealPosition(ixf.obj, 'x') + 'px';
			ixf.newimg.style.top = ixf.getRealPosition(ixf.obj, 'y') + 'px';
			
			//if the counter is at the top, which is just after the timer has finished
			if(doRemoveChild && (ixf.count == 1))
			{
				//remove the duplicate image
				ixf.newimg.parentNode.removeChild(ixf.newimg);
			}
		}
	}


	function handleSwapFade(offset)
	{
		swapfade0(document.getElementById('thumb0'), ixf.imgs[gPixIndex - offset], '0', 'Thumbnail 0');
		swapfade1(document.getElementById('thumb1'), ixf.imgs[gPixIndex + 1 - offset], '0', 'Thumbnail 1');
		swapfade2(document.getElementById('thumb2'), ixf.imgs[gPixIndex + 2 - offset], '0', 'Thumbnail 2');
		swapfade3(document.getElementById('thumb3'), ixf.imgs[gPixIndex + 3 - offset], '0', 'Thumbnail 3');
	}

	function handleThumbClick(selectedIndex)
	{
		gImageIsSelected	= true;
		gSelectedIndex		= gGroupIndex*4 + selectedIndex;

		clearInterval(ixf.clock);
		window.clearInterval(gIntervalID);

		ixf.clock			= null;
		ixf.count			= 1;
		ixf.obj.src			= ixf.imgs[gSelectedIndex];

		document.artPix.src	= ixf.imgs[gSelectedIndex];
		highlightThumbnail(gSelectedIndex);

		gPixIndex			= (gSelectedIndex + 1) % ixf.imgs.length;
		gIntervalID			= window.setInterval("rotatePic()", rotate_delay);
		gImageIsSelected	= false;

		var displayContainer;
		displayContainer			= document.getElementById('title');
		displayContainer.innerHTML	= titles[gPixIndex - 1];

		handleOpacity(false);
	}

	function handleThumbOut(obj, index)
	{
		if((index != (gPixIndex%4)) && (index != gSelectedIndex))
			setToDull(obj,1);
	}

	function highlightThumbnail(selectedIndex)
	{
		var	adjIndex	= selectedIndex % 4;

		switch(adjIndex)
		{
			case 0	:
						setToDull(document.getElementById('thumb0'),0);
						setToDull(document.getElementById('thumb1'),1);
						setToDull(document.getElementById('thumb2'),1);
						setToDull(document.getElementById('thumb3'),1);
						break;
			case 1	:
						setToDull(document.getElementById('thumb0'),1);
						setToDull(document.getElementById('thumb1'),0);
						setToDull(document.getElementById('thumb2'),1);
						setToDull(document.getElementById('thumb3'),1);
						break;
			case 2	:
						setToDull(document.getElementById('thumb0'),1);
						setToDull(document.getElementById('thumb1'),1);
						setToDull(document.getElementById('thumb2'),0);
						setToDull(document.getElementById('thumb3'),1);
						break;
			case 3	:
						setToDull(document.getElementById('thumb0'),1);
						setToDull(document.getElementById('thumb1'),1);
						setToDull(document.getElementById('thumb2'),1);
						setToDull(document.getElementById('thumb3'),0);
						break;
		}

	}

	function initAll()
	{
		BrowserDetect.init();
		doResize();

		var displayContainer;
		displayContainer			= document.getElementById('title');
		displayContainer.innerHTML	= titles[1];

		rotatePic();
		gIntervalID	= window.setInterval("rotatePic()", rotate_delay);
	}

	function rotatePic()
	{
		crossfade(document.getElementById('art'), ixf.imgs[gPixIndex], '5', 'Artwork');
		highlightThumbnail(gPixIndex);
	}

	function setToDull(obj, setting)
	{
		opaqueness	= (setting == 0)? 1 : 0.2;

		if(BrowserDetect.browser == 'Explorer')
			obj.filters.alpha.opacity	= opaqueness*100;
		else
			obj.style.opacity			= opaqueness;
	}