/*
 * Background position Fixed
 * Also fixes non-visible images
 * Yereth Jansen (yereth@yereth.nl)
 * personal website: www.yereth.nl
 * 
 */

/*
 * jQuery ifixpng plugin
 * (previously known as pngfix)
 * Version 3.0  (2008/06/20)
 * @requires jQuery v1.2.0 or above
 *
 * Examples at: http://jquery.khurshid.com
 * Copyright (c) 2007 Kush M.
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */

 /**
  *
  * @example
  *
  * optional if location of pixel.gif if different to default which is images/pixel.gif
  * $.ifixpng('media/pixel.gif');
  *
  * $('img[@src$=.png], #panel').ifixpng();
  *
  * @apply hack to all png images and #panel which icluded png img in its css
  *
  * @name ifixpng
  * @type jQuery
  * @cat Plugins/Image
  * @return jQuery
  * @author jQuery Community
  */

;(function($) {

        /**
         * helper variables and function
         */
        $.ifixpng = function(customPixel) {
                $.ifixpng.pixel = customPixel;
        };

        $.ifixpng.regexp = {
                bg: /^url\(["']?(.*\.png([?].*)?)["']?\)$/i,
                img: /.*\.png([?].*)?$/i
        },

        $.ifixpng.getPixel = function() {
                return $.ifixpng.pixel || 'images/pixel.gif';
        };

        var hack = {
                base	: $('base').attr('href'),
                ltie7	: $.browser.msie && $.browser.version < 7,
                filter	: function(src) {
                        return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='"+src+"')";
                }
        };

        /**
         * Applies ie png hack to selected dom elements
         *
         * $('img[@src$=.png]').ifixpng();
         * @desc apply hack to all images with png extensions
         *
         * $('#panel, img[@src$=.png]').ifixpng();
         * @desc apply hack to element #panel and all images with png extensions
         *
         * @name ifixpng
         */

        $.fn.ifixpng = hack.ltie7 ? function() {
                function fixImage(image, source, width, height, hidden) {
                        image.css({filter:hack.filter(source), width: width, height: height})
                          .attr({src:$.ifixpng.getPixel()})
                          .positionFix();
                }

        return this.each(function() {
                        var $$ = $(this);
                        if ($$.is('img') || $$.is('input')) { // hack image tags present in dom
                                var source, img;
                                if (this.src && this.src.match($.ifixpng.regexp.img)) { // make sure it is png image
                                        // use source tag value if set 
                                        source = (hack.base && this.src.substring(0,1)!='/' && this.src.indexOf(hack.base) === -1) ? hack.base + this.src : this.src;
                                        // If the width is not set, we have a problem; the image is not probably visible or not loaded
                                        // and we need a work around.
                                        if (!this.width || !this.height) {
                                                $(new Image()).one('load', function() {
                                                        fixImage($$, source, this.width, this.height);
                                                        $(this).remove();
                                                }).attr('src', source);
                                        // If the image already has dimensions (it's loaded and visible) we can fix it straight away.
                                        } else fixImage($$, source, this.width, this.height);
                                }
                        } else if (this.style) { // hack png css properties present inside css
                                var imageSrc = $$.css('backgroundImage');
                                // Background repeated images we cannot fix unfortunately
                                if (imageSrc && imageSrc.match($.ifixpng.regexp.bg) && this.currentStyle.backgroundRepeat == 'no-repeat') {
                                        imageSrc = RegExp.$1;
                                        var x = this.currentStyle.backgroundPositionX || 0, y = this.currentStyle.backgroundPositionY || 0;
                                        if (x || y) {
                                                var css = {}, img;
                                                if (x == 'left') css.left = 0; 
                                                // if right is 0, we have to check if the parent has an odd width, because of an IE bug
                                                else if (x == 'right') css.right = $$.outerWidth() % 2 === 1 ? -1 : 0;
                                                else if (x.indexOf('%') == -1 || parseInt(x) < 50) css.left = x;
                                                else css.right = (100 - parseInt(x)) + '%';
                                                // if bottom is 0, we have to check if the parent has an odd height, because of an IE bug
                                                if (y == 'bottom') css.bottom = $$.outerHeight() % 2 === 1 ? -1 : 0; 
                                                else if (y == 'top') css.top = 0;
                                                else if (y.indexOf('%') == -1 || parseInt(y) < 50) css.top = y;
                                                else css.bottom = (100 - parseInt(y)) + '%';
                                                img = new Image();
                                                $(img).one('load', function() {
                                                        if (css.top == 'center') css.top = ($$.outerHeight() - this.height) / 2;
                                                        if (css.left == 'center') css.left = ($$.outerWidth() - this.width) / 2;
                                                        $$.positionFix().css({backgroundImage: 'none'}).prepend(
                                                                $('<div></div>').css(css).css({
                                                                        width: this.width,
                                                                        height: this.height,
                                                                        position: 'absolute',
                                                                        filter: hack.filter(imageSrc)
                                                                })
                                                        );
                                                        $(this).remove();
                                                });
                                                img.src = imageSrc;
                                        } else {
                                                $$.css({backgroundImage: 'none', filter:hack.filter(imageSrc)});
                                        }
                                }
                        }
                });
        } : function() { return this; };

        /**
         * positions selected item relatively
         */
        $.fn.positionFix = function() {
                return this.each(function() {
                        var $$ = $(this);
                        if ($$.css('position') != 'absolute') $$.css({position:'relative'});
                });
        };

})(jQuery);