var topElem = document.getElementById('filmliste_klammer');
var divArr = topElem.getElementsByTagName('DIV');
var elems = new Array();

// Breite, Höhe, Abstand zueinander, Abstand zum Fenster
var offsetTop = 232;

var elemW = 220;
var elemH = 167;
var elemGap = 20;
var elemBorder = 30;
var chosenW = elemW * 2 + elemGap;
var chosenH = elemH * 2 + elemGap;

var filmW = 220;
var filmH = 145;
var filmChosenW = filmW * 2 + elemGap;
var filmChosenH = filmH * 2 + elemGap + 22;

var max = 0;
var spalten = 0;

for (var i=0; i<divArr.length; i++)
{
  if (divArr[i].className == 'listenelement')
  {
    elems.push(divArr[i]);
  }
}

var chosen = '';
var filmChosen = '';
var aktPlayer = '';
var aktEinbetten = '';
var aktVersenden = '';

var browser = navigator.userAgent;
var msie = false;
var chrome = false;
var opera = false;
if (browser.lastIndexOf('MSIE') != -1) {
  msie = true;
}
if (browser.lastIndexOf('Chrome') != -1) {
  chrome = true;
}
if (browser.lastIndexOf('Opera') != -1) {
  opera = true;
}

var clipTime = 0;

function getWidth()
{
  var breite = window.innerWidth;
  if (msie == true) {
    breite = document.body.clientWidth;
  }
  return (breite);
}

function placeResize(e)
{
  var checkSpalten = getCols(getWidth());
  if (checkSpalten != spalten)
  {
    placeReset();
  }
}

window.onresize = placeResize;

function getCols(pM)
{
  var sp = Math.floor( (pM - elemBorder ) / (elemW + elemGap) ); // pRand * 2, falls Rand auch rechts eingehalten werden soll
  return (sp);
}

function getIndex(pE)
{
  for (var i=0; i<elems.length; i++)
  {
    if (elems[i] == pE)
    {
      return (i);
    }
  }
}

function getCoords(pE)
{
  var coords = new Array();
  coords[0] = pE.style.left;
  coords[1] = pE.style.top;
  coords[2] = pE.style.width;
  coords[3] = pE.style.height;
  for (var c=0; c <coords.length; c++)
  {
    var check = coords[c].indexOf('px');
    if (check != -1)
    {
      coords[c] = parseInt ( coords[c].substr(0, check) );
    }
  }
  return (coords);
}

function place(pType)
{
  max = getWidth();
  spalten = getCols(max);
  var column = 0;
  var row = 0;
  var id = 0;
  if (chosen != '')
  {
    var chosenNewX = getCoords(chosen)[0];
    var chosenNewY = getCoords(chosen)[1];
    // Ist das angeklickte Element das letzte in der Zeile, tauscht es die Positionen mit dem vorhergehenden
    var ind = getIndex(chosen);
    if ((ind + 1) % spalten == 0 && pType != 'audio')
    {
      chosen.style.left = getCoords(elems[ind - 1])[0] + 'px';
      chosen.style.top = getCoords(elems[ind - 1])[1] + 'px';
      chosenNewX = getCoords(elems[ind - 1])[0];
      chosenNewY = getCoords(elems[ind - 1])[1];
      id = ind - 1;
    }
    else
    {
      id = ind + 1;
      //alert(getCoords(elems[id])[0] + ' | ' + getCoords(elems[id])[1]);
    }
    //id = getIndex(chosen) + 1; // Ist ein Element angeklickt (chosen), werden die folgenden neu platziert
    column = id % spalten + 1;
    row = Math.floor (id / spalten);
    if (column > spalten - 1)
    {
      column = 0;
      row++;
    }
  }
  while (id < elems.length)
  {
    if (chosen != '')
    {
      var chosenNewW = chosenW;
      var chosenNewH = chosenH;
      if (pType == 'audio')
      {
        chosenNewW = elemW;
        chosenNewH = elemH;
      }
      if ( getCoords(elems[id])[0] >= chosenNewX && getCoords(elems[id])[0] < (chosenNewX + chosenNewW) && getCoords(elems[id])[1] >= chosenNewY && getCoords(elems[id])[1] < (chosenNewY + chosenNewH) )
      {
        elems[id].style.left = elemBorder + ((elemW + elemGap) * column) + 'px';
        elems[id].style.top = offsetTop + ((elemH + elemGap) * row) + 'px';
        if (column < spalten - 1)
        {
          column++;
        }
        else
        {
          column = 0;
          row++;
        }
      }
      else
      {
        id++;
        var newX = elemBorder + ((elemW + elemGap) * column);
        var newY = offsetTop + ((elemH + elemGap) * row);
        if (newX == getCoords(elems[id - 1])[0] && newY == getCoords(elems[id - 1])[1])
        {
          column++;
          if (column > spalten - 1)
          {
            column = 0;
            row++;
          }
        }
        if (elems[id] == chosen)
        {
          id++;
        }
        if (id < elems.length)
        {
          elems[id].style.left = elemBorder + ((elemW + elemGap) * column) + 'px';
          elems[id].style.top = offsetTop + ((elemH + elemGap) * row) + 'px';
          if (column < spalten - 1)
          {
            column++;
          }
          else
          {
            column = 0;
            row++;
          }
        }
      }
    }
    else
    {
      elems[id].style.left = elemBorder + ((elemW + elemGap) * column) + 'px';
      elems[id].style.top = offsetTop + ((elemH + elemGap) * row) + 'px';
      if (column < spalten - 1)
      {
        column++;
      }
      else
      {
        column = 0;
        row++;
      }
      id++;
    }
  }
  // Seitenservice und Fusszeile platzieren
  var abs = getCoords(elems[elems.length - 1])[1] + elemH;
  if (chosen != '')
  {
    var hC = getCoords(chosen)[1] + getCoords(chosen)[3];
    if (hC > abs)
    {
      abs = hC;
    }
  }
  document.getElementById('seitenservice').style.marginTop = (abs - 150) + 'px';
  //document.getElementById('fusszeile').style.marginTop = (abs - offsetTop) + 150 + 'px';
}

