var scrollTimer;
var currentDecade = 1;
var currentMaxDecade = 6;
var previousDecade = 0;


function playLeft()
{
    if(currentDecade > 1){
        previousDecade = currentDecade;
        currentDecade -= 1;
        performDecade(currentDecade);
        performDecadeMouseOver(currentDecade);
        performDecadeMouseOut(previousDecade);
    }
    
}
function playRight()
{
  if(currentDecade < currentMaxDecade){
        previousDecade = currentDecade;
        currentDecade += 1;
        performDecade(currentDecade);
        performDecadeMouseOver(currentDecade);
        performDecadeMouseOut(previousDecade);
    }
}

function showdecade(decadeNumber)
{
    previousDecade = currentDecade;
    performDecadeMouseOut(previousDecade);
    currentDecade = decadeNumber;
    performDecadeMouseOut(previousDecade);
    performDecade(currentDecade);
    
}

function performDecade(decadeNumber)
{

    if(previousDecade == 1){
        new Effect.Move("leftarrow",{x: 0, y: 130, mode: 'absolute'});
    }
    
    if(previousDecade == currentMaxDecade){
        new Effect.Move("rightarrow",{x: 954, y: 130, mode: 'absolute'});
    }
    
    switch(decadeNumber) {
        case 1:
            new Effect.Move("imageblockbg", { x: 0, y: 0, mode: 'absolute', afterFinish:HideDecadeImage()});
            new Effect.Move("leftarrow",{x: -30, y: 130, mode: 'absolute'});
        break;
        
        case 2:
            new Effect.Move("imageblockbg", { x: -988, y: 0, mode: 'absolute', afterFinish:HideDecadeImage()});
        break;
        
        case 3:
            new Effect.Move("imageblockbg", { x: -1976, y: 0, mode: 'absolute', afterFinish:HideDecadeImage()});
        break;
        
        case 4:
            new Effect.Move("imageblockbg", { x: -2962, y: 0, mode: 'absolute', afterFinish:HideDecadeImage()});
        break;
        
        case 5:
            new Effect.Move("imageblockbg", { x: -3949, y: 0, mode: 'absolute', afterFinish:HideDecadeImage()});
        break;
        
        case 5:
            new Effect.Move("imageblockbg", { x: -4922, y: 0, mode: 'absolute', afterFinish:HideDecadeImage()});
        break;
        
        case 6:
            new Effect.Move("imageblockbg", { x: -4935, y: 0, mode: 'absolute', afterFinish:HideDecadeImage()});
            new Effect.Move("rightarrow",{x: 995, y: 130, mode: 'absolute'});
        break;
    }
    

}

function HideDecadeImage(){

    switch(previousDecade){
        case 1:
           new Effect.Fade("prodshotInner60s", {afterFinish:ShowDecadeImage()});
           new Effect.Fade("Title60s", {afterFinish:ShowDecadeTitle()});
        break;
        case 2:
           new Effect.Fade("prodshotInner80s", {afterFinish:ShowDecadeImage()});
           new Effect.Fade("Title80s", {afterFinish:ShowDecadeTitle()});
        break;
        case 3:
            new Effect.Fade("prodshotInner90s", {afterFinish:ShowDecadeImage()});
            new Effect.Fade("Title90s", {afterFinish:ShowDecadeTitle()});
        break;
        case 4:
            new Effect.Fade("prodshotInner00s", {afterFinish:ShowDecadeImage()});
            new Effect.Fade("Title00s", {afterFinish:ShowDecadeTitle()});
        break;
        case 5:
            new Effect.Fade("prodshotInner05s", {afterFinish:ShowDecadeImage()});
            new Effect.Fade("Title05s", {afterFinish:ShowDecadeTitle()});
        break;
        case 6:
            new Effect.Fade("prodshotInner08s", {afterFinish:ShowDecadeImage()});
            new Effect.Fade("Title08s", {afterFinish:ShowDecadeTitle()});
        break;
        
    }
    
    
}
function ShowDecadeImage(){
    switch(currentDecade){
        case 1:
            new Effect.Appear("prodshotInner60s");
        break;
        case 2:
            new Effect.Appear("prodshotInner80s");
        break;
        case 3:
            new Effect.Appear("prodshotInner90s");
        break;
        case 4:
            new Effect.Appear("prodshotInner00s");
        break;
        case 5:
            new Effect.Appear("prodshotInner05s");
        break;
        case 6:
            new Effect.Appear("prodshotInner08s");
        break;
    }
    
}

function ShowDecadeTitle(){
    switch(currentDecade){
        case 1:
            new Effect.Appear("Title60s");
        break;
        case 2:
            new Effect.Appear("Title80s");
        break;
        case 3:
            new Effect.Appear("Title90s");
        break;
        case 4:
            new Effect.Appear("Title00s");
        break;
        case 5:
            new Effect.Appear("Title05s");
        break;
        case 6:
            new Effect.Appear("Title08s");
        break;
    }
    
}

function performDecadeMouseOver(decadeNumber){
    
    switch(decadeNumber){
        case 1:
            document.getElementById('decadeLink1').src = '/Images/Png/timeline-60s70s-ov.png';
        break;
        case 2:
            document.getElementById('decadeLink2').src = '/Images/Png/timeline-80s-ov.png';
        break;
        case 3:
            document.getElementById('decadeLink3').src = '/Images/Png/timeline-90s-ov.png';
        break;
        case 4:
            document.getElementById('decadeLink4').src = '/Images/Png/timeline-00s-ov.png';
        break;
        case 5:
            document.getElementById('decadeLink5').src = '/Images/Png/timeline-05s-ov.png';
        break;
        case 6:
            document.getElementById('decadeLink6').src = '/Images/Png/timeline-08s-ov.png';
        break;
    }
    
}

function performDecadeMouseOut(decadeNumber){
    if(currentDecade != decadeNumber){
        switch(decadeNumber){
            case 1:
                document.getElementById('decadeLink1').src = '/Images/Png/timeline-60s70s.png';
            break;
            case 2:
                document.getElementById('decadeLink2').src = '/Images/Png/timeline-80s.png';
            break;
            case 3:
                document.getElementById('decadeLink3').src = '/Images/Png/timeline-90s.png';
            break;
            case 4:
                document.getElementById('decadeLink4').src = '/Images/Png/timeline-00s.png';
            break;
            case 5:
                document.getElementById('decadeLink5').src = '/Images/Png/timeline-05s.png';
            break;
            case 6:
                document.getElementById('decadeLink6').src = '/Images/Png/timeline-08s.png';
            break;
        }
    }
}