// simple carousel
var scroll_count = 0;
var this_scroll = 0;
var scroll_cap = 17;
var offset = 0;

function carousel(direction, scroll_count) {
        
    // get dims
    var c_width = parseInt($("#carouselContainer ul li").outerWidth(true));
    var c_margin = parseInt($('#carousel_viewport').css('margin-left'));
    var c_duration = 700;

    
    // disable the scrollbutton
    $('#btnCarousel_' + direction).unbind("click");
        
    if (this_scroll <= scroll_count && this_scroll > -1) {
        // sort out the offset and set the scroll location for this scroll
        if (direction == 'left') {
            if (this_scroll != 0) {
                offset = (c_width + c_margin);
                this_scroll = this_scroll - 1;
            }
        }
        else {
            if (this_scroll != scroll_count && this_scroll < scroll_cap) {
                offset = '-' + (c_width - c_margin);
                this_scroll = this_scroll + 1;
            }
        }
    }
    
    $("#carousel_viewport").animate({ 
        marginLeft: offset
    }, c_duration, function () { enable_carousel_button(direction, scroll_count); } );
}

function enable_carousel_button(direction, scroll_count) {
    $("#btnCarousel_" + direction).click(function () {
        carousel(direction, scroll_count);
    });
}

function switch_portfolio(p_id) {
    if (!$('#' + p_id).attr("class")) {
        $("#portfolioImage").animate({
            opacity: 0
        }, 200, function () { $('#portfolioImage').attr({src: 'img/portfolio/' + p_id + '_main.jpg'}); } )
        .animate({
            opacity: 1
        }, 200);
        
        $('#carousel_viewport li.active').removeClass("active");
        $('#' + p_id).addClass("active");
    }
}

$(document).ready(function() {

    jQuery.easing.def = "easeOutExpo";
    
    // determine the scroll count
    scroll_count = $('#carousel_viewport > li').size() - 1;
    // set left/right buttons on carousel
    enable_carousel_button('left', scroll_count);
    enable_carousel_button('right', scroll_count);
    
    // add click events to the scroll thumbs
    $("#carousel_viewport li").each(function () {
        var el = $('#hiddenImage').clone().insertAfter($('#portfolioImage'));
        el.attr({src: 'img/portfolio/' + this.id + '_main.jpg'});
    });
    
    // add click events to the scroll thumbs
    $("#carousel_viewport li").click(function () {
        switch_portfolio(this.id);
        return false;
    });
    
});