var debugSwitch = false;

var moveDir = 1;
var movespeed = 20;
var picspace = 12;

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++;
    
    var tmpPicSrc = item+'_t.jpg?';
    
    if (Browser.Engine.trident)
      tmpPicSrc = tmpPicSrc+$time();
    
    //alert(Browser.Engine.version);
    
    new Element('img', {
        'src': (tmpPicSrc),
        'full': (item+'.jpg'),
        'fullid': idx,
        'picnr': picsToLoad,
        '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);
            }
        }
    });
 
  debugGal();

  });
  }

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': picspace,
          'float': 'left',
          'border': '0px solid black'
      }
  });
  var info = new Element('div', {
      'text': txt,
      'id': 'picinfocont_'+idx,
      'styles': {
          'display': 'none'

      }
  });

  info.setOpacity(0.01);

  pic.inject(frame);
  info.inject(frame);

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

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


  
  // 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*movespeed), transition: 'linear', 
      onComplete: function()
        { 
        $('moveingLayer').morph({left: [galOffset,(-1*fullwidth)]});
        } 
      });
  
    $('moveingLayer').morph({left: [galOffset,(-1*fullwidth)]});
    }
  else
    {
    $('moveingLayer').set('morph', {duration: (fullwidth*movespeed), 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)
  {
  $$('.showcasestuff').destroy();
  var showcaseimg = new Element('img', {
      'src': (pic.get('full')),
      'id': 'showcaseimg',
      'class': 'showcasestuff',
      'styles': {
          'margin-top': '19px',
          'border': '0px solid black'
      }
    }).inject($('body'));

  var showcasebg = new Element('div', {
      'html': '<div style="margin:4px 0px 0px 20px;">'+pic.get('picnr')+'/'+picsToLoad+'</div>',
      'id': 'showcasebg',
      'class': 'showcasestuff',
      'styles': {
          'font-family': 'arial,sans-serif',
          'font-size': '12px',
          'position': 'absolute',
          'top': '100px',
          'left': '10%',
          'width': '80%',
          'height': '640px',
          'background-color': '#fff',
          'color': '#000000',
          'border': '0px solid black'
      }
    }).inject($('body'));

  var showcaseinfobg = new Element('div', {
      'html': '&nbsp;',
      'id': 'showcaseinfobg',
      'class': 'showcasestuff',
      'styles': {
          'position': 'absolute',
          'top': '200px',
          'left': '10%',
          'width': '80%',
          'height': '44px',
          'background-color': '#fff',
          'color': '#000000',
          'border': '0px solid black',
          'font-size': '20px',
          'font-family': 'verdana',
          'font-weight': '500'
      }
    }).inject($('body'));
    
  var showcaseinfo = new Element('div', {
      'html': '&nbsp;',
      'id': 'showcaseinfo',
      'class': 'showcasestuff',
      'styles': {
          'position': 'absolute',
          'top': '200px',
          'left': '10%',
          'width': '80%',
          'height': '36px',
          'color': '#000000',
          'border': '0px solid black',
          'font-size': '20px',
          'font-family': 'verdana',
          'font-weight': '500',
          'overflow': 'hidden'
      }
    }).inject($('body'));

  var showcaseframe = new Element('div', {
      'html': '',
      'id': 'showcaseframe',
      'class': 'showcasestuff',
      'styles': {
          'position': 'absolute',
          'top': '100px',
          'left': '10%',
          'width': '80%',
          'height': '540px',
          'text-align': 'center',
          'background-color': 'transparent',
          'color': '#000000',          
          'border': '0px solid black'
      }
    }).inject($('body'));

  var showcasecontrolleft = new Element('div', {
      'html': '&nbsp;',
      'id': 'showcasecontrolleft',
      'class': 'showcasestuff',
      'styles': {
          'position': 'absolute',
          'top': '200px',
          'left': '-51px',
          'width': '60px',
          'height': '105px',
          'background-image': 'url(media/galnav_left.png)',
          'border': '0px solid red'
      },
      'events': {
          'click': function(){                            
              
              if (pic.get('picnr') == 1)
                picClick($('moveingFrame').getElements('img[picnr='+picsToLoad+']')[0]);
              else
                picClick($('moveingFrame').getElements('img[picnr='+(pic.get('picnr').toInt()-1)+']')[0]);
          },
          'mouseenter': function(){
            this.setStyle('background-image', 'url(media/galnav_left_hl.png)')                            
          },
          'mouseleave': function(){                            
            this.setStyle('background-image', 'url(media/galnav_left.png)')                            
          }
      }
    }).inject(showcaseframe);

  var showcasecontrolright = new Element('div', {
      'html': '&nbsp;',
      'id': 'showcasecontrolright',
      'class': 'showcasestuff',
      'styles': {
          'position': 'absolute',
          'top': '200px',
          'right': '-51px',
          'width': '60px',
          'height': '105px',
          'background-image': 'url(media/galnav_right.png)',
          'border': '0px solid red'
      },
      'events': {
          'click': function(){                            
              if (pic.get('picnr') == picsToLoad)
                picClick($('moveingFrame').getElements('img[picnr=1]')[0]);
              else
                picClick( $('moveingFrame').getElements('img[picnr='+(pic.get('picnr').toInt()+1)+']')[0] );
          },
          'mouseenter': function(){
            this.setStyle('background-image', 'url(media/galnav_right_hl.png)')                            
          },
          'mouseleave': function(){                            
            this.setStyle('background-image', 'url(media/galnav_right.png)')                            
          }
      }
    }).inject(showcaseframe);


  var showcasecontrols = new Element('div', {
      'html': '&nbsp;',
      'id': 'showcasecontrols',
      'class': 'showcasestuff',
      'styles': {
          'position': 'absolute',
          'top': '100px',
          'left': '10%',
          'width': '80%',
          'height': '20px',
          'text-align': 'right',
          'color': '#000000',
          'border': '0px solid black'
      },
      'events': {
          'click': function(){                            
              closeBigPic();
          }
      }
    }).inject($('body'));

  var showcasecontrols2 = new Element('div', {
      'html': '&nbsp;',
      'id': 'showcasecontrols2',
      'class': 'showcasestuff',
      'styles': {
          'position': 'absolute',
          'top': '500px',
          'left': '10%',
          'width': '18px',
          'height': '18px',
          'text-align': 'right',
          'color': '#000000',
          'border': '0px solid red',
          'background-image': 'url(media/KreuzGrauQuit.png)',
          'z-index': 10000
      },
      'events': {
          'mouseenter': function(){                            
              this.setStyle('background-image', 'url(media/KreuzBlauQuit.png)');
          },
          'mouseleave': function(){                            
              this.setStyle('background-image', 'url(media/KreuzGrauQuit.png)');
          },
          'click': function(){                            
              closeBigPic();
          }
      }
    }).inject($('body'));



  showcasecontrols.innerHTML  = '<img src="media/KreisQuit.png">';
  showcasecontrols2.innerHTML = '';
  
  showcaseinfo.innerHTML = $('picinfocont_'+(pic.get('fullid'))).innerHTML;
  
  var tmpPos = ( (window.getSize().x) - 700 ) / 2;
  var tmpYPos = ( ( (window.getSize().y) - 542 ) / 2 ) + window.getScroll().y;
  $('showcasebg').setStyle('top', -1000); 
  $('showcaseinfo').setStyle('top', -1000); 
  $('showcaseinfobg').setStyle('top', -1000); 
  $('showcaseframe').setStyle('top', -1000); 
  $('showcasecontrols').setStyle('top', -1000); 
  $('showcasecontrols2').setStyle('top', -1000); 

  //$('showcasebg').setOpacity(0.8);

  var waTimer = function(){ 
    if ( $('showcaseimg').getSize().y > 450 )
      {
      updateImg(); 
      waTimer = $clear(waTimer);  
      }
    }.periodical(100);

  }
  
function updateImg()
  {
  $('showcaseimg').inject($('showcaseframe'));
  var tmpwidthImg = $('showcaseimg').getSize().x + 40;
  $('showcaseimg').setOpacity(0);
  var tmpPos = ( (window.getSize().x) - tmpwidthImg ) / 2;
  var tmpYPos = ( ( (window.getSize().y) - 680 ) / 2 ) + window.getScroll().y;
  $('showcasebg').setStyle('width', tmpwidthImg); 
  $('showcasebg').setStyle('left', tmpPos); 
  $('showcasebg').setStyle('top', tmpYPos); 
  $('showcaseinfo').setStyle('width', tmpwidthImg-40); 
  $('showcaseinfo').setStyle('left', tmpPos+20); 
  $('showcaseinfo').setStyle('top', (tmpYPos+658)); 
  $('showcaseinfobg').setStyle('width', tmpwidthImg); 
  $('showcaseinfobg').setStyle('left', tmpPos); 
  $('showcaseinfobg').setStyle('top', (tmpYPos+650)); 
  $('showcaseframe').setStyle('width', tmpwidthImg); 
  $('showcaseframe').setStyle('left', tmpPos); 
  $('showcaseframe').setStyle('top', tmpYPos); 
  $('showcasecontrols').setStyle('width', 20); 
  $('showcasecontrols').setStyle('left', (tmpwidthImg+tmpPos-14)); 
  $('showcasecontrols').setStyle('top', (tmpYPos-12)); 
  $('showcasecontrols2').setStyle('width', 18); 
  $('showcasecontrols2').setStyle('left', (tmpPos+tmpwidthImg-8)); 
  $('showcasecontrols2').setStyle('top', (tmpYPos-6)); 

  $('showcaseimg').fade(1);
  }  

function closeBigPic()
  {
  $$('.showcasestuff').fade(0);
  }

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

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


    $('moveingLayer').set('morph', {duration: ( ( galOffset*(-1) )*movespeed), 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()
  {
  if (debugSwitch)
    {
    $('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.set('tween', {duration: 150});
    el.tween('opacity', 0.01);

    el.addEvent('mouseleave', function(){
      el.tween('opacity', 0.01);
    });
  
    el.addEvent('mouseenter', function(){
      el.tween('opacity', 1);
    });

  });

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

function showM()
  {
  var tmpPos = ( (window.getSize().x) - $('mBig').getSize().x ) / 2;
  var tmpYPos = ( ( (window.getSize().y) - 600 ) / 2 ) + window.getScroll().y;

  $('mBigBG').setStyle('opacity', 0.7); 


  $('mBig').setStyle('top', tmpYPos); 
  $('mBig').setStyle('left', tmpPos); 
  $('mBigBG').setStyle('top', tmpYPos-20); 
  $('mBigBG').setStyle('left', tmpPos-20); 
  $('mBigBG').setStyle('width', $('mBig').getSize().x+40); 
  }

function closeM()
  {
  $('mBig').setStyle('top', -10000); 
  $('mBigBG').setStyle('top', -10000); 
  }