﻿window.addEvent('domready',function(){prod.setup();});

var prod = {
    currentImage: -1,
    setup: function()
    {
        prod.img = $$('#images img');
        prod.thumb = $$('#thumbnails img');
        prod.img.set('tween', { duration: '1000', transition:'sine:in'});
        prod.thumb.set('tween', { duration: '1000', transition:'sine:in'});
        prod.img.setOpacity(0);
        prod.thumb.setOpacity(0.55);
        prod.img.removeClass('hidden');
            
        var nextImage = function(){
                        if (this.currentImage >=0)
                        {
                            this.img[this.currentImage].fade(0);
                            this.thumb[this.currentImage].fade(0.55);
                        }
                        this.currentImage++;
                        if (this.currentImage >= this.img.length)
                            this.currentImage=0;
                        
                        this.img[this.currentImage].fade(1);
                        this.thumb[this.currentImage].fade(1);
      
                   };
        if (prod.img.length > 0)
        {
        
        nextImage.apply(prod);
        if (prod.img.length > 1)
            prod.per = nextImage.periodical(8000,prod); 
        }
        
        prod.thumb.addEvent('click',function(e){
                    var id = (e.target.getProperty('rel') * 1) - 1;
                    if (prod.currentImage != id)
                    {
                       
                        $clear(prod.per);
                        if (prod.currentImage >=0)
                        {
                            prod.img[prod.currentImage].fade(0);
                            prod.thumb[prod.currentImage].fade(0.55);
                        }
                        prod.currentImage=id;
                        if (prod.currentImage >= prod.img.length)
                            prod.currentImage=0;
                        
                        prod.img[prod.currentImage].fade(1);
                        prod.thumb[prod.currentImage].fade(1);
                         prod.per = nextImage.periodical(8000,prod); 
                     }
                    });
    }
}