/*
   RoundedCorners 2.0
   ============================================================================

                                                Description
--------------------------
Attempts to round corners of images by putting custom png files in each
corner.


Usage
--------------------------
Images must use the css class "rounded": <img class="rounded" .. />
The images must reside in a separate container div.
The container must have specified width.


Explanation
--------------------------
Each <img class="rounded" .. /> is first wrapped in a rounded_wrapper div.
Inside the wrapper, additional 4 divs are created. One for each corner. The
width and height of the given image is copied to the wrapper div and the
corners. The corner divs are positioned on top of the image. Each corner
div has its own png image defined in the css.

The following html is generated for each image
<div class="rounded_wrapper">
<img class="rounded" src=".." />
<div class="rounded topleft"></div>
<div class="rounded bottomleft"></div>
<div class="rounded topright"></div>
<div class="rounded topleft"></div>
</div>

All this is ignored in msie6 as a result of poor png transparency support.


Author
--------------------------
Simen Lysebo, August 2009

*/

RoundedCorners = Class.create({

    intervalID: false,
    isIE6: null,

    /*
     * constructor
     * class must be instantiated after dom:loaded
     * takes no action if browser is msie6
     */
    initialize: function() {
        if (Prototype.Browser.IE && navigator.appVersion.match(/MSIE 6\.0/)) {
            this.isIE6 = true;
        } else {
            this.isIE6 = false;
            this.setUpInterval();
        }

    },

    /*
     * img class="rounded" must be checked periodically when page has been loaded
     * as ie7/ie8 sometimes loads images slowly. The interval is stopped when
     * all rounded-images are processed
     */
    setUpInterval: function() {
        if (this.intervalID == false) {
            this.intervalID = setInterval("roundedCorners.iterateImages()", 200);
        } else {
            // interval is already running, taking care of things
        }
    },


    /*
     * Loops through all img.rounded and applies stuff when image boundaries are set up.
     * Removes the rounded class for each finished element, and stops interval when all
     * images are processed
     * */
    iterateImages: function(){
        $$('img.rounded').each(function(img){
            if (img.complete && img.getWidth() > 0 && img.getHeight() > 0) {
                this.doStuff(img);
                img.removeClassName("rounded");
            }
        }.bind(this));

        if (this.intervalID != false) {
            if ($$('img.rounded').length == 0){
                // stop timeout when no more images can be processed
                clearTimeout(this.intervalID);
                this.intervalID = false;
            }
        }
    },

    /*
     * apply rounded corners. see rounded2 related classes in css
     */
    doStuff: function(img) {
        // wrap image
        wrapper = img.wrap('div', {'class' : 'rounded_wrapper'});
        // needs to explicitly set class name, because ie8 doesn't
        wrapper.addClassName("rounded_wrapper");

        // add one div for each corner
        img.insert({'after': '<div class="rounded topleft"></div>'});
        img.insert({'after': '<div class="rounded topright"></div>'});
        img.insert({'after': '<div class="rounded bottomleft"></div>'});
        img.insert({'after': '<div class="rounded bottomright"></div>'});

        // get dimensions for image
        var w = img.getWidth();
        var h = img.getHeight();

        // set w+h on wrapper, and inherit float from container
        wrapper.setStyle({
            width: w + "px",
            height: h + "px",
            cssFloat: wrapper.up().getStyle("float")
        });

        // set w+h on corner divs
        wrapper.select('div.rounded').each(function(corner){
            corner.setStyle({
                width: w + "px",
                height: h + "px"
            });
        }.bind(this));

    }   

});

var roundedCorners;

document.observe('dom:loaded', function(event){
    roundedCorners = new RoundedCorners();
});