$(document).ready(function() {
    $("#header").load("./common/header.html");
    $("#footer").load("./common/footer.html");
});

var curMenuIndex = 0;
var curContentHeight = 0;
var isAnimating = false;

function showPicture() {
    if( curMenuIndex == 0 ) return; 
    $("#slideLayer").animate({
        opacity: 0,
        height: "hide"
    }, 1000, function() {
        $("#headerBottom").animate({
            opacity: 1,
            height: 330
        }, 1000);
        $("#facebookBtn").animate({
            opacity: 1
        }, 1000);
    });
    
    $(".activeMenu").addClass("deactiveMenu");
    $(".activeMenu").removeClass("activeMenu");
    
    curMenuIndex = 0;
}

function showFacebook() {
    $("#facebookWidget").animate({
        height: "show"
    }, 1000);
    
    $("#facebookWidget iframe").animate({
        height: "show"
    }, 1000);
    
    $("#facebookBg").animate({
        opacity: 1
    }, 1000);
    
    $("#facebookBtn").animate({
        opacity: 0
    }, 1000);
    
    $("#headerBottom").animate({
        height: 395
    }, 1000);
}

function hideFacebook(flag) {
    $("#facebookWidget").animate({
        height: "hide"
    }, 1000);
    
    $("#facebookWidget iframe").animate({
        height: "hide"
    }, 1000);
    
    $("#facebookBg").animate({
        opacity: 0
    }, 1000);
    
    $("#facebookBtn").animate({
        opacity: 1
    }, 1000);
    
    if( flag ) {
        $("#headerBottom").animate({
            height: 330
        }, 1000);
    }
}

function showMenu(menuIndex, div) {
    if( curMenuIndex == menuIndex ) return;
    
    $(".activeMenu").addClass("deactiveMenu");
    $(".activeMenu").removeClass("activeMenu");
    
    $(div).addClass("activeMenu");
    $(div).removeClass("deactiveMenu");
    
    if( curMenuIndex == 0 ) {
        $("#headerBottom").animate({
            opacity: 0,
            height: 0
        }, 1000, function() {
            changeLayer(menuIndex);
        });
        $("#facebookBtn").animate({
            opacity: 0
        }, 1000);
        if( $("#facebookWidget").css("display") != "none" ) {
            hideFacebook(false);
        }
    } else {
        changeLayer(menuIndex);
    }
}

function changeLayer(menuIndex) {
    var html = "";
    var layer = "";
    
    if( menuIndex == 1 ) {
        html = "product.html";
        layer = "#product";
    } else if( menuIndex == 2 ) {
        html = "people.html";
        layer = "#peopleBody";
    } else if( menuIndex == 3 ) {
        html = "about.html";
        layer = "#aboutBody";
    } else if( menuIndex == 4 ) {
        html = "contactus.html";
        layer = "#contactusBody";
    }
    
    if( curMenuIndex != 0 ) {
        $("#slideLayer").animate({
            opacity: 0,
            height: 0
        }, 1000, function(){
            $("#slideLayer").load(html, function(){
                //alert("test");
                //alert($("#slideLayer").css("height"));
                $("#slideLayer").animate({
                    opacity: 1,
                    height: $(layer).height()
                }, 1000, function() {
                    $(this).css("filter", "");
                });
            });
        });
    } else {
        $("#slideLayer").css("height", 0);
        $("#slideLayer").show();
    
        $("#slideLayer").load(html, function() {
            //alert($("#product").css("height"));
            $("#slideLayer").animate({
                opacity: 1,
                height: $(layer).height()
            }, 1000, function() {
                $(this).css("filter", "");
            });
        });
    }
    
    curMenuIndex = menuIndex;
}

function showPeople(img) {
    if( isAnimating ) return;
    if( $(img).attr("class") == "activeThumb" ) return;
    
    isAnimating = true;
    
    var src = $(img).attr("src");
    src = src.replace("_thumb", "");
    
    var activeThumb = $(".activeThumb");
    activeThumb.removeClass("activeThumb");
    activeThumb.addClass("deactiveThumb");
    
    $(img).addClass("activeThumb");
    $(img).removeClass("deactiveThumb");
    
    var activeDiv = $(".activePeople");
    activeDiv.animate({
        opacity: 0
    }, 1000, function() {
        activeDiv.removeClass("activePeople");
        activeDiv.addClass("deactivePeople");
        
        var divs = $(".deactivePeople");
    
        var div;
        for( var i=0; i<divs.length; i++ ) {
            div = divs.eq(i);
            if( div.children().children().attr("src") == src ) {
                div.addClass("activePeople");
                div.removeClass("deactivePeople");
                break;
            }
        }
        
        $("#slideLayer").animate({
            height: $("#peopleBody").height()
        }, 1000, function() {
            isAnimating = false;
        });
        div.css("opacity", "0");
        div.animate({
            opacity: 1
        }, 1000);
    });
}