var counter = 0;
var selectedImage = -1;
var Images = new Array();
var galleryActive;
var i_selected = -1;
var imgwidth = 0;
var pwidth = 0;
var pwidthsum = 0;
var $neu;
var $alt;
var id;
var previews_amount = 0;
var previews_loaded = 0;
var previews_error = 0;
var openlink = 0;
var doOpenContent = 0;
var tempimage;
var tempimage1;
var tempimage2;
var tempimage3;

function setImage (counter, xclass, style) {
    xclasses = 'detail';
    if (xclass!='') {
        xclasses += ' '+ xclass;
    }
    tempimage = new Image(); 
    tempimage.setAttribute('id', 'gallerydetail'+String(counter));
    if (style!=''){
        tempimage.setAttribute('style', style);
    }
    tempimage.src = Images[counter]; 
    tempimage.className = xclasses;
    setTimeout( 'doWhileLoading()', 100 ) ;
    return tempimage;
}

function doWhileLoading () {
    if ( !(tempimage.complete) ) {
      setTimeout( 'doWhileLoading()', 100 );
    }
}

function daumenKino() {
    if (counter+1<Images.length) {
        tempimage1 = $('#gallerydetail'+ String(counter+1)).get();
        if (tempimage1==""){
            tempimage1 = setImage(counter+1, '', 'display:none');
            $(tempimage1).load(function(){
                $("#gallery").append(tempimage1);
                $(this).css({opacity: 0.0});
                imgwidth = $(this).width();
                $(this).css({left: String(0.1*(1000-imgwidth)/2)+'%'});
                $(this).show();
                daumenKinoDetail();
            }).error(function(){
            });
        } else {
            daumenKinoDetail();
        }
    } else {
        daumenKinoDetail();
    }
}

function daumenKinoDetail() {
        var $alt = $('#gallery img.obersteebene');

        if (selectedImage>-1){
            var $neu = $('#gallerydetail'+selectedImage);
            selectedImage = -1;
        } else {
            if($alt.next().length)
              var $neu = $alt.next();
            else
              var $neu = $('#gallery img.detail:first');
        }

        $alt.addClass('mittlereebene');
        $alt.removeClass('obersteebene');
        $neu.css({opacity: 0.0});
        $neu.addClass('obersteebene');
      
        $neu.animate({opacity: 1.0}, {queue: false, duration: 5000}, function() {});
        $alt.animate({opacity: 0.0}, 5000, function() {
            $alt.removeClass('mittlereebene');
        });

        var info = $('#ginfo'+String(counter)).html();
        if (info) {
            $('#ginfoXcontent').html(info);
            $('#gallery').click(function(){
                if (openlink==1){
                    var link = $('#glink'+counter).html();
                    if (link){
                        link = link.replace('&amp;', '&');
                        link = link.replace('&amp;', '&');
                        window.location.href = link;
                    }
                } else {
                    openContent();
                }
                $('#ginfoX').hide();
            });
        }

        counter ++;
        if (counter>=Images.length) {
            counter = 0;
        }
}

function checkIfReady () {
  if (previews_loaded+previews_error==previews_amount) {
      $('.preview').each(function(){
          pwidth = $(this).width();
          pwidthsum += pwidth;
          pwidthsum += 10; //margin 2*5
      });
      $('.scrollableArea').css({width: String(pwidthsum)+'px'});
      var swWidth = $('.scrollWrapper').width();
      if (pwidthsum<swWidth) {
          $('.scrollableArea').css({'margin-left': String(parseInt((swWidth-pwidthsum)/2))+'px'})
      }
      $("div#galleryBrowse").smoothDivScroll({autoScroll: "onstart", autoScrollStep: 0, visibleHotSpots: "always"});

    if (Images.length==0) {
        $('#galleryBrowse').hide();
    } else if (Images.length==1) {
        $('#galleryBrowse').hide();
        tempimage3 = setImage(counter, 'obersteebene', 'display:none');
        $(tempimage3).load(function(){
          $("#gallery").append(tempimage3);
          imgwidth = $(this).width();
          $(this).css({left: String(0.1*(1000-imgwidth)/2)+'%'});
          //
          $(this).css({opacity: 0.0});
          $(this).show();
          $(this).animate({opacity: 1.0}, 5000, function(){});
        }).error(function(){
        });
    } else if (Images.length>1) {
        if (i_selected>-1) {
            counter = i_selected;
            $('.buttonPause').hide();
        }
            var info = $('#ginfo'+counter).html();
            if (info) {
              $('#ginfoXcontent').html(info);
              $('#gallery').click(function(){
                if (openlink==1){
                  var link = $('#glink'+counter).html();
                  if (link){
                    link = link.replace('&amp;', '&');
                    link = link.replace('&amp;', '&');
                    window.location.href = link;
                  }
                } else {
                  openContent();
                }
                $('#ginfoX').hide();
              });
            }
        tempimage3 = setImage(counter, 'obersteebene', 'display:none');
        $(tempimage3).load(function(){
          $("#gallery").append(tempimage3);
          imgwidth = $(this).width();
          $(this).css({left: String(0.1*(1000-imgwidth)/2)+'%'});
          if (i_selected==-1) {
            galleryActive = setInterval( "daumenKino()", 6000 );
          }
          $(this).css({opacity: 0.0});
          $(this).show();
          $(this).animate({opacity: 1.0}, 5000, function(){});
        }).error(function(){
        });
    }
  }
}


