Sys.Application.add_load(OnApplicationLoadHandler);

// ~~~~~~~~~~~~~~~~~~~~~~ AJAX scripts ~~~~~~~~~~~~~~~~~~~~~ 
function OnApplicationLoadHandler(sender, args) {

    // ~~ Fix for IE6.
    if ((Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7)) {
        // alert("Your browser is outdated (Internet Explorer 6). Please upgrade your browser.");
    }

}

var numShadePerc = 0.5;

function getAlbumType(type) {

    var hu = window.location.search.substring(1);

    gy = hu.split("&");
    for (i = 0; i < gy.length; i++) {
        ft = gy[i].split("=");
        if (ft[0] == type) {
            switch (ft[1]) {
                case "1":
                    intAlbumId = 1;
                    break;
                case "2":
                    intAlbumId = 2;
                    break;
                case "3":
                    numShadePerc = 0;
                    intAlbumId = 3;
                    break;
                case "4":
                    intAlbumId = 4;
                    break;
                default:
                    intAlbumId = 1;
                    break;
            }

            return intAlbumId;
        }
    }
    return 1;
}

var intAlbumId = getAlbumType("type");



/* Map Animation */
var numCurrentMapPos = 0;
var arrPositions = ["-60px 0px", "-250px 0px"];

function nextStep() {
    numCurrentMapPos++;

    if (numCurrentMapPos == arrPositions.length)
        numCurrentMapPos = 0;

    $("#homeMap").stop().animate(
    { backgroundPosition: arrPositions[numCurrentMapPos] },
    { queue: false, duration: 7000 }, "easeinout");
};


function initSelectedAlbum(myId) {

    // Animatie Size A
    $("#a" + myId).css("width", "90px");
    $("#a" + myId).css("height", "137px");

    // Animatie Size total dockitem
    $("#dockitem" + myId).css("width", "90px");
    $("#dockitem" + myId).css("height", "200px");
    $("#dockitem" + myId).css("backgroundPosition", "0px 130px");

    // Animate img
    $("#img" + myId).css("filter", "color");
    $("#img" + myId).css("width", "77px");
    $("#img" + myId).css("height", "78px");

    //Animate Text
    $("#txtSmall" + myId).css("display", "none");
    $("#txtSmall" + myId).css("color", '#c7e513'),
    $("#txtBig" + myId).css("display", "block");
    $("#txtBig" + myId).css("opacity", "1");

    $("#txtBig" + myId).css("color", "#ffffff");
}



// ~~~~~~~~~~~~~~~~~~~~  JQUERY scripts ~~~~~~~~~~~~~~~~~~~~
$(document).ready(function () {

    initSelectedAlbum(intAlbumId);

    // Gallery slideViewerPro Init
    $(window).bind("load", function () {
        $("div#my-folio-of-works").slideViewerPro({
            thumbs: 6,
            autoslide: true,
            easeTime: 1250,
            asTimer: 4000,
            typo: false,
            galBorderWidth: 0,
            thumbsBorderOpacity: 0,
            thumbsVis: false,
            easeFunc: "easeInOutExpo",
            buttonsTextColor: "#707070",
            buttonsWidth: 40,
            thumbsActiveBorderOpacity: 0.8,
            thumbsActiveBorderColor: "#00386e",
            shuffle: false
        });

        $("#dockPhotos").animate({ opacity: 1.0 }, { queue: true, duration: 500 })
        $("#dockStationShade").animate({ opacity: numShadePerc }, { queue: true, duration: 1200 })
        $("#dockStation").animate({ opacity: 1.0 }, { queue: true, duration: 1200 })

        // Highlight selected dockItem (commented, too bad IE8)
        //$("#dockStation").everyTime(300, function () {
        //    $("#dockitem" + intAlbumId).animate({ backgroundColor: "#e0f850" }, 1100).animate({ backgroundColor: "#c7e513" }, 1100);
        //});

        $("#homeMap").everyTime(10000, function () { nextStep(); });
        nextStep()
    });

    for (var intDockItem = 1; intDockItem <= 4; intDockItem++) {

        if (intDockItem != intAlbumId) {

            $("#a" + intDockItem)
                .hover(function () {
                    var myId = ($(this).attr("id").charAt(this.id.length - 1));

                    // Animatie Size A
                    $("#a" + myId).stop().animate(
                    { "width": "90", "height": "137" },
                    { queue: false, duration: 400 });

                    // Animatie Size total dockitem
                    $("#dockitem" + myId).animate(
                    { "width": "90", "height": "200", backgroundPosition: '0px 130px' },
                    { queue: false, duration: 400 });

                    $("#txtSmall" + myId).css("display", "none");

                    // Animate img
                    $("#img" + myId).css("filter", "color");
                    $("#img" + myId).stop().animate(
                    { "width": "77px", "height": "78px" },
                    { queue: false, duration: 400, complete: function () {

                    //Animate Text
                    $("#txtSmall" + myId).css("display", "none");
                    $("#txtSmall" + myId).css("color", '#c7e513'),

                    $("#txtBig" + myId).css("display", "block");
                    $("#txtBig" + myId).css("opacity", "1");

                    $("#txtBig" + myId).stop().animate(
                    { color: '#ffffff' },
                    { queue: false, duration: 200 });
                }
                });

                // SHADE PART
                $("#dockitemShade" + myId).stop().animate(
                { "width": "90", "height": "200" },
                { queue: false, duration: 400 });
                },
            function () {
                var myId = ($(this).attr("id").charAt(this.id.length - 1));

                // Animatie Size A
                $("#a" + myId).stop().animate(
                { "width": "66", "height": "93" },
                { queue: false, duration: 400 })

                // Animatie Size total dockitem
                $("#dockitem" + myId).stop().animate(
                { "width": "66", "height": "162", backgroundPosition: "0px 93px" },
                { queue: false, duration: 400 })

                // Animate img
                if (myId != intAlbumId)
                    $("#img" + myId).css("filter", "gray");


                $("#txtBig" + myId).css("display", "none");
                $("#txtBig" + myId).css("opacity", "0");
                $("#txtBig" + myId).css("color", '#c7e513'),

                $("#img" + myId).stop().animate(
                { "width": "53px", "height": "54px" },
                { queue: false, duration: 400, complete: function () {

                    //Animate Text
                    $("#txtBig" + myId).css("display", "none");

                    $("#txtSmall" + myId).css("display", "block");
                    $("#txtSmall" + myId).stop().animate(
                    { color: '#ffffff' },
                    { queue: false, duration: 200 });
                }
                });

                // SHADE PART
                $("#dockitemShade" + myId).stop().animate(
                    { "width": "66", "height": "162" },
                    { queue: false, duration: 400 })
            });
        }
    }
});