// When DOM is ready
$(function() {
    
    $('body').append('<div id="azgbg"></div><div id="azgimg"></div>');
    
    // Action for links with autozoom class
    $('a.autozoom').click(function(e) {
        
        // Hide divs
        $('#azbg').hide();
        $('#azimg').hide();
        
        // Get image url
        var imgUrl = this.href;
        
        // Create new image object
        var myImg = new Image();
        
        // Load image
        $(myImg)
        
            // On image loading
            .load(function() {
                
                // Get body dimensions
                var bodyW = $('body').width();
                var bodyH = $('body').height();
                
                // Get screen dimensions
                var screenW = $(window).width();
                var screenH = $(window).height();
                
                // Get scroll coordinates
                var scrollX = $(window).scrollLeft();
                var scrollY = $(window).scrollTop();
                
                // Get image dimensions
                var imgW = this.width;
                var imgH = this.height;
                
                // Get image coordinates
                var imgX = scrollX + Math.round((screenW - imgW) / 2);
                var imgY = scrollY + Math.round((screenH - imgH) / 2);
                
                // Make sure coordinates not less than ten
                if (imgX < 10) { imgX = 10; }
                if (imgY < 10) { imgY = 10; }
                
                // Set div options
                $('#azgbg').css('position', 'absolute');
                $('#azgbg').css('float', 'left');
                $('#azgbg').css('left', '0px');
                $('#azgbg').css('top', '0px');
                $('#azgbg').css('width', bodyW + 'px');
                $('#azgbg').css('height', bodyH + 'px');
                $('#azgbg').css('background-color', '#EEEEEE');
                $('#azgbg').css('filter', 'alpha(opacity:50)');
                $('#azgbg').css('-moz-opacity', '.50');
                $('#azgbg').css('opacity', '.50');
                $('#azgbg').css('cursor', 'pointer');
                $('#azgimg').css('position', 'absolute');
                $('#azgimg').css('float', 'left');
                $('#azgimg').css('left', imgX + 'px');
                $('#azgimg').css('top', imgY + 'px');
                $('#azgimg').css('width', imgW + 'px');
                $('#azgimg').css('height', imgH + 'px');
                $('#azgimg').css('background-image', 'url(' + imgUrl + ')');
                $('#azgimg').css('cursor', 'pointer');
                
                // Show divs
                $('#azgbg').show();
                $('#azgimg').show();
                
            })
            
            // On loading error
            .error(function() {
                
                // Error
                alert('Error loading full-size image');
                
            })
            
            // Set image source
            .attr('src', imgUrl);
        
        // Disable link
        return false;
        
    });
    
    // Assign event handlers for auto-zoom divs
    $('#azgbg').click(closeAz);
    $('#azgimg').click(closeAz);
    
    // Close auto-zoom
    function closeAz() {
        
        // Hide divs
        $('#azgimg').hide();
        $('#azgbg').hide();
        
    }
    
});