/*
   author  : Fabien Tesselaar (http://tessmore.nl)
   website : http://tessmore.nl/gallerij/index
   date    : 30-4-2011
*/

var image_height = 532; // ** Belangrijk ** in pixels
var folder       = 'images'; // Als plaatjes in een mapje zitten

/* Deze kun je aanpassen: 5000 = 5 seconden */
var time           = 5000;
var fade_time      = 250;

var clickable      = true; // Plaatje klikken toont volgende
var automatic      = true; // Plaatjes veranderen automatisch naar volgende
var pause_on_hover = true; // Muis over plaatje = pauzeren
var add_menu       = true; // Toont menu met plaatjes

/* Laat deze variabelen maar gewoon zo */
var timer     = 0;
var paused    = true;
var listItems = 0;
var visible_image;
var window_active = true;

$(document).ready(function() 
{
  var featured = $("#featured").css({position:'relative', 'height':image_height+'px'});
  
  var list = [];
    
  if (automatic)
  {
    loop();
    paused = false;
  }
  
  if (add_menu)
    list.push('<div id="feat-nav"><ul>');
   
  featured.find("ul").children().each(function()
  {
    var current = $(this);
    var image_url = current.html();

    if (image_url.indexOf("src") < 0)
      image_url = '<img src="'+folder+'/'+image_url+'">';

    current.html(image_url).addClass('image').hide().css({position:'absolute'});

    if (add_menu)
      list.push('<li><button class="showImage" id="',listItems,'">',image_url,'</button></li>');
    
    this.id = listItems++;
  });
    
  visible_image = featured.find('li').first().show();
  
  if (add_menu)
  {
    featured.after(list.join(''));
    $("#feat-nav img").css({width:Math.floor(709/listItems)+'px', height:'auto'});
    $(".showImage").first().addClass('active');
  }
});

$(window).focus(function() 
{ 
  window_active = true; 
});

$(window).blur(function() 
{
  window_active = false; 
});
    
/* Loop blijft altijd lopen, als je dan met je muis (andere functie) 
  over een plaatje beweegt stopt het aanroepen van showNext(), dus
  wordt de volgende niet getoond

  pas time aan om langer / korter plaatjes te tonen
  */
function loop()
{
  if (! paused && window_active)
    showNext();
    
  timer = setTimeout("loop()", time);
}

$(".showImage").live('click', function()
{
  reset_timer();
  showNext(this.id);
});

$(".image").live('click', function()
{
  if (! clickable) return false;
  
  reset_timer();
  showNext(); 
});

$(".image").live('hover', function()
{
  if (! pause_on_hover)
    return false;
    
  paused = !paused;
});

function showNext(id)
{
  visible_image.stop(true, true).fadeOut(fade_time); // Als iemand lekker vaak klikt zorgt dit niet voor rare animatie queue
 
  var next = id ? id : visible_image.next().attr('id') ? visible_image.next().attr('id')  : 0;

  visible_image = $("#featured #"+next).fadeIn(fade_time);
  
  $("#feat-nav .active").removeClass("active");
  $("#feat-nav").find("button#"+next).addClass("active");
}

function reset_timer() 
{ 
  clearTimeout(timer);
  timer = setTimeout("loop()", time);
};