/**
 * osv-simpletablebrowser1-1.js version 1.1
 *
 * copyright 2002, Heiko Bebensee
 *
 * 
 * START CHANGES FOR VERSION 1.1 -----------------------------------------------
 *
 * the version 1.1 allows to give a description for a game of a specified 
 * 'Spieltag'. all this code has to be placed before the standard version 1.0
 * code will be placed. as of this version the <div></div> area will be shown
 * by moving the mouse over the the NAME OF THE FIRST TEAM.
 *
 * START SAMPLE CODE --
 *
 * // set the width of the <div></div> area
 * gameDes_posWidth = "500px";
 * // set the background color
 * gameDes_bgcolor = "cornsilk";
 *
 * // set the actual description of the game; '1' is for the first 'Spieltag'
 * addGameDescription(1,"Team1-Team2","<b>Something about the game!");
 *
 * -- END 
 *
 * you can place as many descriptions as you want. you can also change the
 * 'width' and 'bgcolor' before adding a new description.
 *
 *
 *
 * the version 1.1 allows to give a description for a team of a specified
 * 'Spieltag'. all this code has to be placed before the standard version 1.0
 * code will be placed. as of this version the <div></div> area will be shown
 * by moving the mouse over the the NAME OF THE TEAM.
 *
 * START SAMPLE CODE --
 *
 * // set the width of the <div></div> area
 * des_posWidth = "500px";
 * // set the background color
 * des_bgcolor = "cornsilk";
 *
 * // set the actual description of the team; '1' is for the first 'Spieltag'
 * addDescription(1,"Team","<b>Something about the team!");
 *
 * -- END 
 *
 * ------------------------------------------------------------------------- END
 *
 * a simple Table Browser.
 * displays a selected table on request. the previously displayed table will be
 * hidden. A request for a non existing table will result in an poping 
 * message box, explaining the failure; the previously displayed table will be
 * left unchanged.
 *
 * relying on CSS Classes which have to be existent on the page using this 
 * script:
 *
 * .osvhighlight // for the (searchString) entry in the table
 * .osvhighlightWon // for the games in case of a won game
 * .osvhighlightDraw // for the games in case of a draw game
 * .osvhighlightLost //for the games in case of a lost game
 *
 * .osvtitlestyle // for the title
 * .osvgamesstyle // for the games
 * .osvtablestyle // for the table
 *
 * START OF A SIMPLE EXAMPLE ---------------------------------------------------
 *
 * .osvhighlight { color: red }
 * .osvhighlightWon { color: green }
 * .osvhighlightDraw { color: blue }
 * .osvhighlightLost { color: red }
 * .osvtitlestyle { font-weight: bold; font-size: 15pt}
 * .osvgamesstyle { font-weight: bold }
 * .osvtablestyle { font-weight: bold }
 *
 * ------------------------------------------------------------------------- END
 *
 *
 * ON HOW TO USE IT ------------------------------------------------------------
 *
 * 1. create a <script></script> area in the body part of your page.
 *
 * 2. to change the default search string call the function:
 * - setSearchString("Team Name");
 *
 * 3. to change the default location of the table call the function:
 * - setLocationTLWH("top","left","width","height");
 *
 * 4. you place a line like this for every title:
 * - addTitle(1,"title of table one"); // 1 is for table 1
 * and a line like this for every table:
 * - addGamesTable(1,"the games","the table"); // 1 is for table 1
 * you will get the games and table data from "Tabelle 1.011" and later?
 *
 * 5. repeat step 4 as often as you need.
 *
 *
 * optional:
 * 1. highlighting teams at the top and bottom
 * - setGoingUp("To Position", "Color");
 * - setGoingDown("From Position", "Color");
 *
 * ------------------------------------------------------------------------- END
 *
 *
 * START OF A SIMPLE EXAMPLE ---------------------------------------------------
 *
 * <script>
 *
 * setSearchString("Oldenburger SV");
 * setLocationTLWH("60px","25px","800px","400px");
 *
 * <!-- optional -->
 * setGoingUp(2,"green");
 * setGoingDown(11,"brown"); 
 *
 * ... 
 *
 * </script>
 *
 * ------------------------------------------------------------------------- END
 *
 */


// the text to look for;
var searchString = "Oldenburger SV";


