﻿function ArtMouseOver()
{
    setTimeout("setOpacity('img1',80)", 100);
    setTimeout("setOpacity('img2',80)", 400);
    setTimeout("setOpacity('img3',80)", 700);
    setTimeout("setOpacity('img4',80)", 1000);
    
    setTimeout("setOpacity('img1',40)", 600);
    setTimeout("setOpacity('img2',40)", 900);
    setTimeout("setOpacity('img3',40)", 1200);
    setTimeout("setOpacity('img4',40)", 1500);
}

function SetPiece(pieceIdx, galleryId)
{
    try
    {
        location.href = "art.aspx?gId=" + galleryId + "&pIdx=" + pieceIdx;
    }
    catch (e)
    {
    }
}

function SetPieceImg(imgId, imgSrc)
{
    try
    {
        document.getElementById(imgId).src = imgSrc;
    }
    catch (e)
    {
    }
}

window.RL108 = {

    data: {
        art: null
    },

    setContentArea: function () {
        $(".contentContainer").fadeIn(500);
        var ch = $(".renderedContent").height() + 20;
        $(".contentContainerBkgd").css({ height: ch });
        $(".footer").css({ top: (ch + 4) });
        $(".artLineImg").hover(
        function () {
            $(this).fadeTo(500, 1);
        },
        function () {
            $(this).fadeTo(500, .4);
        });
    },

    animateOpening: function () {
        $(".rlLogo, .rlLogoFrame").hover(
            function () { $(".rlLogo").addClass("hovering").stop().css({ opacity: 1 }); },
            function () { $(".rlLogo").removeClass("hovering"); }
            );
        $(".sprite").hover(
            function () { $(this).attr("currOpacity", $(this).css("opacity")); $(this).css({ opacity: 1.0 }); },
            function () { $(this).css({ opacity: parseFloat($(this).attr("currOpacity")) }) }
            );
        $(".rlLogo").click(function () {
            RL108.toggleFx();
        });
        RL108.pulsateLogo();
        RL108.setupAnimation();
        //$(".rlLogo").animate({ width: 329, height: 327, left: 300, top: 250, opacity: 0.8 }, 3000);
    },

    pulsateLogo: function () {
        if (!$(".rlLogo").hasClass("hovering")) {
            $(".rlLogo").animate({ opacity: 1 }, 1000).animate({ opacity: 0.4 }, 1000);
            //$(".rlLogoFrame").animate({ opacity: 0.1 }, 1000).animate({ opacity: 0.2 }, 1000);
        }
        setTimeout(RL108.pulsateLogo, 4000);
    },

    getArtPiece: function () {
        var idx = Math.floor(Math.random() * (RL108.data.art.ArtGalleries[0].Pieces.length + 1));
        idx = (idx >= RL108.data.art.ArtGalleries[0].Pieces.length) ? idx - 1 : idx;
        var piece = RL108.data.art.ArtGalleries[0].Pieces[idx];
        var imgIdx = Math.floor(Math.random() * (piece.Images.length + 1));
        imgIdx = (imgIdx >= piece.Images.length) ? imgIdx - 1 : imgIdx;
        return {
            artSrc: piece.Images[imgIdx].Src,
            artDesc: "<b>" + piece.Id + "</b><br/>" + piece.Dimensions + "<br/>" + piece.Materials.join(" ")
        };
    },

    setupAnimation: function () {
        var sprites = $(".sprite");
        for (var i = 0; i < sprites.length; i++) {
            var artPiece = RL108.getArtPiece();
            $(sprites[i])
            .addClass("sprite" + i)
            .attr("artSrc", artPiece.artSrc)
            .attr("artDesc", artPiece.artDesc)
            .hover(
                function () { $(this).stop(); },
                function () { RL108.animateObject($(this)); }
            )
            .click(function () {
                RL108.lightbox.showModalContent($(this).attr("artSrc"), $(this).attr("artDesc"), { border: "solid 1px" });
            });
            RL108.animateObject($(sprites[i]));
        }
    },

    animateObject: function (jqobject) {
        if (!$.fx.off) {
            var dw = $(document).width() * .9;
            var dwMargin = $(document).width() * .05;
            var dh = $(document).height() * .9;
            var dhMargin = $(document).height() * .05;
            var whFactor = Math.random();
            var transformArgs = {
                left: (Math.random() * dw) + dwMargin,
                top: (Math.random() * dh) + dhMargin,
                opacity: Math.random()
            };
            var imgTransformArgs = {
                width: 34 + (whFactor * 30),
                height: 34 + (whFactor * 30)
            }
            var target = (jqobject) ? jqobject : $(this);
            var duration = Math.random() * 5000;
            var easing = ((Math.random() < .5) ? "swing" : "linear");
            target.animate(transformArgs, duration, easing, RL108.animateObject);
            $("img", target).animate(imgTransformArgs, duration, easing);
        }
    },

    toggleFx: function () {
        $.fx.off = !$.fx.off;
        if (!$.fx.off)
            RL108.setupAnimation();
    },

    showLightbox: function (imgSrc) {
    },


    lightbox: {

        screen: null,

        showScreen: function () {
            if (!this.screen) {
                this.screen = $("<div id=\"OverlayScreen\" class=\"overlayScreen\"></div>");
                $(this.screen).css("opacity", "0.75");
                $(this.screen).appendTo("body");
            }
            $(this.screen).show();
        },

        hideScreen: function () {
            if (this.screen)
                $(this.screen).hide();
        },

        modalContentContainer: null,

        onLoad: { callback: null, callbackData: null },
        onClose: null,

        showModalContent: function (imgSrc, imgDesc, css) {
            if (!RL108.lightbox.modalContentContainer) {
                RL108.lightbox.modalContentContainer = $("<div class=\"overlayScreenContentContainer\"></div>");
                $(RL108.lightbox.modalContentContainer).appendTo("body");
            }

            RL108.lightbox.showScreen();
            if (css)
                $(RL108.lightbox.modalContentContainer).css(css);
            $(RL108.lightbox.modalContentContainer).show();

            var content = "<img src=\"\" class=\"lbimg\"/><div class=\"lbimgDesc\"></div>"; // <a href=\"#\" class=\"closeModal\">X</a>
            $(RL108.lightbox.modalContentContainer).html(content);
            $(".lbimg").load(function () {
                $(".overlayScreenContentContainer").animate(
                    {
                        width: $(this).width() + 10,
                        height: $(this).height() + 10,
                        "margin-left": -Math.floor($(this).width() / 2),
                        "margin-top": -Math.floor($(this).height() / 2)
                    },
                    function () {
                        if (imgDesc)
                            $(".lbimgDesc").css({ top: ($(this).height() + 20) }).html(imgDesc);
                    }
                );
                $(this).css({
                    "margin-left": -Math.floor($(this).width() / 2),
                    "margin-top": -Math.floor($(this).height() / 2)
                }).fadeIn();
                $(".closeModal").fadeIn();
            })
            .hide()
            .css({ clear: "both" })
            .attr("src", imgSrc)
            .click(RL108.lightbox.closeModalWindow);

            if (typeof RL108.lightbox.onLoad.callback === "function") {
                RL108.lightbox.onLoad.callback(RL108.lightbox.onLoad.callbackData);
                RL108.lightbox.onLoad.callback = null;
                RL108.lightbox.onLoad.callbackData = null;
            }
            $(".closeModal").click(RL108.lightbox.closeModalWindow);
        },

        closeModalWindow: function () {
            $(".lbimg").remove();
            if (typeof RL108.lightbox.onClose === "function") {
                RL108.lightbox.onClose();
                RL108.lightbox.onClose = null;
            }
            if (RL108.lightbox.modalContentContainer) {
                $(RL108.lightbox.modalContentContainer).empty();
                $(RL108.lightbox.modalContentContainer).hide();
            }
            if (RL108.lightbox.screen) {
                $(RL108.lightbox.screen).fadeOut(500);
            }
        }

    }

}
