/*
Script: fixpng.js

Dependancies:
         mootools - <Moo.js>, <String.js>, <Array.js>, <Function.js>, <Element.js>, <Dom.js>
        
Author:
        Aaron Newton, <aaron [dot] newton [at] cnet [dot] com>

                Function: fixPNG
                this will make transparent pngs show up correctly in IE. This function 
                is based almost entirely on the function found here: 
                <http://homepage.ntlworld.com/bobosola/pnginfo.htm>
                
                Arguments:
                el - the image element (or id) or dom element with a background image (or id) to fix
                
                Note: 
                there is an instances of this already set to fire onDOMReady that
                will fix any png files with the class "fixPNG". This means any producer
                can just give the class "fixPNG" to any img tag and they are set BUT, the
                ping will look wrong until the DOM loads, which may or may not be noticeable.
                
                The alternative is to embed the call right after the image like so:
                
                ><img src="png1.png" width="50" height="50" id="png1">
                ><img src="png2.png" width="50" height="50" id="png2">
                ><script>
                >       $$('#png1', '#png2').each(function(png) {fixPNG(png);});
                >       //OR
                >       fixPNG('png1');
                >       fixPNG('png2');
                ></script>
*/



Element.extend({

        isVisible: function(){
                return (this.getStyle('display') || 'none') != 'none' && this.getStyle('visibility') != 'hidden';
        },

        show: function(){
                return this.setStyle('display', '').setOpacity(1);
        },

        hide: function(collapse){
                return (collapse) ? this.setStyle('display', 'none') : this.setOpacity(0);
        },

        toggle: function(collapse){
                return (this.isVisible()) ? this.hide(collapse) : this.show();
        }

});




function fixPNG(el) {
        try {
                if (window.ie6){
                        el = $(el);
                        if (!el) return el;

                        if (el.getTag() == "img" && el.getProperty('src').test(".png")) {
                                var vis = el.isVisible();
                                try { //safari sometimes crashes here, so catch it
                                        dim = el.getSize();
                                }catch(e){}
                                if(!vis){
                                        var before = {};
                                        //use this method instead of getStyles
                                        ['visibility', 'display', 'position'].each(function(style){
                                                before[style] = this.style[style]||'';
                                        }, this);
                                        //this.getStyles('visibility', 'display', 'position');
                                        this.setStyles({
                                                visibility: 'hidden',
                                                display: 'block',
                                                position:'absolute'
                                        });
                                        dim = el.getSize(); //works now, because the display isn't none
                                        this.setStyles(before); //put it back where it was
                                        el.hide();
                                }
                                var replacement = new Element('span', {
                                        id:(el.id)?el.id:'',
                                        'class':(el.className)?el.className:'',
                                        title:(el.title)?el.title:(el.alt)?el.alt:'',
                                        styles: {
                                                display: vis?'inline-block':'none',
                                                width: dim.size.x+'px',
                                                height: dim.size.y+'px',
                                                filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" 
                                                        + el.src + "', sizingMethod='scale');"
                                        },
                                        src: el.src
                                });
                                if(el.style.cssText) {
                                        try {
                                                var styles = {};
                                                var s = el.style.cssText.split(';');
                                                s.each(function(style){
                                                        var n = style.split(':');
                                                        styles[n[0]] = n[1];
                                                });
                                                replacement.setStyle(styles);
                                        } catch(e){ dbug.log('fixPNG1: ', e)}
                                }
                                if(replacement.cloneEvents) replacement.cloneEvents(el);
                                el.replaceWith(replacement);
                        } else if (el.getTag() != "img") {
                                var imgURL = el.getStyle('background-image');
                                if (imgURL.test(/\((.+)\)/)){
                                        el.setStyles({
                                                background: '',
                                                filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.match(/\((.+)\)/)[1] + "')"
                                        });
                                };
                        }
                }
        } catch(e) {alert('fixPNG2: ' + e)}
};
if(window.ie6) window.addEvent('domready', function(){$$('img.fixPNG').each(fixPNG)});