var bannerSlide = 1;
var intervalValue;

var nxtSlide = function() {
    
    clearInterval(intervalValue);    
    bannerStart();
    intervalValue = setInterval("bannerStart()", 10000);
};

var prevSlide = function() {
    $('#banner-right').unbind('click');
    $('#banner-left').unbind('click');
    
    clearInterval(intervalValue);    
        
    var currentSlide = '#slide_' + bannerSlide;
        
    if(bannerSlide == 1){
        bannerSlide = 3;
    }
    else{
        bannerSlide--;
    }
        
    var nextSlide = '#slide_' + bannerSlide;
        
    $(currentSlide).effect("slide", {mode: "hide", direction: "right"}, 500, function() {
        $(nextSlide).effect("slide", {mode: "show", direction: "left"}, 500, function() {
            $('#banner-right').bind("click", nxtSlide);
            $('#banner-left').bind("click", prevSlide);
        });
    });
        
    intervalValue = setInterval("bannerStart()", 10000);
};

function preloadImage(element, src) {
    
    //the element used to remove the ajax loader
    var loader = element + " img";
    
    var banner_image = $('<img />').load(function() {
        $(loader).remove(loader);
        $(element).append(banner_image);
    }).attr('src', src);
    
}

function bannerStart() {
    $('#banner-right').unbind('click');
    $('#banner-left').unbind('click');
    
    var currentSlide = '#slide_' + bannerSlide;
        
    if(bannerSlide == 3){
        bannerSlide = 1;
    }
    else{
        bannerSlide++;
    }
        
    var nextSlide = '#slide_' + bannerSlide;
        
    $(currentSlide).effect("slide", {mode: "hide", direction: "left"}, 500, function() {
        $(nextSlide).effect("slide", {mode: "show", direction: "right"}, 500, function() {
            $('#banner-right').bind("click", nxtSlide);
            $('#banner-left').bind("click", prevSlide);
        });
    });
}

$(document).ready(function() {
    
    intervalValue = setInterval("bannerStart()", 10000);

    preloadImage('#banner-pic1', 'images/banner1.png');
    preloadImage('#banner-pic2', 'images/banner2.png');
    preloadImage('#banner-pic3', 'images/banner3.png');
    
    $('#banner-right').bind("click", nxtSlide);
    $('#banner-left').bind("click", prevSlide);
    
});