$(document).ready(function() { 	
	//$("#bg-container img").hide();
	//$("#bg-container").readydiv(function() { ResizeHandler(); }); 
	
	if($('.image-ticker').length > 0) {
		$('.image-ticker').JScroller();
	}
	
	if($('.fade').length > 0){
    $('.fade').innerfade({
        speed: 'slow',
        timeout: 6000,
        type: 'random_start',
        containerheight: '127px'
    });
  }
   
});

$(window).resize(function(){
  ResizeHandler();
});

var bFadeIn = true;

function ResizeHandler() { 
	var ContentContainer				= $("#site");
	var BackContainer						= $("#bg-container");
	var BackContainerImage			= $("#bg-container img");
	var ImageWidth							= $("#bg-container img").width();
	var ImageHeight							= $("#bg-container img").height();

	var ContentContainerHeight  = parseInt(ContentContainer.outerHeight()); 
	var ContentContainerWidth   = parseInt(ContentContainer.outerWidth());
	
	BackContainer.css("overflow", "hidden");
	BackContainerImage.css("position", "absolute");
	
	var SiteHeight 							= parseInt($("#site").innerHeight());
	var ContainerHeight					= SiteHeight;
	
	BackContainer.height(ContainerHeight); // set height of the container so no scrollbar is measured
	
	var WindowHeight 						= parseInt($(window).height());
	var WindowWidth 						= parseInt($(window).width());
	
	BackContainer.width(WindowWidth);
	BackContainer.css("width", "100%");

	if(WindowWidth < ContentContainerWidth) {
		BackContainerImage.css('width', ContentContainerWidth + "px");
	} else {
		BackContainerImage.css('width', WindowWidth + "px");
	}
	BackContainer.css("width", BackContainerImage.width() + "px");
	
	var NewImageHeight = GetDimensionChange(ImageWidth, BackContainerImage.width(), ImageHeight);
	if(NewImageHeight > ContainerHeight) {
		BackContainerImage.css("top", (Math.floor(NewImageHeight - ContainerHeight) / 2) * -1 + "px");
		BackContainerImage.height(NewImageHeight);
		BackContainerImage.css("left", "0px");
	} else {
		BackContainerImage.css("top", "0px");
		BackContainerImage.height(ContainerHeight);
		var NewImageWidth = GetDimensionChange(ImageHeight, ContainerHeight, ImageWidth);
		BackContainerImage.width(NewImageWidth);
	  if(WindowWidth < ContentContainerWidth) {
	  	BackContainerImage.css("left", (Math.floor(NewImageWidth - ContentContainerWidth) / 2) * -1 + "px");
	  } else {
	  	BackContainerImage.css("left", (Math.floor(NewImageWidth - WindowWidth) / 2) * -1 + "px");
	  }
	}

	BackContainer.height(parseInt($("#site").innerHeight())); // height changes during process, so don't use SiteHeight.

	if(bFadeIn) {
	BackContainerImage.animate({opacity: 1}, "slow");	
		bFadeIn = false;
	} else {
		BackContainerImage.show();
	}
}

function GetDimensionChange(SrcDimension, NewDimension, DimensionValue)
{
	return DimensionValue * (NewDimension/SrcDimension);
}