/*
 * -- grayscale.js --
 * copyright (c) james padolsey (http://james.padolsey.com)
 *
 */

var grayscale = (function(){
    
    var config = {
            colorprops: ['color','backgroundcolor','borderbottomcolor','bordertopcolor','borderleftcolor','borderrightcolor','backgroundimage'],
            externalimagehandler : {
                /* grayscaling externally hosted images does not work
                   - use these functions to handle those images as you so desire */
                /* out of convenience these functions are also used for browsers
                   like chrome that do not support canvascontext.getimagedata */
                init : function(el, src) {
                    if (el.nodename.tolowercase() === 'img') {
                        // is img element...
                    } else {
                        // is background-image element:
                        // default - remove background images
                        data(el).backgroundimagesrc = src;
                        el.style.backgroundimage = '';
                    }
                },
                reset : function(el) {
                    if (el.nodename.tolowercase() === 'img') {
                        // is img element...
                    } else {
                        // is background-image element:
                        el.style.backgroundimage = 'url(' + (data(el).backgroundimagesrc || '') + ')';
                    }
                }
            }
        },
        log = function(){
            try { window.console.log.apply(console, arguments); }
            catch(e) {};
        },
        isexternal = function(url) {
            // checks whether url is external: 'canvascontext.getimagedata'
            // only works if the image is on the current domain.
            return (new regexp('https?://(?!' + window.location.hostname + ')')).test(url);
        },
        data = (function(){
            
            var cache = [0],
            expando = 'data' + (+new date());
            
            return function(elem) {
                var cacheindex = elem[expando],
                    nextcacheindex = cache.length;
                if(!cacheindex) {
                    cacheindex = elem[expando] = nextcacheindex;
                    cache[cacheindex] = {};
                }
                return cache[cacheindex];
            };
            
        })(),
        desatimg = function(img, prepare, realel) {
            
            // realel is only set when img is temp (for bg images)
            
            var canvas = document.createelement('canvas'),
                context = canvas.getcontext('2d'),
                height = img.naturalheight || img.offsetheight || img.height,
                width = img.naturalwidth || img.offsetwidth || img.width,
                imgdata;
                
            canvas.height = height;
            canvas.width = width;
            context.drawimage(img, 0, 0);
            try {
                imgdata = context.getimagedata(0, 0, width, height);
            } catch(e) {}
            
            if (prepare) {
                desatimg.preparing = true;
                // slowly recurse through pixels for prep,
                // :: only occurs on grayscale.prepare()
                var y = 0;
                (function(){
                    
                    if (!desatimg.preparing) { return; }
                    
                    if (y === height) {
                        // finished!
                        context.putimagedata(imgdata, 0, 0, 0, 0, width, height);
                        realel ? (data(realel).bgdataurl = canvas.todataurl())
                               : (data(img).dataurl = canvas.todataurl())
                    }
                    
                    for (var x = 0; x < width; x++) {
                        var i = (y * width + x) * 4;
                        // apply monoschrome level across all channels:
                        imgdata.data[i] = imgdata.data[i+1] = imgdata.data[i+2] =
                        rgbtograyscale(imgdata.data[i], imgdata.data[i+1], imgdata.data[i+2]);
                    }
                    
                    y++;
                    settimeout(arguments.callee, 0);
                    
                })();
                return;
            } else {
                // if desatimg was called without 'prepare' flag
                // then cancel recursion and proceed with force! (below)
                desatimg.preparing = false;
            }
            
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {
                    var i = (y * width + x) * 4;
                    // apply monoschrome level across all channels:
                    imgdata.data[i] = imgdata.data[i+1] = imgdata.data[i+2] =
                    rgbtograyscale(imgdata.data[i], imgdata.data[i+1], imgdata.data[i+2]);
                }
            }
            
            context.putimagedata(imgdata, 0, 0, 0, 0, width, height);
            return canvas;
        
        },
        getstyle = function(el, prop) {
            var style = document.defaultview && document.defaultview.getcomputedstyle ? 
                        document.defaultview.getcomputedstyle(el, null)[prop]
                        : el.currentstyle[prop];
            // if format is #ffffff: (convert to rgb)
            if (style && /^#[a-f0-9]/i.test(style)) {
                    var hex = style.match(/[a-f0-9]{2}/ig);
                    style = 'rgb(' + parseint(hex[0], 16) + ','
                                   + parseint(hex[1], 16) + ','
                                   + parseint(hex[2], 16) + ')';
            }
            return style;
        },
        rgbtograyscale = function(r,g,b) {
            // returns single monochrome figure:
            return parseint( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
        },
        getallnodes = function(context) {
            var all = array.prototype.slice.call(context.getelementsbytagname('*'));
            all.unshift(context);
            return all;
        };
        
    var init = function(context) {
        
        // handle if a dom collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodename) {
            // is a dom collection:
            var allcontexts = array.prototype.slice.call(context),
                cindex = -1, clen = allcontexts.length;
            while (++cindex<clen) { init.call(this, allcontexts[cindex]); }
            return;
        }
        
        context = context || document.documentelement;
        
        if (!document.createelement('canvas').getcontext) {
            context.style.filter = 'progid:dximagetransform.microsoft.basicimage(grayscale=1)';
            context.style.zoom = 1;
            return;
        }
        
        var all = getallnodes(context),
            i = -1, len = all.length;
            
        while (++i<len) {
            var cur = all[i];
            
            if (cur.nodename.tolowercase() === 'img') {
                var src = cur.getattribute('src');
                if(!src) { continue; }
                if (isexternal(src)) {
                    config.externalimagehandler.init(cur, src);
                } else {
                    data(cur).realsrc = src;
                    try {
                        // within try statement just encase there's no support....
                        cur.src = data(cur).dataurl || desatimg(cur).todataurl();
                    } catch(e) { config.externalimagehandler.init(cur, src); }
                }
                
            } else {
                for (var pindex = 0, plen = config.colorprops.length; pindex < plen; pindex++) {
                    var prop = config.colorprops[pindex],
                    style = getstyle(cur, prop);
                    if (!style) {continue;}
                    if (cur.style[prop]) {
                        data(cur)[prop] = style;
                    }
                    // rgb color:
                    if (style.substring(0,4) === 'rgb(') {
                        var monorgb = rgbtograyscale.apply(null, style.match(/\d+/g));
                        cur.style[prop] = style = 'rgb(' + monorgb + ',' + monorgb + ',' + monorgb + ')';
                        continue;
                    }
                    // background image:
                    if (style.indexof('url(') > -1) {
                        var urlpatt = /\(['"]?(.+?)['"]?\)/,
                            url = style.match(urlpatt)[1];
                        if (isexternal(url)) {
                            config.externalimagehandler.init(cur, url);
                            data(cur).externalbg = true;
                            continue;
                        }
                        // data(cur).bgdataurl refers to caches url (from preparation)
                        try {
                            var imgsrc = data(cur).bgdataurl || (function(){
                                    var temp = document.createelement('img');
                                    temp.src = url;
                                    return desatimg(temp).todataurl();
                                })();
                            
                            cur.style[prop] = style.replace(urlpatt, function(_, url){
                                return '(' + imgsrc + ')';
                            });
                        } catch(e) { config.externalimagehandler.init(cur, url); }
                    }
                }
            }
        }
        
    };
    
    init.reset = function(context) {
        // handle if a dom collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodename) {
            // is a dom collection:
            var allcontexts = array.prototype.slice.call(context),
                cindex = -1, clen = allcontexts.length;
            while (++cindex<clen) { init.reset.call(this, allcontexts[cindex]); }
            return;
        }
        context = context || document.documentelement;
        if (!document.createelement('canvas').getcontext) {
            context.style.filter = 'progid:dximagetransform.microsoft.basicimage(grayscale=0)';
            return;
        }
        var all = getallnodes(context),
            i = -1, len = all.length;
        while (++i<len) {
            var cur = all[i];
            if (cur.nodename.tolowercase() === 'img') {
                var src = cur.getattribute('src');
                if (isexternal(src)) {
                    config.externalimagehandler.reset(cur, src);
                }
                cur.src = data(cur).realsrc || src;
            } else {
                for (var pindex = 0, plen = config.colorprops.length; pindex < plen; pindex++) {
                    if (data(cur).externalbg) {
                        config.externalimagehandler.reset(cur);
                    }
                    var prop = config.colorprops[pindex];
                    cur.style[prop] = data(cur)[prop] || '';
                }
            }
        }
    };
    
    init.prepare = function(context) {
        
        // handle if a dom collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodename) {
            // is a dom collection:
            var allcontexts = array.prototype.slice.call(context),
                cindex = -1, clen = allcontexts.length;
            while (++cindex<clen) { init.prepare.call(null, allcontexts[cindex]); }
            return;
        }
        
        // slowly recurses through all elements
        // so as not to lock up on the user.
        
        context = context || document.documentelement;
        
        if (!document.createelement('canvas').getcontext) { return; }
        
        var all = getallnodes(context),
            i = -1, len = all.length;
        
        while (++i<len) {
            var cur = all[i];
            if (data(cur).skip) { return; }
            if (cur.nodename.tolowercase() === 'img') {
                if (cur.getattribute('src') && !isexternal(cur.src)) {
                    desatimg(cur, true);
                }
                
            } else {
                var style = getstyle(cur, 'backgroundimage');
                if (style.indexof('url(') > -1) {
                    var urlpatt = /\(['"]?(.+?)['"]?\)/,
                        url = style.match(urlpatt)[1];
                    if (!isexternal(url)) {
                        var temp = document.createelement('img');
                        temp.src = url;
                        desatimg(temp, true, cur);
                    }
                }
            }
        }
    };
    
    return init;

})();