/**
 * changes the default values of searchString.
 *
 * @param  sString  the string to search for. 
 *
 */
function setSearchString(sString) {
  if ( sString.length > 0 )
	  searchString = sString;
}


// the top position (CSS) of the table 
var posTop = "60px";
// the left position (CSS) of the table
var posLeft = "25px";
// the width (CSS) of the table
var posWidth = "800px"; 
// the height (CSS) of the table
var posHeight = "400px"; 


/**
 * changes the default values of the "top" and "left" position of the table.
 *
 * @param  top  the "top" postion (CSS) of the table 
 *
 * @param  left  the "left" position (CSS) of the table
 *
 * @param  width  the "width" (CSS) of the table 
 *
 * @param  height  the "height" (CSS) of the table
 *
 */
function setLocationTLWH(top,left,width,height) {

  posTop = top;
	posLeft = left;
	posWidth = width;
	posHeight = height;
}

 
// stores the tables 
var a_tables = new Array();
// stores the games
var a_games = new Array();
// stores the titles ( displayed above the games and table ) 
var a_titles = new Array();
// keeps track of the position of the (searchString) at the single "Spieltage"
var a_positions = new Array();




/**
 * adds the games and tables to the arrays where they are stored.
 *
 * @param  id  the "Spieltag"; array index 
 *
 * @param  game  the games for this "Spieltag". the string has to end with: ,
 *
 * @param  table  the table for this "Spieltag". the string has to end with: ,
 */
function addGamesTable ( id, game, table ) {

  a_games[id] = game;
  a_tables[id] = table;
  document.write('<div id="Table' + id + '" style="position: absolute; top: ' +
	  posTop + '; left: ' + posLeft + '; width: ' + posWidth + '; height: ' + 
		posHeight + '; visibility: hidden">');
	makeOSVTitles(id);
	makeOSVGames(id);
  makeOSVTable(id);
  document.write('</div>');
}


/**
 * deprecated!
 */
function addTable ( id, table ) {
  addGamesTable(id,"",table);
}


/**
 * adds a title for this "Spieltag". Could have been done together with the
 * games and table.
 *
 * @param  id  the "Spieltag"; array index 
 *
 * @param  game  the title for this "Spieltag"
 *
 */
function addTitle ( id, title ) {
  a_titles[id] = title;
}


/**
 * creates the title.
 *
 * @param  id  the "Spieltag"; array index 
 *
 */
function makeOSVTitles ( id ) {

  // go back if there is no title
  if ( a_titles[id] == null )
	  return;

  document.write('<center><br><p class="osvtitlestyle">');
  document.write(a_titles[id]);
  document.write('</p><hr></center><br>');
}


/**
 * creates the games. searches for the (searchString) string for a special
 * display.
 * uses: CSS Classes
 * - osvgamestyle, osvhighlightWon, osvhighlightDraw, osvhighlightLost
 * uses: variables
 * - a_gameDescriptions[id]
 *   * the <div></div> area will be shown if the mouse moves over the FIRST team
 *
 * @param  id  the "Spieltag"; array index 
 *
 */
