document.addEvent('domready', function() { Page.setup(); });

var Page = {

    SetupSlideshow: function() {

        var curSlide = -1;
        var slideDuration = 5000;
        var slidePages = $$('#galleryimages img');
        if (slidePages.length > 1) {
            slidePages.set('tween', { duration: '1000', onComplete: function(y) { if (y.get('opacity') == 0) y.addClass('hidden'); } });
            slidePages.addClass('hidden').setOpacity(0);

            var showSlide = function(i) {
                if (i != curSlide) {
                    var src = slidePages[i].get('src');
                    Asset.image(src, {
                        onLoad: function(a) {
                            if (slidePages[curSlide] != null)
                                slidePages[curSlide].fade(0);
                            curSlide = i;
                            slidePages[curSlide].setOpacity(0).removeClass('hidden').fade(1);

                        }
                    });


                }
            }
            var nextSlide = function() {
                var next = curSlide + 1;
                if (next >= slidePages.length)
                    next = 0;

                showSlide(next);
            }

            var i = 0;

            nextSlide();
            var period = nextSlide.periodical(slideDuration);

            var j = 0;
            $$('#gallerythumbs img').each(function(z) {
                var k = j;
                z.addEvent('click', function(y) {
                    $clear(period);
                    showSlide(k);

                });
                j++;
            });
        };


    },
    setup: function() {
        Page.SetupSlideshow();

        var np = $$('#gallerythumbs li').length;
        $$('#gallerythumbs ul').setStyle('width', np * 200);
        $('knob').setStyle('width', 800 / (np/4));
        var myProducts = new ScrollBar('gallerythumbs', 'bar', 'knob', {
            offset: -1,
            scroll: {
                duration: 500
                
            },
            knob: {
                duration: 500
            }
        });
    }

}

/*
---
name: Scrollbar

description: A simple Apple-style productbrowser, that extends Slider using a container.

version: 2.0.0-wip

copyright: Enrique Erne (http://mild.ch/)

license: MIT License

authors:
- Enrique Erne

requires: [Core/Class, Core/Element.Event, Core/Element.Dimensions, Core/Fx.Tween, Core/Fx.Transitions, Core/Selectors, More/Slider]

provides: ScrollBar
...
*/

var ScrollBar = new Class({

    Extends: Slider,

    options: {
        onTick: function(pos) {
            if (this.options.snap) pos = this.toPosition(this.step);
            if (this.knobFx) this.knob.tween(this.property, pos);
            else this.knob.setStyle(this.property, pos);
        },
        onChange: function(step) {
            this.scroll(step / this.ratioScroll);
        },
        /*onComplete: function(step){},*/
        initialStep: 0,
        snap: false,
        offset: 0,
        range: false,
        wheel: true,
        steps: 100,
        mode: 'horizontal',
        scroll: {
            // onStart: function(){},
            // onComplete: function(){},
            duration: 200,
            link: 'cancel',
            transition: 'linear'
        },
        knob: {
            duration: 200,
            transition: 'linear',
            link: 'cancel'
        }
    },

    initialize: function(scroller, slider, knob, options) {
        this.setOptions(options);
        this.container = document.id(scroller);
        this.scroller = this.container.getFirst();
        this.parent(slider, knob);

        this.scroller.set('tween', this.options.scroll);
        this.knob.set('tween', this.options.knob);

        this.scrollFx = this.scroller.get('tween');
        if (this.options.knob.duration || this.options.knob.transition) this.knobFx = this.knob.get('tween');

        if (this.options.wheel) this.container.addEvent('mousewheel', function(event) {
            this.element.fireEvent('mousewheel', event);
        } .bind(this));

        this.ratio = this.steps / (this.element.getSize()[this.axis] - this.knob.getSize()[this.axis]);
        this.ratioScroll = this.steps / (this.scroller.getSize()[this.axis] - this.container.getSize()[this.axis]);
    },

    scroll: function(pos) {
        this.scroller.tween(this.property, -pos);
    },

    draggedKnob: function() {
        this.parent();
        this.scrollFx.cancel();
        this.scroller.setStyle(this.property, -this.step / this.ratioScroll);
    },

    clickedElement: function(event) {
        if (this.knobFx && event.target === this.knob) this.knobFx.cancel();
        this.parent(event);
    },

    scrolledElement: function(event) {
        if (this.knobFx) this.knobFx.cancel();
        var mode = (this.options.mode == 'horizontal') ? (event.wheel < 0) : (event.wheel > 0);
        this.set(this.step + 10 * ((mode) ? -this.stepSize : this.stepSize));
        event.stop();
    },

    set: function(pos) {
        if (typeOf(pos) === 'element') pos = pos.getPosition(this.scroller)[this.axis] * this.ratioScroll;
        this.parent(pos);
    }

});