var allProfiles = new Array();
var dummy1 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit13.png\" \/>"+"<\/div>";
var dummy2 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit12.png\" \/>"+"<\/div>";
var dummy3 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit7.png\" \/>"+"<\/div>";
var dummy4 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit6.png\" \/>"+"<\/div>";
var dummy5 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit14.png\" \/>"+"<\/div>";
var dummy6 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit16.png\" \/>"+"<\/div>";
var dummy7 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit1.png\" \/>"+"<\/div>";
var dummy8 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit3.png\" \/>"+"<\/div>";
var dummy9 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit4.png\" \/>"+"<\/div>";
var dummy10 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit10.png\" \/>"+"<\/div>";
var dummy11 = "<div class=\"profileImage\">"+"<img src=\"http://u.jimdo.com/www25/o/s9f98a61d0ceb00e9/userlayout/img/auc-mit2.png\" \/>"+"<\/div>";
var clearRow = "<br style=\"clear:both;\"\/>";

var tableRow1 = new Array(dummy11, "fohrler", "schärer", dummy1, "fritsche", dummy2, clearRow);
var tableRow2 = new Array(dummy3, dummy4, "taubman", dummy5, dummy4, "kunz", clearRow);
var tableRow3 = new Array("maier", "besedes", dummy6, dummy7, "zimmermann", dummy8, clearRow);
var tableRow4 = new Array(dummy6, dummy3, dummy2, dummy11	, dummy9, "jansen", clearRow);
var tableRow5 = new Array("hurschler", dummy6, "lässer", dummy4, dummy10, "bühlmann", clearRow);

var profileTable = new Array(tableRow1, tableRow2, tableRow3, tableRow4, tableRow5);

/**
Constructor for profiles. Profiles will be created
on each load of the page.

@param vorname: First name of the person, first letter should be a capital
@param nachname: Last name of the person, first letter should be a capital
@param posY: Vertical profile image position in table
@param posX: Horizontal profile image position in table
@param kategorien: Array holding each category the profile should appear in
@param bildHell: Profile image with "active" look & feel
@param bildDunkel: Profile image with "inactive" look & feel
*/
function profile(vorname, nachname, linkref, posY, posX, kategorien, bildHell, bildDunkel) {
  this.vorname = vorname;
  this.nachname = nachname;
  this.linkref = linkref;
  this.posX = posX;
  this.posY = posY;
  this.kategorien = kategorien;
  this.bildHell = bildHell;
  this.bildDunkel = bildDunkel;

  /* Converts the array of kategories to a string */
  this.showCategories = function() {
    var catOutput = "";
    for (i=0; i<kategorien.length; i++) {
        catOutput = catOutput + kategorien[i] + "<br \/>";
    }
    return catOutput;
  }

  /* Returns the complete first and last name as a string */
  this.showName = function() {
    var newVorname = vorname.charAt(0).toUpperCase()+vorname.substr(1);
    var newNachname = nachname.charAt(0).toUpperCase()+nachname.substr(1);

    return newVorname + " " + newNachname;
  }

  allProfiles.push(this); //add to the array that holds all profiles

  /**
  Mouseover magic: Hovering a profile image with "active" look & feel will 
  highlight the text link in the navigation. Both the image and the text
  link are given a unique ID sharing the first and last name and being
  identified by the addition "TEXT" or "IMG".
  The image highlighting is done by layering the dark and the light profile
  images and adjusting the top image's opacity on mouseover / mouseout.
  */
  var mouseOverEffect = "onmouseover=\"document.getElementById('"+vorname+nachname+"IMG').style.opacity='0'; document.getElementById('"+vorname+nachname+"IMG').style.filter='alpha(opacity=0)'; document.getElementById('"+vorname+nachname+"TEXT').setAttribute('className', 'profileTextLinkActive'); document.getElementById('"+vorname+nachname+"TEXT').setAttribute('class', 'profileTextLinkActive');\"";
  var mouseOutEffect = "onmouseout=\"document.getElementById('"+vorname+nachname+"IMG').style.opacity='1';document.getElementById('"+vorname+nachname+"IMG').style.filter='alpha(opacity=100)';document.getElementById('"+vorname+nachname+"TEXT').setAttribute('className', 'profileTextLinkInactive'); document.getElementById('"+vorname+nachname+"TEXT').setAttribute('class', 'profileTextLinkInactive');\"";

  var categoryName = "";
  
  /* The referring URL might contain information on the 'category' 
  which profiles should be displayed. E.g. "?category" */
  if (location.search && location.search.substring(1)!="") {
    categoryName = unescape(location.search.substring(1));
  }
  /* If it doesn't, try to catch the category's name in the URL */
  else {
    categoryName = unescape(getCategory());
  }

  /* A profile should only have an active look & feel if the current
  category is part of the categories to which this person is assigned */
  if(categoryName!="" && categoryName in oc(kategorien)) {
    profileTable[posY-1][posX-1] = "<div class=\"profileImage\" style=\"background-image:url("+bildHell+")\">"+"<a href=\""+linkref+"?"+categoryName.charAt(0).toLowerCase()+categoryName.substr(1)+"\">"+"<img id=\""+vorname+nachname+"IMG\" "+mouseOverEffect+" "+mouseOutEffect+" src=\""+bildDunkel+"\"\/>"+"<\/a><\/div>";
  }
  /* If the profile should appear inactive just add the dark profile image */
  else {
    profileTable[posY-1][posX-1] = "<div class=\"profileImage\">"+"<img src=\""+bildDunkel+"\"\/>"+"<\/div>";
  }
}

