j_v_gallery.js

/***************************************************\
|                                                   |
|   JavaScript Document [j_v_gallery.js]            |
|   Requirements: jQuery [core: current release]    |
|   Original Creation Date: 03.20.2011              |
|   Last Update On: 08.24.2011                      |
|                                                   |
\***************************************************/


/******************** Constants **********************/

   var _PREVIEW_OBJECT                  = "#vGalleryPreview > img";
   var _CONTROLS_OBJECT                 = "#vGalleryPreviewControls > *";
   var _AUTO_CYCLE_DELAY                = 5000;
   var _PREVIEW_CONTROL_ANIMATION_SPEED = "slow";
   var _RUNNER_SLIDE_ANIMATION_SPEED    = "fast";
   var _PREVIEW_FADE_ANIMATION_SPEED    = 200;
   var _GLOW_MOVE_ANIMATION_SPEED       = 100;
   var _THUMBS_PER_SLIDE                = 4;
   var _NUMBER_OF_GALLERIES             = 3;

   galleryArray = createArray(_NUMBER_OF_GALLERIES);     // Array creation

   galleryArray[0][0]                   = "gold";        // class name
   galleryArray[0][1]                   = "#98f50d";     // hex color
   galleryArray[1][0]                   = "platinum";    // class name
   galleryArray[1][1]                   = "#47bce8";     // hex color
   galleryArray[2][0]                   = "supremacy";   // class name
   galleryArray[2][1]                   = "#FFF";        // hex color

   // Default Color
   galleryArray[_NUMBER_OF_GALLERIES][0]= "default";
   galleryArray[_NUMBER_OF_GALLERIES][1]= "#404041";     // hex color

/******************************************************/

// Create our variables
var runnerStartPosition = 0;
var thumbPosition       = 1;
var moveMeter           = true;
var thumbTotalCount;
var runnerCurrentPosition;
var glowCorrection;
var thumbDistance;
var previewIndex;
var galleryClass;
var currentClass;
var cycleTimer;

// Runs keyControl when a key is pressed
document.onkeyup = keyControl;

$(document).ready(function() {

    // Get the number of thumbs in the vGalleryThumbsRunner
    thumbTotalCount = $("#vGalleryThumbsRunner > .vGalleryThumb").size();

    // Get the offset of the thumbnail glow
    glowCorrection = parseInt($("#vGalleryGlow").css("top")) * -(1);

    // Get the distance between two thumbnails (top to top)
    thumbDistance = parseInt($(".vGalleryThumb:nth-child(2)").offset().top) - parseInt($(".vGalleryThumb:first-child").offset().top)

    runnerCurrentPosition = runnerStartPosition;

    // No one likes IE
    $("#vGalleryGlow").css("position", "absolute");

    // Hide preview controls on page load
    $(_CONTROLS_OBJECT).animate({opacity: 0.0}, 1);

    // Bold and color the gallery that the preview on page load belongs to
    setGallery();

    // Auto cycling
    setTimer();

    $("#vGallery").hover(function() {

        moveMeter = false;

        stopTimer();
    }, function() {

        moveMeter = true;

        setTimer();
    });

    // Let's get started, shall we?
    animateMeter();
    thumbNavigation();
    thumbClick();
    galleryClick();
    previewControlsVisible();
    previewControl();
    browseWindowOpen();
});