function makeOSVGames ( id ) {

  var ma = a_games[id].split(",");
  var count = ma.length - 1;
//  window.alert("Zahl der Elemente: " +ma.length );
  document.write('<center><table class="osvgamesstyle" border="0" cellpadding="0" cellspacing="0" width="90%">');
  for ( var i = 0; i < count/6; i++ ) {

    var which = "";
    if ( ma[i*6+0].search(searchString) != -1 ) {
      if ( ma[i*6+3] > ma[i*6+5] )
			  which = "osvhighlightWon";
			else if ( ma[i*6+3] == ma[i*6+5] )
			  which = "osvhighlightDraw";
			else
			  which = "osvhighlightLost";
		}
		else if ( ma[i*6+2].search(searchString) != -1 ) {
      if ( ma[i*6+3] < ma[i*6+5] )
			  which = "osvhighlightWon";
			else if ( ma[i*6+3] == ma[i*6+5] )
			  which = "osvhighlightDraw";
			else
			  which = "osvhighlightLost";
		}
		
		if ( which.length > 0 )
      document.write('<tr class="' + which + '" onmouseover=\'setOSVPointer(this,\"#ffffff\")\' onmouseout=\'unsetOSVPointer(this)\'>');
    else
      document.write('<tr onmouseover=\'setOSVPointer(this,\"#ffffff\")\' onmouseout=\'unsetOSVPointer(this)\'>');
	
		// the game to look for
		game = ma[i*6+0] + "-" + ma[i*6+2];
    if ( a_gameDescriptions[id] == null || a_gameDescriptions[id][game] == null )
      document.write('<td align="left" width="39%">'+ma[i*6+0]+'</td>');
		else {
			var nn = "GameDescription" + id + game;
      document.write("<td onmousemove=\"followById('"+nn+"')\" onmouseover=\"showById('"+nn+"')\" onmouseout=\"hideById('"+nn+"')\" align=\"left\" width=\"39%\">"+ma[i*6+0]+'</td>');
		}

    document.write('<td align="center" width="3%">'+ma[i*6+1]+'</td>');
    document.write('<td align="left" width="34%">'+ma[i*6+2]+'</td>');

    document.write('<td align="right" width="20%">'+ma[i*6+3]+'</td>');
    document.write('<td align="center" width="3%">'+ma[i*6+4]+'</td>');
    document.write('<td align="left">'+ma[i*6+5]+'</td>');
		
		document.write('</tr>');
	}
  document.write('</table></center>');
  document.write('<br><br>');
}


/**
 * for highlighting up to position...
 */
var stb_goingUp = 2;
var stb_goingUpColor = "green";

function setGoingUp ( pos, color ) {
  if ( pos != null )
	  stb_goingUp = pos;
	if ( color != null )
	  stb_goingUpColor = color;
}
/**
 * for highlighting from position...
 */
var stb_goingDown = 11;
var stb_goingDownColor = "brown";

function setGoingDown ( pos, color ) {
  if ( pos != null )
	  stb_goingDown = pos;
	if ( color != null )
	  stb_goingDownColor = color;
}


/**
 * creates the table. searches for the (searchString) string for a special
 * display.
 * uses: CSS Classes
 * - osvtablestyle
 * uses: variables
 * - a_descriptions[id]
 *   * the <div></div> area will be shown if the mouse moves over the TEAM NAME
 *
 * @param  id  the "Spieltag"; array index 
 *
 */
function makeOSVTable ( id ) {

  var ma = a_tables[id].split(",");
  var count = ma.length - 1;
//  window.alert("Zahl der Elemente: " +ma.length );
  document.write('<center><table class="osvtablestyle" border="0" cellpadding="0" cellspacing="0" width="90%">');

  for ( var i = 0; i < count/13; i++ ) {
	
	  document.write('<tr ');
		if ( i < stb_goingUp ) {
		  document.write('style="background-color: ' + stb_goingUpColor + '" ');
		}
		else if ( i >= (stb_goingDown-1) ) {
		  document.write('style="background-color: ' + stb_goingDownColor + '" ');
		}
		
    if ( ma[i*13+1].search(searchString) != -1 ) {
      document.write('<tr class="osvhighlight" onmouseover=\'setOSVPointer(this,\"#ffffff\")\' onmouseout=\'unsetOSVPointer(this)\'>');
			// this if for a special treat
			a_positions[id] = i+1;
	  }
    else
      document.write('<tr onmouseover=\'setOSVPointer(this,\"#ffffff\")\' onmouseout=\'unsetOSVPointer(this)\'>');

    document.write('<td align="right">'+ma[i*13+0]+'</td>');

			// this if for a special treat
    if ( ma[i*13+1].search(searchString) != -1 ) {
      if ( a_positions[id-1] != null ) {
//alert( a_positions[id-1] );
      document.write('<td align="center">(' + a_positions[id-1] + '.)</td>');
  		}
  	  else
        document.write('<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>');
		}
	  else
      document.write('<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>');
				

    if ( a_descriptions[id] == null || a_descriptions[id][ma[i*13+1]] == null )
		  document.write('<td align="left">'+ma[i*13+1]+'</td>');
		else {
			var nn = "Description" + id + ma[i*13+1];
		  document.write("<td onmousemove=\"followById('"+nn+"')\" onmouseover=\"showById('"+nn+"')\" onmouseout=\"hideById('"+nn+"')\" align=\"left\">"+ma[i*13+1]+'</td>');
		}
		
		
    document.write('<td width="5%" align="right">'+ma[i*13+2]+'</td>');

    document.write('<td width="5%" align="right">'+ma[i*13+3]+'</td>');

    document.write('<td width="5%" align="right">'+ma[i*13+4]+'</td>');

    document.write('<td width="5%" align="right">'+ma[i*13+5]+'</td>');

    document.write('<td>&nbsp;&nbsp;&nbsp;</td>');

    document.write('<td align="right">'+ma[i*13+6]+'</td>');
    document.write('<td align="center">'+ma[i*13+7]+'</td>');
    document.write('<td align="left">'+ma[i*13+8]+'</td>');
		
    document.write('<td align="right">'+ma[i*13+9]+'</td>');

    document.write('<td>&nbsp;&nbsp;&nbsp;</td>');

    document.write('<td align="right">'+ma[i*13+10]+'</td>');
    document.write('<td align="center">'+ma[i*13+11]+'</td>');
    document.write('<td align="left">'+ma[i*13+12]+'</td>');

    document.write('</tr>');


  }
  document.write('</table></center>');
}


