// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


// ~~~~~ PAGE BACKGROUND TRANSITION ~~~~~


// DEFINE TYPE OF TRANSITION/ANIMATION

// choose between:

// ~ 'TopDownSlide'
// ~ 'CrossFade'
// ~ 'Random'.

var AnimationVariant = "TopDownSlide";


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Animation global variables.
var Steps, Step;
var IntervalSpeed, IntervalId;
var NavigateURL, ClickedButtonNode;
var StartValue, EndValue, CurrentValue;
var AnimationGoing;
var pf, p, tm, div, as;

function InitTopMenuButtonClick() {
    pf = document.getElementById("pageform");
    p = document.getElementById("page");
    tm = document.getElementById("topmenu");
    as = tm.getElementsByTagName("a");
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function() {
            if (!AnimationGoing) {

                try {
                    $('.menuContainer').hide();
                } catch (Error) {
                    alert(Error);
                }

                // ~~ Randomize if applicable.
                if (AnimationVariant == "Random") {
                    var rand_no = Math.ceil(2 * Math.random());
                    if (rand_no < 2) {
                        AnimationVariant = "TopDownSlide";
                    } else {
                        AnimationVariant = "CrossFade";
                    }
                }

                // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                // PARAMETERS FOR ANIMATION:

                // ~~ Change these parameters to affect speed and start/end pos.
                if (AnimationVariant == "TopDownSlide") {
                    Steps = 15;
                    IntervalSpeed = 30; // milliseconds; lower is faster
                    StartValue = -260;
                    EndValue = 0;
                }
                if (AnimationVariant == "CrossFade") {
                    Steps = 20;
                    IntervalSpeed = 10;
                    StartValue = 0;
                    EndValue = 100;
                }

                // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                // Fixed parameters.
                IntervalId = 0;
                CurrentValue = StartValue;
                ClickedButtonNode = this;

                // Set background of pageform to chosen studio.
                if (AnimationVariant == "TopDownSlide") {
                    pf.style.backgroundPosition = "left " + StartValue + "px";
                    if (!(Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7)) {
                        //pf.style.backgroundImage = "url('/_images/_" + this.parentNode.className + "/bgcolor_anim.png')";
                        pf.style.backgroundImage = "url('/_images/_" + this.parentNode.className + "/bgcolor.gif')";
                    } else {
                        pf.style.backgroundImage = "url('/_images/_" + this.parentNode.className + "/bgcolor.gif')";
                    }
                } else if (AnimationVariant == "CrossFade") {
                    p.style.position = "relative";
                    p.style.zIndex = 2;
                    div = document.createElement("div");
                    div.id = "tempDivForCrossFade"; // Styled in screen.css
                    div.style.backgroundImage = "url('/_images/_" + this.parentNode.className + "/bgcolor.gif')";
                    div.style.opacity = StartValue / 100;
                    div.style.filter = "alpha(opacity=" + StartValue + ")";
                    pf.appendChild(div);
                }

                // Remember url to navigate to after animation.
                NavigateURL = "" + this;

                // Animate!
                if (AnimationVariant == "TopDownSlide" && !(Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7)) {
                    setTimeout('$("#pageform").animate({ backgroundPosition: "(0px 0px)" }, { queue: false, duration: 600, easing: "easeInOutExpo", complete: function() { Steps = 0;  Animate(AnimationVariant); } })', 1);
                } else {
                    StartAnimation(AnimationVariant);
                }



                return false;

            }
        }
    }
}

function StartAnimation(AnimationVariant) {
    AnimationGoing = true;
    var JourneyLength = EndValue - StartValue;
    Step = Math.round((JourneyLength / Steps)); // = Animation formula
    IntervalId = setInterval("Animate('" + AnimationVariant + "')", IntervalSpeed);
}
function Animate(AnimationVariant) {

    if (AnimationVariant == "TopDownSlide" && !(Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7)) {

        if (0 < Steps) {
            CurrentValue = CurrentValue + Step;
            pf.style.backgroundPosition = "left " + CurrentValue + "px";
            Steps--;
        } else {
            pf.style.backgroundPosition = "left " + EndValue + "px";
            document.body.style.background = "#ffffff url('/_images/_" + ClickedButtonNode.parentNode.className + "/bgcolor.gif') repeat-x left top";
            pf.style.backgroundPosition = "left " + StartValue + "px";
            clearInterval(IntervalId);
            AnimationGoing = false;
            setTimeout("location.href = NavigateURL", 100);
        }

    } else if (AnimationVariant == "CrossFade" && !!(Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7)) {

        if (0 < Steps) {
            CurrentValue = CurrentValue + Step;
            div.style.opacity = CurrentValue / 100;
            div.style.filter = 'alpha(opacity=' + CurrentValue + ')';
            Steps--;
        } else {
            document.body.style.background = "#ffffff url('/_images/_" + ClickedButtonNode.parentNode.className + "/bgcolor.gif') repeat-x left top";
            div.style.background = "none";
            clearInterval(IntervalId);
            AnimationGoing = false;
            setTimeout("location.href = NavigateURL", 100);
        }

    } else {
        // case no valid AnimationVariant is specified.
        clearInterval(IntervalId);
        location.href = NavigateURL;
    }

}



// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


// ~~~~~ BUTTON MOUSEOVER ANIMATION ~~~~~


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

var topMenuButtonClicked = false;
$(function() {
    if (!(Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7)) {
        $('#topmenu a')
		.css({ backgroundPosition: "0px -30px" })
		.mouseover(function() {
		    if (!topMenuButtonClicked) {
		        $(this).stop().animate({ backgroundPosition: "(0px 0px)" }, { duration: 250, easing: "easeOutExpo" })
		    }
		})
		.mouseout(function() {
		    if (!topMenuButtonClicked) {
		        $(this).stop().animate({ backgroundPosition: "(0px -30px)" }, { duration: 500, easing: "easeInCubic", complete: function() {
		            $(this).css({ backgroundPosition: "0px -30px" })
		        }
		        })
		    }
		})
		.mouseup(function() {
		    topMenuButtonClicked = true;
		    $(this).stop().animate({ backgroundPosition: "(0px -30px)" }, { duration: 690, easing: "easeInOutExpo", complete: function() {
		        $(this).css({ backgroundPosition: "0px -30px" });
		        topMenuButtonClicked = false;
		    }
		    })
		})
    }
});


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~