/**
To display the navigation properly it's necessary to first remove
all profiles from the array that do not belong to the given category
and therefore shouldn't appear in the category's profile listing.

@param categoryNameParam: Name of the category to filter
*/
function removeFromArray(categoryNameParam) {
  var categoryName = categoryNameParam;

  var i = (allProfiles.length)-1;
  while (i>=0) {
    if(categoryName!="" && categoryName in oc(allProfiles[i].kategorien)) {

    }
    else {
      allProfiles.splice(i, 1);
    }
    i--;
  }
}

/**
Add text links to the navigation bar based on the profiles listed 
in the allProfiles array. You might want to filter the array with
removeFromArray() in advance to get all profiles that are
assigned to a particular category. To add links the second
level navigation container (mainNav2) will be cleared.

@param withTable: If the navigation is generated next to a table
                  with profile images all text links should contain
				  the mouseover magic to highlight the profile
				  images upon hover. (BOOLEAN)
*/
function addToNavigation(withTable) {
  allProfiles.sort(sortSurname); //profiles should be arranged alphabetically

  var categoryName = "";

  /* The referring URL might contain information on which category's 
  profiles should be displayed here. E.g. "?category" */
  if (location.search.substring(1) && location.search.substring(1)!="") {
    categoryName = location.search.substring(1).charAt(0).toUpperCase()+location.search.substring(2);
  }
  /* If it doesn't, try to catch the category's name in the URL */
  else {
    categoryName = getCategory();
  }
  
  var newProfileList = allProfiles.slice(0); //get a copy of the allProfiles array
  removeFromArray(categoryName); //remove all profiles which are not assigned to the current category

  var whichClass = "";

  if (document.URL.indexOf("www25")==-1) { //execute only in view-mode
    var oldHTML = document.getElementById('mainNav2').innerHTML;

    document.getElementById('mainNav2').innerHTML = ""; //clear second level navigation

    var category = document.createElement("li");

	/* If the category name appears in the anywhere in the current URL 
	the link should have an active look & feel */
    if (decodeURI(document.URL).indexOf(categoryName.charAt(0).toLowerCase()+categoryName.substring(1))!=-1) {
      whichClass = "profileTextLinkActive";
    }
	/* ...and if it doesn't, its look & feel should be inactive */
    else {
      whichClass = "profileTextLinkInactive";
    }

	/* This adds all category names to the navigation until
    the category name matches the category in the current URL */
    var addCat = true;
    for (i=0; i<categories.length; i++) {
      if (categories[i]!=unescape(categoryName) && addCat) {
        var newLink = document.createElement("li");
        newLink.innerHTML = "<a class=\""+"profileTextLinkInactive"+"\" href=\"\/mit\/"+categories[i].charAt(0).toLowerCase()+categories[i].substring(1)+"\/\">"+categories[i].charAt(0).toUpperCase()+categories[i].substring(1)+"<\/a>";
        document.getElementById('mainNav2').appendChild(newLink);
      }
      else {
        addCat = false; //set to false when the category in the URL matches the category name
      }
    }
	
	/* Adds the current category name OR the first and last name of
    the person's profile that is currently displayed */
    var addFirstName = "";
    for (i=0; i<newProfileList.length; i++) {
      if (newProfileList[i].nachname.indexOf(categoryName)!=-1) {
        if (newProfileList[i].vorname=="") { //special case for 'Müslüm'
          addFirstName = "<br>";
          categoryName = newProfileList[i].nachname;
        }
        else {
          addFirstName = "<br>"+newProfileList[i].vorname + " ";
          categoryName = newProfileList[i].nachname;
        }
      }
    }

    category.innerHTML = "<a class=\""+whichClass+"\" href=\"\/mit\/"+categoryName.charAt(0).toLowerCase()+categoryName.substring(1)+"\/\">"+addFirstName+categoryName+"<\/a>";
    
    document.getElementById('mainNav2').appendChild(category); //add category OR profile heading
    document.getElementById('mainNav2').appendChild(document.createElement("br")); //add space

	/* Adds all the profiles to the navigation */
    for (i=0; i<allProfiles.length; i++) {
      var newLink = document.createElement("li");
      whichClass = "";

	  /* Is this profile currently being displayed? If so, give it an active look & feel. */
      if (decodeURI(document.URL).indexOf(allProfiles[i].nachname.charAt(0).toLowerCase()+allProfiles[i].nachname.substring(1))!=-1) {
        whichClass = "profileTextLinkActive";
      }
	  /* If not, it should have an inactive look & feel */
      else {
        whichClass = "profileTextLinkInactive";
      }

	  /* Is there a table with profile images? Then mouseover magic should be added to the text links */
      if (withTable) {
        var mouseOverEffect = "onmouseover=\"document.getElementById('"+allProfiles[i].vorname+allProfiles[i].nachname+"IMG').style.opacity='0'; document.getElementById('"+allProfiles[i].vorname+allProfiles[i].nachname+"IMG').style.filter='alpha(opacity=0)';\"";
        var mouseOutEffect = "onmouseout=\"document.getElementById('"+allProfiles[i].vorname+allProfiles[i].nachname+"IMG').style.opacity='1';document.getElementById('"+allProfiles[i].vorname+allProfiles[i].nachname+"IMG').style.filter='alpha(opacity=100)';\"";
      }
	  /* Leave out the magic if there's no table of profile images */
      else {
        var mouseOverEffect = "";
        var mouseOutEffect = "";
      }

      newLink.innerHTML = "<a id=\""+allProfiles[i].vorname+allProfiles[i].nachname+"TEXT"+"\" "+mouseOverEffect+" "+mouseOutEffect+" class=\""+whichClass+"\" href=\""+allProfiles[i].linkref+"?"+categoryName.charAt(0).toLowerCase()+categoryName.substring(1)+"\">"+allProfiles[i].showName()+"<\/a>";
      document.getElementById('mainNav2').appendChild(newLink); //add text link to navigation
    }

    document.getElementById('mainNav2').appendChild(document.createElement("br")); //add space

	/* Display all remaining category names that haven't been listed yet */
    var addCat = true;
    for (i=0; i<categories.length; i++) {
      if (categories[i]!=categoryName && !addCat) {
        var newLink = document.createElement("li");
        newLink.innerHTML = "<a class=\""+"profileTextLinkInactive"+"\" href=\"\/mit\/"+categories[i].charAt(0).toLowerCase()+categories[i].substring(1)+"\/\">"+categories[i].charAt(0).toUpperCase()+categories[i].substring(1)+"<\/a>";
        document.getElementById('mainNav2').appendChild(newLink);
      }
      else if (categories[i]==categoryName) {
        addCat = false;
      }
    }
    document.getElementById('mainNav2').appendChild(document.createElement("br"));
  }
}

