var hidden = true;
var sliding = false;
var person = "";



//this is called when the thing is finished sliding.
//sliding can be in or out, depends on hidden.
function slidedone()
{
    sliding = false;
    if(!hidden)
    {
        document.getElementById("close").style.display = "block";
        document.getElementById("gdaysbig").style.display = "block";
        document.getElementById(person).style.display = "block";
    }
}
function closeslider()
{
    if(sliding)
    {
        return;
    }
    sliding = true;
    hidden = true;
    document.getElementById("close").style.display = "none";
    document.getElementById("gdaysbig").style.display = "none";
    document.getElementById(person).style.display = "none";
    $("#clickbox").animate({
            width: "384px",
            left: "0px"
            }, 1500);
    $("#gdaysbig").animate({
        width: "0px",
        left: "384px"
        }, 1500);

    $("#gdayspeoplebg").animate({
        left: "0px"
        }, 1500, "swing", slidedone);

}
function show(event)
{
    if(sliding)
        return;
    //alert("event.pageY is " + event.pageY);

    var x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("clickbox").offsetLeft;
	var y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("clickbox").offsetTop - 186;
    if(hidden)
    {
        $("#clickbox").animate({
            width: "834px",
            left: "-450px"
            }, 1500);
        $("#gdaysbig").animate({
            width: "450px",
            left: "-66px"
            }, 1500);

        $("#gdayspeoplebg").animate({
            //width: "834",
            left: "-450px"
            }, 1500, "swing", slidedone);
        hidden = false;
        sliding = true;
        //use x and y to figure out which one to show
        person = "";
        if(y < 100)
        {
            person = "sh";
        }
        else if(y < 200)
        {
            person = "ac";
        }
        else if(y < 300)
        {
            person = "ole";
        }
        else
        {    
            person = "ss";
        }
        $("#" + person).addClass('active');
    }
    else
    {
        x -= 800;
        if(x < 384)
        {
            var nextperson = "";
            if(y < 100)
            {
                nextperson = "sh";
            }
            else if(y < 200)
            {
                nextperson = "ac";
            }
            else if(y < 300)
            {
                nextperson = "ole";
            }
            else
            {
                nextperson = "ss";
            }
            if(person != nextperson)
            {
                $("div#gdaysbig .active").css({"display" : "none"});
                $("#" + nextperson).addClass('active').css({"display" : "block"});
                person = nextperson;
            }
        }
    }
}









/* home */
var WAITTIME = 3000; /* time to wait inbetween slideshow in ms*/
var MAX_SLIDES = 7;
var CURR_SLIDE = 0;
function slideSwitch()
{
    //active is whatever is active=
    var $active = $('#homeslideshow IMG.active');

    CURR_SLIDE++;
    if(CURR_SLIDE == MAX_SLIDES)
        CURR_SLIDE = 0;
    var $next = $('#s' + CURR_SLIDE)
    
    $active.addClass('last-active');
    $active.css({opacity: 1.0}).animate({opacity: 0}, 1000, function() {
            $active.removeClass('active last-active');
        });

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, null);
}

$(document).ready(function()
{
   setInterval( "slideSwitch()", WAITTIME );
});