function getRandomIndex(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomArbitary(min, max) {
    return Math.random() * (max - min) + min;
}

with (GalleryItem = function(panel) {
    this.galleryPanel = panel;
}) {
    prototype.displayed = false;
//    prototype.data = null;
    prototype.refreshInterval = null;
    prototype.galleryPanel = null;
    prototype.domEl = null;

    prototype.run = function() {
        var self = this;
        this.load(this.galleryPanel.loadNextItem());
        this.refreshInterval = window.setInterval(function() {
//            alert('uuu');
            self.load(self.galleryPanel.loadNextItem());
        }, getRandomArbitary(4000, 10000));
    }

    prototype.createDomElement = function(offset) {
        this.domEl = document.createElement('div');
        this.domEl.className = 'galleryPanelItem';
        this.domEl.style.position = 'absolute';
        this.domEl.style.top = '0px';
        this.domEl.style.left = (5 + 90 * offset) + 'px';
        this.domEl.style.width = '87px';
        this.domEl.style.height = '112px';
        this.domEl.style.overflow = 'hidden';
        this.domEl.style['word-wrap'] = 'break-word';

        this.galleryPanel.domEl.appendChild(this.domEl);
    }

    prototype.load = function(data) {
        if (typeof data == 'undefined') {
//            alert('clear load');
            window.clearInterval(this.refreshInterval);
            return;
        }

        var self = this;
        if (this.displayed) {
            this.hide(function() {
                self.setData(data);
                self.show();
            });
        } else {
            self.setData(data);
            self.show();
        }
    }

    prototype.setData = function(data) {
//        this.data = data;

//        for (var i in data[0]) {
//            alert(i + ' - ' + data[0][i]);
//        }
//        alert(data.alias);
        var html = '<a href="/' + this.galleryPanel.controller + '/' + data.alias + '" target="_blank">';
        if (data.defaultImage) {
            html += '<img src="/public/usermedia/images/small/' + data.defaultImage + '" alt="' + data.name + '" title="' + data.name + '" />';
            html += '<p>' + data.name + '</p>';
        } else {
            html += data.name;
        }
        html += '</a>';
        this.domEl.innerHTML = html;
    }

    prototype.hide = function(callback) {
        if (this.domEl == null) {
            return;
        }

        var el = Ext.get(this.domEl);
        this.displayed = false;
        el.animate({
            opacity: {to: 0, from: 1}
        }, 1, typeof callback == 'function' ? callback : null, 'easeOut', 'run');
    }

    prototype.show = function(callback) {
        if (this.domEl == null) {
            return;
        }

        var el = Ext.get(this.domEl);
        this.displayed = true;
        el.animate({
            opacity: {to: 1, from: 0}
        }, 1, typeof callback == 'function' ? callback : null, 'easeOut', 'run');
    }
}

with (GalleryPanel = function(domEl, data, controller, request) {
    this.domEl = domEl;
    this.controller = controller || 'product';
    this.request = request || {'page': 'Product_Edit', 'action': 'loadGalleryProducts'};
    this.domEl.style.position = 'relative';
    this.data = [];
    this.items = [];
    this.appendData(data);
}) {
    prototype.domEl = null;
    prototype.controller = null;
    prototype.request = null;
    prototype.data = [];
    prototype.panelSize = 12;
    prototype.currentIndex = 0;
    prototype.items = [];
    prototype.newItemsRequested = false;
    prototype.noNewItems = false;

    prototype.stopped = false;

    prototype.render = function() {
        var item;

        while (this.items.length < this.panelSize) {
            item = new GalleryItem(this);
            item.createDomElement(this.items.length);
            item.run();
            this.items.push(item);
        }
    }

    prototype.appendData = function(data) {
        while (data.length > 0) {
            this.data.push(data.splice(getRandomIndex(0, data.length - 1), 1).shift());
//            i = getRandomIndex(0, data.length - 1);
//            e = data.splice(i, 1);
//            this.data.push(e[0]);
        }
    }

    prototype.requestNewItems = function() {
        if (this.newItemsRequested) {
            return;
        }
//        alert('123');
        var self = this;
        this.stopRotation();
        this.newItemsRequested = true;
        Core.request('/event/', this.request.page, this.request.action, {offset: this.data.length}, function(o, s, r) {
            if (s) {
                var response = Ext.decode(r.responseText);
                if (response.success && response.items) {
                    self.appendData(response.items);
                } else {
                    self.noNewItems = true;
                }
                self.startRotation();
                self.newItemsRequested = false;
            }
        });
    }

    prototype.loadNextItem = function() {
        if (this.stopped) {
            return;
        }

//        alert('index - ' + this.currentIndex + ' - ' + this.data.length);
        if (this.data.length < this.currentIndex + 10 && !this.noNewItems) {
            this.requestNewItems();
        }

        if (typeof this.data[this.currentIndex] != 'undefined' && this.data[this.currentIndex] != null) {
            return this.data[this.currentIndex++];
        } else if (this.noNewItems) {
            this.currentIndex = 0;
            return this.loadNextItem();
//            alert('123');
            // wait until new items are being loaded
        } else {
//            alert('normal stop');
            this.stopRotation();
        }
    }

    prototype.stopRotation = function() {
        for (var i = 0; i < this.items.length; i++) {
            if (this.items[i].refreshInterval) {
                window.clearInterval(this.items[i].refreshInterval);
            }
        }
//        alert('stop');
        this.stopped = true;
    }

    prototype.startRotation = function() {
        for (var i = 0; i < this.items.length; i++) {
            if (this.items[i].refreshInterval) {
                this.items[i].run();
            }
        }
//        alert('start');
        this.stopped = false;
    }
}