// Copyright 2011 Fenton Web Design Firm
// http://www.fentonwebdesignfirm.com
//
// If you would like to implement this on your site, with
// or without special modifications, please contact us
// and ask about licensing.

function Animate(args) {
    // Set opacity of e to val percent
    this.fade = function(e, val) {
        // Modern browsers
	    e.style.opacity = val / 100;
	    // Older Internet Explorer
	    e.style.filter = 'alpha(opacity=' + val + ')';
	    // Older Firefox
	    e.style.MozOpacity = val / 100;
	    // Older Safari
	    e.style.KhtmlOpacity = val / 100;
    }

    // Make sure we're not creating simultaneous actions
    this.clearTimers = function() {
        if (this.timer_s) {
            clearInterval(this.timer_s);
            this.timer_s = false;
        }
        if (this.timer_l) {
            clearTimeout(this.timer_l);
            this.timer_l = false;
        }
    }

    // Put next div in sequence behind current one,
    // set to display at 100% opacity, hide rest
    this.prioritize = function(d1) {
        var d2 = d1 + 1;
        if (d2 == this.main.length) d2 = 0;

        this.main[d1].style.zIndex = 3;
        this.main[d1].style.display = '';
        this.fade(this.main[d1], 100);

        this.main[d2].style.zIndex = 2;
        this.main[d2].style.display = '';
        this.fade(this.main[d2], 100);

        for (var i in this.main) {
            if (i != d1 && i != d2) {
                this.main[i].style.zIndex = 1;
                this.main[i].style.display = 'none';
            }
        }
        
        if (this.thumb) {
            this.thumb[d1].style.borderColor = this.color_h;
            for (var i in this.thumb)
                if (i != d1)
                    this.thumb[i].style.borderColor = this.color_r;
        }
    }

    // Reduce opacity of active div. If opacity is
    // zero, prep for next sequence
    this.runFade = function() {
        this.opacity -= this.change;
        if (this.opacity < 0) this.opacity = 0;
        this.fade(this.main[this.seq], this.opacity);
        
        if (!this.opacity) {
            if (++this.seq == this.main.length)
                this.seq = 0;
            this.prioritize(this.seq);

            this.clearTimers();
            var t = this;
            this.timer_l = setTimeout(function() { t.startFade(); }, this.delay_l);
        }
    }

    // Start opacity reduction sequence
    this.startFade = function() {
        this.opacity = 100;
        this.clearTimers();
        var t = this;
        this.timer_s = setInterval(function() { t.runFade(); }, this.delay_s);
    }

    // Allow people to pause on a specific frame,
    // or the current frame
    this.halt = function(id) {
        this.clearTimers();
        if (id) {
            var e = document.getElementById(id);
            var i;
            for (i in this.thumb)
                if (e == this.thumb[i]) break;
            this.seq = Math.floor(i);
        }
        this.prioritize(this.seq);
    }

    // Start things back up when you mouse out
    this.restart = function(id) {
        this.clearTimers();
        var t = this;
        this.timer_l = setTimeout(function() { t.startFade(); }, this.delay_l);
    }

    this.seq = 0;
    this.opacity = 100;
    this.timer_l = false;
    this.timer_s = false;

    this.delay_l = args['delay_l'] ? args['delay_l'] : 5000;
    this.delay_s = args['delay_s'] ? args['delay_s'] : 30;
    this.change = args['change'] ? args['change'] : 3;

    this.main = [];
    for (var i in args['main'])
        this.main.push(document.getElementById(args['main'][i]));

    if (args['thumb']) {
        this.color_r = args['color_r'] ? args['color_r'] : '#000';
        this.color_h = args['color_h'] ? args['color_h'] : '#FF2';
    
        this.thumb = [];
        for (var i in args['thumb'])
            this.thumb.push(document.getElementById(args['thumb'][i]));
    }
    else this.thumb = false;

    this.prioritize(this.seq);
    
    this.clearTimers();
    var t = this;
    setTimeout(function() { t.startFade(); }, this.delay_l);
}