function groesser()
{
  filmChosen.style.width = filmChosenW + 'px';
  filmChosen.style.height = filmChosenH + 'px';
  chosen.style.width = chosenW + 'px';
  chosen.style.height = chosenH + 'px';
}

function zeigen(pElem)
{
  if (pElem != aktPlayer)
  {
    aktPlayer = pElem;
    /*if (opera == true && clipTime != 0) {
      aktPlayer.seek(clipTime);
    }*/
    filmChosen = aktPlayer.getParent();
    chosen = filmChosen.parentNode;
    if (filmChosen.className != 'audio')
    {
      groesser();
      place('');
    }
    else
    {
      place('audio');
    }
  }
}

function versenden(pElem)
{
  var e = document.getElementById(pElem);
  if (chosen != '')
  {
    if (chosen != e.parentNode)
    {
      placeReset();
      filmChosen = e;
      chosen = filmChosen.parentNode;
      groesser();
      place('');
    }
    else
    {
      if (filmChosen.className == 'audio')
      {
        groesser();
        place('');
      }
    }
  }
  else
  {
    filmChosen = e;
    chosen = filmChosen.parentNode;
    groesser();
    place('');
  }
  var tempArr = chosen.getElementsByTagName('DIV');
  for (var j=0; j < tempArr.length; j++)
  {
    if (tempArr[j].className == 'video_versenden')
    {
      aktVersenden = tempArr[j];
      einblenden(aktVersenden);
    }
  }
}

function einbetten(pElem)
{
  var e = document.getElementById(pElem);
  if (chosen != '')
  {
    if (chosen != e.parentNode)
    {
      placeReset();
      filmChosen = e;
      chosen = filmChosen.parentNode;
      groesser();
      place('');
    }
    else
    {
      if (filmChosen.className == 'audio')
      {
        groesser();
        place('');
      }
    }
  }
  else
  {
    filmChosen = e;
    chosen = filmChosen.parentNode;
    groesser();
    place('');
  }
  var tempArr = chosen.getElementsByTagName('DIV');
  for (var j=0; j < tempArr.length; j++)
  {
    if (tempArr[j].className == 'video_einbetten')
    {
      aktEinbetten = tempArr[j];
      // Embed-Code in Textarea
      var ta = aktEinbetten.getElementsByTagName('TEXTAREA')[0];
      if (ta.innerHTML == '')
      {
        ta.innerHTML = $f(pElem).embed().getEmbedCode();
      }
      einblenden(aktEinbetten);
    }
  }
}

function einblenden(pElem)
{
  pElem.style.display = 'block';
  if (msie == true || opera == true || chrome == true) {
    filmChosen.style.display = 'none';
  }
  /*if (opera == true && aktPlayer != '') {
    aktPlayer.stop();
    clipTime = aktPlayer.getTime();
  }*/
}

function ausblenden(pElem)
{
  pElem.style.display = 'none';
  if (msie == true || opera == true || chrome == true) {
    filmChosen.style.display = 'block';
  }
  if (aktPlayer == '' || filmChosen.className == 'audio')
  {
    placeReset();
  }
}

function hilfe()
{
  if ((msie == true || opera == true || chrome == true) && aktPlayer != '') {
    placeReset();
  }
}

function placeReset()
{
  if (chosen != '')
  {
    chosen.style.width = elemW + 'px';
    chosen.style.height = elemH + 'px';
    chosen = '';
    if (msie == true || opera == true || chrome == true) {
      filmChosen.style.display = 'block';
    }
    filmChosen.style.width = filmW + 'px';
    filmChosen.style.height = filmH + 'px';
    filmChosen = '';
    // Alle Divs zum Versenden / Einbetten ausblenden
    for (var i=0; i<divArr.length; i++)
    {
      if (divArr[i].className == 'video_versenden' || divArr[i].className == 'video_einbetten')
      {
        divArr[i].style.display = 'none';
      }
    }
    if (aktPlayer != '')
    {
      aktPlayer.unload();
      aktPlayer = '';
      clipTime = 0;
    }
  }
  place('');
}

place('');