{

	/*
	
		Symbol-Animation
		für Homepage Baukauer TC 
		
		2005 Wolfgang Keller
	
	*/

	// begin configuration
	var symbolCount = 12;		// number of symbols (1..16)
	
	var buildingInterval = 250;	// interval for first building (mlliseconds)
	var movingInterval = 3000;	// interval for moving symbols (mlliseconds)
	
	var buildingImage = "button01.gif"

	function initSymbols()
	{
		
		// Attention FIELDINDEX
		// 0..n (n = symbolCount-1)
		// set without gaps
		
		var tmpSymbol;
		
		tmpSymbol = new symbol();
		tmpSymbol.Name = "Abenteuer";
		tmpSymbol.ActivImage = "AbenteuerAktiv.gif";
		tmpSymbol.InactivImage = "AbenteuerInaktiv.gif";
		tmpSymbol.Link = "verschied/abtuerlbsp.html";
		tmpSymbol.fieldIndex = 0;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;
		
		tmpSymbol = new symbol();
		tmpSymbol.Name = "Einradhockey";
		tmpSymbol.ActivImage = "ERHAktiv.gif";
		tmpSymbol.InactivImage = "ERHInaktiv.gif";
		tmpSymbol.Link = "einrad/main.html";
		tmpSymbol.fieldIndex = 1;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;
		
		tmpSymbol = new symbol();
		tmpSymbol.Name = "Fitness";
		tmpSymbol.ActivImage = "FitnessAktiv.gif";
		tmpSymbol.InactivImage = "FitnessInaktiv.gif";
		tmpSymbol.Link = "fitness/main.html";
		tmpSymbol.fieldIndex = 2;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;				
		
		tmpSymbol = new symbol();
		tmpSymbol.Name = "Turnen";
		tmpSymbol.ActivImage = "TurnenAktiv.gif";
		tmpSymbol.InactivImage = "TurnenInaktiv.gif";
		tmpSymbol.Link = "turnen/main.html";
		tmpSymbol.fieldIndex = 3;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;
		
		tmpSymbol = new symbol();
		tmpSymbol.Name = "Gästebuch";
		tmpSymbol.ActivImage = "GBAktiv.gif";
		tmpSymbol.InactivImage = "GBInaktiv.gif";
		tmpSymbol.Link = "http://www.btc-herne.de/tinc?key=IQM8Gun2&start=-1&reverse=1";
		tmpSymbol.fieldIndex = 4;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;

		tmpSymbol = new symbol();
		tmpSymbol.Name = "Langlauf";
		tmpSymbol.ActivImage = "LanglaufAktiv.gif";
		tmpSymbol.InactivImage = "LanglaufInaktiv.gif";
		tmpSymbol.Link = "langlauf/main.html";
		tmpSymbol.fieldIndex = 5;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;

		tmpSymbol = new symbol();
		tmpSymbol.Name = "Kontakt";
		tmpSymbol.ActivImage = "KontaktAktiv.gif";
		tmpSymbol.InactivImage = "KontaktInaktiv.gif";
		tmpSymbol.Link = "http://www.btc-herne.de/tinc?key=LjMZQh8Q";
		tmpSymbol.fieldIndex = 6;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;

		tmpSymbol = new symbol();
		tmpSymbol.Name = "Taekwondo";
		tmpSymbol.ActivImage = "TaekwondoAktiv.gif";
		tmpSymbol.InactivImage = "TaekwondoInaktiv.gif";
		tmpSymbol.Link = "Taekwondo/main.html";
		tmpSymbol.fieldIndex = 7;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;
		
		tmpSymbol = new symbol();
		tmpSymbol.Name = "Termine";
		tmpSymbol.ActivImage = "TermineAktiv.gif";
		tmpSymbol.InactivImage = "TermineInaktiv.gif";
		tmpSymbol.Link = "termine/main.html";
		tmpSymbol.fieldIndex = 8;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;

		tmpSymbol = new symbol();
		tmpSymbol.Name = "Verschiedenes";
		tmpSymbol.ActivImage = "VerschiedenesAktiv.gif";
		tmpSymbol.InactivImage = "VerschiedenesInaktiv.gif";
		tmpSymbol.Link = "verschied/main.html";
		tmpSymbol.fieldIndex = 9;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;

		tmpSymbol = new symbol();
		tmpSymbol.Name = "Volleyball";
		tmpSymbol.ActivImage = "VolleyballAktiv.gif";
		tmpSymbol.InactivImage = "VolleyballInaktiv.gif";
		tmpSymbol.Link = "volleyball/main.html";
		tmpSymbol.fieldIndex = 10;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;
		
		tmpSymbol = new symbol();
		tmpSymbol.Name = "Vorstand";
		tmpSymbol.ActivImage = "VorstandAktiv.gif";
		tmpSymbol.InactivImage = "VorstandInaktiv.gif";
		tmpSymbol.Link = "vorstand/main.html";
		tmpSymbol.fieldIndex = 11;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;		

		// change symbolCount to 11 before activate this code
		/*		
		tmpSymbol = new symbol();
		tmpSymbol.Name = "<newName>";
		tmpSymbol.ActivImage = "<newActivImage>";
		tmpSymbol.InactivImage = "<newInactivImage>";
		tmpSymbol.Link = "<newLink>";
		tmpSymbol.fieldIndex = 12;
		symbols[tmpSymbol.fieldIndex] = tmpSymbol;		
		*/				
	}

	// end configuration

	// ----------------------------------------
	// Better leave the following code alone!!!
	// ---------------------------------------- 

	var fieldCount = 16;	// number of fields
	var rows = 4;			// number of rows
	var cols = 4;			// number of cols
	
	var fields = new Array(fieldCount-1);		// logical fields
	var symbols = new Array(symbolCount-1);		// logical symbols

	var activ;				// window interval
	var i;					// counter

	// ====================================
	// internal objects
	// ====================================
	function point(X, Y)
	{
		this.x = X;
		this.y = Y;
	}
	
	function field()
	{
		this.symbolIndex;
	}
	
	function symbol()
	{
		this.Name;
		this.ActivImage;
		this.InactivImage;
		this.fieldIndex;
		this.Link;
	}
	
	// ====================================
	// little helpers
	// ====================================
	function IndexToXY(index)
	{
		// returns given index as point
		// % = mod, div doesn't exists		
		return new point(index % cols , (index-(index%cols)) / cols);
	}
	
	function XYToIndex(intpoint)
	{
		// returns given point as index
		return intpoint.y * cols + intpoint.x;
	}
	
	function checkPoint(inppoint)
	{
		// returns
		// true : vitual field belongs to playground
		// false: vitual field belongs not to playground
		
		if 	(
				inppoint.x >= 0 && 
				inppoint.x <= cols-1 && 
				inppoint.y >= 0 &&
				inppoint.y <= rows-1
			)
		
			return true;		
		else
			return false;
	}
	
	function ArrayToString(inpArray)
	{
		// returns given array as String, where 
		// the Valus appear in a comma seperated list
		
		var tmpString = "";
		
		for (i = 0; i < inpArray.length; i++)
		{
			tmpString +=  inpArray[i];
			tmpString +=  ",";
		}
		return tmpString;
	}	
	
	// ====================================
	// Initialize
	// ====================================
	function initFields()
	{
		var tmpField;
		var i;
		
		for (i=0; i < fieldCount; i++)
		{
			tmpField = new field();
			
			if (i < symbolCount)
			{
				tmpField.symbolIndex = i;
			}
			else
			{
				tmpField.symbolIndex = -1;
			}
			
			fields[i] = tmpField;
		}
	}
	
	// ====================================
	// Function
	// ====================================
	function changeField(inpField1, inpField2)
	{
		
		// changes logical fields
		
		var tmpSymbolIndex;
		var tmpFieldIndex;
		
		tmpSymbolIndex = fields[inpField1].symbolIndex;		
		fields[inpField1].symbolIndex = fields[inpField2].symbolIndex;
		fields[inpField2].symbolIndex = tmpSymbolIndex;
		
		tmpSymbolIndex = fields[inpField1].symbolIndex;
		if (tmpSymbolIndex != -1)
			symbols[tmpSymbolIndex].fieldIndex = inpField1;

		tmpSymbolIndex = fields[inpField2].symbolIndex;
		if (tmpSymbolIndex != -1)
			symbols[tmpSymbolIndex].fieldIndex = inpField2;

	}
			
	function setSymbols()
	{
		
		// sets smybols in start position
		// randoized!
		
		var rndFieldIndex1;
		var rndFieldIndex2;
		var i;
		
		for (i=0; i < 100; i++)
		{
			rndFieldIndex1 = Math.round(Math.random() * (fieldCount-1));
			rndFieldIndex2 = Math.round(Math.random() * (fieldCount-1));
		
			changeField(rndFieldIndex1, rndFieldIndex2);
		}
	}

	function getFreeNeighbours(inpSymbolIndex)
	{
		
		// gives back an array of free fields in neighbourhood
		// to given symbol
		
		var tmpPoint;
		var tmpTestPoint;
		var tmpTestIndex;
		var tmpPointList = new Array();
		
		tmpPoint = IndexToXY(symbols[inpSymbolIndex].fieldIndex);
			
		tmpTestPoint = new point(tmpPoint.x - 1, tmpPoint.y);
		if (checkPoint(tmpTestPoint))
		{
			tmpTestIndex = XYToIndex(tmpTestPoint);
			if (fields[tmpTestIndex].symbolIndex == -1)
				tmpPointList.push(XYToIndex(tmpTestPoint));
		}
			
		tmpTestPoint = new point(tmpPoint.x + 1, tmpPoint.y);
		if (checkPoint(tmpTestPoint))
		{
			tmpTestIndex = XYToIndex(tmpTestPoint);
			if (fields[tmpTestIndex].symbolIndex == -1)
				tmpPointList.push(XYToIndex(tmpTestPoint));
		}
		
		tmpTestPoint = new point(tmpPoint.x, tmpPoint.y - 1);
		if (checkPoint(tmpTestPoint))
		{
			tmpTestIndex = XYToIndex(tmpTestPoint);
			if (fields[tmpTestIndex].symbolIndex == -1)
				tmpPointList.push(XYToIndex(tmpTestPoint));
		}
		
		tmpTestPoint = new point(tmpPoint.x, tmpPoint.y + 1);
		if (checkPoint(tmpTestPoint))
		{
			tmpTestIndex = XYToIndex(tmpTestPoint);
			if (fields[tmpTestIndex].symbolIndex == -1)
				tmpPointList.push(XYToIndex(tmpTestPoint));
		}
		
		return tmpPointList;
	}
	

	function drawField(inpFieldIndex)
	{
		// paints given field 
		
		var tmpElement;
		var tmpSymbolIndex;
		
		tmpElement = document.getElementById("" + inpFieldIndex);
		tmpSymbolIndex = fields[inpFieldIndex].symbolIndex;
		
		if (tmpSymbolIndex != -1)
			tmpElement.style.backgroundImage = "url(" + symbols[tmpSymbolIndex].InactivImage + ")";
		else
			tmpElement.style.backgroundImage = "";
			
		tmpElement.title = "";	
	}
	
	function building()
	{		
		// paints empty fields
		// phase: buildung
		
		var tmpElement;
		var tmpFieldIndex;
		
		window.status = "building ... ";
		
		tmpFieldIndex = symbols[i].fieldIndex;
		tmpElement = document.getElementById("" + tmpFieldIndex);
		// tmpElement.style.backgroundImage = "url(Button01.gif)";
		tmpElement.style.backgroundImage = "url(" + buildingImage + ")";
		i++;
		
		if (i > symbolCount-1)
		{
			window.clearInterval(activ);				
			
			// draw all symbols
			for (i=0; i < symbolCount; i++)
			{
				tmpFieldIndex = symbols[i].fieldIndex;
				drawField(tmpFieldIndex);
			}
			
			window.status = "building ... finished!";
			
			// start moving
			activ = window.setInterval("moving()", movingInterval);						
		}

	}
	
	function moving()
	{
		
		// moves a symbol
		// randomize!
		
		var tmpMoved = false;
		var tmpSymbolIndex;
		var tmpFieldIndex;
		var tmpPointList;
		var tmpDestinationIndex;
		var tmpDestinationFieldIndex;
		
		while (tmpMoved == false)
		{
			tmpSymbolIndex = Math.round(Math.random() * (symbolCount-1));			
			tmpFieldIndex = symbols[tmpSymbolIndex].fieldIndex; 			
			
			tmpPointList = getFreeNeighbours(tmpSymbolIndex);
			
			if (tmpPointList.length > 0)
			{
				tmpDestinationIndex = Math.round(Math.random() * (tmpPointList.length-1));
				tmpDestinationFieldIndex = tmpPointList[tmpDestinationIndex];				
				
				window.status = "moving: " + tmpFieldIndex + " to " +  tmpDestinationFieldIndex;
				
				changeField(tmpFieldIndex, tmpDestinationFieldIndex);
				
				drawField(tmpFieldIndex);
				drawField(tmpDestinationFieldIndex);
				
				tmpMoved = true;
			}
		}
	}
	
	// ====================================
	// getting started
	// ====================================
	
	// called at body load
	function start()
	{

		// inits
		initSymbols();		
		initFields();
		
		// setter
		setSymbols();
		
		// start
		i = 0;
		activ = window.setInterval("building()", buildingInterval);
	}	
	
	// ====================================
	// Event Handler
	// ====================================
	
	// handles onmouseover
	function setActiveBackground(x)
	{
		var tmpFieldIndex;
		var tmpSymbolIndex;
		
		tmpFieldIndex = eval(x.id);
		
		tmpSymbolIndex = fields[tmpFieldIndex].symbolIndex;
		
		if (tmpSymbolIndex != -1)
		{			
			x.style.backgroundImage = "url(" + symbols[tmpSymbolIndex].ActivImage + ")";
			x.title = symbols[tmpSymbolIndex].Name;
		}

	}	

	// handles onmouseout
	function setInActiveBackground(x)
	{
		var tmpFieldIndex;
		var tmpSymbolIndex;
		
		tmpFieldIndex = eval(x.id);
		
		tmpSymbolIndex = fields[tmpFieldIndex].symbolIndex;
		
		if (tmpSymbolIndex != -1)
		{
			x.style.backgroundImage = "url(" + symbols[tmpSymbolIndex].InactivImage + ")";
		}

	}	

	// handles onclick
	function setLocation(x)
	{
		
		var tmpFieldIndex;
		var tmpSymbolIndex;
		
		tmpFieldIndex = eval(x.id);
		
		tmpSymbolIndex = fields[tmpFieldIndex].symbolIndex;
		
		if (tmpSymbolIndex != -1)
		{
			window.location.href = symbols[tmpSymbolIndex].Link;
		}		
	}
}