// the name of the last table that was displayed ( current table )
var lastTableOpen = "";
// the id of ...
var lastTableOpenNumber = 0;


/**
 * closes the old table and opens a new one. If there is no such 'new' table
 * the old table will not be closed; and a message box pops up and says so.
 *
 * @param  id  the index position of the table to display; or 'p' for previous 
 *             and 'n' for next.
 *
 */
function switchOSVTable ( id ) {

  if ( id == "p" ) {
	  previousOSVTable();
		return;
	}
	else if ( id == "n" ) {
	  nextOSVTable();
		return;
	}

  var w = "Table"+id;

	// is there such an element?
	if (document.getElementById(w) == null) {
	  alert("No such Element!");
	  return;
	}

  // close the last opened, if one
	if (lastTableOpen.length > 0) {
    document.getElementById(lastTableOpen).style.visibility = "hidden";
		lastTableOpen = "";
	  }
	
	// open the new	
  document.getElementById(w).style.visibility = "visible";
  lastTableOpen = w;
	lastTableOpenNumber = Number(id);
//	alert(lastTableOpen + " - " + lastTableOpenNumber);
}


/**
 * display the previous table if possible and close the current table. there 
 * will be no message on failure.
 */
function previousOSVTable () {

  // test before trying to switch
	var p = Number(lastTableOpenNumber) - 1;
  var w = "Table" + p;
	if ( document.getElementById(w) == null )
	  return;

	// test passed; now switch
  switchOSVTable(lastTableOpenNumber-1);
}


/**
 * display the next table if possible and close the current table. there will
 * be no message on failure.
 */
function nextOSVTable () {
  
  // test before trying to switch
	var n = Number(lastTableOpenNumber) + 1;
  var w = "Table" + n;
	if ( document.getElementById(w) == null )
	  return;

	// test passed; now switch
  switchOSVTable(lastTableOpenNumber+1);
}


/**
 * the background-color which was taken by the last call of setOSVPointer. this
 * color will be used by unsetOSVPointer(tRow) to restore the old background-
 * color when the mouse leaves the table row.
 */
var stb_lastColor;


/**
 * set the background color of the specified table row to the background color
 * of the document (<body>).
 *
 * @param  tRow  the row to change the background color of
 *
 */
function unsetOSVPointer(tRow) {

  setOSVPointer(tRow,stb_lastColor);
}


/**
 * set the background color of the specified table row to the new color.
 *
 * @param  tRow  the row to change the background color of
 *
 * @param  color  the new background color of the row
 *
 */
function setOSVPointer(tRow,color) {

	// for a smart undo. 
	stb_lastColor = tRow.style.backgroundColor;

	tRow.style.backgroundColor = color; 
}


/**
 * contains a reference to a started dia show. needs to be used if a show hsa
 * to be stopped.
 */
var stb_diashow;


/**
 * PLEASE CALL startDiashow instead of this function.
 *
 *
 * a little dia show. browse down to '1' or up to 'a_tables.length-1'.
 *
 * @param  direction  "up" or "down"
 *
 * @param  from  '0' using up or 'a_tables.length' using down
 *
 * @param  delay  the time to wait in milliseconds before calling this function
 *                again
 *
 */
