// Interactive Panel

var intervalTimer;

// time before showing next panel AFTER tab has been clicked
var intervalSpeedLong = 12000;
// time before showing next panel when NOTHING has been clicked
var intervalSpeedShort = 8000;
// speed at which the images fade
var fadeSpeed = 300;

function interactive(){
    // displays first image
    $("#interact-image-1").css("display","block");
    // on click animate
    $("#interact-tabs li").click(function(){interactiveTabs($(this),false)});    
    // timer
    intervalTimerSet('Short');
}

function intervalTimerSet(speed){
    // set interval timer to long speed
    if(speed == 'Long'){
        clearInterval(intervalTimer);
        intervalTimer = setInterval(timer,intervalSpeedLong);
    }
    // set interval timer to short speed
    else if(speed == 'Short'){
        clearInterval(intervalTimer);
        intervalTimer = setInterval(timer,intervalSpeedShort);
    }
    // Something has gone wrong so stop interval
    else{clearInterval(intervalTimer)}
}

function interactiveTabs(node,intervalType){
    var requestedTab = $(node);
        
    var requestedContent = $(requestedTab).attr("id").toString();
    requestedContent = "#" + requestedContent.replace("tab","content");
    
    // replace selected image with requested image
    var selectedImage = $("#interact-tabs li.selected").attr("id").toString();
    selectedImage = "#" + selectedImage.replace("tab","image");
    var requestedImage = requestedContent.replace("content","image");
    if(selectedImage != requestedImage){
        $(selectedImage).fadeOut(fadeSpeed,function(){            
            $(requestedImage).fadeIn(fadeSpeed);
        });
    }        
        
    // deselect currently selected tab
    var currentlySelectedTab = $("#interact-tabs li.selected");
    var currentlySelectedTabClass = $(currentlySelectedTab).attr("class").toString();        
    currentlySelectedTabClass = currentlySelectedTabClass.replace("selected","");
    if(currentlySelectedTabClass.length > 0){
        currentlySelectedTabClass = currentlySelectedTabClass.replace(" ","");
        $(currentlySelectedTab).attr("class",currentlySelectedTabClass);
    }
    else{$(currentlySelectedTab).removeAttr("class")}
    
    // highlight selected tab        
    var requestedTabClass = $(requestedTab).attr("class").toString();
    if(requestedTabClass.length > 0){$(requestedTab).attr("class",requestedTabClass + " selected")}
    else{$(requestedTab).attr("class","selected")}
    
    // change interactive panel with current info
    // title
    var requestedContentTitle = $(requestedContent).children().get(0);
    $("#interact-panel h2").html($(requestedContentTitle).html());    
    
    // text
    var requestedContentDesc = $(requestedContent).children().get(1);    
    $("#interact-panel span").text($(requestedContentDesc).text());
    
    // link
    var requestedContentLink = $(requestedContent).children().get(2);
    $("#interact-panel a").attr("href",$(requestedContentLink).text());
    
    // reset interval timer
    if(intervalType == false){
        clearInterval(intervalTimer);
        intervalTimerSet('Long');
    }
    else if(intervalType == true){
        clearInterval(intervalTimer);
        intervalTimerSet('Short');
    }
    else{clearInterval(intervalTimer)}
}

function timer(){
    var currentTab = $("#interact-tabs li.selected");
    if($(currentTab).attr("id").toString() == "interact-tab-5"){interactiveTabs($("#interact-tab-1"),true)}
    else{
        var nextTab = $(currentTab).next().get();
        nextTab = "#" + $(nextTab).attr("id").toString();    
        interactiveTabs($(nextTab),true);
    }    
}