/* - jsani.js - */
// baumgardt en brokling JS animated overlay script
// (c) Pareto 2009 (no clue about license, so assume it's closed)

var global = this;
global.bbjsani = new function bbjsani() {
    var bbjsani = this;

    function debug(msg) {
        var body = document.getElementsByTagName('body')[0];
        var div = document.createElement('div');
        div.backgroundColor = 'red';
        div.color = 'black';
        div.appendChild(document.createTextNode(msg));
        body.appendChild(div);
    };

    var AnimatedPictureOverlayer = this.AnimatedPictureOverlayer =
            function AnimatedPictureOverlayer() {
        if (arguments.length) {
            this._initialize.apply(this, arguments);
        };
    };

    AnimatedPictureOverlayer.prototype._initialize = function _initialize(
            doc, tilesize, stepsize, maxvalue, interval) {
        /*  initialize the animated overlays
        
            finds all elements that should have the animated overlay in doc
            according to class name, and initializes an overlay for them

            the class name should be 'jsani-<width>x<height>', where 'width'
            and 'height' are the width and height of the image to be overlaid,
            in _tiles_

            'doc' is the document searced for the elements with the class,
            'tilesize' is the width/height, in pixels, of a single tile -
            tiles are always square
        */
        this.doc = doc;
        this.tilesize = tilesize;
        this.overlays = [];

        var images = doc.getElementsByTagName(
            'body')[0].getElementsByTagName('img');
        for (var i=0; i < images.length; i++) {
            var el = images[i];
			var classnames = el.className ? el.className.split(' ') : [];
            if (!classnames.length) {
                continue;
            };
            for (var j=0; j < classnames.length; j++) {
                var cn = classnames[j];
                if (cn.indexOf('jsani-') == 0) {
                    if (!/^jsani\-\d+x\d+$/.exec(cn).length) {
                        throw('Unexpected format for class "' + cn + '"');
                    };
                    var widthheight = cn.split('-')[1].split('x');
                    this.overlays.push(this.initialize_overlay(
                        el, widthheight[0], widthheight[1],
                        stepsize, maxvalue, interval));
                };
            };
        };
        for (var i=0; i < this.overlays.length; i++) {
            this.overlays[i].run();
        };
    };

    AnimatedPictureOverlayer.prototype.initialize_overlay =
            function initialize_overlay(img, width, height, stepsize,
                                        maxvalue, interval) {
        return new AnimatedPictureOverlay(
            this.doc, img, this.tilesize, width, height, stepsize, maxvalue,
            interval);
    };

    var AnimatedPictureOverlay = this.AnimatedPictureOverlay =
            function AnimatedPictureOverlay() {
        if (arguments.length) {
            this._initialize.apply(this, arguments);
        };
    };

    AnimatedPictureOverlay.prototype._initialize = function _initialize(
            doc, img, tilesize, numtileswidth, numtilesheight,
            stepsize, maxvalue, interval) {
        this.doc = doc;
        this.image = img;
        this.tilesize = tilesize;
        this.numtileswidth = numtileswidth;
        this.numtilesheight = numtilesheight;
        this.stepsize = stepsize;
        this.maxvalue = maxvalue;
        this.interval = interval;
    };

    AnimatedPictureOverlay.prototype.run = function run() {
        var width = this.tilesize * this.numtileswidth;
        var height = this.tilesize * this.numtilesheight;
        var parentdiv = this.doc.createElement('div');
        parentdiv.style.width = width + 'px';
        parentdiv.style.height = height + 'px';
        parentdiv.style.backgroundImage = 'url(' + this.image.src + ')';
        parentdiv.style.border = '0px';
        this.image.parentNode.replaceChild(parentdiv, this.image);

        for (var i=0; i < this.numtilesheight; i++) {
            for (var j=0; j < this.numtileswidth; j++) {
                var div = this.doc.createElement('div');
                div.className = 'bbani-borderdiv';
                // make that everywhere there's a 1px border, and that the divs
                // exactly fit the image
                var subwidth = (j == 0) ? 2 : 1;
                var leftborder = (j == 0) ? 1 : 0;
                var subheight = (i == 0) ? 2 : 1;
                var topborder = (i == 0) ? 1 : 0;
                div.style.width = this.tilesize - subwidth + 'px';
                div.style.height = this.tilesize - subheight + 'px';
                div.style.borderLeftWidth = leftborder + 'px';
                div.style.borderTopWidth = topborder + 'px';

                var idiv = this.doc.createElement('div');
                idiv.className = 'bbani-innerdiv';
                idiv.appendChild(this.doc.createTextNode('\xa0'));
                idiv.style.width = this.tilesize - subwidth + 'px';
                idiv.style.height = this.tilesize - subheight + 'px';
                div.appendChild(idiv);
                parentdiv.appendChild(div);
                try {
                    this._start_animation(idiv);
                } catch(e) {
                    debug(e.message);
                    // browser doesn't support setting opacity - roll back
                    parentdiv.parentNode.replaceChild(this.image, parentdiv);
                    return;
                };
            };
        };
    };

    AnimatedPictureOverlay.prototype._start_animation =
            function _start_animation(div) {
        var currdir = Math.round(Math.random() * 1); // 0 or 1
        var currvalue = Math.random() * this.maxvalue;
        var stepsize = this.stepsize;
        var max = 3 * (this.maxvalue / 4.0) +
            Math.random() * (this.maxvalue / 4.0);
        var min = (this.maxvalue / 2.0) - 
            Math.random() * (this.maxvalue / 2.0);
        if (min < 0) {
            min = 0;
        };
	var self = this; 
        var animator = function animator() {
            var toadd = Math.random() * stepsize;
            if (currdir) {
                if (currvalue + toadd >= max) {
                    currvalue = max;
                    currdir = 0;
                } else {
                    currvalue += toadd;
                };
            } else {
                var tosub = stepsize;
                if (currvalue - toadd <= min) {
                    currvalue = min;
                    currdir = 1;
                } else {
                    currvalue -= toadd;
                };
            };
            if (document.all) {
                // IE
                var newvalue = Math.round(currvalue * 100);
                div.style.filter =
                    'alpha(opacity=' + Math.round(newvalue) + ')';
            } else {
                div.style.opacity = currvalue; // non-IE
            };
            window.setTimeout(animator, self.interval);
        };
        animator();
    };

    bbjsani.init = function init(
            doc, tilesize, stepsize, maxvalue, interval) {
        return new AnimatedPictureOverlayer(
            doc, tilesize, stepsize, maxvalue, interval);
    };
}();

jq(window).load(function() {
	bbjsani.init(document, 120, 0.014, 0.7, 75, '#fff', '#fff');
	//<document>, <tilesize>, <stepsize>, <maxvalue>, <interval>)
});