Event.observe(window, 'load', function() {
    slideBox.startUp();
});

var SlideBox = Class.create({
    slideCount: {},
    slideWidth: {},
    previousSlide: {},
    currentSlide: {},
    intervals: {},
    startUp: function() {
        $$('.SlideBox').each(slideBox.setup);
    },
    slide: function(elementID) {
        slideBox.intervals[elementID] = setInterval(function() { slideBox.showSlide(elementID, (slideBox.currentSlide[elementID] + 1)) }, 8000);
    },
    setup: function(item, index) {
        var newID = item.identify();

        slideBox.slideWidth[newID] = item.getWidth();

        item.select('.Slide').each(function(item, index) { slideBox.setupSlide(newID, item, index) });

        slideBox.currentSlide[newID] = 0;

        slideBox.slide(newID);
    },
    setupSlide: function(newID, item, index) {
        item.id = newID + '_' + index;
        if (index > 0) {
            item.setStyle({ "left": slideBox.slideWidth[newID] + 'px' });
            item.show();
        };
        slideBox.slideCount[newID] = (index + 1);
    },
    showSlide: function(elementID, page) {
        if (page > slideBox.slideCount[elementID] - 1) {
            page = 0;
        };

        if (slideBox.currentSlide[elementID] > -1) {
            new Effect.Move($(elementID + '_' + slideBox.currentSlide[elementID]), { "x": (0 - slideBox.slideWidth[elementID]), "y": -0, "mode": 'relative', "duration": 1.7 });
            slideBox.previousSlide[elementID] = slideBox.currentSlide[elementID];
        };

        $(elementID + '_' + page).setStyle({ "left": slideBox.slideWidth[elementID] + 'px' });
        new Effect.Move($(elementID + '_' + page), { "x": (0 - slideBox.slideWidth[elementID]), "y": 0, "mode": 'relative', "duration": 1.7 });

        slideBox.currentSlide[elementID] = page;
    }
});


var slideBox = new SlideBox();