// jquery plugin to enhance the resolution of an image with a higher res image.
// the initial image must in advance be scaled to the size of the high 
// resolution image. the url of the enhanced image is calculated by 
// calcEnhancedUrl out of the options that are interpolated with the defaults 
// and the metadata. a spinner is shown above the original image while the high 
// resolution image is being loaded.
// this plugin is best used in a $(window).load (because the enhancement of 
// an image should not interfere with the loading of the page).
(function($) {
    
    $.fn.enhanceresolution = function(inputOptions) {
        var options = $.extend({}, $.fn.enhanceresolution.defaults, inputOptions);
        return this.each(function() {
            var nodeOptions = $.metadata ? $.extend({}, options, $(this).metadata()) : options;
            var spinnerDiv = createSpinner(this, nodeOptions.spinnerUrl);
            loadImage(this, $.fn.enhanceresolution.calcEnhancedUrl(this, nodeOptions), spinnerDiv, nodeOptions.time);
        });
    }
    
    $.fn.enhanceresolution.defaults = {
        spinnerUrl: 'spinner.gif',
        time: 2000
    }
    
    $.fn.enhanceresolution.calcEnhancedUrl = function(node, options) {
        return options.midres;
    }

    function createSpinner(target, spinnerUrl) {
        var imgTag = '<img src="' + spinnerUrl + '" />';
        var leftPos = 'left: ' + (target.x + 10) + 'px;';
        var topPos = 'top: ' + (target.y + 10) + 'px;';
        var divTag = '<div style="position: absolute; ' + topPos + leftPos + '">' + imgTag + '</div>';
        var newNode = $(divTag);
        $(target).after(newNode);
        return newNode;
    }
	    
    function loadImage(target, url, spinnerDiv, time) {
        var target = target;
        var helpImage = new Image();
        helpImage.src = url;
        pollLoadState();
        
        function pollLoadState() {
            if (helpImage.complete) {
                if (target.src != helpImage.src) {
                    target.src = helpImage.src;
                    spinnerDiv.hide(
                        time,
                        function() {
                            $(this).remove();
                        }
                    );
                }
            } else {
                window.setTimeout(pollLoadState, time);
            }
        }
    }

})(jQuery);