function slideSwitch(id) {
    var $active = $(id + ' IMG.active');

    if ($active.length == 0) $active = $(id + ' IMG:last');

    var $next = $active.next().length ? $active.next()
        : $(id + ' IMG:first');

    $active.addClass('last-active');

    $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 3000, function() {
            $active.removeClass('active last-active');
        });
}

var isPhotoChanging = false;
var curShow = "img1";
function slideSwitchById(id, imgId) {
    isPhotoChanging = true;
    var $active = $(id + ' IMG.active');
    var $next = $(id + ' #img' + imgId);
        
    $active.addClass('last-active');
        
    $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 2000, function() {
            $active.removeClass('active last-active');
        });
        isPhotoChanging = false;
    curShow = 'img' + imgId;
}

var enable = true;

function mainSlideSwitch(id) {
    if (enable == false) {
        enable = true;
        return;
    }

    isPhotoChanging = true;
    var $active = $(id + ' IMG.active');

    if ($active.length == 0) $active = $(id + ' IMG:last');

    var $next = $active.next().length ? $active.next()
        : $(id + ' IMG:first');

    $active.addClass('last-active');
    var curId = $active.attr('id');
    var nextId = $next.attr('id');
    curShow = $next.attr('id');
    
    if (curId == "img1")
        $("#sImg1").css("background-color", "gray");
    else if (curId == "img2")
        $("#sImg2").css("background-color", "gray");
    else if (curId == "img3")
        $("#sImg3").css("background-color", "gray");
    else if (curId == "img4")
        $("#sImg4").css("background-color", "gray"); 
            
    $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 2000, function() {
            $active.removeClass('active last-active');
        });
    
    if (nextId == "img1")
        $("#sImg1").css("background-color", "orange");
    else if (nextId == "img2")
        $("#sImg2").css("background-color", "orange");
    else if (nextId == "img3")
        $("#sImg3").css("background-color", "orange");
    else if (nextId == "img4")
        $("#sImg4").css("background-color", "orange"); 
        
    isPhotoChanging = false;
}
$(function() {
    $("#sImg1").css("background-color", "orange");
    $("#sImg1").click(function() {
        if (isPhotoChanging == false && curShow != "img1") {
            enable = false;
            $("#sImg1").css("background-color", "orange");
            $("#sImg2").css("background-color", "gray");
            $("#sImg3").css("background-color", "gray");
            $("#sImg4").css("background-color", "gray");
            slideSwitchById('#slideshow', 1);
        }
    });
    $("#sImg2").click(function() {
        if (isPhotoChanging == false && curShow != "img2") {
            enable = false;
            $("#sImg1").css("background-color", "gray");
            $("#sImg2").css("background-color", "orange");
            $("#sImg3").css("background-color", "gray");
            $("#sImg4").css("background-color", "gray");
            slideSwitchById('#slideshow', 2);
        }
    });
    $("#sImg3").click(function() {
        if (isPhotoChanging == false && curShow != "img3") {
            enable = false;
            $("#sImg1").css("background-color", "gray");
            $("#sImg2").css("background-color", "gray");
            $("#sImg3").css("background-color", "orange");
            $("#sImg4").css("background-color", "gray");
            slideSwitchById('#slideshow', 3);
        }
    });
    $("#sImg4").click(function() {
        if (isPhotoChanging == false && curShow != "img4") {
            enable = false;
            $("#sImg1").css("background-color", "gray");
            $("#sImg2").css("background-color", "gray");
            $("#sImg3").css("background-color", "gray");
            $("#sImg4").css("background-color", "orange");
            slideSwitchById('#slideshow', 4);
        }
    });

    setInterval("mainSlideSwitch('#slideshow')", 10000);
    setInterval("slideSwitch('#logo #container #lBox1')", 10000);
    setInterval("slideSwitch('#logo #container #lBox2')", 15000);
    setInterval("slideSwitch('#logo #container #lBox3')", 11000);
    setInterval("slideSwitch('#logo #container #lBox4')", 19000);
    setInterval("slideSwitch('#logo #container #lBox5')", 13000);
});