/////////////////////////////////////////////////////////////////////////////
 /////////////////////////   Magic Animation 1.0   ///////////////////////////
/////////////////////////////////////////////////////////////////////////////

// Animation styles used in Magic /////////////////////////////////////////////

function styleLinear(x) { return x; }
function styleSin(x) { return Math.sin(x*Math.PI/2); }
function stylePulse(x) { return (Math.sin(x*2*Math.PI) + 1) / 2; }
function styleBounce(x) { return (x == 0) ? 0 : (((-Math.sin(x*25)/(x*25))+1)*(1-x))+x; }
function styleBounceLess(x) { return (x == 0) ? 0 : (((-Math.sin(x*15)/(x*15))+1)*(1-x))+x; }
function styleBounceMore(x) { return (x == 0) ? 0 : (((-Math.sin(x*35)/(x*35))+1)*(1-x))+x; }

// Magic Animation Core ///////////////////////////////////////////////////////

magic = new function ()
{
	this.effects = [];
	this.interval;
	this.frequency = 30;
	
	this.remove = function(effect)
	{
		var i = 0;
		while (i < this.effects.length) 
			if (this.effects[i] == effect) 
				this.effects.splice(i, 1);
			else i++;
				
		if (this.effects.length == 0) 
			window.clearInterval(this.interval);
	}
	
	this.tick = function()
	{
		for (var i=0; i<this.effects.length; i++)			
			this.effects[i].tick();
	}

	this.add = function(effect)
	{
		this.effects.push(effect);
		if (this.effects.length == 1)
			this.interval = window.setInterval(function() {magic.tick();}, this.frequency);	
	}
}


function effectObject(elementId, ticksToStart, speed, action, style, loop, coAction, endAction) 
{		
	this.elementId = elementId;
	this.ticksToStart = (ticksToStart == undefined) ? 0 : ticksToStart;
	this.speed = speed;
	this.now = 0;
	this.action = action;
	this.coAction = coAction;
	this.endAction = endAction;
	this.loop = (loop == undefined) ? false : loop;
	this.style = (style == undefined) ? styleSin : style;
	this.tick = function()
	{
		if (this.ticksToStart > 0)
		{
			this.ticksToStart--;
			return;
		}
		
		if (this.now > 100)
		{
			if (this.loop)
				this.now = 0;
			else
			{
				magic.remove(this);				
				if (this.endAction != undefined) 
					this.endAction();
			}
		}
		else
		{
			if (typeof elementId == 'string' && document.getElementById(elementId) == null)
			{
				magic.remove(this);
				return;
			}			
			this.action();
			
			if (this.coAction != undefined)
				this.coAction();
			
			this.now += this.speed;
			if (this.now > 100) this.now = 101;			
		}
	}
	
	magic.add(this);
}

// Magic Effects //////////////////////////////////////////////////////////////


function changeNumber(element, what, suffix, value1, value2, speed, ticksToStart, style, loop, coAction, endAction)
{
	action = function()
	{
		this.element.style[this.what] = Math.round(this.value1 + this.style(this.now/100)*(value2-value1)) + suffix;
	}
	effect = new effectObject(element, ticksToStart, speed, action, style, loop, coAction, endAction);
	effect.element = (typeof element == 'string') ? document.getElementById(element) : element;
	effect.what = what;
	effect.value1 = value1;
	effect.value2 = value2;
}

function fade(element, opacity1, opacity2, speed, ticksToStart, style, loop, coAction, endAction)
{
	action = function()
	{		
		this.element.style.opacity = this.opacity1 + this.style(this.now/100) * (this.opacity2-this.opacity1);
		this.element.style.filter = "alpha(opacity=" + this.element.style.opacity*100 + ")";
	}
	effect = new effectObject(element, ticksToStart, speed, action, style, loop, coAction, endAction);
	effect.element = (typeof element == 'string') ? document.getElementById(element) : element;
	effect.opacity1 = opacity1;
	effect.opacity2 = opacity2;
}

