function friendito_crossFader( containerId, sliceTime, transitionSpeed, startDelay, inFade, IE_alphaSafe ) 
{
    this.container         = document.getElementById( containerId );
    this.activeFrameKey    = null;
    this.isMouseOver       = false; 
    this.isStarted         = false;
    this.IE_alphaSafe      = IE_alphaSafe ? true : false;
    this.inFade            = inFade ? true : false;
    this.clickPosition     = null;
    this.activeOpacity     = 100;
    this.opacityIncrease   = 1;

    this.sliceTime         = sliceTime;
    this.transitionSpeed   = transitionSpeed;
    this.startDelay        = startDelay;
    
    this.mouseStop         = false;
    
    this.elements          = new Array();  
    this.elementsCount     = 0;
    
    this.positionX         = 0;  
    this.positionY         = 0;  
    
    this.timer             = null;
     
    this.init();        
    this.start();        
}

friendito_crossFader.prototype.init = function() 
{
    this.container.style.position = "relative";

    this.elements       = this.container.children;
    this.elementsCount  = this.elements.length;
    
    if( this.elementsCount > 0)
    {  
        this.activeFrameKey = this.elementsCount > 0 ? 1 : 0;
        this.setPosition( 0 );
        this.transitionSpeed = this.transitionSpeed / 100;
        
        if( this.transitionSpeed <= 10 )
        {
            this.transitionSpeed = 50;
            this.opacityIncrease = 10;
        }
        
        for ( var i = 0; i < this.elementsCount; i++)
        { 
            var opacity = i == 0 ? 100 : 0;
            
            this.elements[ i ].style.display = "block"; 
            this.setFade( this.elements[ i ], opacity );  
        }  
    }
    
    if( this.IE_alphaSafe && this.isIE() )
    {
        this.sliceTime          += this.transitionSpeed / 2;
        this.transitionSpeed     = 0;        
    }  
    
    var pointer = this;
    this.container.onmouseover    = function(){ if(pointer.mouseStop){ pointer.stopAndDisplayActiveFrame(); } };
    this.container.onmouseout     = function(){ if(pointer.mouseStop){ pointer.start(); } };  
}
 
friendito_crossFader.prototype.setMouseStop  = function( stop )
{
    this.mouseStop = stop;
} 
 
 
friendito_crossFader.prototype.start = function()
{
    if( !this.isStarted )
    {
        this.isStarted = true;
        this.transitionStep_delayed( 0, this.startDelay );
    } 
}

friendito_crossFader.prototype.stop = function()
{
    if(this.timer)
    {
       clearTimeout(this.timer); 
    }  
    
    this.isStarted = false;
} 

friendito_crossFader.prototype.stopAndDisplayActiveFrame = function( ) 
{
    this.stop();

    if( this.activeOpacity < 100 )
    {
        var activeKey          = this.activeFrameKey; 
        var currentElement     = this.elements[ activeKey ];
        var prevKey            = activeKey == 0 ? this.elementsCount - 1 :  activeKey - 1; 
        var prevElement        = this.elements[ prevKey ];
        
        var nextKey            = activeKey == this.elementsCount - 1 ? 0 : activeKey + 1;
        
        if( this.activeOpacity > 50 )
        {
           this.setFade( currentElement, 100 ); 
           this.setFade( prevElement, 0 ); 
           this.setPosition( activeKey ); 
           
           this.activeFrameKey = nextKey;
        }
        else
        {
           this.setFade( currentElement, 0 ); 
           this.setFade( prevElement, 100 ); 
           this.setPosition( prevKey );
           
           this.activeFrameKey =  activeKey; 
        }
        
        this.activeOpacity = 100;
    }
}

friendito_crossFader.prototype.transitionStep_delayed = function( opacity, timeout ) 
{   
    if( timeout > 0 )
    {
        clearTimeout(this.timer);
        var pointer = this;
        
        if(this.isStarted) 
            this.timer = setTimeout( function(){ pointer.transitionStep( opacity );  }, timeout );
    }
    else
    {
        this.transitionStep( opacity ); 
    }
}

friendito_crossFader.prototype.transitionStep = function( opacity ) 
{
    var currentElement     = this.elements[ this.activeFrameKey ];
    var previousElementKey = this.activeFrameKey == 0 ? this.elementsCount - 1 :  this.activeFrameKey - 1;  
    var previousElement    = this.elements[ previousElementKey ];
    
    if( opacity <= 100 )
    {
       this.setFade( currentElement, opacity );
       
       if( !this.inFade ) 
           this.setFade( previousElement, 100 - opacity ); 
       
       previousElement.style.zIndex = 0; 
       
       this.setPosition( ( opacity > 50 ? this.activeFrameKey : previousElementKey ) );       
       this.transitionStep_delayed( (opacity + this.opacityIncrease), this.transitionSpeed );
 
    }
    else if( this.elementsCount > 1 )
    {          
        this.setFade( previousElement, 0 );
        this.activeFrameKey =  this.activeFrameKey == this.elementsCount - 1 ? 0 : this.activeFrameKey + 1;        
        this.transitionStep_delayed( 0, this.sliceTime );   
    }
    
    this.activeOpacity = opacity;         
}

friendito_crossFader.prototype.setPosition = function( activeElementKey ) 
{
    for ( var i = 0; i < this.elementsCount; i++)
    { 
        var position = i == activeElementKey ? "relative" : "absolute";        
        this.elements[ i ].style.position = position;  
    }
}

friendito_crossFader.prototype.setFade = function( element, opacity ) 
{
    if ( element.style ) 
    {
        element.style.top      = 0;
        element.style.zIndex   = opacity;

        if ( element.style.MozOpacity != null )   
            element.style.MozOpacity = ( opacity / 100 );            /* Mozilla */   
            
        else if ( element.style.KhtmlOpacity != null ) 
            element.style.KhtmlOpacity = ( opacity / 100 );          /* Khtml */ 
        
        else if ( element.style.opacity != null ) 
            element.style.opacity = ( opacity / 100 );               /* CSS3 */ 
                                                                       
        else if ( element.style.filter != null )
        {   
            if( this.IE_alphaSafe )
            {
                element.style.display = opacity <= 50 ? "none" : "block";
            }
            else
            {   if(opacity == 0)
                    opacity = 1;
                    
                element.style.filter = "alpha(opacity=" + opacity + ")";
            }
        }
        
//        if(opacity == 0)
//            element.style.display = "none";
//        else 
//            element.style.display = "block";            
    }
 
}

friendito_crossFader.prototype.isIE = function()
{
    var agentName = navigator.userAgent.toLowerCase(); 
    
    return agentName.indexOf( "msie" ) != -1;
}
 