function diashow ( direction, from, delay ) {

  // check for valid index values
  if ( from == 0 || from > (a_tables.length-1) )
	  return;
		
	// switch the table
	switchOSVTable(from);

	// select the next table
  if ( direction == "up" )
	  from++;
	else
	  from--;

	// call this function again
	stb_diashow = window.setTimeout("diashow(\"" + direction + "\"," + from + "," + delay + ")",delay);
}

/**
 * always call this function to start a new dia show. stops a currently running 
 * diashow and starts a new one.
 *
 * @param  direction  "up" or "down"
 *
 * @param  from  '0' using up or 'a_tables.length' using down
 *
 * @param  delay  the time to wait in milliseconds before calling this function
 *                again
 *
 */
function startDiashow ( direction, from, delay ) {

  // stop a currently running dia show if there is one
	stopDiashow();
	
	// start a new dia show
	diashow(direction,from,delay);
}


/**
 * stops a currently running dia show if there is one.
 */
function stopDiashow () {

  // stop a currently running dia show if there is one
  if ( stb_diashow != null ) {
//	  alert("Stopping currently running dia show!");
		window.clearTimeout(stb_diashow);
	}
}



// stores the descriptions
var a_descriptions = new Array();

// the top position (CSS) of the description 
var des_posTop = "50px";
// the left position (CSS) of the description
var des_posLeft = "50px";
// the width (CSS) of the description
var des_posWidth = "300px";
// the background-color (CSS) of the description
var des_bgcolor = "green";


/**
 * adds a description for a team in the table. will be a hidden <div></div>.
 *
 * @see  makeOSVTable  for more info
 *
 * @param  id  the 'spieltag'
 *
 * @param  team  the name of the team to look for
 *
 * @param  what  the description data
 *
 */
function addDescription ( id, team, what ) {

  if ( a_descriptions[id] == null )
		a_descriptions[id] = new Array();

  a_descriptions[id][team] = what;

  document.write('<div id="Description' + id + team + '" style=" background-color: ' + 
	  des_bgcolor + '; position: absolute; z-index: 5; top: ' +
	  des_posTop + '; left: ' + des_posLeft + '; width: ' + des_posWidth + '; border: solid 2px black; visibility: hidden">');
	document.write(what);
  document.write('</div>');
}


// stores the descriptions
var a_gameDescriptions = new Array();

// the top position (CSS) of the description 
var gameDes_posTop = "50px";
// the left position (CSS) of the description
var gameDes_posLeft = "50px";
// the width (CSS) of the description
var gameDes_posWidth = "350px";
// the background-color (CSS) of the description
var gameDes_bgcolor = "green";


/**
 * adds a description for a game in the games. will be a hidden <div></div>.
 *
 * @see  makeOSVGames  for more info
 *
 * @param  id  the 'spieltag'
 *
 * @param  teams  the names of the teams to look for: 'Team1-Team2'
 *
 * @param  what  the description data
 *
 */
function addGameDescription ( id, teams, what ) {

  if ( a_gameDescriptions[id] == null )
		a_gameDescriptions[id] = new Array();

  a_gameDescriptions[id][teams] = what;

  document.write('<div id="GameDescription' + id + teams + '" style=" background-color: ' + 
	  gameDes_bgcolor + '; position: absolute; z-index: 5; top: ' +
	  gameDes_posTop + '; left: ' + gameDes_posLeft + '; width: ' + gameDes_posWidth + '; border: solid 2px black; visibility: hidden">');
	document.write(what);
  document.write('</div>');
}


/**
 * shows an element by its ID.
 *
 * @param  id  the ID of the element.
 */
function showById (id) {
  if(document.getElementById)
    document.getElementById(id).style.visibility = "visible";
}


/**
 * hides an element by its ID.
 *
 * @param  id  the ID of the element.
 */
function hideById (id) {
  if(document.getElementById)
    document.getElementById(id).style.visibility = "hidden";
}

/**
 * changes the position of an element by its ID.
 *
 * @param  id  the ID of the element.
 */
function followById (id) {
  if(document.getElementById) {
    document.getElementById(id).style.top = window.event.clientY + document.body.scrollTop + 10;
    document.getElementById(id).style.left = window.event.clientX + document.body.scrollLeft  + 10;
  }
}