$(document).ready(function() {
  $('#gallery, #ginfoX').bind('mousemove', function(e){
  $('#ginfoX').css({
      backgroundColor: 'rgb(255,250,234)',
      opacity: 0.5,
      zIndex: 999,
      position: 'absolute',
      width: '100px',
      height: '37px',
      left:  e.pageX - 101,
      top:   e.pageY + 1
    });
  });
  $('#gallery').hover(
    function(){
      var infocontent = $('#ginfoXcontent').html();
      if (infocontent) {
        $('#gallery').css('cursor', 'pointer');
        $('#ginfoX').show();
	  }
    },
    function(){
      $('#ginfoX').hide();
    }
  );

  $('#galleryBrowse').hover(
      function() {
        $('#ginfoX').hide();
        $('#gallery').unbind('click');
        $('#galleryBrowse').stop();
        $('#galleryBrowse').animate({
          bottom: '0'
        }, 1000, function() {
          // Animation complete.
        });
      },
      function() {
        $('#ginfoX').show();
        $('#gallery').click(function(){
          if (openlink==1){
            var link = $('#glink'+counter).html();
            if (link){
              link = link.replace('&amp;', '&');
              link = link.replace('&amp;', '&');
              window.location.href = link;
            }
          } else {
            openContent();
          }
          $('#ginfoX').hide();
        });
        $('#galleryBrowse').stop();
        $('#galleryBrowse').animate({
          bottom: '-70'
        }, 1000, function() {
          // Animation complete.
        });
      }
    );

    previews_amount = $('.preview').length;

    $('.preview').each(function(){
        var src = $(this).attr('src');
        //$('body').append('<div style="color:#ffffff;font-size:1px">loading: '+ src +'</div>\n');
        $(this).attr('src', src.replace('?', '?rnd='+new Date().getTime()+'&'));
        $(this).load(function(){
            pwidth = $(this).width();
            $(this).css({width: String(pwidth)+'px'});
            $(this).attr('width', String(pwidth));
            previews_loaded += 1;
            //$('body').append('<div style="color:#ffffff;font-size:1px">loaded: '+ $(this).attr('src') +'</div>\n');
            checkIfReady();
        }).error(function(){
            previews_error += 1;
            //$('body').append('<div style="color:#ffffff;font-size:1px">error: '+ $(this).attr('src') +'</div>\n');
            checkIfReady();
        });
        src = 'media/'+ src.split('file=')[1];;
        Images.push(src);
    });

    $('.preview').click(function(){
        var id = $(this).attr('id');
        id = parseInt(id.substr(7));
        var link = $('#glink'+id).html();
        if (link){
            link = link.replace('&amp;', '&');
            link = link.replace('&amp;', '&');
            window.location.href = link;
        } else {
            counter = id;
            selectedImage = counter;
            for (i=0;i<=counter;i++){
              var img = document.getElementById('gallerydetail'+ String(counter));
              if (!img){
                tempimage = setImage(counter, '', 'display:none');
                $(tempimage).load(function(){
                  imgwidth = $(this).width();
                  $(this).css({left: String(0.1*(1000-imgwidth)/2)+'%'});
                  $(this).show();
                }).error(function(){
                });
              }
            }
        }
    });
    $('.preview').hover(
      function(){$(this).css({opacity: 1.0});},
      function(){$(this).css({opacity: 0.65});}
    );

    $('.buttonPause').click(function(){
      if (Images.length>1) {
        clearInterval(galleryActive);
      }
      $(this).hide();
      $('.buttonPlay').show();
    });
    $('.buttonPlay').click(function(){
      if (Images.length>1) {
        galleryActive = setInterval( "daumenKino()", 6000 );
      }
      $(this).hide();
      $('.buttonPause').show();
    });

  if (doOpenContent==1) {
    openContent();
  }
});