$(document).ready(function() {
  
  var browserWidth = $(window).width(),
      browserHeight = $('.container').height();
  
  adjustImageSize(browserWidth, browserHeight);
  adjustTeaserPosition(browserHeight);
  
  $(window).bind('resize', function() {
    browserWidth = $(window).width();
    browserHeight = $('.container').height();
    adjustImageSize(browserWidth, browserHeight);
    adjustTeaserPosition(browserHeight);
  });
  
  $('.background-container').cycle({
    fx: 'fade',
    before: onBefore,
    after: onAfter,
    timeout: 8000,
    containerResize: 0,
    pager: '.teaser-controls ul',
    pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#" class="png">' + idx + '</a></li>'; 
    }
  });
  $('.teaser-container').hover(function() {
    $('.background-container').cycle('pause');
  }, function() {
    $('.background-container').cycle('resume');
  });
  
});

function adjustImageSize(browserWidth, browserHeight) {
  var ratio = 1280/640;
  $('.background-container').height(browserHeight);
  if ((browserWidth/browserHeight) > ratio) {
    $('.background-container img').css({
      width: browserWidth,
      height: browserWidth / ratio,
      marginLeft: (browserWidth / 2) * -1,
      marginTop: browserWidth / ratio / 2 * -1
    });
  } else {
    $('.background-container img').css({
      width: browserHeight * ratio,
      height: browserHeight,
      marginLeft: (browserHeight * ratio / 2) * -1,
      marginTop: browserHeight / 2 * -1
    });
  };
}

function adjustTeaserPosition(browserHeight) {
  var top = ((browserHeight - $('.front-banners').height()) / 2) - ($('.teaser-container').height() / 2) + $('.header').height() - 20;
  //alert(top);
  $('.teaser-container').css('top', top)
}

function onBefore() {
  if ($.browser.msie) {
    $('.teaser-controls, .teaser:visible').hide();
  } else {
    $('.teaser:visible, .teaser-controls').fadeOut('fast');
    // $('').fadeOut('fast');
  };
}

function onAfter() {
 
    $('.teaser-controls, .teaser-' + this.className)
      .fadeIn('fast', function() {
          adjustTeaserPosition($('.container').height());
      });
  
}