var left = 0;
    var direction = 1;
    var interval;
    var startValue = 0, endValue, currentValue;
    var range, startRange = 2;
    
    var mode = 0;
    var oppositeShiftRange = 44;
    var shiftIncreaseFrequency = 1;
    var increaseFrequency = 1;
    var bottomFirstImage = 1;
    
    function InitializeGallery()
    {
        ShowOrHide('spnNextThumbnail', (bottomFirstImage + NumberOfThumbnails <= NumberOfImages));
        ShowOrHide('spnPreviousThumbnail', (bottomFirstImage > 1));
        
        StartRotation();
        rotationInProgress = false;
        
        PositionImages(currentMainImageIndex, 100);
    }
    
    function ScrollThumbnailRight()
    {
        if(!rotationInProgress)
        {
            endValue = startValue - 693;
            currentValue = startValue;
            range = startRange;
            bottomFirstImage = bottomFirstImage + 7;
            interval = setInterval(ScrollImageRight, 20);
            ShowOrHide('spnNextThumbnail', (bottomFirstImage + NumberOfThumbnails <= NumberOfImages));
            ShowOrHide('spnPreviousThumbnail', (bottomFirstImage > 1));
            rotationInProgress = true;
        }
    }
    function ScrollThumbnailLeft()
    {
        if(!rotationInProgress)
        {
            endValue = startValue + 693;
            currentValue = startValue;
            range = startRange;
            bottomFirstImage = bottomFirstImage - 7;
            interval = setInterval(ScrollImageLeft, 20);
            ShowOrHide('spnPreviousThumbnail', (bottomFirstImage > 1));
            ShowOrHide('spnNextThumbnail', (bottomFirstImage + NumberOfThumbnails <= NumberOfImages));
            rotationInProgress = true;
        }
    }
    function ScrollImageLeft()
    {
        document.getElementById("thumbnailLayer").style.left = currentValue + "px";
        if(mode == 0)
        {
            currentValue -= range;
            //alert(range);
            range = range + shiftIncreaseFrequency;
            if(currentValue <= startValue - oppositeShiftRange)
            {
                mode = 1;
            }
        }
        else if(mode == 1)
        {
            //alert(currentValue + "=" + range + "-" + startValue + "-" + endValue);
            currentValue += range;
            
            if(currentValue < (startValue + endValue - oppositeShiftRange) / 2)
            {
                range = range + increaseFrequency;
            }
            else
            {
                range = range - increaseFrequency;
            }
            
            if(currentValue >= endValue + oppositeShiftRange)
            {
                mode = 2;
                range = 6;
                //alert(currentValue + "=" + range + "-" + startValue + "-" + endValue);
            }
            
        }
        else
        {
            currentValue -= range;
            if(range != 1)
            {
                range = range - shiftIncreaseFrequency;
            }
            if(currentValue  == endValue)
            {
                clearInterval(interval);
                mode = 0;
                startValue = endValue;
                rotationInProgress = false;
            }
        }
    }
    
    function ScrollImageRight()
    {
        document.getElementById("thumbnailLayer").style.left = currentValue + "px";
        if(mode == 0)
        {
            currentValue += range;
            range = range + shiftIncreaseFrequency;
            if(currentValue >= startValue + oppositeShiftRange)
            {
                mode = 1;
            }
        }
        else if(mode == 1)
        {
            //alert(currentValue + "=" + range);
            currentValue -= range;
            
            if(currentValue > (startValue + endValue - oppositeShiftRange) / 2 + 40 )
            {
                range = range + increaseFrequency;
            }
            else
            {
                range = range - increaseFrequency;
            }
            
            if(currentValue <= endValue - oppositeShiftRange)
            {
                mode = 2;
                range = 7;
            }
            
        }
        else
        {
            currentValue += range;
            if(range != 1)
            {
                range = range - shiftIncreaseFrequency;
            }
            if(currentValue  == endValue)
            {
                clearInterval(interval);
                mode = 0;
                startValue = endValue;
                rotationInProgress = false;
            }
        }
    }
    
    
    
    var currentMainImageIndex = 1;
    var oppositeDShift = 10, oppositeAShift = 5;
    var dMode = 0, aMode = 0, sMode = 0, sAMode = 0;
    var currentMainImage, currentLeftImage, currentRightImage, currentNextImage;
    var currentDValue, endDValue, currentAValue, endAValue, currentAValueTop, currentSAValue, endSValue, currentSValue, currentSValueTop;
    var startDValue, startAValue, startSAValue, startSValue;
    var moveD, moveA, moveSA, moveS;
    var opacity = 0;
    var opacityChangeFrequency = 0.1;
    var dInterval = null, aInterval = null, saInterval = null, sInterval = null;
    var smallToBig, smallToBigFrequency = 1;
    var bigToSmall, bigToSmallFrequency = 1;
    function MainScrollLeft()
    {
        if(!rotationInProgress)
        {
            currentMainImage = document.getElementById("sImg" + currentMainImageIndex);
            currentLeftImage = document.getElementById("sImg" + (currentMainImageIndex - 1));
            currentRightImage = document.getElementById("sImg" + (currentMainImageIndex + 1));
            currentNextImage = document.getElementById("sImg" + (currentMainImageIndex + 2));
            currentMainImageIndex++;
            
            StartRotation();
            
            //for left disappearing image
            startDValue = currentDValue = 0;
            endDValue = -200;
            moveD = 1;
            
            //for side image appearing as main image
            startAValue = currentAValue = 378;
            endAValue = 96;
            moveA = 1;
            currentAValueTop = 35;
            
            //for side image appearing
            startSAValue = currentSAValue = 578;
            endSAValue = 378;
            moveSA = 1;
            
            
            
            //for main image going to side
            startSValue = currentSValue = 96;
            endSValue = 0;
            currentSValueTop = 0;
            moveS = 1;
            
            
            smallToBig = 132;
            bigToSmall = 317;
            smallToBigFrequency = 1;
            bigToSmallFrequency = 1;
            
            if(currentLeftImage != null)
            {
                dInterval = setInterval(MainScrollDLeftInterval, 10);
            }
            else
                DoneRotation();
            aInterval = setInterval(MainScrollALeftInterval, 10);
            if(currentNextImage != null)
            {
                saInterval = setInterval(MainScrollSALeftInterval, 10);
            }
            else
                DoneRotation();
            sInterval = setInterval(MainScrollSLeftInterval, 10);
        }
    }
    
    function MainScrollDLeftInterval()
    {
        //alert(dMode);
        currentLeftImage.style.left = currentDValue + "px";
        if(dMode == 0)
        {
            //alert(currentDValue);
            currentDValue = currentDValue + moveD;
            //moveD += 1;
            if(currentDValue > startDValue + oppositeDShift)
            {
                dMode = 1;
            }
        }
        else if(dMode == 1)
        {
            currentDValue = currentDValue - moveD;
            moveD += 1;
            //alert(currentDValue);
            if(currentDValue == -80)
            {
                dMode = 2;
                moveD++;
            }
        }
        else if(dMode == 2)
        {
            currentDValue = currentDValue - moveD;
            moveD -= 1;
            //alert(currentDValue);
            if(currentDValue == endDValue)
            {
                dMode = 3;
            }
        }
        else if(dMode == 3)
        {
            opacity = opacity - opacityChangeFrequency;
            SetImageOpacity(currentLeftImage, 0);
            dMode = 0;
            if(dInterval != null)
            {
                clearInterval(dInterval);
                DoneRotation();
                dInterval = null;
            }
            return true;
        }
        return false;
    }
    
    function MainScrollALeftInterval()
    {
        currentRightImage.style.left = currentAValue + "px";
        //currentMainImage.style.left =
        if(aMode == 0)
        {
            currentAValue = currentAValue + moveA;
            //alert(currentAValue);
            if(currentAValue > startAValue + oppositeAShift)
            {
                aMode = 1;
            }
        }
        else if(aMode == 1)
        {
            smallToBigFrequency++;
            smallToBig += smallToBigFrequency;
            currentRightImage.style.width = smallToBig + "px";
            if(smallToBig > 200)
            {
                aMode = 2;
            }
            //alert(smallToBig);
        }
        else if(aMode == 2)
        {
            smallToBigFrequency++;
            smallToBig += smallToBigFrequency;
            currentAValue = currentAValue - moveA;
            currentAValueTop -= 2;
            moveA = moveA + 10;
            currentRightImage.style.width = smallToBig + "px";
            currentRightImage.style.top = currentAValueTop + "px";
            if(smallToBig > 334)
            {
                aMode = 3;
                currentRightImage.style.zIndex = 100;
            }
        }
        else if(aMode == 3)
        {
            if(smallToBig != 317)
                smallToBig--;
            if(currentAValueTop != 0)
                currentAValueTop--;
            //alert(currentAValueTop);
            currentRightImage.style.width = smallToBig + "px";
            currentRightImage.style.top = currentAValueTop + "px";
            if(smallToBig == 317 && currentAValueTop == 0)
            {
                aMode = 4;
            }
        }
        else if(aMode == 4)
        {
            aMode = 0;
            if(aInterval != null)
            {
                clearInterval(aInterval);
                DoneRotation();
                aInterval = null;
            }
            return true;
        }
        return false;
    }
    
    function MainScrollSLeftInterval()
    {
        currentMainImage.style.left = currentSValue + "px";
        if(sMode == 0)
        {
            currentSValue = currentSValue + moveS;
            //alert(currentAValue);
            if(currentSValue > startSValue + oppositeAShift)
            {
                sMode = 1;
            }
        }
        else if(sMode == 1)
        {
            bigToSmallFrequency++;
            bigToSmall -= bigToSmallFrequency;
            currentMainImage.style.width = bigToSmall + "px";
            if(bigToSmall < 250)
            {
                sMode = 2;
            }
            //alert(smallToBig);
        }
        else if(sMode == 2)
        {
            bigToSmallFrequency++;
            bigToSmall -= bigToSmallFrequency;
            currentSValue = currentSValue - moveS;
            currentSValueTop += 4;
            moveS = moveS + 6;
            currentMainImage.style.width = bigToSmall + "px";
            currentMainImage.style.top = currentSValueTop + "px";
            //alert(bigToSmall);
            if(currentSValue < 10)
            {
                sMode = 3;
                moveS = 1;
                currentMainImage.style.zIndex = 99;                    
            }
        }
        else if(sMode == 3)
        {
            bigToSmall--;
            
            if(currentSValue != 0)
                currentSValue = currentSValue - moveS;
            if(currentSValueTop != 35)
                currentSValueTop++;
            currentMainImage.style.width = bigToSmall + "px";
            currentMainImage.style.top = currentSValueTop + "px";
            //alert(bigToSmall);
            if(bigToSmall == 132)
            {
                sMode = 4;
            }
        }
        else if(sMode == 4)
        {
            if(sInterval != null)
            {
                clearInterval(sInterval);
                DoneRotation();
                sInterval = null;
            }
            sMode = 0;
            return true;
        }
        return false;
    }
    
    function MainScrollSALeftInterval()
    {
        currentNextImage.style.left = currentSAValue + "px";
        if(sAMode == 0)
        {
            SetImageProperties(currentNextImage, currentSAValue, 100, 98, 132, 35);
            sAMode = 1;
        }
        else if(sAMode == 1)
        {
            currentSAValue = currentSAValue - moveSA;
            moveSA += 1;
            //alert(currentSAValue);
            if(currentSAValue == 487)
            {
                sAMode = 2;
            }
        }
        else if(sAMode == 2)
        {
            currentSAValue = currentSAValue - moveSA;
            if(moveSA != 1)
                moveSA -= 1;
            //alert(currentSAValue);
            if(currentSAValue == endSAValue)
            {
                sAMode = 3;
            }
        }
        else if(sAMode == 3)
        {
            sAMode = 0;
            if(saInterval != null)
            {
                clearInterval(saInterval);
                DoneRotation();
                saInterval = null;
                currentNextImage.style.zIndex = 99;
            }
            return true;
        }
        return false;
    }
    
    function MainScrollRight()
    {
        if(!rotationInProgress)
        {
        //alert("j");
            currentMainImage = document.getElementById("sImg" + currentMainImageIndex);
            currentLeftImage = document.getElementById("sImg" + (currentMainImageIndex - 1));
            currentRightImage = document.getElementById("sImg" + (currentMainImageIndex + 1));
            currentNextImage = document.getElementById("sImg" + (currentMainImageIndex - 2));
            currentMainImageIndex--;
            
            StartRotation();
            
            //for right disappearing image
            startDValue = currentDValue = 378;
            endDValue = 578;
            moveD = 1;
            
            //for side image appearing as main image
            startAValue = currentAValue = 0;
            endAValue = 96;
            moveA = 1;
            currentAValueTop = 35;
            
            //for side image appearing
            startSAValue = currentSAValue = -200;
            endSAValue = 0;
            moveSA = 1;
            
            
            
            //for main image going to side
            startSValue = currentSValue = 96;
            endSValue = 378;
            currentSValueTop = 0;
            moveS = 1;
            
            
            smallToBig = 132;
            bigToSmall = 317;
            smallToBigFrequency = 1;
            bigToSmallFrequency = 1;
            
            if(currentRightImage != null)
            {
                dInterval = setInterval(MainScrollDRightInterval, 10);
            }
            else
                DoneRotation();
                
            if(currentLeftImage != null)
            {
                aInterval = setInterval(MainScrollARightInterval, 10);
            }
            else
                DoneRotation();
                
            if(currentNextImage != null)
            {
                saInterval = setInterval(MainScrollSARightInterval, 10);
            }
            else
                DoneRotation();
                
            sInterval = setInterval(MainScrollSRightInterval, 10);
        }
    }
    
    function MainScrollDRightInterval()
    {
        //alert(dMode);
        currentRightImage.style.left = currentDValue + "px";
        if(dMode == 0)
        {
            //alert(currentDValue);
            currentDValue = currentDValue - moveD;
            //moveD += 1;
            if(currentDValue < startDValue - oppositeDShift)
            {
                dMode = 1;
            }
        }
        else if(dMode == 1)
        {
            currentDValue = currentDValue + moveD;
            moveD += 1;
            //alert(currentDValue);
            if(currentDValue == 458)
            {
                dMode = 2;
                moveD++;
            }
        }
        else if(dMode == 2)
        {
            currentDValue = currentDValue + moveD;
            moveD -= 1;
            //alert(currentDValue);
            if(currentDValue == endDValue)
            {
                dMode = 3;
            }
        }
        else if(dMode == 3)
        {
            SetImageOpacity(currentRightImage, 0);
            dMode = 0;
            if(dInterval != null)
            {
                clearInterval(dInterval);
                dInterval = null;
                DoneRotation();
            }
            return true;
        }
        return false;
    }
    
    function MainScrollARightInterval()
    {
        currentLeftImage.style.left = currentAValue + "px";
        //currentMainImage.style.left =
        if(aMode == 0)
        {
            currentAValue = currentAValue - moveA;
            //alert(currentAValue);
            if(currentAValue < startAValue - oppositeAShift)
            {
                aMode = 1;
            }
        }
        else if(aMode == 1)
        {
            smallToBigFrequency++;
            smallToBig += smallToBigFrequency;
            currentLeftImage.style.width = smallToBig + "px";
            if(smallToBig > 200)
            {
                aMode = 2;
            }
            //alert(smallToBig);
        }
        else if(aMode == 2)
        {
            smallToBigFrequency++;
            smallToBig += smallToBigFrequency;
            currentAValue = currentAValue + moveA;
            currentAValueTop -= 2;
            moveA = moveA + 3;
            currentLeftImage.style.width = smallToBig + "px";
            currentLeftImage.style.top = currentAValueTop + "px";
            if(smallToBig > 334)
            {
                aMode = 3;
                moveA = 1;
                currentLeftImage.style.zIndex = 100;
        
            }
        }
        else if(aMode == 3)
        {
            if(smallToBig != 317)
                smallToBig--;
            if(currentAValueTop != 0)
                currentAValueTop--;
            if(currentAValue != 96)
                currentAValue += moveA;
            //alert(currentAValueTop);
            currentLeftImage.style.width = smallToBig + "px";
            currentLeftImage.style.top = currentAValueTop + "px";
            if(smallToBig == 317 && currentAValueTop == 0)
            {
                aMode = 4;
            }
        }
        else if(aMode == 4)
        {
            aMode = 0;
            if(aInterval != null)
            {
                clearInterval(aInterval);
                aInterval = null;
                DoneRotation();
            }
            return true;
        }
        return false;
    }
    
    function MainScrollSRightInterval()
    {
        currentMainImage.style.left = currentSValue + "px";
        if(sMode == 0)
        {
            currentSValue = currentSValue - moveS;
            //alert(currentAValue);
            if(currentSValue < startSValue - oppositeAShift)
            {
                sMode = 1;
            }
        }
        else if(sMode == 1)
        {
            bigToSmallFrequency++;
            bigToSmall -= bigToSmallFrequency;
            currentMainImage.style.width = bigToSmall + "px";
            if(bigToSmall < 230)
            {
                sMode = 2;
            }
            //alert(smallToBig);
        }
        else if(sMode == 2)
        {
            bigToSmallFrequency--;
            bigToSmall -= bigToSmallFrequency;
            currentSValue = currentSValue + moveS;
            currentSValueTop += 4;
            moveS = moveS + 10;
            currentMainImage.style.width = bigToSmall + "px";
            currentMainImage.style.top = currentSValueTop + "px";
            //alert(bigToSmall);
            if(currentSValue > 368)
            {
                sMode = 3;
                moveS = 1;
                currentMainImage.style.zIndex = 99;
            }
        }
        else if(sMode == 3)
        {
            bigToSmall--;
            
            if(currentSValue != 378)
                currentSValue = currentSValue + moveS;
            if(currentSValueTop != 35)
                currentSValueTop++;
            currentMainImage.style.width = bigToSmall + "px";
            currentMainImage.style.top = currentSValueTop + "px";
            //alert(bigToSmall);
            if(bigToSmall == 132)
            {
                sMode = 4;
            }
        }
        else if(sMode == 4)
        {
            if(sInterval != null)
            {
                clearInterval(sInterval);
                sInterval = null;
                DoneRotation();
            }
            sMode = 0;
            return true;
        }
        return false;
    }
    
    function MainScrollSARightInterval()
    {
        currentNextImage.style.left = currentSAValue + "px";
        if(sAMode == 0)
        {
            SetImageProperties(currentNextImage, currentSAValue, 100, 99, 132, 35);    
            sAMode = 1;
        }
        else if(sAMode == 1)
        {
            currentSAValue = currentSAValue + moveSA;
            moveSA += 1;
            //alert(currentSAValue);
            if(currentSAValue == -109)
            {
                sAMode = 2;
                currentNextImage.style.zIndex = 99;
            }
        }
        else if(sAMode == 2)
        {
            currentSAValue = currentSAValue + moveSA;
            if(moveSA != 1)
                moveSA -= 1;
            //alert(currentSAValue);
            if(currentSAValue == endSAValue)
            {
                sAMode = 3;
            }
        }
        else if(sAMode == 3)
        {
            sAMode = 0;
            if(saInterval != null)
            {
                clearInterval(saInterval);
                saInterval = null;
                DoneRotation();
            }
            return true;
        }
        return false;
    }
    var allFunctionsExecuted = 0;
    var rotationInProgress = false;
    function StartRotation()
    {
        ShowOrHide('lnkPreviousMainImage', (currentMainImageIndex != 1));
        ShowOrHide('lnkNextMainImage', (currentMainImageIndex != NumberOfImages));
        document.getElementById("divCurrentImage").innerHTML = currentMainImageIndex;
        rotationInProgress = true;
        
        var spnTemplateSet = document.getElementById('spnTemplateSet');
        spnTemplateSet.innerHTML = TemplateSet[currentMainImageIndex - 1];

        var spnColorScheme = document.getElementById('spnColorScheme');
        spnColorScheme.innerHTML = ColorScheme[currentMainImageIndex - 1];
    }
    function DoneRotation()
    {
        allFunctionsExecuted++;
        if(allFunctionsExecuted == 4)
        {
            //document.getElementById("spnNextThumbnail").disabled = true;
            //document.documentElement.style.cursor = "default";
            allFunctionsExecuted = 0;
            rotationInProgress = false;
        }
    }
        
        
        
        
    var revMode = 0;
    var revFreq = 25;
    var revLeftImage, revMainImage, revRightImage, revNextLeftImage, revNextMainImage, revNextRightImage;
    var revOpacity;
    var hideShowInterval = null;
    function HideShowImage(imgNextId)
    {
        if(!rotationInProgress)
        {
            var imgId = currentMainImageIndex;
            
            revLeftImage = document.getElementById("sImg" + (imgId - 1));
            revMainImage = document.getElementById("sImg" + imgId);
            revRightImage = document.getElementById("sImg" + (imgId + 1));
            
            revNextLeftImage = document.getElementById("sImg" + (imgNextId - 1));
            revNextMainImage = document.getElementById("sImg" + imgNextId);
            revNextRightImage = document.getElementById("sImg" + (imgNextId + 1));
            
            currentMainImageIndex = imgNextId;
            
            StartRotation();
            
            revOpacity = 100;
            hideShowInterval = setInterval(HideShowImageTimer, 20);
        }
    }
    
    function HideShowImageTimer()
    {
        if(revMode == 0)
        {
            SetImageOpacity(revLeftImage, revOpacity);
            SetImageOpacity(revMainImage, revOpacity);
            SetImageOpacity(revRightImage, revOpacity);
            
            revOpacity -= revFreq;
            
            if(revOpacity <= -20)
            {
                revMode = 1;
                SetImagezIndex(revLeftImage, 90);
                SetImagezIndex(revMainImage, 90);
                SetImagezIndex(revRightImage, 90);
                PositionImages(currentMainImageIndex, 0);
            }
        }
        else if(revMode == 1)
        {
            revOpacity += revFreq;
            
            SetImageOpacity(revNextLeftImage, revOpacity);
            SetImageOpacity(revNextMainImage, revOpacity);
            SetImageOpacity(revNextRightImage, revOpacity);
        
            
            if(revOpacity == 100)
            {
                revMode = 2;
            }
        }
        else
        {
            revMode = 0;
            clearInterval(hideShowInterval);
            hideShowInterval = null;
            rotationInProgress = false;
        }
    }
    
    function SetImageOpacity(objImg, opa)
    {
        if(objImg != null)
        {
            objImg.style.opacity = opa / 100;
            objImg.style.filter = "alpha(opacity=" + opa + ")";
        }
    }
    
    function SetImagezIndex(objImg, zIndex)
    {
        if(objImg != null)
        {
            objImg.style.zIndex = zIndex;
        }
    }
    
    function SetImageProperties(objImg, left, opacity, zIndex, width, top)
    {
        if(objImg != null)
        {
            objImg.style.left = left + "px";
            objImg.style.top = top + "px";
            objImg.style.zIndex = zIndex;
            objImg.style.width = width + "px";
            SetImageOpacity(objImg, opacity);
        }
    }
    
    function PositionImages(imgId, opacity)
    {
        var imgLeftImage = document.getElementById("sImg" + (imgId - 1));
        var imgMainImage = document.getElementById("sImg" + imgId);
        var imgRightImage = document.getElementById("sImg" + (imgId + 1));
        
        SetImageProperties(imgLeftImage, 0, opacity, 99, 132, 35);
        SetImageProperties(imgMainImage, 96, opacity, 100, 317, 0);
        SetImageProperties(imgRightImage, 378, opacity, 99, 132, 35);
    }