var ItemPreview = Class.create();

ItemPreview.prototype = {

    initialize: function(itemContainer, itemName, controlName, panelName, panelTextName, altName) {
    
    this.c_autoPreviewIntervalValue = 7000;
    this.c_executeIntervalValue = 20;
    this.c_ControlNext = "next";
    this.c_ControlPrev = "prev";
    
    this.error = false;
    this.itemContainer = $(itemContainer);
    
    if(this.itemContainer == null) {
        this.error = true;
        return;
    }
    
    this.itemName = itemName;
    this.controlName = controlName;
    this.panelName = panelName;
    this.panelTextName = panelTextName;    
    this.altName = altName;
    
    this.fadeItemQueue = new Queue();
    this.appearItemQueue = new Queue();
    this.zIndexQueue = 1000;
    
    this.startItemIndex = 1;
    this.nextItemIndex = 2;
    this.itemCollection = [];
    this.panelTextCollection = [];
    this.panel = new Panel(panelName, this.panelTextName);
    
    this.runAutoPreview = false;
    this.canChange = true;
    
    var index = 1;
    while ($(this.itemName + index) != null) {
   
        this.itemCollection[index] = new Item(this.itemName + index);
        
        var currentControl = $(this.controlName + index);
        var alt = $(this.altName + index);
        currentControl.onclick = this.showItem.bindAsEventListener(this);
        index++;
    }
    
    this.nextControl = $(this.controlName + this.c_ControlNext);
    this.prevControl = $(this.controlName + this.c_ControlPrev);
    this.nextControl.onclick = this.showNextItem.bindAsEventListener(this);
    this.prevControl.onclick = this.showPrevItem.bindAsEventListener(this);
    
    this.itemCount = index - 1;
    
    this.start();
    
    },
    
    start: function() {
        if(this.error == false)
        {
            Element.setStyle($(this.itemName + this.startItemIndex), {visibility: 'visible', zIndex: this.zIndexQueue});
            Element.setStyle($(this.panelTextName + this.startItemIndex), {display: 'block'});
            this.fadeItemQueue.push(this.startItemIndex);
            var intervalItem = setInterval(this.executeChangeItems.bind(this), 20);
        }
    },
    
    stop: function() {
        if(this.error == false)
            clearInterval(this.interval);
        this.stopAutoPreview;
    },
    
    showItem: function(event) {
        
        var itemId = Event.element(event).id;
        this.nextItemIndex = parseInt(itemId.substr(this.controlName.length));
        this.changeItem(this.nextItemIndex);
    },
     
    changeItem: function(itemIndex) {
       this.canChange = false;
       
        if(this.canShowItem(itemIndex)) {
            
            if(this.runAutoPreview) {
                
                this.stopAutoPreview();
                setTimeout(this.startAutoPreview.bind(this), this.c_autoPreviewIntervalValue);
            }
            
            $(this.controlName + this.fadeItemQueue.get(0)).className = 'normalcontrol';
            this.appearItemQueue.push(itemIndex);
            $(this.controlName + itemIndex).className = 'selectcontrol';            
        }
        
        this.canChange = true;
        
    },

    showNextItem: function() {
        
       this.nextItemIndex = this.fadeItemQueue.get(0) + 1;
       this.invalidate();

       this.changeItem(this.nextItemIndex);
    },
    
    showPrevItem: function() {
        
        this.nextItemIndex = this.fadeItemQueue.get(0) - 1;
        this.invalidate();
        
        this.changeItem(this.nextItemIndex);
    },
    
    
    executeChangeItems: function() {

        if (this.canChange) {
        
            if (this.appearItemQueue.length > 0) {
            
                var appearItemIndex = this.appearItemQueue.get(0);
                var appearItem = this.itemCollection[appearItemIndex];

                if (appearItem.canAppear) {
                    this.invalidate();
                    this.panel.slideDown();

                    var fadeItemIndex = this.fadeItemQueue.pop();
                    var fadeItem = this.itemCollection[fadeItemIndex];
                    fadeItem.fade(this.zIndexQueue);
                    this.zIndexQueue--;
                    appearItem.appear(this.zIndexQueue);
                    this.panel.hideItemText(fadeItemIndex);
                    this.panel.showItemText(appearItemIndex);
                    this.panel.slideUp();
                    this.appearItemQueue.pop();
                    this.fadeItemQueue.push(appearItemIndex);
                }
            }
        }
    },   
    
    canShowItem: function(itemIndex) {
        
        if(this.fadeItemQueue.get(0) == itemIndex)
            return false;
        if(this.appearItemQueue.get(0) == itemIndex)    
            return false;
        else
            return true;
    },
    
    startAutoPreview: function() {
    
        if(this.error == false) {
            this.runAutoPreview = true;
            this.autoPreviewInterval = setInterval(this.autoPreview.bind(this), this.c_autoPreviewIntervalValue);
        }
    },
    
    stopAutoPreview: function() {
        this.runAutoPreview = false;
        clearInterval(this.autoPreviewInterval);
        this.selectedItemIndex = this.getSelectedItemIndex();
    },
    
    autoPreview: function() {
       this.canChange = false;
       this.runAutoPreview = true;
       
       this.nextItemIndex = this.fadeItemQueue.get(0) + 1;
       this.invalidate();

       this.changeItem(this.nextItemIndex);       
       
       this.runAutoPreview = false;
       this.canChange = true;
       
    },
    
    invalidate: function() {
        
        if(this.nextItemIndex > this.itemCount) {
            this.nextItemIndex = 1;
        }
        if(this.nextItemIndex < 1) {
            this.nextItemIndex = this.itemCount;
        }
        
        if((this.zIndexQueue + 2) == 0) {
            this.zIndexQueue = 100;
        }
    },
    
    getSelectedItemIndex: function() {
        
        var returnIndex = this.selectedItemIndex;
        
        while (returnIndex > this.itemCount)
            returnIndex -= this.itemCount;
        
        return parseInt(returnIndex);            
    }
    };
    
    
    var Item = Class.create();
    
    Item.prototype = {
        initialize: function(itemName) {
                    
            this.item = $(itemName);
            this.canAppear = true;
        },
        
        fade: function(queueIndex) {
            this.canAppear = false;
            Element.setStyle(this.item, {zIndex: queueIndex});
            Effect.Fade(this.item, {afterFinish: this.invalidate.bind(this), queue: 'end'});
        },
        
        appear: function(queueIndex) {

            Element.setStyle(this.item, {visibility: 'visible', zIndex: queueIndex, opacity: 1.0});
        },
        
        invalidate: function(obj) {
            
            this.canAppear = true;
            Element.setStyle(this.item, {visibility: 'hidden'});
        }
    };
    
   
   var Panel = Class.create();
   Panel.prototype = {
   
        initialize: function(panelName, panelTextName) {
            
            this.show = true;
            this.panelTextName = panelTextName;
            this.panel = $(panelName);
            this.panelTextCollection = [];
            var index = 1;
            while ($(this.panelTextName + index) != null) {
                this.panelTextCollection[index] = new PanelText(this.panelTextName + index);
                index++;
            }
        },
        
        slideUp: function() {
            Effect.SlideDown(this.panel, {duration: 0.5, scaleContent: false, queue: 'end'});
        },
        
        slideDown: function() {
            Effect.SlideUp(this.panel, {duration: 0.5, scaleContent: false, queue: 'end'});
            Element.setStyle(this.panel, {display: 'block'});
       },
       
       showItemText: function(itemIndex) {

            this.panelTextCollection[itemIndex].show();
       },  
       
       hideItemText: function(itemIndex) {
            this.panelTextCollection[itemIndex].hide();
       }
   };
   
   var PanelText = Class.create();
   PanelText.prototype = {
        initialize: function(panelTextName) {
            
            this.panelText = $(panelTextName);
        },
        
        show: function() {
            
			new Effect.Show(this.panelText, {duration: '0.1', queue: 'end'});
        },
        
        hide: function() {
            
            new Effect.Hide(this.panelText, {duration: '0.1', queue: 'end'});
        }
   };