var timeoutId =0;

function doResize()
{
    windowHeight = $(window).height();
    windowWidth = $(window).width();
    
    windowRatio = windowWidth/windowHeight;
    
    if (windowRatio<originalRatio)
    {
        // bottom top attach
        $(".fullscreenImage").css("height",windowHeight+"px");
        var newWidth = Math.floor((originalWidth/originalHeight)*windowHeight);
        $(".fullscreenImage").css("width",newWidth + "px");
        // move left difference
        var leftOffset = Math.floor((newWidth-windowWidth)/2);
        $(".fullscreenImage").css("position","fixed");
        $(".fullscreenImage").css("left","-"+leftOffset+"px");
        $(".fullscreenImage").css("top","0px");
    }
    else
    {
        // left right attach
        $(".fullscreenImage").css("width",windowWidth+"px");
        var newHeight = Math.floor( windowWidth / (originalWidth/originalHeight) );
        $(".fullscreenImage").css("height",newHeight+"px");
        // move top difference
        var topOffset = Math.floor((newHeight-windowHeight)/2);
        $(".fullscreenImage").css("position","fixed");
        $(".fullscreenImage").css("top","-"+topOffset+"px");
        $(".fullscreenImage").css("left","0px");
    }
}
$(document).ready(function () {
    var img = new Image();
    $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        originalRatio = originalWidth/originalHeight;
        
        windowHeight = $(window).height();
        windowWidth = $(window).width();
        
        windowRatio = windowWidth/windowHeight;
        
        if (windowRatio<originalRatio)
        {
            // bottom top attach
            $(this).css("height",windowHeight+"px");
            var newWidth = Math.floor((originalWidth/originalHeight)*windowHeight);
            $(this).css("width",newWidth + "px");
            // move left difference
            var leftOffset = Math.floor((newWidth-windowWidth)/2);
            $(this).css("position","fixed");
            $(this).css("left","-"+leftOffset+"px");
        }
        else
        {
            // left right attach
            $(this).css("width",windowWidth+"px");
            var newHeight = Math.floor( windowWidth / (originalWidth/originalHeight) );
            $(this).css("height",newHeight+"px");
            // move top difference
            var topOffset = Math.floor((newHeight-windowHeight)/2);
            $(this).css("position","fixed");
            $(this).css("top","-"+topOffset+"px");
        }
        $(this).addClass("fullscreenImage");
        $(this).hide();
        $('#loader').removeClass('loading').append(this);
        //$(this).css("height",$(window).height()+"px");
        //$(this).css("height","300px");
        //var currentWidth = $(this).width();
        //$(this).css("left",$(window).width);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', 'images/'+filename);
    
    $(window).resize(function(){
        doResize();        
    });
});