$(document).ready(function() {
    
        var NumberOfSlides = $(".imageClick").length;
        var SlideNumber = 0;
        
        $("#PopUpImage").css("margin-top","-300px"); 
        $("#PopUpImage").css("margin-left","-250px");

        var strBefore = "<table class=\"ImageShadow\" cellpadding=\"0\" cellspacing=\"0\"><tr><td><img class=\"large\" src=\"";
        var strAfter = "\"></td><td class=\"ShadowRight\"><!-- --></td></tr><td class=\"ShadowBottom\"><!-- --></td><td class=\"ShadowCorner\"></td></tr></table>";
        
        var arr =$("img.large");
        
        for (var i=0;i<arr.length;i++)
        {
            var img = $(arr[i]).attr("src");
            
            $(arr[i]).replaceWith(strBefore + img + strAfter);
        };
        
        $(".imageClick").hover(function(){
            $(this).css("background-color","#F37B90");
            //alert($(this).children().text());
            $(this).children().css("color","#FFFFFF");
        },function(){
            $(this).css("background-color","#FFFFFF");
            $(this).children().css("color","#F37B90");
        });
        
        $(".imageClick").click(function(e){
            e.preventDefault();
            var elmt = $(this);
            $(".BackgroundMask").css("visibility","visible");
            $(".BackgroundLoading").css("visibility","visible");   
            
            SlideNumber = elmt.attr("slide");  
                        
            $("#PopUpImageInner").html("<img id=\"MyImage\" src=\"" + elmt.attr("large") + "\"/>");
            
            if (document.images){ 
                waitFor(document.images["MyImage"]) 
            } 

        });
        
        $("#PopUpImage #PopUpLinks .NextPrev").click(function(e){
            e.preventDefault();
            if ($(this).attr("mode")=="next")
            {
                SlideNumber++;
                if (SlideNumber>NumberOfSlides)
                {
                    SlideNumber=1;
                }
            }
            else
            {
                SlideNumber--;
                if (SlideNumber<=0)
                {
                    SlideNumber=NumberOfSlides;
                }
            }

            var newSlide = $(".imageClick[slide='"+SlideNumber+"']");            
            
            $("#PopUpLinks").fadeOut();
            
            setTimeout(function(){
                $("#PopUpImage").animate({height:"50px"},250);

            },500);
            
            setTimeout(function(){
                $("#PopUpImageInner").html("<img id=\"MyImage\" src=\"" + newSlide.attr("large") + "\"/>");
            
                if (document.images){ 
                    waitFor(document.images["MyImage"]) 
                }            
            },850);
                         
            
        });

        $("#PopUpImage #PopUpLinks .Close").click(function(e){
            e.preventDefault();
            $("#PopUpImage").css("visibility","hidden");  
            $(".BackgroundMask").css("visibility","hidden");
            $(".BackgroundLoading").css("visibility","hidden");  
            $("#PopUpImage").css("height","0px").css("width","0px");
            $("#PopUpImage #PopUpLinks").css("display","none");  
            $("#PopUpImage").css("margin-top","-300px"); 
            $("#PopUpImage").css("margin-left","-250px");            
        });
    
    });
    
    function waitFor(img){
        if(!img.complete){
            imgWait=setTimeout('waitFor(document.images["MyImage"])', 250);
        }
        else
        {
            $(".BackgroundLoading").css("visibility","hidden");
            //var image = document.getElementById("MyImage"); 
            
            var ScreenWidth = $(window).width();
            var ScreenHeight = $(window).height();
            
            var image = $("#MyImage"); 
                     
            //var newHeight = image.offsetHeight;
            //var newWidth = image.offsetWidth;
            
            var newHeight = image.height();
            var newWidth = image.width();       
            
            
            
            if (((newWidth+140)>=ScreenWidth) | ((newHeight+180)>=ScreenHeight)) 
            {                
                // RESIZE IMAGE
                if (newWidth>ScreenWidth)
                {                    
                    image.width(ScreenWidth-110)  ;
                }
                else
                {                    
                    image.height(ScreenHeight-130)  ;
                }
                
                newHeight = image.height();
                newWidth = image.width();       
            }    
            
            //$("#PopUpImage").css("visibility","visible");           

            $("#PopUpImage")
                .css("visibility","visible")                
                .animate(
                {
                    marginTop:"-" + (newHeight/2) + "px", 
                    marginLeft:"-" + (newWidth/2) + "px", 
                    width:(newWidth+70) + "px",
                    height:(newHeight+90)                    
                    //width:(image.offsetWidth+70) + "px",
                    //height:(image.offsetHeight+90)
                }
                ,400);
            
            setTimeout(function(){$("#PopUpLinks").fadeIn()},500);
        }
        ;
    };