var hybridView = new Class({
    sizeInfo: [],
    tips: [],
    Implements: [Options, Events],
    initialize: function(options) {
        this.setOptions(options);
        this.elements = this.options.elements;
        if (this.elements.length)
            this.attach();
    },
    sizetip: function(el, what) {
        // apple style sizetip


        var options = $merge({
            className: "hybridDesc",
            innerStyle: "padding: 4px;line-height: 1.4",
            innerStyle2: "padding: 4px;line-height: 1.4;padding-top: 10px",
            topOffset: 50,
            topStartOffset: 50,
            opacity: 1,
            eventEndTrigger: el,
            eventEnd: "mouseleave",
            morphOptions: {
                duration: 300,
                transition: Fx.Transitions.Sine.easeOut
            },
            style: $empty(),
            delay: 0,                    // can dispose on a timer, in seconds
            id: "tt_" + $random(100, 1000)
        }, options);

        if ($type(el.tip) != "element") {
            el.tip = new Element("div", {
                "class": options.className,
                id: options.id
            });

            el.addEvents({
                mouseleave: function() {
                    (function() {
                        if (el.over === true)
                            return false;
                        this.tipaway(el);
                    }).delay((window.ie) ? 0 : 50, this);
                }.bind(this)

            });
        }
        else {
            el.tip.setOpacity(0);
        }

        var coords = el.getCoordinates();

        options.style = $merge({
            left: coords.left + coords.width / 2
        }, options.style);

        what = what.replace("One Size", "In Stock");
        var tipBody = (what.contains("Out Of Stock") || what == "In Stock")
            ? "<div style='"+ options.innerStyle2 + "'><strong>"+what+"</strong></div>"
            : "<div style='"+ options.innerStyle + "'>Sizes in stock:<br /><strong>"+what+"</strong></div>";

        el.tip.setStyles(options.style).set("html", tipBody).inject(document.body);


        el.morph = new Fx.Styles(el.tip, options.morphOptions).start({
            opacity: [0,options.opacity],
            top: [coords.top - el.tip.getSize().size.y - options.topStartOffset, coords.top - options.topOffset]
        });

        var closeAnimation = {
            opacity: 0,
            top: coords.top - el.tip.getSize().size.y - 30
        };

        el.tip.store("data-close", Json.toString(closeAnimation));

        el.over = false;

        el.tip.removeEvents().addEvents({
            mouseenter: function() {
                el.over = true;
            },
            mouseleave: function(e) {
                el.over = false;
                if (e.target != el)
                    el.fireEvent("mouseleave");
                else
                    new Event(e).stop();
            }
        });


    },
    tipaway: function(el) {
        el.removeClass("bordered");
        if (el.tip) {
            if (!window.ie)
                el.morph.stop();

            el.tip.smartDispose();
            // delete el.tip;
            return;

            el.morph.setOptions("duration", 50);
            el.morph.start(Json.evaluate(el.tip.retrieve("data-close")));
        }
    },
    attach: function() {
        this.elements.each(function(el) {
            el.getElements("a").set("title", null);

            var skewId = el.get("data-id");

            el.addEvents({
                mouseenter: function(e) {
                    $("main").getElements("div.hybrid").removeClass("bordered");
                    // this.removeAjaxer();
                    el.addClass("bordered");
                    if (this.sizeInfo[skewId]) {
                        this.sizetip(el, this.sizeInfo[skewId]);
                    }
                    else {
                        var stockData = el.get("data-sis");
                        if (!stockData || !stockData.length)
                            stockData = "<span class='redColour'>Out Of Stock.<span>";
                        this.sizeInfo[skewId] = stockData;

                        this.sizetip(el, this.sizeInfo[skewId]);
                    }
                }.bind(this),
                mouseleave: function(e) {
                    el.removeClass("bordered");
                }.bind(this),
                click: function(e) {
                    // ajl.make(el);
                    window.location.href = el.getFirst().get("href");
                }
            });

            var iiii = new Element("div", {
                "class": "cur",
                title: "Show description"
            }).setStyles({
                width: 18,
                height: 18,
                background: "#fff",
                position: "absolute",
                zIndex: 2147483647,
                marginLeft: 174,
                marginTop: 250
            }).setOpacity(.0001).injectTop(el).addEvents({
                click: function(e) {
                    var e = new Event(e);
                    e.stopPropagation();

                    this.window(iiii, el, 170, el.getElement("div.description").innerHTML);
                }.bind(this)
            });
        }.bind(this));
    },
    addAjaxer: function(el, text) {
        var coords = el.getCoordinates();

        coords.height = 30;
        coords.top = coords.top + 130;

        this.ajaxer = new Element("div", {
            "class": "hybridAJAX"
        }).setStyles({
            top: coords.top
        }).setOpacity(.8).inject(el).addEvents({
            mouseenter: function() {
                $clear(this.cleanup);
            }.bind(this)
        }).set("html", text);
    },
    removeAjaxer: function() {
        if (this.ajaxer) {
            this.ajaxer.smartDispose();
            delete this.ajaxer;
            $clear(this.cleanup);
        }
    },
    window: function(el, p, width, text) {
        var coords = el.getCoordinates(), maincoords = p.getCoordinates();

        if ($type(p.info) == "element") {
            p.info.smartDispose();
        }

        p.info = new Element("div", {
            "class": "infoWindow"
        }).setStyles({
            width: width,
            height: "auto"
        }).set("html", text).inject($(document.body));

        var height = p.info.getSize().size.y - 6; // padding

        p.info.empty().setStyles(coords).setStyles({
            height: 0,
            top: coords.top-1
        });

        el.morph = new Fx.Styles(p.info, {
            duration: 200,
            transition: Fx.Transitions.Sine.easeOut
        }).start({
            opacity: [.5,1],
            top: [coords.top, maincoords.bottom - height - 50],
            left: [coords.left, maincoords.right-50],
            width: [coords.width, width],
            height: [0, height]
        }).chain(function() {
            p.info.set("html", text).dropShadow();
        });

        el.addEvents({
            mouseleave: function() {
                el.info = (function() {
                    p.info.smartDispose();
                }).delay(300);
            },
            mouseenter: function() {
                $clear(el.info);
            }
        });

    }
});