$(document).ready(function(){

    var $wallpaperImgImg;
    var $wallpaperImgDiv;

    function getDocHeight() {
        var D = document;
        return Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)
        );
    }

    function getDocWidth() {
        var D = document;
        return Math.max(
            Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
            Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
            Math.max(D.body.clientWidth, D.documentElement.clientWidth)
        );
    }
    
    function setImg(name){
        $wallpaperImg
            .css("display", "none")
            .append("<img src='"+getFile(name)+"' style='height:" + ($(window).height()-40) + "px;' />" + "<div style='" +
            //.append("<img src='"+getFile(name)+"' />" + "<div style='" +
                "position:absolute; " +
                "top:50%; left:50%;" +
                "margin-top:-18px; margin-left:-110px;" +
                "height:36px; width: 220px;" +
                "text-align:center; line-height:36px;" +
                "font-size:16px;" + 
                "border:1px solid #000000;" +
                "background:#ffffff;" +
                "opacity:0.8; filter:alpha(opacity=60);'"+
                ">Click on the image to close</div>"
            );
        $wallpaperImgImg = $("#wallpaperImg>img");
        $wallpaperImgDiv = $("#wallpaperImg>div");
        var width = getDocWidth();
        //window.alert(width);
        if(!IE6){
            if(width < 1044){
                //window.alert(width + " 2");
                var sizew = width-20;
                $wallpaperImgImg.css("width", sizew+"px");
            }
        }
        // a hacky way to get IE6 shade to fill the screen properly
        if(IE6){
            if(width < 1066){
                //window.alert(width + " 2");
                var sizew = width-42;
                $wallpaperImgImg[0].style.width = sizew+"px";
            }
            $shade.css({
                "width" : (getDocWidth()-23)+"px",
                "height" : (getDocHeight())+"px",
                "z-index" : "9001"
            });
        }
        else{
            $shade.css({
                "width" : (getDocWidth())+"px",
                "height" : (getDocHeight())+"px",
                "z-index" : "9001"
            });
        }
        //window.alert(document.getElementById("wallpaperImg").getElementsByTagName("img")[0].width);
        $wallpaperImg.css("z-index","9002").fadeIn(500, function(){
            setTimeout(function(){ 
                $wallpaperImgDiv.fadeOut(500, function(){
                    $wallpaperImgDiv.css({
                        "top" : "0px",
                        "left" : "0px",
                        "border" : "0px",
                        "margin" : "0px"
                    }).fadeIn(500);
                })
            }, 500);
        });
    }

    function clearImg(){
        $wallpaperImg.fadeOut(500, function(){
            $wallpaperImgImg.remove();
            $wallpaperImgDiv.remove();
        });
        
    }

    function getFile(name){
        var width = $(window).width();
        var imgblock = document.getElementById("wallpaperImg");
        var height = $(window).height()-40;
        if(screen.width >= 1440){
            var left = (1440/900)*height;
            imgblock.style.left = (width-left)/2 + "px"
            imgblock.style.top = resolveTop(height) + "px"
            return name.split("-thumb")[0]+"-1440x900.jpg";
        }
        else if(screen.width >= 1280){
            if(screen.height >= 1024){
                var left = (1280/1024)*height;
                imgblock.style.left = (width-left)/2 + "px"
                imgblock.style.top = resolveTop(height) + "px"
                return name.split("-thumb")[0]+"-1280x1024.jpg";
            }
            else{
                var left = (1280/800)*height;
                imgblock.style.left = (width-left)/2 + "px"
                imgblock.style.top = resolveTop(height) + "px"
                return name.split("-thumb")[0]+"-1280x800.jpg";
            }
        }
        else if(screen.width >= 1024){
            var left = (1024/768)*height;
            imgblock.style.left = (width-left)/2 + "px"
            imgblock.style.top = resolveTop(height) + "px"
            return name.split("-thumb")[0]+"-1024x768.jpg";
        }
        else{
            var left = (1024/768)*height;
            imgblock.style.left = (width-left)/2 + "px"
            imgblock.style.top = resolveTop(height) + "px";
            return name.split("-thumb")[0]+"-1024x768.jpg";
        }
        return name;
    }

    function resolveTop(size){
        var height = getDocHeight();
        //alert(document.documentElement.scrollTop + " " + size + " " + (document.documentElement.scrollTop+size) + " " + height);
        if(((document.documentElement.scrollTop) + size) > height){
            //window.alert(height + " " + size);
            return (height) - size + 20;
        }
        else{
            return document.documentElement.scrollTop + 20;
        }
        return document.documentElement.scrollTop + 20;
    }

    var adder = document.getElementById("wallMsg")
    if(adder){
        adder.innerHTML += "<br />Click on the image thumbnail to preview it.";
    }

    $(".wallpaper>img", $wallpaperImg).mouseover(function(){
        this.style.cursor = "pointer";
    }).mouseout(function(){
        this.style.cursor = "default";
    }).click(function(){
        $shade.css({
            "display" : "block",
            "opacity" : "0.7"
        });
        setImg(this.src);
    });
    
    $('body').append('<div id="shade">&nbsp;</div><div id="wallpaperImg"></div>');
    var $wallpaperImg = $("#wallpaperImg");
    var $shade = $("#shade");
    $shade.mouseover(function(){
        this.style.cursor = "pointer";
    }).mouseout(function(){
        this.style.cursor = "default";
    }).click(function(){
        closeImg();
    });
    
    $wallpaperImg.mouseover(function(){
        this.style.cursor = "pointer";
    }).mouseout(function(){
        this.style.cursor = "default";
    }).click(function(){
        closeImg();
    });
    
    function closeImg(){
        $shade.fadeOut(500);
        clearImg();
    }
    
});