var SlidingThumbnailsRp = {
   
    baseUrl: '/',
    thumbnailsUrl: '/thumbnails-datarp.php',
    emptyThumbnailUrl: '/images/thumbnail.png',
   
    nextButtonUrl: '/images/buttons/right-arrow.png',
    nextButtonDisabledUrl: '/images/buttons/right-arrow-disabled.png',
    previousButtonUrl: '/images/buttons/left-arrow.png',
    previousButtonDisabledUrl: '/images/buttons/left-arrow-disabled.png',
   
    productId: null,
    href: null,
   
   
    containerStatus: null,
   
    //main image object retrieved by getElement function
    mainImage: null,
    mainImageSelector: 'div#productPreview img.main',
       
    slideContainer: null,
    mainImageHeight: 480,
    mainImageWidth: 480,
   
    //images loaded by AJAX
    newImageData: null,
    newImageObjects: null,
    newHrefObjects: null,
   
    //timeout for action after clicking "next" or "previous" button
    startTimeout: 0,
    currentPage: 0,
   
    thumbnailContainers: null,




    loadImages: function(quantity,offset) {
        var url = SlidingThumbnailsRp.thumbnailsUrl;
        var id = SlidingThumbnailsRp.productId;

        var jsonRequest = new Request.JSON({
       
            url: url,
            onComplete: function(response) {
               
                //console.log(response);
               
               
                var urlArray = new Array();
                var hrArr = new Array();
                response.each(function(element, index){

                    //console.log(element);
                    //alert(element.url);
                    urlArray[index] = element.url ;
                    hrArr[index]= element.href;
               

                   
                });
                 
                //console.log(urlArray);
               
                SlidingThumbnailsRp.newHrefObjects=new Elements();
               
                hrArr.each(function(values, index){
                    SlidingThumbnailsRp.newHrefObjects[index] = new Element('a', {'href':values}); });
               
               
                                           
                SlidingThumbnailsRp.newImageObjects = new Asset.images(
                    urlArray,
                    {
                        onComplete: function(){
                            SlidingThumbnailsRp.newImageObjects.each(function(element){
                   
                                element.set('class', 'active');
                   
                            });
                        }
                    }
                );
               
               
            }
       
        }).get({productid: id});
       
    },
   
    init: function () {
        SlidingThumbnailsRp.productId = $('productId').get('name') ;

        SlidingThumbnailsRp.loadImages();
       
        SlidingThumbnailsRp.thumbnailContainers = $$('div#imagePreviews1 div.thumbnails ul li ');
       
        //console.log(SlidingThumbnailsRp.productId);
        SlidingThumbnailsRp.slideContainer = document.getElement('div#imagePreviews1');
        SlidingThumbnailsRp.slideContainer.setStyles({
            bottom: '-81px'
        });
        SlidingThumbnailsRp.containerStatus = 'hidden';
       
        SlidingThumbnailsRp.mainImage = document.getElement(SlidingThumbnailsRp.mainImageSelector);
       
        //thumbnail events setup
        SlidingThumbnailsRp.setThumbnailEvents(SlidingThumbnailsRp.productId);
       
       
       
        // click next - event
        document.getElement('div#productPreviewrp div.head li.next a').addEvent('click', function(event) {
           
            SlidingThumbnailsRp.slide('next');
           
            event.preventDefault();
        });
       
        //click previous - event
        document.getElement('div#productPreviewrp div.head li.previous a').addEvent('click', function(event) {
           
            SlidingThumbnailsRp.slide('previous');
           
            event.preventDefault();
        });
       
        document.getElement('div#productPreviewrp li.viewImages a').addEvent('click', function(event) {
           
            if(SlidingThumbnailsRp.containerStatus == 'hidden') {
                SlidingThumbnailsRp.showContainer();
                SlidingThumbnailsRp.containerStatus = 'visible';
               
            } else {
                SlidingThumbnailsRp.hideContainer();
                SlidingThumbnailsRp.containerStatus = 'hidden';
            }
            event.preventDefault();
        });
       
    },
   
    slide: function(direction) {

        switch(direction) {
            case 'next':
                var currentPage = SlidingThumbnailsRp.currentPage;
                var replaceImageStartIndex = (currentPage + 1) * 4;   
                //var buttonCheckIndex =     (currentPage + 2) * 4;   
                SlidingThumbnailsRp.currentPage = SlidingThumbnailsRp.currentPage + 1;
                //console.log(buttonCheckIndex);
                break;
            case 'previous':
                var currentPage = SlidingThumbnailsRp.currentPage;
               
                var replaceImageStartIndex = (currentPage - 1) * 4;
                //var buttonCheckIndex =     (currentPage - 2) * 4;
                //console.log(buttonCheckIndex);
                SlidingThumbnailsRp.currentPage = SlidingThumbnailsRp.currentPage - 1;
                 
               
                break;
            default:
               
        }
       
       
        var duration = 200;
        var delay = 100;
        var startTimeout = SlidingThumbnailsRp.startTimeout;
        var mainStepDelay = 0;
       
       
        if( SlidingThumbnailsRp.newImageObjects[replaceImageStartIndex + 4]) {
            document.getElement('div#productPreviewrp div.head li.next a img').set('src', SlidingThumbnailsRp.nextButtonUrl);
        } else {
            document.getElement('div#productPreviewrp div.head li.next a img').set('src', SlidingThumbnailsRp.nextButtonDisabledUrl);
        }
       
        if( SlidingThumbnailsRp.newImageObjects[replaceImageStartIndex - 4] ) {
            document.getElement('div#productPreviewrp div.head li.previous a img').set('src', SlidingThumbnailsRp.previousButtonUrl);
        } else {
            document.getElement('div#productPreviewrp div.head li.previous a img').set('src', SlidingThumbnailsRp.previousButtonDisabledUrl);
        }
       
        if(SlidingThumbnailsRp.newImageObjects[replaceImageStartIndex]) {
               
            SlidingThumbnailsRp.thumbnailContainers.each( function(item, key){
               
                //current thumbnail
                SlidingThumbnailsRp.thumbnailContainers[key].set('tween',{property: 'margin-top', transition: 'linear', duration: duration });
               
               

                //1 step - slide
                var slideUpTimeout = startTimeout ;
                var slideUp = function(){
                    //SlidingThumbnailsRp.thumbnailContainers[key].get('tween').start(-81); //up
                   
                    SlidingThumbnailsRp.thumbnailContainers[key].get('tween').start(90); //down
                };
                slideUp.delay(slideUpTimeout);
                //slideUp();
               
                //replace images
                //console.log(key);
                var replaceTimeout = slideUpTimeout + duration;
                //console.log(replaceTimeout);
                var replaceImage = function() {
               

                    if(SlidingThumbnailsRp.newHrefObjects[replaceImageStartIndex + key]) {
                SlidingThumbnailsRp.newHrefObjects[replaceImageStartIndex + key].inject(SlidingThumbnailsRp.thumbnailContainers[key].getElement('div'), 'top'); }

                    if(SlidingThumbnailsRp.newImageObjects[replaceImageStartIndex + key] ) {
                                  
                    SlidingThumbnailsRp.newImageObjects[replaceImageStartIndex + key].replaces(SlidingThumbnailsRp.thumbnailContainers[key].getElement('img'));
                     
                     SlidingThumbnailsRp.thumbnailContainers[key].getElement('div').getElement('img').inject(SlidingThumbnailsRp.thumbnailContainers[key].getElement('div').getElement('a'));
                   
                    } else {
                        //console.log(SlidingThumbnailsRp.emptyThumbnailUrl);
                        new Element('img',{
                       
                            'src': SlidingThumbnailsRp.emptyThumbnailUrl,
                            'class': 'empty'
                       
                        }).replaces(SlidingThumbnailsRp.thumbnailContainers[key].getElement('img'));
					   	
					/*	SlidingThumbnailsRp.thumbnailContainers[key].getElement('div').getElement('img').
						*/
					   new Element('a',{
                       
                            'href': '#',
                            'class': 'empty'
                       
                        }).replaces(SlidingThumbnailsRp.thumbnailContainers[key].getElement('div').getElement('a'));
					   

                       
                    }
                   
                    SlidingThumbnailsRp.setThumbnailEvents();
                };
                replaceImage.delay(replaceTimeout);
                //replaceImage();
               
                //2 step - slide
                //var slideDownTimeout = slideUpTimeout + duration ;
                var slideDownTimeout = slideUpTimeout + 3 * delay + mainStepDelay + duration ;
               
                var slideDown = function(){
                    SlidingThumbnailsRp.thumbnailContainers[key].get('tween').start(0);
                };
                slideDown.delay(slideDownTimeout);
                //slideDown();
               
                startTimeout = startTimeout + delay;
               
               
               
            });
        } else {
                       
            SlidingThumbnailsRp.currentPage = currentPage;
           
        }
       
       
    },

    setThumbnailEvents: function(){
        //click image - event
        $$('div#imagePreviews1 div.thumbnails ul li img.active').addEvent('doubleclick', function(event) {

           
            var imageSrcOld = this.get('src');

           
            var imageSrc = imageSrcOld.replace(/\d+x\d+/i, SlidingThumbnailsRp.mainImageWidth + "x" + SlidingThumbnailsRp.mainImageHeight);
            var altText = this.get('alt');
           
            SlidingThumbnailsRp.mainImage.get('tween',{property: 'opacity', transition: 'cubic:out', onComplete: function(){
                           
                var newImage = new Asset.image(imageSrc, {'class': 'main', 'alt': altText, 'onload': function(){
                    this.setStyle('opacity', 0);
                    newImage.replaces(SlidingThumbnailsRp.mainImage).get('tween',{
                        property: 'opacity',
                        transition: 'cubic:in'
                    }).start(1);   
                    SlidingThumbnailsRp.mainImage = document.getElement(SlidingThumbnailsRp.mainImageSelector);
                }});
            }}).start(0);
           
        });
    },
   
    hideThumbnail: function(key) {
        SlidingThumbnailsRp.thumbnailContainers[key].set('tween',{property: 'opacity'});
    },
   
    showThumbnail: function(key) {
        SlidingThumbnailsRp.thumbnailContainers[key].set('tween',{property: 'opacity'});
    },
   
    hideContainer: function() {
        var myFx = new Fx.Tween( SlidingThumbnailsRp.slideContainer, {transition: 'bounce:out' });
        myFx.start('bottom', -81 );
       
    },
   
    showContainer: function() {
       
        var myFx = new Fx.Tween( SlidingThumbnailsRp.slideContainer, {transition: 'bounce:out' });
        myFx.start('bottom', 8 );
    }
};

window.addEvent('domready', SlidingThumbnailsRp.init);