/*
    iePNG.js is designed to correct alpha transparency in PNG files only for IE versions 5-6.
    If used correctly iePNG will provide alpha transparency in image elements as well as background images in block elements. It will also allow for image swapping within these elements.
    Dependencies:
        prototype version 1.6.0+
    Known issues / limitations with DXImageTransform.Microsoft.AlphaImageLoader filters:
        Backgrounds defined in a style attribute will not be filtered.
        Absolutely positioned elements will disappear, to get around this wrap the element in an absolute positioned parent.
        Child Elements of a filtered node will not be clickable.
        Elements that have background defined in CSS properties which reference the parent node will not support image swapping. Example: #myParent div.my-div-with-background {background-image:url(bg.png);}
        May not work with images from a database (not tested).
*/
iePNG = Class.create();
iePNG.prototype = {
    elCurrent:null,
    imgSubstitute:'/img/theme1/shared/clear.gif',

    initialize:function(el){
        this.elCurrent = el;
        this.boundCorrectPNG = this.correctPNG.bindAsEventListener(this);
        this.correctPNG();
    },

    correctPNG:function(){
        if(this.elCurrent.nodeName.toLowerCase() == 'img' && this.getFileExt(this.elCurrent.readAttribute('src')) != 'png') return;
        // stop observing element so the replacement does not trigger a listener
        Event.stopObserving(this.elCurrent, 'propertychange', this.boundCorrectPNG);
        // call appropriate filter method
        if (this.elCurrent.nodeName.toLowerCase() != 'img') {
            this.bgPNG();
        } else {
            this.imgPNG();
        }
        // start observing element
        Event.observe(this.elCurrent, 'propertychange', this.boundCorrectPNG);
    },

    bgPNG:function(){
        // get updated background
        this.newBg = this.getNewBg(this.elCurrent);
        // update element with filter and remove background
        this.elURL = (this.elCurrent.getStyle('background-image') != 'none') ? this.elCurrent.getStyle('background-image') : this.newBg ;
        this.elURLStripped = this.elURL.substring(this.elURL.length - (this.elURL.length - 5), this.elURL.length  - 2);
        if (this.elURL != 'none' && this.getFileExt(this.elURLStripped) == 'png'){
             this.elCurrent.setStyle({background: '', filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + this.elURLStripped + "')" });
        }
    },

    imgPNG:function(){
        // update image with filter and set src to a clear gif
        if(this.elCurrent.nodeName.toLowerCase() == 'img' && this.getFileExt(this.elCurrent.readAttribute('src')) == 'png'){
            this.elCurrent.setStyle({'filter':"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + this.elCurrent.readAttribute('src') + "')",  'height':this.elCurrent.getHeight(), 'width':this.elCurrent.getWidth()});
            this.elCurrent.writeAttribute({'src':this.imgSubstitute});
        }
    },

    getNewBg:function(el){
        // create temp element to get updated background
        this.tmpDiv = $(document.createElement(el.nodeName.toLowerCase()))
            .addClassName(el.className)
            .addClassName('REMOVEME')
            .writeAttribute({'id':el.id})
            .setStyle({'display':'none'});
        document.body.appendChild(this.tmpDiv);
        this.bgDiv = $A(document.getElementsByClassName('REMOVEME')).last();
        this.bgDivbg = this.bgDiv.getStyle('background-image');
        this.bgDiv.remove();
        return this.bgDivbg;
    },

    getFileExt:function(s){
        // get the file extension from the URL string
        this.sLower = s.toLowerCase();
        this.qLoc = this.sLower.indexOf('?');
        if (this.qLoc == -1) {
            this.qLoc = this.sLower.length;
        }
        this.ext = this.sLower.substring(this.qLoc  - 3, this.qLoc);
        return this.ext;
    }
};
// this will get all the DOM elements with a class of 'iePNG' and is called on page load.
function _iePNG_init(){
    if (!/MSIE (5\.5|6)/.test(navigator.userAgent) || typeof filters == 'unknown') return;
    $A(document.getElementsByClassName('iePNG')).each(function(el){new iePNG(el);});
}
// this can be used for elements that need to be filtered after an ajax update - this is designed to be used in conjunction with a call-back function.
function iePNG_SingleFix(elID){
    if($(elID).hasAttribute('iePNG')) return;
    $(elID).writeAttribute({iepng: 'true'});
    if (/MSIE (5\.5|6)/.test(navigator.userAgent) || typeof filters == 'unknown') new iePNG($(elID));
}
// to make the application of the filters happen as early as possible 'dom:loaded' is used.
if(Prototype.Browser.IE){
    document.observe('dom:loaded', _iePNG_init);
}