var WidgetExtendedHeight = 180;

var WidgetContractedAdditionalPosition = 40;

window.addEvent('domready', function()
{
    //setup initial layout
    $$('.WidgetElement').each(function(e, i, a)
    {
        if (i == 0) //personal
        {
            e.addEvent("click", function()
            {
                document.location = "/personal/";
            });
        }

        if (i == 1) //school
        {
            e.addEvent("click", function()
            {
                document.location = "/?school=true";
            });
        }


        if (i == 2) //personal
        {
            e.addEvent("click", function()
            {
                document.location = "/?team=true";
            });
        }



        e.addEvent("mouseenter", function()
        {
            ChangeWidgetDisplay(i);
        });

        e.setStyle("z-index", 100 - i);
        if (i == 0)
        {
            e.morph({ "top": "0px" });
        }

        else
        {
            e.morph({ "top": (((i) * WidgetContractedAdditionalPosition)) });
        }
    });
});

function ChangeWidgetDisplay(index)
{
    $$('.WidgetElement').each(function(e, i, a)
    {
        var WidgetElementContent = e.getFirst(".WidgetElementContent");
        var ImageElement = WidgetElementContent.getFirst(".WidgetElementImage");
        var WidgetPadding = WidgetElementContent.getFirst(".WidgetPadding");
        var WidgetElementTitle = WidgetElementContent.getFirst(".WidgetElementTitle");

        if (i >= index)
        {
            ImageElement.morph({ "height": "120" });
            WidgetElementContent.morph({ "height": "170" });
            WidgetPadding.morph({ "height": "10" });
            WidgetElementTitle.morph({"padding-top": "10"});
            //e.morph({ "height": "190" });
        }
        else
        {
            ImageElement.morph({ "height": "0" });
            WidgetElementContent.morph({ "height": "30" });
            WidgetPadding.morph({ "height": "0" });
            WidgetElementTitle.morph({ "padding-top": "3" });
        }
    });
}