var AtomiumAnimation = Class.create({
    initialize: function(containerId, dayPics, nightPics, disabled) {
        this.container = $(containerId);
        this.dayPics = dayPics;
        this.nightPics = nightPics;
        this.imgPath = TopAnimSettings.ResolvedBaseUrl;
        if (!/[\\\/]$/.test(this.imgPath))
            this.imgPath += "/";

        this.disabled = disabled === undefined ? false : disabled;

        // SETTINGS
        this.rows = TopAnimSettings.RowCount; // number of rows of tiles
        this.cols = TopAnimSettings.ColCount; // number of cols of tiles
        this.width = TopAnimSettings.Width; // tile width
        this.height = TopAnimSettings.Height; // tile height

        this.diagDelay = 250; // delay between diagonals (ms)
        this.duration = 0.2; // duration of an effect (sec)
        this.initialTimeout = 250; // time before effect starts (ms)
        this.scale = 'x'; // direction of effect, possible values: x, y, random
        this.getSrc = function(url, r, c) {
            // url to the pictures
            //return 'TopPicCutter.ashx?url=' + imgPath + url + '&w=' + this.width + '&h=' + this.height + '&r=' + r + '&c=' + c;
            return this.imgPath + url + '/' + url + '_' + r + '_' + c + '.png';
        };
        // END OF SETTINGS

        // calculated variables
        this.scaleX = this.scale == 'y' ? false
                : this.scale == 'random' ? Math.random() < 0.5
                : true;
        this.animCounter = 0;
        this.cachingCounter = 0;
        this.interval = 0;
        this.countdown = 0;
        this.blue = true; // flag which pic is shown
        this.imageIdx = 0;
        this.url1 = this.getNextImage();
        this.url2 = this.getNextImage();
        this.loaded = false;

        this.initContainer();
    },

    getStatus: function() {
        if (!this.loaded) return 3;
        if (this.animCounter > 0) return 2;
        if (this.cachingCounter > 0) return 1;
        return 0;
    },

    initContainer: function() {
        this.container.style.width = this.cols * this.width + "px";
        this.container.style.height = (this.rows + 1) * this.height / 2 + "px";
        this.container.style.background = "transparent url(" + this.imgPath + this.url1 + ".jpg) no-repeat "
            + (this.width * 1.5 - 7) + "px " + (this.height * 1.5 - 7) + "px"

        if (Prototype.Browser.IE6)
            return;

        this.container1 = Builder.node("div", { style: "position:absolute;top:0;left:0;" });
        this.container1.style.width = this.cols * this.width + "px";
        this.container1.style.height = (this.rows + 1) * this.height / 2 + "px";
        this.container1.style.zIndex = '20';
        this.container2 = Builder.node("div", { style: "position:absolute;top:0;left:0;" });
        this.container2.style.width = this.cols * this.width + "px";
        this.container2.style.height = (this.rows + 1) * this.height / 2 + "px";
        this.container2.style.zIndex = '10';

        this.container.appendChild(this.container1);
        this.container.appendChild(this.container2);

        Element.extend(this.container1);
        Element.extend(this.container2);

        this.container1.hide();
        this.container2.hide();

        //this.cachingCounter = this.rows * this.cols * 2;
        setTimeout(this.createFlips.bindAsEventListener(this), 15000);

        this.debugCounter = null;
        /*
        this.debugCounter = document.createElement("div");
        this.debugCounter.style.position = "absolute";
        this.debugCounter.style.top = "0";
        this.debugCounter.style.left = "0";
        document.body.appendChild(this.debugCounter);*/

    },

    cacheSlices: function(url, flipNo) {
        this.cachingCounter = this.rows * this.cols;
        var r, c;
        for (r = 0; r < this.rows; r++)
            for (c = 0; c < this.cols; c++)
            this.cacheImage(this.getSrc(url, r, c), flipNo, r, c);
    },

    getImages: function() {
        var h = new Date().getHours();
        return (h >= 8 && h < 20) ? this.dayPics : this.nightPics;
    },

    getNextImage: function() {
        var imgArr = this.getImages();
        if (this.imageIdx >= imgArr.length)
            this.imageIdx = 0;
        return imgArr[this.imageIdx++];
    },

    flip: function(id, delay) {
        if (this.disabled) return;
        new Effect.Scale(id, 0,
            {
                delay: delay + Math.random(),
                fps: 75,
                duration: this.duration + Math.random(),
                scaleX: this.scaleX,
                scaleY: !this.scaleX,
                scaleFromCenter: true,
                transition: Effect.Transitions.sinoidal,
                queue: { position: 'end', scope: id },
                afterFinish: function(obj) {
                    this.animCounter--;
                    obj.element.style.zIndex = 0;
                    if (this.animCounter == 0)
                        this.changePics();
                } .bindAsEventListener(this)
            });
    },

    flipAll: function() {
        if (this.debugCounter)
            this.debugCounter.innerHTML += "flipReq, status=" + this.getStatus();
        if (this.getStatus() != 0)
            return;
        this.animCounter = this.rows * this.cols;
        var i, r, c, time = this.initialTimeout;
        this.countdown = 0;
        for (i = 0; i < this.rows + this.cols; i++) {
            for (r = 0; r < this.rows; r++) {
                c = i - r;
                if (c >= 0 && c < this.cols)
                    this.flip(this.getFlipId((this.blue ? "1" : "2"), r, c), time / 1000 + r * time / 50000);
            }
            time += this.diagDelay;
        }
    },

    changePics: function() {
        if (this.debugCounter)
            this.debugCounter.innerHTML += "changePics, status=" + this.getStatus();
        if (this.blue) {
            this.container2.style.zIndex = '20';
            this.container1.style.zIndex = '10';
            this.url1 = this.getNextImage();
            //this.cacheSlices(this.url1, 1);
            this.revert();
        }
        else {
            this.container1.style.zIndex = '20';
            this.container2.style.zIndex = '10';
            this.url2 = this.getNextImage();
            //this.cacheSlices(this.url2, 2);
            this.revert();
        }
        this.blue = !this.blue;
    },

    revert: function() {
        for (r = 0; r < this.rows; r++)
            for (c = 0; c < this.cols; c++) {
            $(this.getFlipId(this.blue ? 1 : 2, r, c)).src = this.getSrc(this.blue ? this.url1 : this.url2, r, c);
            $(this.getFlipId(this.blue ? 1 : 2, r, c)).style.width = this.width + 'px';
            $(this.getFlipId(this.blue ? 1 : 2, r, c)).style.left = (c * this.width + r % 2 * this.width / 2) + 'px';
        }
    },

    cacheImage: function(src, flipNo, r, c) {
        var img = $(this.getFlipId(flipNo, r, c));
        img.onload = this.flipLoaded.bindAsEventListener(this, false);
        img.src = src;
    },

    flipLoaded: function(obj) {
        this.cachingCounter--;
        if (this.debugCounter)
            this.debugCounter.innerHTML = this.cachingCounter;
        if (this.cachingCounter == 0)
            if ($A(arguments)[1]) {
            this.cacheSlices(this.blue ? this.url2 : this.url1, this.blue ? 2 : 1);
            this.container1.show();
            this.container2.show();
        }
        //$(this.getFlipId(flipNo, r, c)).src = src;
    },

    createFlips: function() {
        var r, c;
        this.cachingCounter = this.rows * this.cols;
        for (r = 0; r < this.rows; r++)
            for (c = 0; c < this.cols; c++) {
            this.container1.appendChild(Event.observe(Builder.node('img',
                        { id: this.getFlipId(1, r, c),
                            style: 'z-index:10;width:' + this.width + 'px; height:' + this.height + 'px; position:absolute; top:'
                                + (r * this.height / 2) + 'px;left:' + (c * this.width + r % 2 * this.width / 2) + 'px',
                            src: this.getSrc(this.url1, r, c),
                            row: r,
                            col: c
                        }), "load", this.flipLoaded.bindAsEventListener(this, true))
                     );
            this.container2.appendChild(Builder.node('img',
                        { id: this.getFlipId(2, r, c),
                            style: 'z-index:10;width:' + this.width + 'px; height:' + this.height + 'px; position:absolute; top:'
                                + (r * this.height / 2) + 'px;left:' + (c * this.width + r % 2 * this.width / 2) + 'px',
                            src: this.getSrc(this.url2, r, c),
                            row: r,
                            col: c
                        })
                    );
        }
        this.loaded = true;
    },

    getFlipId: function(flipNo, r, c) {
        return "flip" + flipNo + "_" + r + "_" + c;
    }
});