
function slideshow() {
  if (stopGallery) {
    return true;
  } else {
    nextImage();
  }
  
}

function nextImage(skipRoom) {
  
  var currentImage = $('#zimmer_container .galleries .image_list.active li.active');
  var nextImage = currentImage.next();
  
  if (!nextImage.length || skipRoom) {
    var activeRoom = $('#zimmer_container .thumbs div.active').next().attr('class');    
    $('#zimmer_container .thumbs .active').appendTo('#zimmer_container .thumbs');
    $('#zimmer_container .active').removeClass('active');
    $('#zimmer_container .' + activeRoom).addClass('active');          
    nextImage = $('#zimmer_container .galleries .image_list.active li:first');
  }
  
  currentImage.addClass('last-active');
  
  nextImage
    .css({opacity: 0.0})    
    .addClass('active')        
    .animate({opacity: 1.0}, 1000, function() {            
      currentImage.removeClass('active last-active');
    });     
}

function lastImage(skipRoom) {
    
  var currentImage = $('#zimmer_container .galleries .image_list.active li.active');
  var previousImage = currentImage.prev();
  
  if (!previousImage.length || skipRoom) {      
    activeRoom = $('#zimmer_container .thumbs div:last').attr('class');    
    $('#zimmer_container .active').removeClass('active');
    $('#zimmer_container .thumbs div:last').prependTo('#zimmer_container .thumbs');
    $('#zimmer_container .' + activeRoom).addClass('active');          
    previousImage = $('#zimmer_container .galleries .image_list.active li:first');
  }
  
  currentImage.addClass('last-active');
  
  previousImage.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {            
      currentImage.removeClass('active last-active');
    });    
}

function toggleGallery() {
  stopGallery = stopGallery ? false : true;
  $('#zimmer_container .stop_gallery').text(stopGallery ? 'Galerie animieren' : 'Galerie anhalten')
}

$(document).ready(function(){
  
  if($('body.zimmer').length) {
    
    activeRoom = null;
    stopGallery = false;
    
    container = $('<div id="zimmer_container" class="plane" />');
    thumbs = $('<div class="thumbs"></div>');
    galleries = $('<div class="galleries"><a class="lastImage imageControl" onclick="lastImage()">«</a><a class="nextImage imageControl" onclick="nextImage()">»</a></div>');
    headlines = $('<div class="headlines" />');    
    
    $('.mod_article.zimmer').each(function(index, item) {
      currentRoom = $(item);
      id = currentRoom.attr('id');
      if(!activeRoom) {
        activeRoom = id;
      }
        
      thumbSource = currentRoom.find('.ce_text .image_container img');
      thumbTitle = thumbSource.attr('alt');
      thumbSrc = thumbSource.attr('src');
      
      $('<div />')
        .attr('title', thumbTitle)
        .css('background-image', 'url(\'' + thumbSrc + '\')') 
        .css('color', 'red')
        .click(function(e){          
          thumb = $(this);
          if(thumb.hasClass('active')) {
            return true;
          }
          $('#zimmer_container .active').removeClass('active');
          $('#zimmer_container .' + thumb.attr('class')).addClass('active');      
          $('#zimmer_container .galleries .image_list.active li:first').addClass('active');
          $('#zimmer_container .thumbs div').each(function(index, item) {
            if($(item).hasClass('active')) {
              return false;
            } else {
              $(item).appendTo('#zimmer_container .thumbs');
            }
          });
        })       
        .addClass(id)
        .appendTo(thumbs);         
      
      currentRoom.find('h2.ce_headline')
        .addClass(id)
        .appendTo(headlines);        
         
      currentRoom.find('.image_list')
        .addClass(id)
        .appendTo(galleries);
      
      currentRoom.hide();
    });
    
    var navigation = $(
      '<div id="rooms-navigation">'
        + '<div class="rooms-control">'          
          + '<a class="next_room" onclick="nextImage(true)">nächstes Zimmer &raquo;</a>'
          + '<a class="last_room" onclick="lastImage(true)">&laquo; vorheriges Zimmer</a>'
        + '</div>'
        + '<div class="gallery-control">'
          + '<a class="stop_gallery" onClick="toggleGallery()">Galerie anhalten</a>'
        + '</div>'
        + '<hr />'        
      + '</div>'
    );
      
    
    
    container
    .append(
      $('<div id="thumbsControl"><a class="lastImage imageControl" onclick="lastImage(true)">«</a><a class="nextImage imageControl" onclick="nextImage(true)">»</a></div>')
      .append(
        $('<div id="thumbsContainer"></div>')
        .append(thumbs)
      )
    );
    
    //container.append(headlines);    
    container.append(galleries);
    container.append(navigation.append(headlines));    
    
    container.insertAfter('#col3_content #seitenkopf');
    $('#zimmer_container .' + activeRoom).addClass('active');      
    $('#zimmer_container .galleries .image_list.active li:first').addClass('active');
    
    setInterval( "slideshow()", 5000 );    
  }
  
  
});

