function slideExample1(move, id)
{
    if(id == 3) {
        displayGallery(0);
    }

   var elementId = 'panel';
   var element = document.getElementById(elementId);
    
   if(move == 'up'){
   // UP  
         
         animate(elementId, 0, 19, 750, 1, 180, null);
         element.up = true;
         element.down = false;
         document.getElementById('closeBoxImage').style.visibility = 'hidden'; 
         document.getElementById('imgToMove').style.visibility = 'hidden'; 
      
   } else {
   // DOWN
       document.getElementById('imgToMove').style.visibility = 'visible';       
        if(element.down == true) {
            
            animate(elementId, 0, 19, 750, 1, 180, null);
            
            document.getElementById('imgToMove').style.visibility = 'hidden';
            setTimeout("moveItDown('"+id+"')", 350);  
           
            //element.down = true;
            //element.up = false;
        } else {
            moveItDown(); 
            displayContent(id);   
        } 
        
        
        document.getElementById('closeBoxImage').style.visibility = 'visible'; 
       
   }  
}           

function moveItDown(id) { 

document.getElementById('imgToMove').style.visibility = 'visible';
      
    var elementId = 'panel';
    var element = document.getElementById(elementId);
    
    animate(elementId, 0, 19, 750, 350, 350, null);
    element.down = true;
    element.up = false;
    
    displayContent(id);
}

function displayContent(id) {
   for (var i = 1; i <= 11; i++) {
      var moduleTmp = 'content_' + i;
        if(i != id) {
            document.getElementById(moduleTmp).style.display = 'none'; 
        } else {
            document.getElementById(moduleTmp).style.display = 'block';
        } 
   } 
}

function animate(elementID, newLeft, newTop, newWidth, newHeight, time, callback)
{
  var el = document.getElementById(elementID);
  if(el == null)
    return;
 
  var cLeft = parseInt(el.style.left);
  var cTop = parseInt(el.style.top);
  var cWidth = parseInt(el.style.width);
  var cHeight = parseInt(el.style.height);
 
  var totalFrames = 1;
  if(time > 0)
    totalFrames = time/40;

  var fLeft = newLeft - cLeft;
  if(fLeft != 0)
    fLeft /= totalFrames;
 
  var fTop = newTop - cTop;
  if(fTop != 0)
    fTop /= totalFrames;
 
  var fWidth = newWidth - cWidth;
  if(fWidth != 0)
    fWidth /= totalFrames;
 
  var fHeight = newHeight - cHeight;
  if(fHeight != 0)
    fHeight /= totalFrames;
   
  doFrame(elementID, cLeft, newLeft, fLeft, cTop, newTop, fTop,
      cWidth, newWidth, fWidth, cHeight, newHeight, fHeight, callback);
}

function doFrame(eID, cLeft, nLeft, fLeft, cTop, nTop, fTop,
    cWidth, nWidth, fWidth, cHeight, nHeight, fHeight, callback)
{
  var el = document.getElementById(eID);
  if(el == null)
    return;

  cLeft = moveSingleVal(cLeft, nLeft, fLeft);
  cTop = moveSingleVal(cTop, nTop, fTop);
  cWidth = moveSingleVal(cWidth, nWidth, fWidth);
  cHeight = moveSingleVal(cHeight, nHeight, fHeight);

  el.style.left = Math.round(cLeft) + 'px';
  el.style.top = Math.round(cTop) + 'px';
  el.style.width = Math.round(cWidth) + 'px';
  el.style.height = Math.round(cHeight) + 'px';
  
  var newPos =  (Math.round(cHeight) + 18) + 'px';
  document.getElementById('imgToMove').style.top = newPos;
  
  if(cLeft == nLeft && cTop == nTop && cHeight == nHeight
    && cWidth == nWidth)
  {
    if(callback != null) {
      callback();
    } else {
        return;
    }
  }
   
  setTimeout( 'doFrame("'+eID+'",'+cLeft+','+nLeft+','+fLeft+','+cTop+','
      +nTop+','+fTop+','+cWidth+','+nWidth+','+fWidth+','+cHeight+','
      +nHeight+','+fHeight+','+callback+')', 40);
}

function moveSingleVal(currentVal, finalVal, frameAmt)
{
  if(frameAmt == 0 || currentVal == finalVal)
    return finalVal;
 
  currentVal += frameAmt;
  if((frameAmt > 0 && currentVal >= finalVal)
      || (frameAmt < 0 && currentVal <= finalVal))
  {
    return finalVal;
  }
  return currentVal;
}


function showTitle (bildID) {
    if(bildID != "") {
        var bildSrc = '_images/' + bildID + '.png';    
        document.getElementById('sloganTopLeft').style.backgroundImage = 'url("'+ bildSrc +'")';
        document.getElementById('sloganTopRight').style.backgroundImage = 'url("'+ bildSrc +'")';
    } else {
        document.getElementById('sloganTopLeft').style.backgroundImage = 'none';
        document.getElementById('sloganTopRight').style.backgroundImage = 'none';
    }
}