/*
            \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
            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 ...
            
            Ver.: 1.0.1; Feb 2010; UG: Contains GalleryStop()+GalleryReload(). 
            Ver.: 1.0.1; Feb 2010; UG: Contains ImageStartDelay which performs a faster start of fade animation on initial load.
           \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 
        */
        
        /*
            ////////////////////////////////////////////////////////////////////////////////////////////////
            Specify a global variable which gets assigned to setTimeout functions - allowing to stop those functions on demand (-> clearTimeout()).
            ////////////////////////////////////////////////////////////////////////////////////////////////
        */
        var myGallery;
        var myMove;
        if (ImageStartDelay == undefined) {
            var ImageStartDelay = 7500;
        }
        /*
            ////////////////////////////////////////////////////////////////////////////////////////////////
            Core function, loaded by onload event of body.
            ////////////////////////////////////////////////////////////////////////////////////////////////
        */ 
        function GalleryShow()
        {

            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), ImageStartDelay);
            }
            else{
                
                myGallery = setTimeout(moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance), ImageChangeDelay);
            }
        }

        function GalleryReload() {
            GalleryStop();
            GalleryShow();
        }


        function GalleryStop() {
            try {
                window.clearTimeout(myMove);
                window.clearTimeout(myGallery);
            }
            catch (ex) { }
        }
        
        /*        
            ////////////////////////////////////////////////////////////////////////////////////////////////
            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, isStart) 
        {
            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)){
                            myMove = setTimeout(moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance), 0);
                        }
                    }
                    else{
                        if (Pixel < parseFloat(ImageHeight + 1 + Distance)){
                            myMove = setTimeout(moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance), 0);
                        }
                    }                    
                }
            )
        }
        
        Event.observe(window, 'load', GalleryShow, false);