/**
Used for converting arrays. Leave this unchanged!
*/
function oc(a)
{
  var o = {};
  for(var i=0;i<a.length;i++)
  {
    o[a[i]]='';
  }
  return o;
}

/**
Used for sorting the allProfiles array
alphabetically based on the persons' last names
*/
function sortSurname(a, b) {
var nameA = a.nachname.toLowerCase();
var nameB = b.nachname.toLowerCase();

var i=0;

  if (nameA < nameB) {
    i=-1;
  }
  else if (nameA > nameB) {
    i=1;
  }
  return i;
}

/**
Looks up the current URL and returns the name of the
second level page name. If the URL is http://ABC.DE/FGH/IJK/LMN/
then it will return "IJK". Do not use outside the
addToNavigation() function!

@return: The category name as a string
*/
function getCategory() {
  var categoryName = "";
  var whereIsTheChar = "";
  var theURL = "";

  if (document.URL!=null) {
    theURL = decodeURI(document.URL);
    if (theURL.indexOf('http:')!=-1) {
      theURL = theURL.substring(7, (theURL.length-1));
    }
  
    for (i=0; i<2; i++) {
      whereIsTheChar = theURL.indexOf('/');
      theURL = theURL.substring(whereIsTheChar+1, theURL.length);
    }
    
    if (theURL.indexOf('/')!=-1) {
      whereIsTheChar = theURL.indexOf('/');
      categoryName = theURL.substring(0, whereIsTheChar+1);
    }
    else {
      categoryName = theURL.substring(0, theURL.length);
    }

    categoryName = (categoryName.charAt(0).toUpperCase() + categoryName.substr(1));
  
    return categoryName;
  }
}

/**
Displays the profile table based on the array holding
all profile information.

@return: A <div> containing the profile image table
*/
function displayTable() {
  var result = "";
  for (m=0; m<5; m++) {
    result = result + "<div class=\"profileTableRowStyle\">";
    result = result + profileTable[m].join("");
    result = result + "<\/div>";
  }

  return "<div id=\"displayTable\">"+result+"<\/div>";
}