var moveDir = 1;

var picsToLoad = 0;
var picsLoaded = 0;
var fullwidth = 0;
var extrawidth = 0;
var galOffset = 0;
var newOffset = 0;
var activ = 0;

function initGalerie(pics,picsText)
  {
  var tmp = new Element('div', {
      'id': 'loadIndFrame',
      'text': ' ',
      'styles': {
          'position': 'absolute',
          'top': 200,
          'left': 100,
          'width': 800,
          'height': 50,
          'overflow': 'hidden',
          'border': '2px solid white',
          'text-align': 'left',
          'color': '#000',
          'background': '#fff'
      }
  });

  tmp.inject($('moveingFrame'));

  var tmp2 = new Element('div', {
      'id': 'loadInd',
      'text': ' ',
      'styles': {
          'position': 'absolute',
          'top': 0,
          'left': 0,
          'width': '0%',
          'height': 50,
          'overflow': 'hidden',
          'border': '0px solid white',
          'text-align': 'left',
          'color': '#fff',
          'background': '#000'
      }
  });

  tmp2.inject(tmp);

  var tmp3 = new Element('div', {
      'id': 'loadIndText',
      'text': 'Lade...',
      'styles': {
          'position': 'absolute',
          'top': 11,
          'left': 0,
          'width': '100%',
          'font-size': 22,
          'overflow': 'hidden',
          'border': '0px solid white',
          'text-align': 'center',
          'color': '#888',
          'background': 'transparent'
      }
  });

  tmp3.inject(tmp);

  pics.each( function(item,idx){
    picsToLoad++;
    new Element('img', {
        'src': (item+'_t.jpg'),
        'full': (item+'.jpg'),
        'styles': {
            'margin-top': 50,
            'border': '0px solid black'
        },
        'events': {
            'click': function(){
                picClick(this);
            },
            'mouseenter': function(){
                picEnter(this);
            },
            'mouseleave': function(){
                picLeave(this);
            },
            'domready': function(){
                if (Browser.Engine.presto)
                  picLoadedOperaWA(this,picsText[idx],idx);
            },
            'load': function(){
                if (!Browser.Engine.presto)
                  picLoaded(this,picsText[idx],idx);
            }
        }
    });
  });
  }

function picLoadedOperaWA(pic,txt,idx)
  {
  pic.inject($('hideFrame'));
  var waTimer = function(){ 
  if ( pic.getSize().y > 350 )
    {
    picLoaded(pic,txt,idx);
    waTimer = $clear(waTimer);  
    }
  }.periodical(100);
  }


function picLoaded(pic,txt,idx)
  {
  picsLoaded++;              
  var frame = new Element('div', {
      'id': 'picFrame_'+idx,
      'styles': {
          'margin-right': 35,
          'float': 'left',
          'border': '0px solid black'
      }
  });
  var info = new Element('div', {
      'text': txt,
      'styles': {
          'text-align': 'center',
          'background': '#fff',
          'color': '#000',
          'border-top':    '5px solid #fff',
          'border-bottom': '5px solid #fff'
      }
  });

  info.setOpacity(0.01);

  pic.inject(frame);

  if (txt != '')
    info.inject(frame);

  frame.inject($('moveingLayer'));

  var picWidth  = pic.getSize().x;
  var picHeight = pic.getSize().y;
  var tmpwidth = (picWidth / picHeight)*364;
  fullwidth = (fullwidth + tmpwidth) + 35;

  info.set({
        'styles': {
            'width':  picWidth
        }
  });

  info.fade(0);
  
  // Loading Ready
  if (picsLoaded == picsToLoad)
    {
    var myElement = '';
    var myClone = '';
    
    // reihenfolge FIX!!!
    for(x=0;x<picsLoaded;x++)
      $('picFrame_'+x).inject($('moveingLayer'));      
    // reihenfolge FIX!!!

    for(x=0;x<5;x++)
      {
      myElement = pic.getParent().getParent().getChildren('div')[x];
      myClone = myElement.clone();
      myClone.inject($('moveingLayer'));      
      myClone.getChildren('img')[0].addEvents({
                  'click': function(){
                      picClick(this);
                  },
                  'mouseenter': function(){
                      picEnter(this);
                  },
                  'mouseleave': function(){
                      picLeave(this);
                  }
      });
      }    
    fullwidth = fullwidth.round();
    $('loadIndFrame').dispose();
    startGalerie();
    //debugGal();
    }

  // Loading Bar Refresh 
  if (picsLoaded != picsToLoad && picsToLoad)
    $('loadInd').setStyle('width',  (picsLoaded * (100 / picsToLoad))+'%'  );
  }


function startGalerie()
  {
  if (moveDir == 1)
    {
    $('moveingLayer').set('morph', {duration: (fullwidth*10), transition: 'linear', 
      onComplete: function()
        { 
        $('moveingLayer').morph({left: [galOffset,(-1*fullwidth)]});
        } 
      });
  
    $('moveingLayer').morph({left: [galOffset,(-1*fullwidth)]});
    }
  else
    {
    $('moveingLayer').set('morph', {duration: (fullwidth*10), transition: 'linear', 
      onComplete: function()
        { 
        $('moveingLayer').morph({left: [(-1*fullwidth),galOffset]});
        } 
      });
  
    $('moveingLayer').morph({left: [(-1*fullwidth),galOffset]});
    }

  }


