// product highlight stacker by d.christoff of http://www.fragged.org/
var stacker = new Class({
    // this class is created specifically for Vanya's Health'n beauty salon
    // reproduction is NOT allowed under any circumstances without the
    // express written authorisation of the copygiht holders
    Implements: [Options, Events],
    Binds: ['cycle'],
    options: {
        el: false, // source element
        transition: {
            delay: 4000,
            method: "",
            speed: 400
        },
        size: {
            width: 400,
            height: 340,
            controls: 115
        },
        selector: "div.stacker"
    },
    mouseover: false,
    initialize: function(options) {
        this.setOptions(options);
        this.el = $(this.options.el);
        this.setupScene();
    },
    setupScene: function() {
        if (!this.el)
            return;

        this.stories = this.el.getElements(this.options.selector);

        if (!this.stories.length)
            return;

        this.el.setStyle("display", "none");
        // replacement container
        this.element = new Element("div", {
            styles: {
                width: this.options.size.width,
                height: this.options.size.height,
                overflow: "hidden"
            },
            events: {
                mouseenter: function() {
                    this.mouseover = true;
                    $clear(this.timer);
                }.bind(this),
                mouseleave: function() {
                    this.mouseover = false;
                    this.doCycle();
                }.bind(this)
            }
        }).injectBefore(this.el);

        this.FxScroll = new Fx.Scroll(this.element, {
            duration: 1000,
            onComplete: function() {
                this.element.fade(1);
                this.moving = false;
            }.bind(this)
        });

        this.controls = new Element("div", {
            id: "stackControls",
            "class": "clearfix",
            styles: {
                height: this.options.size.height - 10
            },
            events: {
                mouseenter: function() {
                    this.mouseover = true;
                    $clear(this.timer);
                }.bind(this),
                mouseleave: function() {
                    this.mouseover = false;
                    this.doCycle();
                }.bind(this)
            }
        }).injectBefore(this.element);

        var _this = this, first = true;
        this.moving = false;
        this.stories.each(function(el) {
            var thumb = el.getElement("div.stackerThumb").addClass("cur").addClass("clearfix");

            this.controls.adopt(thumb);

            var thumbSize = thumb.getSize();
            thumb.store("fx", new Fx.Morph(thumb, {duration: 100, link: "chain"}));
            thumb.addEvents({
                mouseenter: function() {
                    // console.info("enter " + this.getFirst().get("src"));
                    this.getFirst().fade(1);
                    this.retrieve("fx").removeEvents("complete").setOptions({
                        duration: 100,
                        onComplete: function() {
                            this.getFirst().setStyle("borderColor", "#fff");
                            _this.showTip(this);

                        }.bind(this)
                    }).start({
                        zIndex: 10,
                        marginTop: -5,
                        marginLeft: -5,
                        height: thumbSize.y + 5,
                        width: thumbSize.x + 5
                    });
                },
                mouseleave: function() {
                    // console.log(this.getFirst().get("src"));
                    if (!this.hasClass("stackClicked"))
                        this.getFirst().fade(.7);

                    this.getFirst().setStyle("borderColor", "#d2d2d2");
                    _this.clearTip(this);
                    this.retrieve("fx").removeEvents("complete").setOptions({
                        duration: 400,
                        onComplete: function() {

                        }.bind(this)
                    }).cancel().start({
                        marginTop: 0,
                        zIndex: 0,
                        marginLeft: 0,
                        height: thumbSize.y,
                        width: thumbSize.x
                    });
                },
                click: function() {
                    this.fade(1); // due to auto.
                    if (this.hasClass("stackClicked") || _this.moving)
                        return;
                    _this.moving = true;
                    _this.element.fade(.4);
                    _this.FxScroll.toElement(el);
                    $$("div.stackClicked").each(function(el) {
                        el.removeClass("stackClicked");
                        el.getFirst().setOpacity(.7);
                    });
                    this.addClass("stackClicked");
                }
            }).setStyles({
                zIndex: 0,
                margin: 0,
                marginBottom: 2
            });

            this._makeTip(thumb, thumb.get("title"));

            this.element.adopt(el.addClass("stackerContent").set({
                styles: {
                    height: this.options.size.height
                }
            }));

            if (first) {
                thumb.addClass("stackClicked");
                first = !first;
            }
            else {
                thumb.getFirst().fade(.7);
            }

        }.bind(this));

        this.doCycle();
    },
    cycle: function() {
        if (this.mouseover)
            return;

        var controls = this.controls.getChildren(), count = controls.length, done = false;

        controls.each(function(el, i) {
            if (el.hasClass("stackClicked") && !done) {
                var nextEl = (i+1 == count) ? 0 : i+1;
                controls[nextEl].fireEvent("click");
                controls[nextEl].getFirst().fade(1);
                done = !done
            }
        });
    },
    doCycle: function() {
        this.timer = this.cycle.periodical(this.options.transition.delay);
    },
    _makeTip: function(el, text) {
        var coords = el.getFirst().getCoordinates();
        if (el.retrieve("tip"))
            return;

        el.store("tip", new Element("div", {
            "class": "stackTip",
            styles: {
                marginTop: -coords.height + 5
            },
            html: text,
            opacity: 0
        }));

        el.retrieve("tip").inject(el).store("originalMargin", el.retrieve("tip").getStyle("marginTop")).set("morph", {
            duration: 1000
        });
    },
    showTip: function(el) {
        if (el.retrieve("tip")) {
            // C.log(el.retrieve("tip").retrieve("originalMargin"));
            el.retrieve("tip").morph({
                opacity: .7,
                marginTop:-26
            });
        }
    },
    clearTip: function(el) {
        if (el.retrieve("tip")) {
            el.retrieve("tip").morph({
                opacity: 0,
                marginTop: el.retrieve("tip").retrieve("originalMargin")
            });
        }
    }
}); // end stacker class

Element.implement({
    hide: function() {
        return this.store("display", this.getStyle("display")).setStyle("display", "none");
    },
    show: function() {
        return this.setStyle("display", this.retrieve("display") || "block");
    }
});

// swapping tag line
var swapTagline = function() {
    var container = $("beauticians_you_can_Trust"), msg = container.getElements("span");
    msg.getLast().hide().inject(container.getFirst(), "top");

    (function() {
        var msg = container.getElements("span");
        msg.getLast().hide().inject(container.getFirst(), "top");
        msg[0].setOpacity(0).show().fade(0,1);
    }).periodical(3000);
}; // end swapTagline


window.addEvents({
    domready: function() {
        swapTagline();
    }
});