/*
* @class: customSlider
* @created: Wouter Bothoff 12-01-2010
*
* @description: this class creates a slider on elements requested for, with a few adjustments in the initialize method it can run on anything!
*/
var customSlider = Class.create({
    initialize: function(auto) {
        //general settings
        this.settings = {
            pagination: {
                classActive: 'productLinkActive',
                classInactive: 'productLinkInactive'
            },
            autoSlide: true,
            slideSpeed: 4.0,
            duration: 1.0
        };

        this.items = $$('.featuredProductImage');
        
        this.paginationItems = $$('a.productLink');
        //debugger;
        this.numberItems = this.items.size();
        this.displayEl = null;
        this.hideEl = null;
        this.busy = false;
        this.currentItem = 0;

        //do first call things!
        this.reset();
    },

    reset: function() {
        //first hide all and only show last one
        this.items.each(function(item, index) {
            item.active = false;
            item.hide();
        });

        if (this.items.first()) {
            //activate and display first
            this.items.first().active = true;
            this.items.first().show();
        }

        this.paginationItems.each(function(el, index) {
            if (index == 0) {
                el.addClassName(this.settings.pagination.classActive);
            } else {
                el.addClassName(this.settings.pagination.classInactive);
            }
        } .bind(this));
    },

    slideHover: function() {
        this.paginationItems.each(function(item, index) {
            item.observe('mouseover', function(event) {
                //stop executing automaticly
                this.periodical(false);

                if (this.busy) {
                    return false;
                }

                //find current active element
                this.items.each(function(el) {
                    if (el.active) {
                        if (el.id == this.items[index].id) {
                            return false;
                        }

                        //set item to hide
                        el.active = false;
                        this.hideEl = el;
                    }
                } .bind(this));

                //activate element requested for
                this.displayEl = this.items[index];
                this.currentItem = index;

                if (!this.displayEl || !this.hideEl) {
                    return false;
                }

                //do effects on elements
                this.effect(this.hideEl, 'fade');
                this.effect(this.displayEl, 'appear');

                //this.hideEl.active = false;
                this.displayEl.active = true;

                //do pagination
                this.pagination();
            } .bind(this));

            item.observe('mouseout', function(event) {
                //resume executing automaticly!
                this.periodical(true);
            } .bind(this));
        } .bind(this));
    },

    slide: function() {
        if (this.busy) {
            return false;
        }

        //search for te currently active element
        this.items.each(function(item, index) {
            if (item.active) {
                // set item to hide
                this.hideEl = item;

                //set next item to be displayed
                if (index + 1 < this.numberItems) {
                    this.displayEl = this.items[index + 1];
                    this.currentItem = index + 1;
                } else {
                    this.displayEl = this.items[0];
                    this.currentItem = 0;
                }
            }
        } .bind(this));

        if (!this.displayEl || !this.hideEl) {
            return false;
        }

        //do effects on elements
        this.effect(this.hideEl, 'fade');
        this.effect(this.displayEl, 'appear');

        this.hideEl.active = false;
        this.displayEl.active = true;

        //do pagination
        this.pagination();
    },

    effect: function(el, effect) {
        switch (effect) {
            case 'fade':
                el.fade({
                    duration: this.settings.duration,
                    beforeStart: function() {
                        this.busy = true;
                    } .bind(this)
                });
                break;

            case 'appear':
                el.appear({
                    duration: this.settings.duration,
                    afterFinish: function() {
                        this.busy = false;
                    } .bind(this)
                });
                break;
        }
    },

    pagination: function() {
        this.paginationItems.each(function(el, index) {
            el.removeClassName(this.settings.pagination.classActive);
            el.removeClassName(this.settings.pagination.classInactive);
        } .bind(this));

        if (this.paginationItems[this.currentItem]) {
            this.paginationItems[this.currentItem].addClassName(this.settings.pagination.classActive);
        }
    },

    go: function() {
        if (this.settings.autoSlide) {
            this.periodical(true);
        }

        //start slidehover
        this.slideHover();
    },

    periodical: function(on) {
        if (on) {
            executer = new PeriodicalExecuter(function(pe) {
                this.slide();
            } .bind(this), this.settings.slideSpeed);
        } else {
            if (executer) {
                executer.stop();
            }
        }
    }
});