$(document).ready(function() {
    
        var NumberOfSlides = $(".imageClick").length;
        var SlideNumber = 0;
        
        $("#PopUpImage").css("margin-top","-300px"); 
        $("#PopUpImage").css("margin-left","-200px");
        
        $(".imageClick").hover(function(){
            $(this).css("background-color","#CC0000");           
            $(this).children().css("color","#FFFFFF");
        },function(){
            $(this).css("background-color","#FFFFFF");
            $(this).children().css("color","#CC0000");
        });
        
        $(".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 ScreenWidth = $(window).width();
            var ScreenHeight = $(window).height();
            
            var image = $("#MyImage"); 
                     
            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")                
                .animate(
                {
                    marginTop:"-" + (newHeight/2) + "px", 
                    marginLeft:"-" + (newWidth/2) + "px", 
                    width:(newWidth+70) + "px",
                    height:(newHeight+90)                    
                }
                ,400);
            
            setTimeout(function(){$("#PopUpLinks").fadeIn()},500);
        }
        ;
    };