// JScript File

    var iPicture = 0;
    var iPictureBottom = 0;
    //var pictures = new Array();
    var iMode = -1;
    var iModeBottom = 0;
    var count = 0;
    
    var steps = 40;
    var maxImode = steps * 4;
    var slideTimeOut = 5000;
    var timerFadeImages;
    var minOpacity = 0.1; // 0 causes the image to disappear from the browser and causes flashes.

    function SetImages()
    {
        var elAlternatePicture = $("alternatePicture");
        var elTheTopPicture = $("theTopPicture");
        var elAlternateBottomPicture = $("alternateBottomPicture");
        var elBottomPicture = $("bottomPicture");
        
        if ( pictures.length > 0 ) 
        {
            elTheTopPicture.src = pictures[ iPicture ];
            iPicture = (iPicture + 1 ) % pictures.length;
        }
        if ( pictures.length > 0 ) 
        {
            elAlternatePicture.src = pictures[ iPicture ];
            iPicture = (iPicture + 1 ) % pictures.length;
        }
        
        if ( picturesBottom.length > 0 )
        {
            elBottomPicture.src = picturesBottom[ iPictureBottom ];
            iPictureBottom = (iPictureBottom + 1 ) % picturesBottom.length;
            }
        if ( picturesBottom.length > 0 )
        {
            elAlternateBottomPicture.src = picturesBottom[ iPictureBottom ];
            iPictureBottom = (iPictureBottom + 1 ) % picturesBottom.length;
        }
    }
    
        
    function CallDebugger()
    {
        debugger;
    }
    

    var debugMode = false;
    function DebugMode()
    {
        if ( $("btnDebugMode").value == "DebugMode" )
        {
            $("btnDebugMode").value = "Debug Off";
            debugMode = true;
        }
        else
        {
            $("btnDebugMode").value = "DebugMode";
            debugMode = false;
        }
    }

    
    var timerFlipImages;
    function FlipImages()
    {
        if ( ( pictures.length > 1 || picturesBottom.length > 1 ) )
        {
/*
            switch ( Math.floor( iMode / ( maxImode / 4 ) ))
            {
            case 0: // top picture is fading, bottom picture is appearing
                ChangeOpacity( "theTopPicture", -1/steps);
                ChangeOpacity( "alternatePicture", 1/steps);
                
                ChangeOpacity( "bottomPicture", -1/steps);
                ChangeOpacity( "alternateBottomPicture", 1/steps);
                break;
            case 1: // change top picture while it is not visible
                if ( iMode == maxImode / 4 )
                {
                    $("theTopPicture").style.zindex = "-1";
                    $("alternatePicture").style.zindex = "0";
                    ChangeTopPicture();
                    SetOpacity("theTopPicture", minOpacity );
                    
                    $("bottomPicture").style.zindex = "-1";
                    $("alternateBottomPicture").style.zindex = "0";
                    ChangeLowerPicture("bottomPicture");
                    SetOpacity("bottomPicture", minOpacity );
                }
                break;
            case 2: // bottom picture is fading, top picture is appearing
                ChangeOpacity( "theTopPicture", 1/steps);
                ChangeOpacity( "alternatePicture", -1/steps);
                
                ChangeOpacity( "bottomPicture", 1/steps);
                ChangeOpacity( "alternateBottomPicture", -1/steps);
                break;
            case 3: // bottom picture can be changed because it is fully faded.
                if ( iMode == maxImode / 4 * 3 )
                {
                    //Element.hide("alternatePicture");
                    //Element.setStyle("alternatePicture", {z-index: -1});
                    //Element.setStyle("theTopPicture"), {z-index: 0});
                    $("alternatePicture").style.zindex = "-1";
                    $("theTopPicture").style.zindex = "0";
                    SetOpacity("alternatePicture", minOpacity );
                    ChangeAltPicture();
                    SetOpacity("alternatePicture", minOpacity );
                    //Element.show("alternatePicture");
                    
                    $("alternateBottomPicture").style.zindex = "-1";
                    $("bottomPicture").style.zindex = "0";
                    //Element.hide("alternateBottomPicture");
                    ChangeLowerPicture("alternateBottomPicture");
                    SetOpacity("alternateBottomPicture", minOpacity );
                    //Element.show("alternateBottomPicture");
                }
                break;
            }
*/            
            

            switch ( Math.floor( iMode / ( maxImode / 4 ) ))
            {
            case 0: // top picture is fading, bottom picture is appearing
                if ( iMode == 0 )
                {
                    $("alternateBottomPicture").style.zindex = "-1";
                    $("bottomPicture").style.zindex = "0";
                    Element.hide("alternateBottomPicture");
                    ChangeLowerPicture("alternateBottomPicture");
                    SetOpacity("alternateBottomPicture", minOpacity );

                    Element.show("alternatePicture");
                }
                ChangeOpacity( "theTopPicture", -1/steps);
                ChangeOpacity( "alternatePicture", 1/steps);
                
                break;
            case 1: // change top picture while it is not visible
                if ( iMode == maxImode / 4 )
                {
                    $("theTopPicture").style.zindex = "-1";
                    $("alternatePicture").style.zindex = "0";
                    ChangeTopPicture();
                    SetOpacity("theTopPicture", minOpacity );
 
                    Element.show("alternateBottomPicture");
               }
                ChangeOpacity( "bottomPicture", -1/steps);
                ChangeOpacity( "alternateBottomPicture", 1/steps);
                break;
            case 2: // bottom picture is fading, top picture is appearing
                if ( iMode == maxImode / 4 * 2)
                {
                    $("bottomPicture").style.zindex = "-1";
                    $("alternateBottomPicture").style.zindex = "0";
                    ChangeLowerPicture("bottomPicture");
                    SetOpacity("bottomPicture", minOpacity );
                }
                ChangeOpacity( "theTopPicture", 1/steps);
                ChangeOpacity( "alternatePicture", -1/steps);
                break;
            case 3: // bottom picture can be changed because it is fully faded.
                if ( iMode == maxImode / 4 * 3 )
                {
                    Element.hide("alternatePicture");
                    $("alternatePicture").style.zindex = "-1";
                    $("theTopPicture").style.zindex = "0";
                    SetOpacity("alternatePicture", minOpacity );
                    ChangeAltPicture();
                    SetOpacity("alternatePicture", minOpacity );
                }
                ChangeOpacity( "bottomPicture", 1/steps);
                ChangeOpacity( "alternateBottomPicture", -1/steps);
               break;
            }
            
            var debugInfo = $("DebugInfo");
            if ( debugInfo != null && debugMode )
            {
                var elAlternatePicture = $("alternatePicture");
                var elTheTopPicture = $("theTopPicture");
                var elAlternateBottomPicture = $("alternateBottomPicture");
                var elBottomPicture = $("bottomPicture");

                var row = debugInfo.insertRow( 1 );
                var countCell = row.insertCell( 0 );;
                var iModeCell = row.insertCell( 1 );;
                var iPictureCell = row.insertCell( 2 );
                var iPictureBottomCell = row.insertCell( 3 );
                var AlternatePictureCell = row.insertCell( 4 );
                var TheTopPictureCell = row.insertCell( 5 );
                var AlternateBottomPictureCell = row.insertCell( 6 );
                var BottomPictureCell = row.insertCell( 7 );
                var dateCell = row.insertCell( 8 );

                //countCell.innerHTML = count;
                iModeCell.innerHTML = iMode;
                iPictureCell.innerHTML = iPicture;
                iPictureBottomCell.innerHTML = elAlternatePicture.style.opacity || 1;
                AlternatePictureCell.innerHTML = GetFileName(elAlternatePicture.src);
                TheTopPictureCell.innerHTML = GetFileName(elTheTopPicture.src);
                AlternateBottomPictureCell.innerHTML = elTheTopPicture.style.opacity || 1;
                BottomPictureCell.innerHTML = GetFileName(elBottomPicture.src);
                dateCell.innerHTML = Date();
            }

            timerFlipImages = setTimeout("FlipImages()",slideTimeOut / steps);
            iMode = ( iMode + 1 ) % maxImode;
            count++;
        }
    }

   
   function ChangeTopPicture( )
   {
        var elTheTopPicture = $("theTopPicture");
        if ( elTheTopPicture != null  )
        {
            elTheTopPicture.src = pictures[ iPicture ];
            iPicture = (iPicture + 1 ) % pictures.length;
        }
   }
   
   function ChangeAltPicture( )
   {
        var elAlternatePicture = $("alternatePicture");
        if ( elAlternatePicture != null  )
        {
            elAlternatePicture.src = pictures[ iPicture ];
            iPicture = (iPicture + 1 ) % pictures.length;
        }
   }
   
   
   function ChangeUpperPicture( id )
   {
        var el = $(id);
        if ( el != null  )
        {
            el.src = pictures[ iPicture ];
            iPicture = (iPicture + 1 ) % pictures.length;
        }
   }
   
   function ChangeLowerPicture( id )
   {
        var el = $(id);
        if ( el != null  )
        {
            el.src = picturesBottom[ iPictureBottom ];
            iPictureBottom = (iPictureBottom + 1 ) % picturesBottom.length;
        }
   }
 
    
    function ChangeOpacity( id, change )
    {
        var el = $( id );
        if ( el != null )
        {
            var currentOpacity = el.getStyle("opacity") || 1;
            var opacity = currentOpacity + change;
            if ( opacity > 1 )
            {
                opacity = 1;
            }
            if ( opacity < minOpacity )
            {
                opacity = minOpacity;
            }
            el.setStyle({opacity:opacity});
        }
    }
    
    function SetOpacity( id, opacity )
    {
        var el = $( id );
        if ( el != null )
        {
            if ( opacity > 1 )
            {
                opacity = 1;
            }
            if ( opacity < minOpacity)
            {
                opacity = minOpacity;
            }
            el.setStyle({opacity:opacity});
        }
    }
    

function GetFileName( path )
{
    var iPath = path.lastIndexOf("/" );
    if (iPath < 0 )
    {
        iPath = -1;
    }
    return path.substr( iPath + 1 );
}