/*
            \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
            Javascript (JS) driven Image Gallery
            Ver.: 1.0.0
            Date: September 2009
            Author: Uwe Gemsjäger
            (c) digital-ecom GmbH

            Function:   This JS displays images in an animated fashion. The type of animation can be specified by application settings.
                        The JS benefits are:
                            - Easy to adapt to a different set of images
                            - ... in a new location
                            - No need of Flash for display of images in an animated fashion ...
                            - No expensive reprogramming of Flash files in case the set of images changed ...
                            - Less CPU expensive than Flash ...


           \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
        */

        /*
            ////////////////////////////////////////////////////////////////////////////////////////////////
            Specify a global variable which gets assigned to setTimeout functions - allowing to stop those functions on demand (-> clearTimeout()).
            ////////////////////////////////////////////////////////////////////////////////////////////////
        */
        var myGallery;

        /*
            ////////////////////////////////////////////////////////////////////////////////////////////////
            Core function, loaded by onload event of body.
            ////////////////////////////////////////////////////////////////////////////////////////////////
        */
        function GalleryShow()
        {
            // Specify application settings:
            var GalleryContainer = 'Gallery';   // The DIV which will contain all your images.
            var GalleryMode = 1;                // What type of animation to use: 1 = Fade images in and out; 2 = Move images from left to right, top to bottom, etc.
            var isAdjustGallerySize = true;     // Picks up 1st image, obtains its size and adjusts size of GalleryContainer to image size.
            var isByURL = true;                 // If true, iMax, sURL + sFileName have to specify the images to load. If false, field AllImages has to be filled with all file names of your images as comma separated list.
            var iMax = 7;                      // if isByURL is true, iMax has to be specified. iMax = Number of images in folder + 1 (i.e. specify 10 if the folder contains 9 images).
            var sURL = 'gallery/';  // if isByURL is true, sURL has to be specified. If false it has to be specified in case field AllImages contains at least one file name, which does not contain path information.
            var sFileName = 'image';            // if isByURL is true, the application expects image files to be build by identical filenames, specified further by contigeous numbers within the filename (i.e. Image001.jpg, Image002.jpg, etc.)
            var sFileNameExtension = 'jpg';     // if isByURL is true, the type of Image has to be specified (i.e. jpg, gif, bmp, etc.).
            var sFieldName = 'AllImages';       // The FieldName, which contains all image file names.
            var ImageChangeDelay = 10000;       // Time in msec until the next image is loaded.
            var FadeDuration = 12;              // When GalleryMode = 1, specify how fast fading is performed.
            var MoveDirection = 2;              // When GalleryMode = 2, specify 1 in order to move from right to left, 2 = left to right, 3 = top to down, 4 = down to top.
            var Distance = 0;                   // When GalleryMode = 2, specify the empty space in Pixels between Image1 and Image2. Specify 0 if no Distance is desired.

            var objGalleryContainer = document.getElementById(GalleryContainer); // Do not change ...

            // Specify array of images, create HTML code by using this array and fill images (as HTML) into DIV; get counters for all our images (first, last, etc.):
            var aPics = ImageList_Get(isByURL, iMax, sURL, sFileName, sFileNameExtension, sFieldName);
            objGalleryContainer.innerHTML = GalleryHTML_Set(aPics, isAdjustGallerySize, GalleryContainer);

            var ImageList = objGalleryContainer.getElementsByTagName('img');
            for (var j=0; j < ImageList.length; j++){
                if(j!=0){
                    ImageList[j].style.display = 'none';
                }
            }
            var ImageLast = ImageList.length -1;
            var ImageFirst = 0;
            var ImageCurrent = 0;

            // Depending on the GalleryMode specified, animate images by using scheduled functions. Those functions will call themselves again, partly.
            if (GalleryMode == 1){
                myGallery = setTimeout(fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration), ImageChangeDelay);
            }
            else{

                myGallery = setTimeout(moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance), ImageChangeDelay);
            }
        }

        /*
            ////////////////////////////////////////////////////////////////////////////////////////////////
            Supplemental functions ...
            ////////////////////////////////////////////////////////////////////////////////////////////////
        */

        /*
            Get images list as array ...
        */
        function ImageList_Get(isByURL, iMax, sURL, sFileName, sFileNameExtension, sFieldName)
        {
            if (sURL.substring(sURL.length-1, 1) != '/'){
                sURL += '/';
            }

            if (isByURL){
                return ImageList_ByPath(iMax, sURL, sFileName, sFileNameExtension);
            }
            else{
                return ImageList_ByFieldList(sURL, sFieldName);
            }
        }

        function ImageList_ByPath(iMax, sURL, sFileName, sFileNameExtension)
        {
            var aPics = new Array();
            if (isNaN(iMax) || iMax<1){
                aPics[0] = '';
            }
            else{
                for (var i=1;i<iMax;i++){
                    if (i<10){
                        aPics[i-1] = sURL + sFileName + '00' + i + '.' + sFileNameExtension;
                    }
                    else if(i<100){
                        aPics[i-1] = sURL + sFileName + '0' + i + '.' + sFileNameExtension;
                    }
                    else{
                        aPics[i-1] = sURL + sFileName + i + '.' + sFileNameExtension;
                    }
                }
            }
            return aPics;
        }

        function ImageList_ByFieldList(sURL, sFieldName)
        {
            var aPics = new Array();
            var aTMP = new Array();
            if (document.getElementById(sFieldName) == undefined || document.getElementById(sFieldName).value == ''){
                aPics[0] = '';
            }
            else{
                aTMP = document.getElementById(sFieldName).value.split(',');
                for (var i=0; i<aTMP.length; i++){
                    if (aTMP[i].indexOf('/')>-1){
                        aPics.push(aTMP[i]);
                    }
                    else{
                        aPics.push(sURL + aTMP[i]);
                    }
                }
            }
            return aPics;
        }

        /*
            Create HTML of images by using the array of images ...
        */
        function GalleryHTML_Set(aPics, isAdjustGallerySize, GalleryContainer)
        {
            var sHTML = '';
            var sFileName = '';
            for (var i=0;i<aPics.length;i++){
                sFileName = FileName(aPics[i]);
                if (isAdjustGallerySize && i==0){
                    sHTML += '<img id=\"img_01_xAe2345_Bg67\" src=\"' + aPics[i] + '\" alt=\"' + sFileName + '\" title=\"' + sFileName + '\" onload=\"GallerySize_Adjust(\'img_01_xAe2345_Bg67\', \'' + GalleryContainer +'\')\" style=\"border:0px;position:absolute;left:0px;top:0px\" />';
                }
                else{
                    sHTML += '<img src=\"' + aPics[i] + '\" alt=\"' + sFileName + '\" title=\"' + sFileName + '\" style=\"border:0px;position:absolute;left:0px;top:0px\" />';
                }
            }
            return sHTML;
        }

        function FileName(sURL)
        {
            var p = sURL.lastIndexOf('/');
            if (p>-1){
                return sURL.substring(p+1, sURL.length);
            }
            else{
                return sURL;
            }
        }

        /*
            If to adjust size of Gallery, adjust its size by size of first image ...
        */
        function GallerySize_Adjust(Img1_ID, GalleryContainer_ID)
        {
            var ImageWidth;
            var ImageHeight;
            var Img1 = document.getElementById(Img1_ID);
            var GalleryContainer = document.getElementById(GalleryContainer_ID);

            if (Img1.clientWidth){
                ImageWidth = Img1.clientWidth;
                ImageHeight = Img1.clientHeight;
            }
            else{
                ImageWidth = Img1.innerWidth;
                ImageHeight = Img1.innerHeight;
            }
            GalleryContainer.style.width = parseFloat(ImageWidth) + 'px';
            GalleryContainer.style.height = parseFloat(ImageHeight) + 'px';
        }

        /*
            The Animation Functions ...
        */
        function fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration)
        {
            return (function()
                {
                    ImageList[ImageCurrent].style.position = "absolute";
                    ImageList[ImageCurrent].style.left = document.getElementById('Gallery').style.left;

                    Effect.Fade(ImageList[ImageCurrent],{ duration:FadeDuration, from:1.0, to:0.0 });
                    if (ImageCurrent == ImageLast){
                        ImageCurrent = ImageFirst;
                    }
                    else{
                        ImageCurrent++;
                    }

                    Effect.Appear(ImageList[ImageCurrent], { duration:FadeDuration, from:0.0, to:1.0 });
                    myGallery = setTimeout(fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration), ImageChangeDelay);
                }
            )
        }


        function moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance)
        {
            return (function()
                {
                    var ImageWidth;
                    var ImageHeight;
                    var Img1 = ImageList[ImageCurrent];
                    if (ImageCurrent >= ImageLast){
                        var Img2 = ImageList[ImageFirst];
                    }
                    else{
                        var Img2 = ImageList[ImageCurrent +1];
                    }

                    Img1.style.display = 'block';
                    Img2.style.display = 'block';

                    if (Img1.clientWidth){
                        ImageWidth = Img1.clientWidth;
                        ImageHeight = Img1.clientHeight;
                    }
                    else{
                        ImageWidth = Img1.innerWidth;
                        ImageHeight = Img1.innerHeight;
                    }

                    switch (MoveDirection){
                        case 1:
                            Img2.style.left = parseFloat(ImageWidth + Distance) + 'px';
                            break;
                        case 2:
                            Img2.style.left = parseFloat(ImageWidth*(-1) - Distance) + 'px';
                            break;
                        case 3:
                            Img2.style.top = parseFloat(ImageHeight*(-1) - Distance) + 'px';
                            break;
                        case 4:
                            Img2.style.top = parseFloat(ImageHeight + Distance) + 'px';
                            break;
                    }

                    setTimeout(moveImage(Img1, Img2, ImageWidth, ImageHeight, 1, MoveDirection, Distance),0);

                    if (ImageCurrent == ImageLast){
                        ImageCurrent = ImageFirst;
                    }
                    else{
                        ImageCurrent++;
                    }
                    myGallery = setTimeout(moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance), ImageChangeDelay);
                }
            )
        }

        function moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance)
        {
            return (function()
                {
                    Pixel += 1;
                    switch(MoveDirection){
                        case 1:
                            obj1.style.left = parseFloat(parseFloat(obj1.style.left.replace(/px/,'')) - 1) + 'px';
                            obj2.style.left = parseFloat(parseFloat(obj2.style.left.replace(/px/,'')) - 1) + 'px';
                            break;
                        case 2:
                            obj1.style.left = parseFloat(parseFloat(obj1.style.left.replace(/px/,'')) + 1) + 'px';
                            obj2.style.left = parseFloat(parseFloat(obj2.style.left.replace(/px/,'')) + 1) + 'px';
                            break;
                        case 3:
                            obj1.style.top = parseFloat(parseFloat(obj1.style.top.replace(/px/,'')) + 1) + 'px';
                            obj2.style.top = parseFloat(parseFloat(obj2.style.top.replace(/px/,'')) + 1) + 'px';
                            break;
                        case 4:
                            obj1.style.top = parseFloat(parseFloat(obj1.style.top.replace(/px/,'')) - 1) + 'px';
                            obj2.style.top = parseFloat(parseFloat(obj2.style.top.replace(/px/,'')) - 1) + 'px';
                            break;
                    }
                    if (MoveDirection<3){
                        if (Pixel < parseFloat(ImageWidth + 1 + Distance)){
                            setTimeout(moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance), 0);
                        }
                    }
                    else{
                        if (Pixel < parseFloat(ImageHeight + 1 + Distance)){
                            setTimeout(moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance), 0);
                        }
                    }
                }
            )
        }

        Event.observe(window, 'load', GalleryShow, false);