/* Scroller functions */

function Scroller(buttons_container, content_container) {

    /* This variable contains an alement that wraps scroller buttons */
    this.buttons_container = buttons_container;
    /* This variable contains an element that wraps scrolled content */
    this.content_container = content_container;
    /* This variable contains a band slides situated on */
    this.band = null;
    /* Those variable contain left and right buttons */
    this.button_left = null;
    this.button_right = null;
    /* This variable contains collection of other possible content divs */
    this.content = new Array();
    /* This variable contains number of currently active content div */
    this.active_content = 0;
    /* This variable contains calculated width of scroll step */
    this.step = this.content_container.getWidth()*1.2;


    this.findButtons = function() {
        var self = this;
        this.buttons_container.childElements().each(function(button) {
            if (button.hasClassName('left')) {
                self.button_left = button;
                self.button_left.observe('click', function(event){
                    self.scrollLeft(event);
                });
            } else if (button.hasClassName('right')) {
                self.button_right = button;
                self.button_right.observe('click', function(event){
                    self.scrollRight(event);
                });
            }
        });
    }

    this.findContent = function() {
        this.band = this.content_container.firstDescendant();
        this.content = this.band.childElements();
        var max_height = 0;
        this.content.each(function(slide){
            slide.setStyle({
                display:'inline'
            });
            var height = slide.getHeight();
            if (height > max_height) {
                max_height = height;
            }
        });
        this.content_container.setStyle({
            'height': max_height + 'px'
        });
        this.band.setStyle({
            'height': max_height + 'px'
        });
    }

    this.scrollLeft = function(event) {
        if (this.active_content > 0) {
            this.active_content -= 1;
            new Effect.Move(this.band, {
                x: this.step,
                transition: Effect.Transitions.sinoidal
            });
            /* Change button img src if first element active */
            if (this.active_content == 0) {
                this.buttonDeactivate(this.button_left);
            }
            /* Activate oposing button */
            this.buttonActivate(this.button_right);
        }
    }

    this.scrollRight = function(event) {
        if (this.active_content < this.content.length - 1) {
            this.active_content += 1;
            new Effect.Move(this.band, {
                x: -this.step,
                transition: Effect.Transitions.sinoidal
            });
            /* Change button img src if first element active */
            if (this.active_content == this.content.length - 1) {
                this.buttonDeactivate(this.button_right);
            }
            /* Activate oposing button */
            this.buttonActivate(this.button_left);
        }
    }

    this.buttonActivate = function(button_container) {
        button_container.firstDescendant().setAttribute('src', button_container.firstDescendant().getAttribute('src').replace('inactive.png', 'active.png'));
    }

    this.buttonDeactivate = function(button_container) {
        button_container.firstDescendant().setAttribute('src', button_container.firstDescendant().getAttribute('src').replace('active.png', 'inactive.png'));
    }


    /* Initialise */
    /* Execute buttons and content search functions */
    this.findButtons();
    this.findContent();
    if (this.content.length > 1) {
        this.buttonActivate(this.button_right);
    }
}


/* Initailise scrollers on the page */
document.observe("dom:loaded", function() {
    $$('div.scroller-container').each(function(scroller_container) {
        var id_prefix = scroller_container.getAttribute('id').replace('-scroller', '');
        var content_id = id_prefix + '-content';
        new Scroller(scroller_container, $(content_id));
    });
});



/* Banner slideshow with controls */
function SlideShow(slides, controls) {
    /* Slides container */
    this.slides = slides;
    /* Controls container */
    this.controls = controls;
    /* Active slide number container */
    this.active_slide = 0;
    /* Interval handler */
    this.interval = null;

    /* Changes active slide to new_slide. new_slide is INT */
    this.changeSlide = function(new_slide) {
        if(this.active_slide == new_slide) return false;
        this.slides[this.active_slide].fade({
            duration:0.5
        });
        this.active_slide = new_slide;
        this.slides[this.active_slide].appear({
            duration:0.5
        });
        return true;
    }

    /* Change to next */
    this.changeToNext = function() {
        var next_slide = this.active_slide + 1;
        if(next_slide == this.slides.length) next_slide = 0;
        this.changeSlide(next_slide);
    }

    /* Timed executioner */
    this.runTimer = function() {
        if(this.slides.length < 2) return false;
        this.interval = setInterval(this.changeToNext.bind(this), 5000);
        return true;
    }

    /* Map slides to controls */
    this.mapSlides = function() {
        self = this;
        this.controls.each(function(control){
            control.observe('mouseover', function(event){
                self.changeSlide(this.id.replace('slide-control-', '') - 1);
                clearInterval(self.interval);
            });
            control.observe('mouseout', function(event){
                self.runTimer();
            });
        });
    }


    /* Initialize */
    this.mapSlides();
    this.runTimer();
}

/* Initailise slideshow on the page */
document.observe("dom:loaded", function() {
    new SlideShow($$('div.slide'), $$('.slide-control'));
});