var Delay = 5000;
var efectSpeed = 50;

var ActualActicleIndex = -1;
var Opacity = 0;
var OpacityTimer;
var SwitchTimer;

function ShowAndPlay(startArticle)
{
    ClerarAllTimers();
    ShowTopArticle(startArticle);
    setActiveButton(startArticle);
    SwitchTimer = setTimeout("Play()", Delay);
}

function Play()
{
    var NextActicleIndex = ActualActicleIndex + 1;
    
    if (ActualActicleIndex >= (ArticlesArr.length -1))
    {
        NextActicleIndex = 0;
    }
    
    setActiveButton(NextActicleIndex);
    
    Opacity = 0;
    
    HideAll(ArticlesArr, ActualActicleIndex);
    
    if (ActualActicleIndex >= 0)
    {
        var actualArticleBox = document.getElementById(ArticlesArr[ActualActicleIndex]);
        actualArticleBox.style.display = "block";
    }
    
    var nextArticleBox = document.getElementById(ArticlesArr[NextActicleIndex]);
    SetOpacity(nextArticleBox,0);
    nextArticleBox.style.display = "block";
    
    Animate(ActualActicleIndex, NextActicleIndex);
    
    ActualActicleIndex = NextActicleIndex;
    
    SwitchTimer = setTimeout("Play()", Delay);
}

function Animate(actualArticleBoxId, nextArticleBoxId)
{
    var actualArticleBox = document.getElementById(ArticlesArr[actualArticleBoxId]);
    var nextArticleBox = document.getElementById(ArticlesArr[nextArticleBoxId]);
    
    Opacity = Opacity + 5;
    
    SetOpacity(actualArticleBox,(Opacity - 100)*-1);
    SetOpacity(nextArticleBox,Opacity);
    
    if (Opacity < 100)
        OpacityTimer = setTimeout("Animate(" + actualArticleBoxId + "," + nextArticleBoxId + ")", efectSpeed);
}

function ShowTopArticle(articleID)
{
    HideAll(ArticlesArr);
    var articleBox = document.getElementById(ArticlesArr[articleID]);
    articleBox.style.display = "block";
    SetOpacity(articleBox,100);
    
    ActualActicleIndex = articleID;
}

function TopArticleClick(index)
{
    setActiveButton(index);
    ShowAndPlay(index);
}

function setActiveButton(index)
{
    for(i = 0; i < ArticlesArr.length; i++)
    {
        document.getElementById(ArticlesArr[i] + "Button").className = "";
    }
    
    document.getElementById(ArticlesArr[index] + "Button").className = "active";
}

function TopArticleShowHeader(index)
{
    for(i = 0; i < ArticlesArr.length; i++)
    {
        document.getElementById(ArticlesArr[i] + "Header").className = "HiddenHeader";
    }
    
    document.getElementById(ArticlesArr[index] + "Header").className = "ActiveHeader";
}

function HideArticleHeader()
{
    for(i = 0; i < ArticlesArr.length; i++)
    {
        document.getElementById(ArticlesArr[i] + "Header").className = "HiddenHeader";
    }
}

function TopArticlesPrev()
{
    ClerarAllTimers();
    ActualActicleIndex = ActualActicleIndex - 1;
    
    if (ActualActicleIndex < 0)
    {
        ActualActicleIndex = ArticlesArr.length - 1;
    }
    
    ShowAndPlay(ActualActicleIndex);
}

function TopArticlesNext()
{
    ClerarAllTimers();
    ActualActicleIndex = ActualActicleIndex + 1;
    
    if (ActualActicleIndex >= (ArticlesArr.length))
    {
        ActualActicleIndex = 0;
    }
    
    ShowAndPlay(ActualActicleIndex);
}

function ClerarAllTimers()
{
    clearTimeout(OpacityTimer);
    clearTimeout(SwitchTimer);
}

function HideAll(arr, actualId)
{
    for(i = 0; i < arr.length; i++)
    {
        if (actualId != i)
            document.getElementById(arr[i]).style.display = "none";
    }
}

function SetOpacity(elem, opacityAsInt)
{
    var opacityAsDecimal = opacityAsInt;
    if (opacityAsInt > 100)
        opacityAsInt = opacityAsDecimal = 100; 
    else if (opacityAsInt < 0)
        opacityAsInt = opacityAsDecimal = 0; 
    
    opacityAsDecimal /= 100;
    if (opacityAsInt < 1)
        opacityAsInt = 1; 
    
    elem.style.opacity = (opacityAsDecimal);
    elem.style.filter  = "alpha(opacity=" + opacityAsInt + ")";
}