// www.dynamicdrive.com
// This is a modified version to add captions to fading images.

var FadingBg = 'white'
var Fades = new Array()
var Cache = new Array()
var IsDom = document.getElementById
var IsAll = document.all

function FadePicture(Obj) {
    if (Obj.Degree < 100) {
        Obj.Degree += 10
        if (Obj.Temp.filters && Obj.Temp.filters[0]) {
            if (typeof Obj.Temp.filters[0].opacity == 'number') {
                Obj.Temp.filters[0].opacity = Obj.Degree
            } else {
                Obj.Temp.style.filter = 'alpha(opacity=' + Obj.Degree + ')'
            }
        } else if (Obj.Temp.style.MozOpacity) {
            Obj.Temp.style.MozOpacity = Obj.Degree/101
        } else if (Obj.Temp.style.KhtmlOpacity) {
            Obj.Temp.style.KhtmlOpacity = Obj.Degree/100
        } else if (Obj.Temp.style.opacity && !Obj.Temp.filters) {
            Obj.Temp.style.opacity = Obj.Degree/101
        }
    } else {
        AddCaption(Obj.Temp);
        clearInterval(Cache[Obj.SlideId])
        Obj.CanvasNext = (Obj.LayerIndex == Obj.LayerName + '-0') ? Obj.LayerName + '-0' : Obj.LayerName + '-1'
        Obj.Temp = IsAll ? IsAll[Obj.CanvasNext] : document.getElementById(Obj.CanvasNext)
        Obj.Populate(Obj.Temp, Obj.ImageNext)
        Obj.ImageNext = (Obj.ImageNext < Obj.Images2.length - 1) ? Obj.ImageNext + 1 : 0
        setTimeout('Fades[' + Obj.SlideId + '].Rotate()', Obj.Delay)
    }
}

function AddCaption(Obj) {
    var img = app.get('image_value_' + Obj.id);
    img.dataCaption     = Obj.caption;
    img.dataDescription = Obj.description;
    return caption.apply(img);
}

function Fading(images, options) {
    this.Images     = images;
    this.width      = options['width']  || 300;
    this.height     = options['height'] || 200;
    this.Delay      = options['delay']  || 3000;
    this.Delay2     = options['delay2'] || 0;
    this.PauseCheck = options['pause']  || 0;
    this.Class      = options['class']  || '';

    Fades[Fades.length] = this

    this.IsOver = 0
    this.Degree = 10
    this.ImageIndex = 0
    this.ImageNext = 1
    this.SlideId = Fades.length - 1
    this.LayerName = 'FadingCanvas-' + this.SlideId
    this.LayerIndex = this.LayerName + '-0'
    this.Images2 = new Array()

    for (var i = 0; i < images.length; i++) {
        this.Images2[i] = new Image()
        this.Images2[i].src   = images[i][0]
        this.Images2[i].alt   = images[i][1].alt;
        this.Images2[i].title = images[i][1].title;
        this.Images2[i].capt  = unescape_html(images[i][1].caption);
        this.Images2[i].desc  = unescape_html(images[i][1].desc);
    }
    if (IsAll && IsDom || IsDom) {
        document.write('<div id="FadingMaster' + this.SlideId + '" style="width: '+ this.width + 'px; height: ' + this.height + 'px; overflow: hidden;">');
        document.write('<div id="' + this.LayerName + '-0" style="position: absolute; width: ' + this.width + 'px; height: ' + this.height + 'px; top:0; left:0; filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); opacity: 0.1; -moz-opacity:0.1; -khtml-opacity: 0.1; background-color:' + FadingBg + '"></div>');
        document.write('<div id="' + this.LayerName + '-1" style="position: absolute; width: ' + this.width + 'px; height: ' + this.height + 'px; top:0; left:0; filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); opacity: 0.1; -moz-opacity:0.1; -khtml-opacity: 0.1; background-color:' + FadingBg + '"></div>');
        document.write('</div>')
    } else {
        document.write('<div><img name="FadingDefault' + this.SlideId + '" src="' + this.Images2[0].src + '" title="' + this.Images2[0].title + '" alt="' + this.Images2[0].alt + '"></div>')
    }
    if (IsAll && IsDom || IsDom) {
        if (this.Delay2) {
            //this.Rotate()
            setTimeout('Fades[' + this.SlideId + '].Start()', this.Delay2)
        } else {
            this.Start()
        }
    } else {
        this.ImageIndex++
    }
}
Fading.prototype.Populate = function(Obj, Index) {
    var s = '';
    s += '<img src="' + this.Images2[Index].src + '"';
    if (this.Class) s += ' class="'+ this.Class + '"';
    s += ' title="' + this.Images2[Index].title + '"';
    s += ' alt="' + this.Images2[Index].alt + '"';
    s += ' id="image_value_' + Obj.id + '"';
    s += ' />';
    Obj.caption     = this.Images2[Index].capt;
    Obj.description = this.Images2[Index].desc;
    Obj.innerHTML   = s;
}
Fading.prototype.Rotate = function() {
    if (this.PauseCheck == 1) var cache = this
    if (this.IsOver == 1) {
        setTimeout(function() { cache.Rotate() }, 200)
    } else if (IsAll && IsDom || IsDom) {
        this.Reset();
        var cross = this.Temp = IsAll ? IsAll[this.LayerIndex] : document.getElementById(this.LayerIndex);
        cross.style.zIndex++;
        Cache[this.SlideId] = setInterval('FadePicture(Fades[' + this.SlideId + '])', 50);
        this.LayerIndex = (this.LayerIndex == this.LayerName + '-0') ? this.LayerName + '-1' : this.LayerName + '-0';
    } else {
        var img = document.images['FadingDefault' + this.SlideId]
        img.src = this.Images2[this.ImageIndex].src
    }
    this.ImageIndex = (this.ImageIndex < this.Images2.length - 1) ? this.ImageIndex + 1 : 0
}
Fading.prototype.Reset = function(){
    this.Degree = 10
    var cross = IsAll ? IsAll[this.LayerIndex] : document.getElementById(this.LayerIndex)
    if (cross.filters && cross.filters[0]){
        if (typeof cross.filters[0].opacity == 'number') {
            cross.filters(0).opacity = this.Degree
        } else {
            cross.style.filter = 'alpha(opacity=' + this.Degree + ')'
        }
    } else if (cross.style.MozOpacity) {
        cross.style.MozOpacity = this.Degree / 101
    } else if (cross.style.KhtmlOpacity) {
        cross.style.KhtmlOpacity = this.Degree / 100
    } else if (cross.style.opacity && !cross.filters) {
        cross.style.opacity = this.Degree / 101
    }
}
Fading.prototype.Start = function() {
    var cross = IsAll ? IsAll[this.LayerIndex] : document.getElementById(this.LayerIndex)
    this.Populate(cross, this.ImageIndex)
    if (this.PauseCheck == 1) {
        var cache = this
        var cont = IsAll ? IsAll['FadingMaster' + this.SlideId] : document.getElementById('FadingMaster' + this.SlideId)
        cont.onmouseover = function() { cache.IsOver = 1 }
        cont.onmouseout  = function() { cache.IsOver = 0 }
    }
    this.Rotate()
}

function unescape_html(str) {
    var t = document.createElement('span');
    t.innerHTML = str;
    return (typeof t.textContent !== 'undefined') ? t.textContent : t.innerText;
}