/**
   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).
   
   how to configure the plugin:
   the plugin is configured via $.fn.enhanceresolution.defaults and metadata 
   and options to the jquery calls
   the properties used are:
   - pollInterval - the time in milli seconds between completness checks on the highres image (2000 seems to be a reasonable default)
   - calcEnhancedUrl - the function that is used to calculate the url of the highres image (at the momentent options.midres is used, 
	 but something node.getAttribute('alt') could be used).
   - showSpinner - this function is called when the highresimage begins to load. the default creates an absolute positioned image with 
     spinnerUrl over the lowres image, but if the application has a general progress indication this method should be replaced.
     e.g. $('#spinner').show() could be a good implementation.
   - hideSpinner - the reverse function of showspinner. the defaultimplementation hides the spinner and removes it from the dom,
     but something like $('#spionner').hide() make sense if the application has a general progress indication.
   - spinnerUrl - is only used when the default showSpinner method is used.
   - placeOverlay - is used to place the spinner overlay over the lowres image.
**/
(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 spinner = nodeOptions.showSpinner(this, nodeOptions);
            loadImage(this, nodeOptions.calcEnhancedUrl(this, nodeOptions));

            function loadImage(target, url) {
                var helpImage = new Image();
		$(helpImage).load(function() {
                    target.src = helpImage.src;
                    nodeOptions.hideSpinner(spinner, nodeOptions);
		}).error(function() {
                    nodeOptions.hideSpinner(spinner);
		}).attr('src', url);
            }
        });
    };
    
    $.fn.enhanceresolution.version = "1.1.1";

    $.fn.enhanceresolution.defaults = {
        calcEnhancedUrl: midresOption,
        
        showSpinner: overlayShowSpinner,
        hideSpinner: overlayHideSpinner,
        
        spinnerUrl: 'spinner.gif',
        placeOverlay: placeOverlay
    };

    function overlayShowSpinner(target, options) {
    /*    var imgTag = '<img src="' + options.spinnerUrl + '" />';
        var xy = options.placeOverlay(target);
        var leftPos = 'left: ' + xy[0] + 'px;';
        var topPos = 'top: ' + xy[1] + 'px;';
        var divTag = '<div style="position: absolute; ' + topPos + leftPos + '">' + imgTag + '</div>';
        var newNode = $(divTag);
        $(target).after(newNode);
        return newNode; */
    }
    
    function overlayHideSpinner(spinner) {
        $(spinner).hide(
            function() {
                $(this).remove();
            }
        );
    }
    
    function placeOverlay(target) {
        return [target.x + 10, target.y + 10];
    }
    
    
    function midresOption(node, options) {
        return options.midres;
    }

    function debug(o) {
        if (window.console && window.console.log) {
            window.console.log(o);
        }
    }

})(jQuery);