function move(element, top1, left1, top2, left2, speed, ticksToStart, style, loop, coAction, endAction)
{	
	changeNumber(element, "top", "px", top1, top2, speed, ticksToStart, style, loop, coAction, endAction);
	changeNumber(element, "left", "px", left1, left2, speed, ticksToStart, style, loop);
}

function scale(element, width1, height1, width2, height2, speed, ticksToStart, style, loop, coAction, endAction)
{
	changeNumber(element, "width", "px", width1, width2, speed, ticksToStart, style, loop, coAction, endAction);
	changeNumber(element, "height", "px", height1, height2, speed, ticksToStart, style, loop);
}

function morph(element1, element2, width1, height1, width2, height2, speed, ticksToStart, style, loop, coAction, endAction)
{
	scale(element1, width1, height1, width2, height2, speed, ticksToStart, style, loop, coAction, endAction);
	scale(element2, width1, height1, width2, height2, speed, ticksToStart, style, loop);
	fade(element1, 1, 0, speed, ticksToStart, style, loop);
	fade(element2, 0, 1, speed, ticksToStart, style, loop);
}

 /////////////////////////  (c) Miso Antonic 2007  ///////////////////////////
 
 
var images = new Array(4);

images[0] = '<a href="interact_interview_kahn.html"><img src="images/kahn_feature.gif" alt="Kahn Interview" border="0" /></a>';
images[1] = '<a href="interact_interview_zimmermann.html"><img src="images/zim_feature.gif" alt="Zimmermann Interview" border="0" /></a>';
images[2] = '<a href="interact_interview_holden.html"><img src="images/holden_feature.gif" alt="Holden Interview" border="0" /></a>';
images[3] = '<a href="lighterside.html"><img src="images/lighterside_feature.gif" alt="Lighter Side" border="0" /></a>';

images[4] = '<a href="about.html"><img src="images/teamandsite.gif" alt="Team and our site" border="0" /></a>';
images[5] = '<a href="downtheages_hazybeginning_rootsandorigins.html"><img src="images/flashmap.gif" alt="Interactive Map" border="0" /></a>';
images[6] = '<a href="interact_gallery.html"><img src="images/ww2codes.gif" alt="WW II Codes" border="0" /></a>';
images[7] = '<a href="lighterside_movies.html"><img src="images/cryptomovies.gif" alt="Crypto Movies" border="0" /></a>';
images[8] = '<a href="fundamentals_tools.html"><img src="images/cryptotools.gif" alt="Crypto Tools" border="0" /></a>';
images[9] = '<a href="lighterside_diy.html"><img src="images/handson.gif" alt="Hands On" border="0" /></a>';

images[10] = '<a href="fundamentals_cryptographyandyou.html"><img src="images/cryptoandyou.gif" alt="Crypto and You" border="0" /></a>';
images[11] = '<a href="fundamentals_timeline.html"><img src="images/timeline_icon.gif" alt="Timeline" border="0" /></a>';
images[12] = '<a href="../interact/navajo.swf" title="Navajo Code-talkers" rel="gb_page_center[650, 550]"><img src="images/navajo.gif" alt="Navajo Code talkers" border="0" /></a>';


 
 function showDIV()
 {
	 document.getElementById("features").innerHTML = "";
	 var rnum = new Array(4);
	 var rcount = 0;
	 var i = 0;
	 
	 while(i<4)
	 {
		  var index = Math.floor(Math.random() * images.length);
		  var unique = 1;
		  
		  for(var j=0; j<rcount; j++)
		  {
			  if(index == rnum[j])
			  {
				unique = 0;		
			  }
		  }
		  
		  if(unique==1)
		  {
				rnum[rcount] = index;
				rcount++; i++;
		  }
	 }
	 
	 for(var k=0; k<4; k++)
	 {document.getElementById("features").innerHTML = document.getElementById("features").innerHTML + images[rnum[k]];}
		
	 fade("features", 0, 1, 5, 0, styleSin, false) ;
 }
 
 function slideDIV()
 {
	 fade("features", 1, 0, 15, 0, styleSin, false,null, 
		  function() { showDIV(); }) ;
	 return false;
 }