function picEnter(pic)
  {
  $('moveingLayer').morph();
  if ( pic.getParent().getElement('div') )
    pic.getParent().getElement('div').fade(1);
  }

function picLeave(pic)
  {
  if (picsLoaded == picsToLoad)  
    {
    restartGalerie();
    if ( pic.getParent().getElement('div') )
      pic.getParent().getElement('div').fade(0);
    }
  }

function picClick(pic)
  {
  closeBigPic();

  var tmp = new Element('div', {
      'id': 'BigPicFrame',
      'styles': {
          'position': 'absolute',
          'top': 0,
          'left': 50,
          'width': 900,
          'z-index': 10,
          'height': 564,
          'overflow': 'hidden',
          'border': '0px solid white',
          'text-align': 'center',
          'color': '#fff',
          'background': '#444'
      },
      'events': {
          'click': function(){
              closeBigPic();
          },
          'mouseenter': function(){
                $('moveingLayer').morph();
          }

      }          
      
  });
  
  tmp.inject( $('moveingFrame') );

  new Element('img', {
      'src': (pic.get('full')),
      'styles': {
          'margin-top': 32,
          'border': '0px solid black'
      },
      'events': {
          'load': function(){
                this.inject( tmp );
                this.setStyle('opacity',0);
                this.fade(0,1);
                $('moveingLayer').morph();
          }
      }
  });


  }

function closeBigPic()
  {
  if($('BigPicFrame'))
    {
    $('BigPicFrame').dispose();
    restartGalerie();
    }
  }




function restartGalerie()
  {
  galOffset = $('moveingLayer').getStyle('left').toInt();

  if (moveDir == 1)
    {
    if (galOffset.abs() >= fullwidth)
      galOffset = 0;
  
    $('moveingLayer').set('morph', {duration: ( (fullwidth + galOffset)*10), transition: 'linear', 
      onComplete: function()
        { 
        restartGalerie();
        } 
      });
  
    $('moveingLayer').morph({left: [galOffset,(-1*fullwidth)]});
    }
  else
    {
    if (galOffset >= 0)
      galOffset = (-1*fullwidth);


    $('moveingLayer').set('morph', {duration: ( ( galOffset*(-1) )*10), transition: 'linear', 
      onComplete: function()
        { 
        restartGalerie();
        } 
      });
  
    $('moveingLayer').morph({left: [galOffset,0]});
    }

  }


function shiftLeft()
  {
  moveDir = 0;
  $('moveingLayer').morph();

  galOffset = $('moveingLayer').getStyle('left').toInt();
  newOffset = galOffset+300;

  if (newOffset > 0)
    {
    $('moveingLayer').setStyle('left', (fullwidth-galOffset)*(-1) );
    galOffset = $('moveingLayer').getStyle('left').toInt();
    newOffset = galOffset+300;
    }
  
  $('moveingLayer').set('morph', {duration: 500, transition: Fx.Transitions.Sine.easeOut, 
    onComplete: function()
      { 
      restartGalerie();
      } 
    });

  $('moveingLayer').morph({left: [galOffset,newOffset]});
  }

function shiftRight()
  {
  moveDir = 1;
  $('moveingLayer').morph();

  galOffset = $('moveingLayer').getStyle('left').toInt();
  newOffset = galOffset-300;

  if ( newOffset+300 < (-1)*fullwidth )
    {
    $('moveingLayer').setStyle('left', ( fullwidth + galOffset  ) );
    galOffset = $('moveingLayer').getStyle('left').toInt();
    newOffset = galOffset-300;
    }

  $('moveingLayer').set('morph', {duration: 500, transition: Fx.Transitions.Sine.easeOut, 
    onComplete: function()
      { 
      restartGalerie();
      } 
    });

  $('moveingLayer').morph({left: [galOffset,newOffset]});
  }


function debugGal()
  {
   $('status').innerHTML =  picsLoaded+' / '+picsToLoad+'<br>'+$('moveingLayer').getStyle('left').toInt()+' / '+newOffset;
   window.setTimeout('debugGal()',50);
  }


////////////////////////////////////////////////////////////////////////////

function showImpressum()
  {
  $('impLayer').show();
  $('impLayer').fade(1);
  }

function hideImpressum()
  {
  $('impLayer').fade(0);
  }

function initNav()
  {
  $$('#naviHover img').each( function(el){
    el.fade(0.01);
  
    el.addEvent('mouseleave', function(){
      el.fade(0.01);
    });
  
    el.addEvent('mouseenter', function(){
      el.fade(1);
    });

  });

  var x = 0;

  $$('#navi img.norm').each( function(el){
    el.set('morph',{duration:800, transition: Fx.Transitions.Elastic.easeIn, onComplete:function(){ 
      el.set('morph',{duration:800, transition: Fx.Transitions.Elastic.easeOut});
      el.morph({'top': 0}); 
    }  });

    (function(){ 
      el.morph({'top': 20});
    }).delay(x);
    x = x + 70;
  });

  $$('#navi img.home').each( function(el){
    el.set('morph',{duration:1500, transition: Fx.Transitions.Elastic.easeOut});

    (function(){ 
      el.morph({'left': [-500,0]});
    }).delay(x);
    x = x + 100;
  });

  }
  
function playSound(surl) 
  {
  document.getElementById("trash").innerHTML = "<embed src='"+surl+"' hidden=true autostart=true loop=false>";
  }