var mainOuterHeight;
var mainDeltaWidth;
var contentWidth;
var imageSizeMin;

$(document).ready(initialize);

function initialize(){
  mainOuterHeight = $("#main").outerHeight(true);
  mainDeltaWidth = $("#main").outerWidth(true) - $("#main").outerWidth();
  contentWidth = 595; //$("#main_left").width();
  imageSizeMin = 345; // vorher: 225;
  window.onresize = resize;
  resize();
}

function resize() {
  var imageSize;
  var imageSizeMax = contentWidth;

  // Höhe
  var possMainHeight= $(window).height() - ( mainOuterHeight - imageSizeMax);
  var imageSizeFromHeight = Math.min(possMainHeight, imageSizeMax);

  // Breite
  var imageSizeFromWidth=imageSizeMax;
  var delta = $(window).width() - contentWidth - imageSizeMax - mainDeltaWidth;	
  if (delta < 0)  imageSizeFromWidth = imageSizeMax + delta;

  //Breite und Höhe
  imageSize = Math.min(imageSizeFromHeight, imageSizeFromWidth);
  imageSize = Math.max(imageSize, imageSizeMin);

  //ContentHeight
  var contentHeight = possMainHeight - $("#main_menu").outerHeight(true) - $("#content_heading").outerHeight(true) - 20;
  
  // Folgende Zeile bewirkt, dass der Content maximal so lang wie das Bild im rechten Bereich ist
  //contentHeight = Math.min(contentHeight, contentWidth - $("#main_menu").outerHeight(true) - $("#content_heading").outerHeight(true) - 20);
  
  // Werte setzen
  $('#main').height(possMainHeight);
  $('#main').width(imageSize + contentWidth);
  $('#main_right').width(imageSize);  
  $('#main_img').height(imageSize); 
  $('#main_wrap').width($("#main").outerWidth(true));
  $('#content').height(contentHeight);
  $('#banner_main').width(imageSize);
  
  $('#main_content_area').width(imageSize + contentWidth);
  $('#main_content_area').height(possMainHeight);
  
  $('#slideshow').width(imageSize);
  $('#slideshow').height(imageSize);  
  
  // Nivo Slider Size (not really nice - need other slider?)
  //$('.nivo-slice').width(imageSize);
  //$('.nivo-slice').height(imageSize);
}