var activeColor = '#7d7d7d',
  inactiveColor = '#ccc'

$(document).ready(function(){
  
  $('#thumbnails .thumbWrapper img').each(function(){
    $(this).css({'cursor':'pointer'}).wrap('<a href="#"></a>');
  });  
  
  var $fotos = $('#display img'),
    $container = $('.thumbWrapper'), 
    $pause = $('a.pause')
    $play = $('a.play');

  $fotos.each(function(){
    $(this)
      .attr({'height':'283','width':'445'})
      .css({'height':'283px','width':'445px'});
  });
   
  $container.css({'width':($fotos.length * 100)});
  $('#display').cycle({ 
    fx: 'fade', 
    speed: 800,
    timeout: 3000,
    next: '#display img',    
    pager:  $container,
    pagerAnchorBuilder: function(idx, slide) { 
      // return '<div class="thumbnail"><a onclick="thumbLinks();" href="#"><img src="' + slide.src + '" /></a></div>'; 
      return '.thumbWrapper a:eq(' + idx + ')';  
    } 
  });
  
  
  if($fotos.length < 5){
    $('a.control').css({'opacity':'0.42','cursor':'default'})
  }

  // Stops the slideshow when a thumbnail is selected  
  $('.thumbWrapper img')
    .each(function(){
      $(this).attr({'height':'45','width':'70'});
    })
    .click(function(){  
      $('#display').cycle('pause'); 
      $play.css({'color':activeColor}); 
      $pause.css({'color':inactiveColor});
    });
    
  $play.css({'color':'#ccc'})
    .click(function(){  
      $('#display').cycle('resume');  
      $(this).css({'color':inactiveColor}); 
      $pause.css({'color':activeColor});
    }); 
  $pause.css({'color':'#7d7d7d'})
    .click(function(){  
      $('#display').cycle('pause');  
      $(this).css({'color':inactiveColor}); 
      $play.css({'color':activeColor});
    });    
    
    
  // IE 7 wants to make the display images small, this tells it keep them big 
  // $('#display img').css({'height':'283px','width':'445px'})    
  
  // calls the scroller function
  scroller(); 
  
  // Flash like multi image gallery on the Inhalt pages
  $('#gallery').cycle({ 
    fx: 'fade', 
    speedIn: 1500, 
    speedOut: 3000,
    timeout: 4000,  
    delay: -2000    
  }); 
  
  // Home page banner galleries
  $('#banner .left').cycle({ 
    random: 1,
    fx: 'fade', 
    speed: 2000, 
    timeout: 11000,  
    delay: -5500    
  });   
  $('#banner .right').cycle({   
    random: 1, 
    fx: 'fade', 
    speed: 2000, 
    timeout: 11000,  
    delay: 0    
  });

});    

function scroller(){
  $('.wrapper').serialScroll({
    items: $('.thumbWrapper a'),
    prev: 'a.previous',
    next: 'a.next',
    duration: 600,
    force: true,
    stop: true,
    lock: false,
    step: 1, 
    // easing:'easeOutQuart',
    cycle: false //don't pull back once you reach the end
  });
}