var scrollApi;
var selectedNav = -1;
var selectedProject = null;
var prevHidden = false;
var nextHidden = true;
var totalItems = null;
var oldHover = null;

$(document).ready(function() {
    $('.cycle').cycle({
        fx: 'fade',
        timeout: 5000
    });
    
    totalItems = $('#carousel').attr('rel');
 
    // initialize scrollable 
    scrollApi = $("div.scrollable").scrollable({
        api: true,
        size: 4,
        clickable: false,
        keyboardSteps: 1
    });
    
    // Select the first project
    if($('.scrollable').length > 0) {
        carouselNext();
    }
    
    // What to do on hover
    $('#smallNav a').hover(function() {
        tI = $(this).attr('rel');
        showProjectDetails(tI);
    }, function() {
        hideProjectDetails();
    });
    
    $(".scrollable img").click(function() {
        selectProject($(this).attr('rel'));
    });
    
    
    $('.pRollover').hover(function(){
        oldHover = $('#portfolioImage').attr('src');
        imageId  = $(this).attr('rel');
        newImage = $('#largeImage_' + imageId.replace(/Large Image /, '')).attr('src');
        $('#portfolioImage').attr('src', newImage);
    }, function() {
        $('#portfolioImage').attr('src', oldHover);
    });
 
});

function selectProject(tI, doClick)
{
    scrollApi.click(tI, 100);
    
    if((tI + 1) == totalItems) {
        // Hide the Next
        $('#cNext').attr('href', 'javascript:;');
        nextHidden = true;
    } else {
        if(nextHidden == true) {
            $('#cNext').attr('href', "javascript:carouselNext();");
            nextHidden = false;
        }
    }
    if(tI == 0) {
        // Hide the Prev
        $('#cPrev').attr('href', 'javascript:;');
        prevHidden = true;
    } else {
        if(prevHidden == true) {
            $('#cPrev').attr('href', "javascript:carouselPrev();");
            prevHidden = false;
        }
    }
         
    if(selectedNav != null) {
        $('#nav_' + selectedNav).removeClass('current');
    }
    
    selectedNav = tI;
    $('#nav_' + tI).addClass('current');
    
    showProjectDetails(tI);
}

function showProjectDetails(tI)
{
    $('#selectProject').html($('#info_' + tI).html());
}


function hideProjectDetails()
{
    $('#selectProject').html($('#info_' + selectedNav).html());
}

function carouselPrev()
{
    selectProject(selectedNav - 1);
}
function carouselNext()
{   
    selectProject(selectedNav + 1);
}

function replaceImage(id)
{
    $('#portfolioImage').attr('src', $('#largeImage_' + id).attr('src'));
}