/********************
 * Start: Functions *
 ********************/

    // This function creates the empty multidimensional galleryArray
    function createArray(_NUMBER_OF_GALLERIES) {

        var galleryArray = new Array(_NUMBER_OF_GALLERIES + 1);

        for (var i = 0; i < _NUMBER_OF_GALLERIES + 1; i++) {

           galleryArray[i] = new Array(2);

           for (var j = 0; j < 2; j++) {

               galleryArray[i][j] = "";
           }
        }

        return galleryArray;
    }

    // This function allows you to traverse through the thumbnails inside the vGalleryThumbsRunner
    function thumbNavigation() {

        $("#vGalleryControlB").click(function(){

            if (thumbPosition + _THUMBS_PER_SLIDE <= thumbTotalCount) {

                positionIncrease();
                runnerAnimation();
            }
        });

        $("#vGalleryControlT").click(function(){

            if (thumbPosition > 1) {

                positionDecrease();
                runnerAnimation();
            }
        });
    }

    // This function will display the preview associated with the thumbnail that is clicked
    function thumbClick() {

        $(".vGalleryThumb").click(function(){

            previewIndex = $(this).index();

            if (previewIndex != $(_PREVIEW_OBJECT + ":visible").index()) {

                $(_PREVIEW_OBJECT + ":visible").hidePreview();

                $(_PREVIEW_OBJECT).each(function(){

                    if ($(this).index() == previewIndex) {

                        $(this).showPreview();
                    }
                });
            }
        });
    }

    // This function will display the first preview it finds in the vGalleryThumbsRunner
    // that corresponds with the plan type clicked on
    function galleryClick() {

        $("#vGalleryTitle").children("p").click(function() {

            currentClass = $(_PREVIEW_OBJECT + ":visible").attr("class");

            galleryClass = $(this).attr("class");

            if (galleryClass != currentClass) {

                $(_PREVIEW_OBJECT + ":visible").hidePreview();

                $(_PREVIEW_OBJECT).each(function(){

                    if (galleryClass == $(this).attr("class")) {

                        $(this).showPreview();

                        // If we got here, we found the droids we're looking for.  Let's leave...
                        exit;
                    }
                });
            }
        });
    }

    // This function will display the controls in the preview area that let
    // you move forward and back, as well as browsing the preview's site
    function previewControlsVisible() {

        $("#vGalleryColumnL").hover(function(){

            $(_CONTROLS_OBJECT).stop().animate({opacity: 0.85}, _PREVIEW_CONTROL_ANIMATION_SPEED);
        }, function(){

            $(_CONTROLS_OBJECT).stop().animate({opacity: 0.0}, _PREVIEW_CONTROL_ANIMATION_SPEED);
        });
    }

    // This function will cycle the preview left or right according to which button you click on
    function previewControl() {

        $(_CONTROLS_OBJECT + "[alt='Left']").click(lastPreview);

        $(_CONTROLS_OBJECT + "[alt='Right']").click(nextPreview);
    }

    // This function will open the site in a new window when the "Browse" area is clicked
    function browseWindowOpen() {

        $("#vGalleryPreviewControls > p").click(function(){

            window.open("http://patientacquisitionsystem.com/portfolio/" + $(_PREVIEW_OBJECT + ":visible").attr("id"), "Browse");
        });
    }

    // This function cycles through the previews when you press the left or right arrow on your keyboard
    function keyControl(e) {

        // Firefox fix
        var keyID = (typeof event !="undefined") ? window.event.keyCode : e.keyCode;

        switch(keyID) {

            // Left Arrow
            case 37:

                lastPreview();

                stopTimer();

                setTimer();

                break;

            // Right Arrow
            case 39:

                nextPreview();

                stopTimer();

                setTimer();

                break;
       }
    }

    // This function runs other functions necessary after the preview is changed.
    // The functions ran inside here are reliant on the visible preview
    function setAll() {

        setGallery();
        setGlow();
    }

    // This function will bold and color the gallery plan type according to which preview plan type is visible
    function setGallery() {

        currentClass = $(_PREVIEW_OBJECT + ":visible").attr("class");

        $("#vGalleryTitle > p").each(function(){

            // Do we have a plan?
            if (currentClass == $(this).attr("class")) {

                for (var i in galleryArray) {

                    for (var j in galleryArray) {

                        // What is the plan?
                        if ($(this).attr("class") ==  galleryArray[i][0]) {

                            $(this).attr("style", "font-weight: bold; color: " + galleryArray[i][1] + ";");
                        }
                    }
                }
            }
            // Set it back to normal
            else {

                $(this).attr("style", "font-weight: normal; color: " + galleryArray[_NUMBER_OF_GALLERIES][1] + ";");
            }
        });
    }

    // This function will move the glow around the thumb container according to which preview is visible
    function setGlow() {

        previewIndex = $(_PREVIEW_OBJECT + ":visible").index();

        $(".vGalleryThumb").each(function(){

            if (previewIndex == $(this).index()) {

                $("#vGalleryGlow").animate({top: (previewIndex * thumbDistance) - glowCorrection + "px"}, _GLOW_MOVE_ANIMATION_SPEED, forceSlide);
            }
        });
    }

    // This function cycles to the preview before the visible one, according to its index in the HTML code
    function lastPreview() {

        previewIndex = $(_PREVIEW_OBJECT + ":visible").index();

        $(_PREVIEW_OBJECT + ":visible").hidePreview();

        // Check if we can go back
        if (previewIndex > 0) {

            $(_PREVIEW_OBJECT).each(function(){

                if ($(this).index() == previewIndex - 1) {

                    $(this).showPreview();
                }
            });
        }
        // If we can't, go down to the last index
        else {

            $(_PREVIEW_OBJECT).each(function(){

                if ($(this).index() == thumbTotalCount - 1) {

                    $(this).showPreview();
                }
            });
        }
    }

    // This function cycles to the preview after the visible one, according to its index in the HTML code
    function nextPreview() {

        previewIndex = $(_PREVIEW_OBJECT + ":visible").index();

        $(_PREVIEW_OBJECT + ":visible").hidePreview();

        // Check if we can go forward
        if (previewIndex < thumbTotalCount - 1) {

            $(_PREVIEW_OBJECT).each(function(){

                if ($(this).index() == previewIndex + 1) {

                    $(this).showPreview();
                }
            });
        }
        // If we can't, go up to the first index
        else {

            $(_PREVIEW_OBJECT).each(function(){

                if ($(this).index() == 0) {

                    $(this).showPreview();
                }
            });
        }
    }

    // This function forces the vGalleryThumbsRunner to move so that the thumb corresponding to the visible preview is showing
    function forceSlide() {

        // If the glow moves below vGalleryThumbsRunner's view...
        if (Math.round($("#vGalleryGlow").css("top").replace("px", "") / thumbDistance) + 1 >= (parseInt(thumbPosition) + parseInt(_THUMBS_PER_SLIDE))) {

            positionIncrease();
            runnerAnimation();
            forceSlide();
        }

        // If the glow moves above vGalleryThumbsRunner's view...
        if ((Math.round($("#vGalleryGlow").css("top").replace("px", "") / thumbDistance) + 1) < (parseInt(thumbPosition))) {

            positionDecrease();
            runnerAnimation();
            forceSlide();
        }
    }

    // This function controls how the vGalleryThumbsRunner behaves when moving
    function runnerAnimation() {

            $("#vGalleryThumbsRunner").animate({top: -(runnerCurrentPosition * (thumbDistance * _THUMBS_PER_SLIDE)) + glowCorrection + "px"}, _RUNNER_SLIDE_ANIMATION_SPEED);
    }

    // This function increases counters
    function positionIncrease() {

            runnerCurrentPosition++;

            thumbPosition = thumbPosition + _THUMBS_PER_SLIDE;
    }

    // This function decreases counters
    function positionDecrease() {

            runnerCurrentPosition--;

            thumbPosition = thumbPosition - _THUMBS_PER_SLIDE;
    }

    function stopTimer() {

        $(".jMeter").stop().animate({"width": ["0", "linear"]}, 1);

        clearInterval(cycleTimer);
    }

    function setTimer() {

        cycleTimer = setInterval(nextPreview, _AUTO_CYCLE_DELAY);

        if (moveMeter) {

            $(".jMeter").stop().animate({"width": ["100%", "linear"]}, _AUTO_CYCLE_DELAY);
        }
    }

    function animateMeter() {

        $(".jMeter").animate({"width": ["0", "linear"]}, 1);

        if (moveMeter) {

            $(".jMeter").stop().animate({"width": ["100%", "linear"]}, _AUTO_CYCLE_DELAY);
        }
    }

    // This function controls the behavior of a preview when hiding
    $.fn.hidePreview = function() {

        this.css("z-index", "100");

        this.animate({opacity: ["toggle", "linear"]}, _PREVIEW_FADE_ANIMATION_SPEED, setAll);
    };

    // This function controls the behavior of a preview when showing
    $.fn.showPreview = function() {

        this.css("z-index", "50");

        this.show();

        animateMeter();
    };

/******************
 * End: Functions *
 ******************/