var ItemPreview = Class.create();
ItemPreview.prototype = {

    initialize: function(itemName, panelName, controlName) {
    
		this.c_autoPreviewIntervalValue = 7000;
		this.c_executeIntervalValue = 20;
	    
		this.error = false;
	    
		this.itemName = itemName;
		this.controlName = controlName;
		this.panelName = panelName;
		this.selectedControlImage = 'selectedControlImage';
		this.normalControlImage = 'normalControlImage';
	    
		this.fadeItemQueue = new Queue();
		this.appearItemQueue = new Queue();
		this.zIndexQueue = 1000;
	    
		this.startItemIndex = 1;
		this.nextItemIndex = 2;
		this.itemCollection = [];
		this.panel = new Panel(panelName);
	    
		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);
			currentControl.onclick = this.showItem.bindAsEventListener(this);
			index++;
		}
	    
		this.itemCount = index - 1;
	    
		this.start();
    },
    
    start: function() {
        if(this.error == false)
        {
            Element.setStyle($(this.itemName + this.startItemIndex), {visibility: 'visible', zIndex: this.zIndexQueue});
            this.fadeItemQueue.push(this.startItemIndex);
            var intervalItem = setInterval(this.executeChangeItems.bind(this), this.c_executeIntervalValue);
        }
    },
    
    stop: function() {
        if(this.error == false)
            clearInterval(this.intervalItem);
        this.stopAutoPreview;
    },
    
    showItem: function(event) {
//        var itemId = Event.element(event).parentNode.id;
        if (event.currentTarget != null) {
			var itemId = event.currentTarget.id;
        }
        else if (event.srcElement != null) {
			var element = event.srcElement;
			while (element.parentNode != null) {
				if (element.id.indexOf(this.controlName) >= 0) {
					var itemId = element.id;
					break;
				}
				element = element.parentNode;
			}
        }
        if (itemId != null) {
			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.appearItemQueue.push(itemIndex);
        }
        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();
                    var fadeItemIndex = this.fadeItemQueue.pop();
                    var fadeItem = this.itemCollection[fadeItemIndex];
                  
                    this.changeControlView(fadeItemIndex, appearItemIndex);
                    fadeItem.fade(this.zIndexQueue);
                    this.zIndexQueue--;
                    appearItem.appear(this.zIndexQueue);

                    this.appearItemQueue.pop();
                    this.fadeItemQueue.push(appearItemIndex);
                }
            }
        }
    },   
    
    changeControlView: function(fadeItemIndex, appearItemIndex) {
    
		new Effect.SetClassName($(this.controlName + fadeItemIndex), 'normalControl');
		new Effect.SetClassName($(this.controlName + appearItemIndex), 'selectedControl');	

		Element.setStyle($(this.selectedControlImage + fadeItemIndex),{display: 'none'});
		Element.setStyle($(this.normalControlImage + fadeItemIndex),{display: 'block'});
		Element.setStyle($(this.selectedControlImage + appearItemIndex),{display: 'block'});
		Element.setStyle($(this.normalControlImage + appearItemIndex),{display: 'none'});
    },
    
    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, {duration: 0.7, afterFinish: this.invalidate.bind(this)} );
    },
    
    appear: function(queueIndex) {

        Element.setStyle(this.item, {visibility: 'visible', zIndex: queueIndex, opacity: 1.0});
    },
    
    invalidate: function(obj) {
        
        this.canAppear = true;
    }
};


var Panel = Class.create();
Panel.prototype = {

    initialize: function(panelName) {
        
        this.show = true;
        this.panel = $(panelName);
        var index = 1;
    },
    
    slideUp: function() {
        Effect.BlindDown(this.panel, {duration: 0.5, scaleX: true, scaleY: false, scaleContent: false, queue: 'end'});
    },
    
    slideDown: function() {
        Effect.BlindUp(this.panel, {duration: 0.5, scaleX: true, scaleY: false, scaleContent: false, queue: 'end'});
        Element.setStyle(this.panel, {display: 'block'});
    }
};