var last = 0;
var playtimer;
var tabid = 1;
var time;
var open_element;
var close_element;

function play(interval)
{
    //since the rotation time doenst change store it as a global
    time = interval;

    //the next step is the last + 1
    var step = last + 1;

    //Once we run out of articles for that tab, start over
    if (document.getElementById('headline_container_' + tabid + '_' + step) == null)
    {
        //reset
        step = 1;
    }
        
    //Play the Article    
    slideArticle(null,step,false);
    
    //Set up the next switch
    playtimer = setTimeout("play(" +time+ ")",time*1000);
}

function slideArticle(id,next,stop)
{
    //Do we have a new tabid?
    //Use the old one if not
    if (id != null)
    {
        tabid = id;
    }

    //This is used only when the user clicks on a tab to read
    if (stop)
    {    
        clearTimeout(playtimer);
    }

    //Dont do anything unless the new tab is different
    if (last == next)
    {
        return false;
    }

    //If there is nothing to close dont close.
    if ((last != null) && (last != 0))
    {
        //this closes the body and resets the image
        close(tabid,last);
    }
    
    //Get elements for transition
    var div = document.getElementById('headline_container_' + tabid + '_' + next);
    var body = document.getElementById('headline_body_' + tabid + '_' + next);
    var image = document.getElementById('headline_image_' + tabid + '_' + next);

    //To get the height of the element that is closed we need to
    //  place it off screen, render it, measure it, close it, move it back
    //  Then we can perform the transition
    
    //Move off screen
    body.style.display = 'none';
    body.style.height = '';
    body.style.postion = 'fixed';
    body.style.top = '-1000px';
    
    //render off screen
    div.className = 'active';
    body.style.display = 'block';
    
    //measure
    body_height = body.clientHeight;
    
    //reset and place back
    body.style.height = '0px';
    body.style.postion = '';
    body.style.top = '';

    //Transition
    open_element = body;
    for(i = 0; i <= body_height; i = i + 1)
    {
        timer = setTimeout("open_element.style.height = '" + i + "px'",(i*15)+300);
    }

    //turn the new image on
    image.style.display = 'block';

    //set the current article to last so we can unset it next.
    last = next;
}


function switchTab(id)
{
    //No reason to switch if they are the same.
    if (tabid == id)
    {
        return false;
    }
    
    //Get the elements
    NewTab = document.getElementById('headline_' + id);
    CurrentTab = document.getElementById('headline_' + tabid);
    NewNav = document.getElementById('nav_' + id);
    CurrentNav = document.getElementById('nav_' + tabid);

    //Switch them
    CurrentTab.style.display = 'none';
    NewTab.style.display = 'block';
    CurrentNav.className = '';
    NewNav.className = 'active';

    //We want to close any articles that are open so if we go back to that tab 
    //  we will start fresh and not have any left over. 
    if ((last != null) && (last != 0))
    {
        close(tabid,last);
    }

    //set the new tabid
    tabid = id;
    //reset the articles to start at the top with the rotation
    last = 0;
    //stop the previous tab rotator
    clearTimeout(playtimer);
    //start the new rotator with the set time from the first.
    play(time);
}

function close(tab,id)
{
    //If you use it more than once....

    //element variables
    var body = document.getElementById('headline_body_' + tab + '_' + id);
    var div = document.getElementById('headline_container_' + tab + '_' + id);
    var image = document.getElementById('headline_image_' + tab + '_' + id);
   
    //We need to get the height so we know how much to close
    //  this time since it is rendered we dont have to move it off screen to 
    //  get it.
    var body_height = body.clientHeight;
    
    //This sets the element in the global
    //this is done because the setTimeout scope is different than the functions.
    close_element = body;

    //Transition 
    for(i = body_height; i >= 0; i = i - 1)
    {
        timer = setTimeout("close_element.style.height = '" + i + "px'",(body_height-i)*15+300);
    }

    //make the header not active
    div.className = '';
    //and turn off the image
    image.style.display = 'none';
}