// js by http://fragged.org/
// dependencies: mootools 1.2.1

// rest of this js should only be loaded if mootools is present and running...
var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function() {
        if (!C.debug) return false;


        if (typeof console == 'object' && typeof console.log != "undefined")
            console.log.apply(this, arguments);
        else
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";

                alert(result);
            }
    }
}; // end console wrapper.

var Sale = {
    initialize: function(etarget, options) {
        var options = $merge({
            xoffset: 190,
            yoffset: 100,
            zIndex: 10000,
            styles: {
                border: 0
            },
            esource: new Asset.image("/img/sml_saleb.png", {title: "On sale"})
        }, options);

        var coords = etarget.getCoordinates();
        var saleImage = options.esource.clone();
            saleImage.cloneEvents(options.esource).set({
                styles: {
                    position: "absolute",
                    float: "left",
                    "z-index": options.zIndex,
                    left: coords.left + coords.width - options.xoffset,
                    top: coords.top + options.yoffset
                },
                alt: JSON.encode({
                    xoffset: options.xoffset,
                    yoffset: options.yoffset
                }),
                rel: etarget.id
            })
            .addClass("wm").setStyles(options.styles).inject(etarget.getParent());
            window.addEvent("resize", Sale.move);

        (function() {
            Sale.move();
        }).delay(1000);
    },
    move: function() {
        // need to reposition on window.resize
        $$("img.wm").each(function(el) {
            // var coords = etarget.getCoordinates();
            var options = JSON.decode(el.get("alt"));
            var coords = $(el.get("rel")).getCoordinates();
            el.set({
                styles: {
                    left: coords.left + coords.width - options.xoffset,
                    top: coords.top + options.yoffset
                }
            });
        });
    }
};

var tabSe = new Class({
    options: {
        selector: "li",
        linkProperty: "rel",
        sourceElement: false,
        targetElement: false,
        mouseOverColour: "#550000",
        initialTabIndex: 0
    },
    Implements: [Options, Events],
    initialize: function(options) {
        this.setOptions(options);

        this.element = $(this.options.sourceElement);
        this.targetElement = $(this.options.targetElement);


        if (!this.element || !this.targetElement)
            return;

        this.tabs = this.element.getElements(this.options.selector).filter(function(el) {
            var linkProperty = el.get(this.options.linkProperty);
            if (linkProperty) {
                var targetEl = $(linkProperty);
                if (targetEl) {
                    el.store("linkProperty", targetEl);
                    el.store("html", targetEl.get("html"));
                    targetEl.destroy();
                    return true;
                }
            }
            return false;
        }, this);

        if (!this.tabs.length)
            return;

        this.useClassOnMouseOver = this.element.get("rel") || false;

        this.setWorld();
    },
    setWorld: function() {
        // hides redundant secondary divs
        this.tabs.each(function(tab, i) {
            tab.retrieve("linkProperty").setStyle("display", "none");
            if (!Browser.Engine.trident)
                tab.retrieve("linkProperty").setOpacity(0);

            this.attachEvents(tab);
        }, this);

        // initial
        this.showTab(this.tabs[this.options.initialTabIndex].retrieve("html"), this.tabs[this.options.initialTabIndex]);
    },
    attachEvents: function(tabEl) {
        var _this = this;
        tabEl.addEvents({
            click: function() {
                this.targetElement.set("tween", {
                    onComplete: function() {
                        this.removeEvents();
                        _this.showTab(tabEl.retrieve("html"), tabEl);
                    }
                });
                if (!Browser.Engine.trident) {
                    this.targetElement.fade("out");
                }
                else {
                    this.targetElement.setStyle("display", "none");
                    this.showTab(tabEl.retrieve("html"), tabEl);
                }
            }.bind(this),
            mouseenter: function() {
                if (_this.useClassOnMouseOver !== false) {
                    this.addClass(_this.useClassOnMouseOver);
                    return;
                }
                this.store("oldColour", this.getStyle("background-color"));
                this.set("tween", {duration:500});
                this.tween("background-color", _this.options.mouseOverColour);
            },
            mouseleave: function() {
                if (_this.useClassOnMouseOver !== false) {
                    this.removeClass(_this.useClassOnMouseOver);
                    return;
                }
                this.tween("background-color", this.retrieve("oldColour"));
            }

        });
    },
    showTab: function(html, el) {
        if (el) {
            var rel = el.get("rel");
            var first = document.getElements("div[rel="+rel+"]")[0];
            if (first) {
                html = first.get("html") + html;
                el.store("html", html);
                first.destroy();
            }
        }
        this.targetElement.empty().set("html", html);
        if (!Browser.Engine.trident)
            this.targetElement.fade(0,1);
        else
            this.targetElement.setStyle("display", "block");
        this.fireEvent("selected");
    },
    onSelected: function() {
        this.fireEvent("selected");
    }
});



var centerBox = function(width, height) {
    // returns a coordinates JSON for positioning of a box in the centre of the browser
    var winSize = window.getSize();
    var winScroll = window.getScroll();
    var windowHeight = window.getScrollHeight()-1;

    var coords = {
        y: winScroll.y + (winSize.y / 2) - (height / 2),
        x: winSize.x / 2 - width / 2,
        width: width,
        height: height
    }

    if (coords.y + height + 20 > windowHeight)
        coords.y = windowHeight - 20 - height;

    if (coords.y <= 0) {
        coords.y = 20;
    }

    return coords;
};



var allChecked = false, pdown, mc, delayTimer, bubbleOptions, tocImages = [], rules = {
    email: /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
};

// compatibility layer with 1.11
Window.implement({
	$E: function(s) {
		return this.document.getElement(s);
	}
});

var mOOdalBox = new Class({
    Implements: [Options, Events],
    author: "Dimitar Christoff",
    url: "http://fragged.org",
    options: {
        width: 400,
        height: 300,
        title: "",
        titleClass: "modalTitle",
        titleColour: "#666",
        close: true,
        modal: true,
        shadow: true,
        scroll: false,
        modalColour: "#fff",
        text: "",
        textFunction: false,
        id: "mOOdalBox",
        innerPadding: 10,
        movable: false
    },
    initialize: function(el, options) {
        this.setOptions(options);
        this.sourceElement = el;
        this.open();
    },
    open: function() {
        var coords = this.sourceElement.getCoordinates();
        this.modalBox = new Element("div", {
            id: this.options.id,
            styles: {
                position: "absolute",
                width: coords.width,
                height: coords.height, // + "px !important",
                left: coords.left,
                top: coords.top,
                position: "absolute",
                border: "1px solid #000",
                background: "#fff",
                "z-index": 10000
            }
        }).inject(document.body), this.myfx = new Fx.Morph(this.modalBox, {
            transition: Fx.Transitions.Sine.easeOut,
            duration: 300
        }), this.modalPos = centerBox(this.options.width, this.options.height);

        if (this.options.modal)
            toggleModal(this.options.modalColour).addEvents({
                click: function() {
                    this.close();
                }.bind(this)
            });

        this.modalTitleContainer = new Element("div", {
            styles: {
                height: 28,
                background: "#ebf5fd"
            }
        }).inject(this.modalBox);

        this.modalTitle = new Element("div", {
            id: "modalTitle",
            styles: {
                float: "left",
                fontWeight: "bold",
                fontSize: "14px",
                color: this.options.titleColour,
                fontFamily: "arial"
            }
        }).injectTop(this.modalTitleContainer).addClass(this.options.titleClass);

        this.modalBody = new Element("div", {
            id: "modalBody",
            styles: {
                height: this.options.height - 48,
                margin: 0,
                padding: 0,
                overflow: "hidden"
            }
        }).inject(this.modalBox);


        var _this = this;
        this.myfx.start({
            height: this.options.height,
            width: this.options.width,
            left: this.modalPos.x,
            top: this.modalPos.y
        }).chain(function() {
            this.fireEvent("onComplete");

            if (this.options.scroll) {
                this.modalBody.setStyles({
                    "overflow-y": "scroll",
                    "overflow-x": "hidden"
                });
            }



            if (this.options.shadow) {
                if (Browser.Engine.trident)
                    this.modalBox.dropShadow();
                else
                    this.modalBox.addClass("shadowy");
            }

            if (this.options.close)
                new Asset.image("/images/v2/new-close.gif", {
                    onload: function() {
                        this.injectTop(_this.modalTitleContainer).addClass("cur").setOpacity(1).set({
                            styles: {
                                float: "right",
                                position: "relative",
                                top: 1,
                                right: 1
                            },
                            title: "click to close",
                            id: "modalClose",
                            events: {
                                click: function() {
                                    this.removeEvents();
                                     _this.close();
                                }
                            }
                        });
                    }
                });

            // compensating for padding via css
            var padding = {
                left: this.modalTitle.getStyle("padding-left"),
                right: this.modalTitle.getStyle("padding-right")
            };

            var adjustedWidth = ((this.options.close) ? 100 : 0) + padding.left.toInt() + padding.right.toInt();
            this.modalTitle.set({
                html: this.options.title,
                styles: {
                    width: this.options.width - adjustedWidth,
                    cursor: (this.options.movable) ? "move" : "default"
                }
            });

            this.modalBody.set({
                styles: {padding: this.options.innerPadding, paddingTop: 5, clear: "both", color: "#000", "font-family": "arial", "font-size": "12px", "line-height": 16, "line-spacing": 0, margin: 0}
            });

            // this.setHTML(this.options.text);

            // movable.
            if (this.options.movable) {
                new Drag.Move(this.modalBox, {
                    handle: this.modalTitle,
                    onStart: function() {
                        if (this.options.shadow && Browser.Engine.trident) {
                            var rel = this.modalBox.get("data-related");
                    	    if ($(rel))
                    	        $(rel).destroy();
                        }
                    }.bind(this),
                    onComplete: function() {
                        if (this.options.shadow && Browser.Engine.trident)
                            this.modalBox.dropShadow();
                    }.bind(this)
                });
            }
        }.bind(this));
    },
    setHTML: function(html) {
        this.modalBody.set("html", html);
    },
    onComplete: function() {
        this.fireEvent("onComplete");
    },
    close: function() {
    	this.fireEvent("onClose");

        this.myfx.cancel();
        if (this.options.modal && $("modal")) {
            $("modal").smartDispose();
        }

        if ($(this.options.id))
            $(this.options.id).smartDispose();

    },
	onClose: function() {
		this.fireEvent("onClose");
	}
}); // end mOOdalBox class



Element.implement({
    smartDispose: function() {
        // dispose of an element and its dropShadow (if there is one)
        var rel = this.get("data-related");
	    if ($(rel)) {
	        $(rel).destroy();
	    }
		this.destroy();
	}, // end smartDispose
	dropShadow: function(options) {
	    // creates a shadow effect to a rectangular element
	    // define defaults
        var options = $merge({
            id: "dropShadow" + $random(100,1000),
            x: 3, // offset from parent
            y: 3,
            border: "1px solid #000",
            background: "#555",
            opacity: .5,
            zIndex: this.getStyle("z-index").toInt() - 1 // behind parent
        }, options);

        // only apply shadow on absolutely positioned elements
        if (this.getStyle("position") != "absolute")
            return this;

        var c = this.getCoordinates();

        new Element("div", {
            id: options.id,
            styles: {
                position: "absolute",
                left: c.left + options.x,
                top: c.top + options.y,
                width: c.width,
                height: c.height,
                background: options.background,
                zIndex: options.zIndex
            },
            opacity: 0
        }).injectBefore(this).fade(0, options.opacity);

        // store the shadow id into the element
        this.set("data-related", options.id);

        return this;
    }, // end dropShadow
    imageStack: function(options) {
        var options = $merge({
            targetURL: $empty(),
            transitionDelay: 2,
            images: [],
            imagesDirectory: "/imageloop/"
        }, options);

        var images = [], loadedImages = [], shown = 1, _this = this;
        this.overlaid = false;

        options.images.each(function(im) {
            images.include(options.imagesDirectory + im.src);
        });

        new Asset.images(images, {
            onProgress: function() {
                loadedImages.include(this);
            },
            onComplete: function() {
                var css = $merge({
                    position: "absolute",
                    opacity: 0
                }, _this.getCoordinates());
                loadedImages.each(function(im, i) {
                    im.set({
                        id: "imageStack" + _this.id + i,
                        "class": "imageStack" + _this.id + " cur",
                        styles: css,
                        events: {
                            mouseenter: function() {
                                _this.overlaid = true;

                                if (!options.images[i].overlay)
                                    return false;

                                var coords = _this.getCoordinates();
                                new Fx.Morph(new Element("div", {
                                    id: "overlay",
                                    styles: {
                                        background: "#555",
                                        color: "#fff",
                                        "border-top": "1px solid #500",
                                        width: coords.width,
                                        height: 0,
                                        "padding-top": 4,
                                        "font-weight": 600,
                                        "text-align": "center",
                                        position: "absolute",
                                        top: coords.bottom,
                                        left: coords.left,
                                        zIndex: 10000+10*i
                                    }
                                }).inject(document.body), {
                                    duration: 300,
                                    transition: Fx.Transitions.Sine.easeOut
                                }).start({
                                    height: [0,20],
                                    opacity: [0,.8],
                                    top: [coords.bottom, coords.bottom-24]
                                }).chain(function() {
                                    $("overlay").set("html", options.images[i].overlay);
                                });
                            },
                            mouseleave: function() {
                                _this.overlaid = false;
                                if ($("overlay"))
                                    $("overlay").destroy();
                            },
                            click: function() {
                                // console.log((!options.images[i].url) ? options.targetURL : options.images[i].url);
                                window.location.href = (!options.images[i].url) ? options.targetURL : options.images[i].url;
                            }
                        }
                    }).inject(document.body);

                    // is it done?
                    if (i+1 == loadedImages.length) {
                        window.addEvent("resize", function() {
                            $$(".imageStack"+_this.id).setStyles(_this.getCoordinates());
                        });
                        (function() {
                            $("imageStack" + _this.id + shown).fade(1);
                            (function() {
                                if (_this.overlaid)
                                    return false;

                                $("imageStack" +_this.id + shown).fade(0);

                                if (shown + 1 == options.images.length)
                                    shown = 0;
                                else
                                    shown++;

                                $("imageStack" + _this.id + shown).fade(1);
                            }).periodical(options.transitionDelay * 1000);
                        }).delay(options.transitionDelay * 1000); // delay initial one also.
                    }
                }); // each loaded
            }
        });

        return this;
    },
    ShowImage: function(url, desc, prodId) {
        if ($("imagepreview"))
            $("imagepreview").destroy();
        if ($("imagepreviewshadow"))
            $("imagepreviewshadow").destroy();

        var el = this;
        var coords = el.getCoordinates();

        var imagepreview = new Element("div", {
            id: "imagepreview",
            "class": "imagepreview",
            styles: {
                top: coords.top+coords.height+2,
                left: coords.left+100
            },
            html: "&ldquo;" + desc + " ...&rdquo; <div style='text-align: right' /><strong>more &raquo;</strong></div>"
        }).inject(document.body);

        if (!$type(tocImages[prodId]))
        tocImages[prodId] = new Asset.image(url, {onload: function() {
            this.inject(imagepreview);

            if (!Browser.Engine.trident) {
            var coords = imagepreview.getCoordinates();
            var shadow = new Element("div", {
                id: "imagepreviewshadow",
                "class": "imagepreview",
                styles: {
                    top: coords.top+4,
                    left: coords.left+4,
                    height: coords.height-6,
                    width: coords.width-6,
                    background: "#555",
                    opacity: .5
                },
                id: "imagepreviewshadow"
            }).injectBefore(imagepreview);
            }
            else {
                imagepreview.set({
                    styles: {
                        filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=95,strength=3)"
                    }
                });
            }
        }})
        else {
            tocImages[prodId].clone().inject(imagepreview);

            if (!Browser.Engine.trident) {
            var coords = imagepreview.getCoordinates();
            var shadow = new Element("div", {
                id: "imagepreviewshadow",
                "class": "imagepreview",
                styles: {
                    top: coords.top+4,
                    left: coords.left+4,
                    height: coords.height-6,
                    width: coords.width-6,
                    background: "#555",
                    opacity: .5
                },
                id: "imagepreviewshadow"
            }).injectBefore(imagepreview);
            }
            else {
                imagepreview.set({
                    styles: {
                        filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=125,strength=3)"
                    }
                });
            }
        }






        this.addEvent("mouseleave", function() {
            if ($("imagepreview"))
                $("imagepreview").destroy();
            if ($("imagepreviewshadow"))
                $("imagepreviewshadow").destroy();
            this.removeEvent("mouseleave");
        });
        return this;
    },
	cgetSize: function() {
	    // compatibility mode for mt 1.1 sizes, worse performance but handier
		return {
			'scroll': {'x': this.scrollLeft, 'y': this.scrollTop},
			'size': {'x': this.offsetWidth, 'y': this.offsetHeight},
			'scrollSize': {'x': this.scrollWidth, 'y': this.scrollHeight}
		};
	},
	Error: function() {
	    var el = this;
	    var oldStyles = this.getStyles();
        el.set("styles", {
            "background": "#ffffff",
            "border": "1px solid #333"
        }).fade(0,1).addEvent("focus", function() {
            (function() {
                el.set("styles", {
                    "background": "#ffffe5",
                    "border": "1px solid #abadb3"
                });
            }).delay(3000);
        });

        return this;
    },
    Bubble: function(message, y_offset, options) {
        // open up a  bubble popup for text

        var bubbleOptions = $merge({
            fadeFrom: 0,
            fadeUntil: .95,
            shadowFadeFrom: 0,
            shadowFadeUntil: .5
        }, options)

        $clear(delayTimer);
        if ($("myBubble")) {
            $("myBubble").destroy();
            $("myBubbles").destroy();
        }


        var coords  = this.getPosition();
        var y_real = ($type(y_offset) == "number") ? y_offset : 64;

        y_real = 77;
        var bubbles = new Element("div", {
            "styles": {
                "position": "absolute",
                "top": (coords.y-y_real+2),
                "left": coords.x+12
            },
            "id": "myBubbles",
            "opacity": bubbleOptions.shadowFadeFrom,
            "z-index": 99999

        }).inject(document.body).fade(bubbleOptions.shadowFadeFrom,bubbleOptions.shadowFadeUntil);

        var bubble = new Element("div", {
            "styles": {
                "position": "absolute",
                "top": (coords.y-y_real),
                "left": coords.x-76
            },
            "id": "myBubble",
            "opacity": bubbleOptions.fadeFrom,
            "html": message,
            "z-index": 100000,
            "events": {
                "mouseenter": function() {
                    $clear(delayTimer);
                    this.set("opacity", 1);
                },
                "mouseleave": function() {
                    this.set("opacity", bubbleOptions.fadeUntil);
                    delayTimer = (function() {
                        if (bubbleOptions.fadeFrom == bubbleOptions.fadeUntil && $("myBubble")) {
                            $("myBubble").destroy();
                            $("myBubbles").destroy();
                        }
                        else {
                            if ($("myBubble")) {
                                $("myBubble").fade(bubbleOptions.fadeFrom);
                                $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                                if ($("closeBubble"))
                                    $("closeBubble").destroy();
                            }
                        }
                    }).delay(1000);
                }
            }
        }).inject(document.body).fade(bubbleOptions.fadeUntil);


        new Element("img", {
            "src": "/img/close.gif",
            "id": "closeBubble",
            "events": {
                "mouseenter": function() {
                    this.set("opacity", 1);
                },
                "mouseleave": function() {
                    this.set("opacity", .7);
                },
                "click": function() {
                    $clear(delayTimer);
                    if (bubbleOptions.fadeFrom == bubbleOptions.fadeUntil && $("myBubble")) {
                        $("myBubble").destroy();
                        $("myBubbles").destroy();
                    }
                    else {
                        $("myBubble").fade(bubbleOptions.fadeFrom).removeEvents();
                        $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                        if ($("closeBubble"))
                           $("closeBubble").destroy();
                    }
                } // click
            },
            "styles": {
                "position": "absolute",
                "top": 6,
                "left": 160,
                "opacity": .7
            },
            "class": "cur"
        }).inject(bubble);

        delayTimer = (function() {
            if (bubbleOptions.fadeFrom == bubbleOptions.fadeUntil && $("myBubble")) {
                $("myBubble").destroy();
                $("myBubbles").destroy();
            }
            else {
                if ($("myBubble")) {
                    $("myBubble").fade(bubbleOptions.fadeFrom).removeEvents();
                    $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                    if ($("closeBubble"))
                        $("closeBubble").destroy();
                }
            }
        }).delay(5000);

        return this;
    },
    inputError: function() {
	    var el = this;
	    el.addClass("box_input_error").fade(0,1).addEvent("focus", function() {
            (function() {
                el.removeClass("box_input_error");
            }).delay(3000);
        });

        return this;
    },
    tooltip: function(message, options) {
    	// a quick 'facebook' style tooltip
    	// function version 2.2, 21/06/2009 20:04:16

    	if (!$type(message))
    	    return false;

        if ($type(this.tipbody)== "element")
            this.tipbody.destroy();

        var options = $merge({
            eventStart: "mouseenter",
            eventEnd: "mouseleave",
            topOffset: 20,
            opacity: 1
        }, options);

        var coords = this.getCoordinates();

        this.tipbody = new Element("div", {
            styles: {
                background: "transparent url(/img/point_down.gif) no-repeat center bottom",
                float: "left",
                position: "absolute",
                left: 0,
                top: -100,
                opacity: options.opacity,
                height: 20
            }
        }).adopt(new Element("div", {
            styles: {
                background: "#4c4c4c",
                color: "#ffffe5",
                padding: 0,
                "padding-top": 2,
                "line-height": 10,
                margin: 0,
                "padding-left": 9,
                "padding-right": 9,
                display: "block",
                "margin-left": "auto",
                "margin-right": "auto",
                overflow: "hidden",
                "font-size": "10px",
                "font-family": "verdana",
                float: "left",
                height: 13
            },
            html: message.replace(/ /g, "&nbsp;")
        })).inject(document.body);

        this.addEvent(options.eventEnd, function() {
            if ($type(this.tipbody) == "element") {
                this.tipbody.destroy();
                this.tipbody = null;
                this.removeEvent(options.eventEnd);
            }
        }.bind(this));

        // var tipWidth = tipbody.getCoordinates();
        var t = this.tipbody.getSize();

	    this.tipbody.setStyles({
	        left: coords.left + (coords.width / 2).round() - (t.x / 2).round(),
	        top: coords.top - options.topOffset,
	        width: t.x
        });

        return this;
    },
    slidingTip: function(what, options) {
        // apple style tooltip
        var _this = this, coords = _this.getCoordinates(), options = $merge({
            eventEnd: "mouseleave",
            eventEndTrigger: _this,     // parent element or self
            topOffset: 90,             // offset when in full view
            topStartOffset: 100,        // offset for animation start
            opacity: 1.0,                // target opacity in full view
            className: "tooltip",       // linked to css
            morphOptions: {
                duration: 300,
                transition: Fx.Transitions.Sine.easeOut
            },
            delay: 0,                    // can dispose on a timer, in seconds
            id: "tid" + $random(100, 1000)
        }, options);

        // we only need one tip instance per parent element.
        if ($type(this.tip) != "element") {
            this.tip = new Element("div", {
                "class": options.className
                // id: options.id,
            });
        }

        // if it's an existing one, with an implicit id, pick it up
        if ($(options.id))
            this.tip = $(options.id);

        // set initial options and html
        this.tip.set({
            opacity: 0,
            html: "<div style='padding:20px'>" + what + "</div>",
            styles: {
                left: coords.left + coords.width / 2
            }
        }).inject(document.body).removeEvents();

        // show it. cancel any previous animation instances for tip
        if ($type(this.morph) == "object")
           this.morph.cancel();
        else
            this.morph = new Fx.Morph(this.tip, options.morphOptions);

        // show it. really.
        this.morph.start({
            opacity: options.opacity,
            top: [coords.top - _this.tip.getSize().y - options.topStartOffset, coords.top - options.topOffset]
        }).chain(function() {
            // once done, decide how to exit
            if (options.delay == 0) {
                // based on an event.
                options.eventEndTrigger.addEvent(options.eventEnd, function() {
                    _this.morph.cancel();
                    _this.slidingTipaway();
                });
            }
            else {
                // based on a timed delay
                $clear(_this.tip.timer);
                _this.tip.timer = (function() {
                    _this.slidingTipaway();
                }).delay(options.delay);
            }
        });

        // define the tooltip close animation morph object
        var closeAnimation = {
            opacity: 0,
            top: coords.top - _this.tip.getSize().y - options.topStartOffset
        }

        // ... and save it within the parent element
        this.store("closeAnimation", closeAnimation);

        return this;
    },
    slidingTipaway: function() {
        // animate an slidingTip, opposite on in method.
        if (this.tip) {
            this.morph.start(this.retrieve("closeAnimation")).chain(function() {
                if (this.tip)
                    this.tip.destroy();
            });
        }


        return this;
    }
});

var toggleModal = function(backgroundColour, options) {
    // modal view for the whole screen
    // ver 2.02 17/10/2008 03:42:06
    // returns the $("modal") div as element.
    if ($("modal")) {
        $("modal").destroy();
        return false;
    }

    var options = $merge({
        zIndex: 1000,
        opacity: .8,
        events: $empty()
    }, options);

    if (!$type(backgroundColour) && !$("modal"))
        return false;

    return new Element("div", {
        id: "modal",
        styles: {
            position: "absolute",
            top: 0,
            left: 0,
            width: window.getScrollWidth(),
            height: window.getScrollHeight(),
            background: backgroundColour,
            "z-index": options.zIndex
        },
        opacity: options.opacity,
        events: options.events
    }).inject(document.body);
} // end toggleModal


var slidingOptions = {
    topOffset: 84,
    timer: 3,
    id: "slider"
};

window.addEvent((Browser.Engine.trident) ? "load" : "domready", function() {

        pdown = new Asset.image("/img/point_down.gif");

    var debug = new Element("div", {id: "debug"}).injectTop(document.body);


    if ($("FindShoesByColour")) {
        var colours = [
            {name: "beige", colour: "#D1CF9C"},
            {name: "white", colour: "#FFFFFF"},
            {name: "black", colour: "#000000"},
            {name: "brown", colour: "#6A3E23"},
            {name: "gold", colour: "#A9863A url(/images/buttons/gold.gif)"},
			{name: "silver", colour: "#D4D4DD url(/images/buttons/silver.gif)"},
			{name: "floral", colour: "#757575 url(/images/buttons/floral.gif)"},
            {name: "orange", colour: "#F8561D"},
            {name: "blue", colour: "#1F229A"},
            {name: "pink", colour: "#EEAFB5"},
            {name: "purple", colour: "#5F1362"},
            {name: "red", colour: "#C02727"},
            {name: "ivory",  colour: "#FFFFCC"},
            {name: "grey", colour: "#858585"},
            {name: "yellow", colour: "#F0F000"},
            {name: "green", colour: "#156213"},
            {name: "multicolour", colour: "#D4D4DD url(/images/buttons/multicolor.gif)"},
            {name: "clear", colour: "#D4D4DD url(/images/buttons/clear.gif)"}
        ];

        colours.each(function(el, i) {
            new Element("div", {
                    styles: {
                        width: "16px",
                        height: "16px",
                        float: "left",
                        border: "1px solid #ccc",
                        background: el.colour,
                        "margin-right": "3px",
                        "margin-bottom": "2px"
                    },
                    events: {
                        click: function() {
                            window.location.href = "/" + el.name + "_search";
                        },
                        "mouseenter": function() {
                            this.setStyle("border", "1px solid #4c4c4c").tooltip(this.get("alt"));

                        },
                        "mouseleave": function() {
                            this.setStyle("border", "1px solid #ccc");
                        }
                    },
                    "class": "cur",
                    alt: "Find " + el.name + " shoes"
                }
            ).inject($("FindShoesByColour"));

        });
        new Element("div", {
            styles: {
                height: "5px",
                width: "120px",
                clear: "both"
            }
        }).inject($("FindShoesByColour"));
        new Element("div", {
            styles: {
                height: "20px",
                width: "130px",
                clear: "both"
            },
            "class": "col_title_b",
            html: "<img src='/images/icons/shop_by_colour.gif' />"
        }).injectTop($("FindShoesByColour"));
    }

    if ($("scr")) {
        new Request({
            method: "get",
            url: "/brandsChecker.php",
            onComplete: function() {

                // read the brands via ajax and parse the result, this will create an array called ba
                // as soon as we have them, initialise the brand scroller
                // you can change most settings here
                mc = new ImageScrOOler(JSON.decode(this.response.text), {
                    imagePath: "/images/uploads/brand_logos/",
                    targetElement: $("scr"),
                    targetMessage: document.getElements("h1")[1],
                    clickEvent: function(obj) {
                        window.location.href = escape(obj.url);
                    },
                    defaultMessage: ' <span style="color: #666;"> Select Logo to view brand</span>',
                    showMessage: ' <span style="color: #666;"> Show me shoes from '
                });
            } // complete
        }).send();
    } // container on homepage

    var bindClicks = function(el, options) {
        el.addEvents({
            "click": function(e) {
                var e = new Event(e).stop();
                window.location.href = options.url;
            },
            "mouseenter": function() {
                this.set("title", "Back to '"+options.title+"'");
            }
        }).addClass("cur"); // end click / mover events
    }

    if ($E(".continueShopping"))
    new Request({
        method: "get",
        url: "/accountAjax/a=back",
        onComplete: function() {
            eval(this.response.text);
        }
    }).send();

    // go back
    if ($E(".goBack")) { // does button exist?
        // if yes, add click event
        var ref = document.referrer;
        if (!ref.contains("shoe-envy") || ref.length == 0) ref = "/";
        $E(".goBack").addEvents({
            "click": function(e) {
                var e = new Event(e).stop();
                window.location.href = ref;
            },
            "mouseenter": function() {
                this.set("title", (ref != "/")  ? "Back to " + ref : "Back to the Shoe-envy home page");
            },
            "mouseleave": function() {
            }
        }).addClass("cur"); // end click / mover events
    } // end CS



    // tag clouds...
    if ($("tc"))
    $("tc").addEvents({
        mouseenter: function() {
            this.setStyles({"border": "1px solid #000", "background": "#FFFFE5"});
        },
        mouseleave: function() {
            this.setStyles({"border": "1px solid #ccc", "background": "#fff"});
        }
    })

    if ($("rv"))
    $("rv").addEvents({
        mouseenter: function() {
            this.setStyles({"border": "1px solid #000", "background": "#FFFFE5"});
        },
        mouseleave: function() {
            this.setStyles({"border": "1px solid #ccc", "background": "#fff"});
        }
    })

    if ($("shoe_brand") && $("brand_desc")) {
        $E("h1").destroy();
        $("shoe_brand").setStyles({"clear": "both", "padding-top": 5});
        $("brand_desc").grab($("shoe_brand"));

        $E("div.pro_line").addEvents({
            click: function() {
                $("shoe_brand").setStyles({"display": ($("shoe_brand").getStyle("display") == "none") ? "block" : "none"});
                this.set("html", ($("shoe_brand").getStyle("display") == "none") ? "<strong> - More info &raquo;</strong>" : "<strong> - Less info &raquo;</strong>");
                Sale.move();
            }
        }).addClass("cur");
    }

    // google analytics...
    new Asset.javascript("http://www.google-analytics.com/urchin.js", {onload: function() {
            _uacct = "UA-1738213-1";
            urchinTracker();
            __utmSetTrans();
        } // load
    });

    // sort order for searches...
    var changeSort = function(newsort) {
        if (newsort == "") {
            Cookie.dispose("sortMethod");
        }
        else {
            Cookie.write("sortMethod", newsort);
        }
        window.location.href = window.location.href;
    }
    if ($("sortMethod"))
    $("sortMethod").addEvents({
        "change": function() {
            changeSort(this.get("value"));
        }
    });


    // search form - allow 3 chars or more.
    if ($("searchForm")) {
        var defaultMessage = "type here...";
        if ($("searchStr").get("value") == "") {
            $("searchStr").set("value", "type here...").addEvent("focus", function() {
                if (this.get("value") == defaultMessage)
                    this.set("value", "");
            });
        }
        $("searchForm").addEvent("submit", function(e) {
            var e = new Event(e).stop();
            if ($("searchStr").get("value").length < 3) {
                $("searchStr").Bubble("You need at <b>least</b> 3<br> letters to search...");
                return false;
            }
            if ($("searchStr").get("value") == defaultMessage) {
                $("searchStr").Bubble("Start by clicking here<br> and typing first!");
                return false;
            }
            this.submit();
        });
    }

    if ($("toc")) {
        var prodThumbs = [];
        $$("a.product").addEvent("mouseenter", function() {
            var el = this;
            var prodId = this.get("rel");
            var desc = this.get("alt");
            this.set("title", "");
            if (!$type(prodThumbs[prodId]))
                new Request({
                    url: "/accountAjax/a=getImage&id="+prodId,
                    method: "get",
                    onComplete: function() {
                        prodThumbs[prodId] = this.response.text;
                        el.ShowImage(prodThumbs[prodId], desc, prodId);
                    }
                }).send();
            else
                el.ShowImage(prodThumbs[prodId], desc, prodId);
        }).setStyle("font-weight", "600");
    }

    if ($("MainProdImage")) {
        // multiple image thumbnails transitions, 12/02/2008 00:43:37 by dimitar christoff <coda@dci.uk.net>
        var loadedImages = [];
        var coords = $("MainProdImage").getPosition(); // target image to anchor to

        var imagecounter;
        // reference all links that have rel="codabox" and attach events
        $$("a[rel=codabox]").each(function(el,i) {
            // make thumb images slightly faded for mouseover
            var image = el.getFirst();
            image.set("opacity", .8);

            // save preloaded images
            loadedImages[i] = (new Asset.image(el.get("href"))).set("styles", {border: "0px", position: "absolute", left: coords.x, top: coords.y});

            // add click and mouseover events.
            el.addEvents({
                "click": function(e) {
                    // escape the real click. if js is disabled, the image will open.
                    var e = new Event(e).stop();

                    // make a clone of the original preloaded image
                    var nImage = loadedImages[i].clone();

                    // if the image rotator exists
                    if ($("nImage")) {
                        nImage.injectBefore($("nImage"));
                        $("nImage").fade("out");

                        (function() { $("nImage").destroy(); nImage.set("id", "nImage"); }).delay(1000);
                    }
                    else {
                        // this is the first click, deal with removing MainProdImage but keeping it as an anchor point
                        // and for css purposes (clear: )
                        nImage.set("opacity", 0).injectAfter($("MainProdImage")).set("id", "nImage").fade("in");
                        $("MainProdImage").fade("out");
                        (function() { nImage.set("id", "nImage"); }).delay(1000);
                    }
                    // transition in...
                    (function() { nImage.fade(1) }).delay(1000);
                },
                "mouseenter": function() {
                    image.setStyles({"border": "1px solid #4c4c4c", opacity: 1}).tooltip("click to enlarge");
                },
                "mouseleave": function() {
                    image.setStyles({"border": "1px solid #ccc", opacity: .8});
                }
            });
            imagecounter = i;


        });

        loadedImages[imagecounter] = $("MainProdImage").clone().set("styles", {border: "0px", position: "absolute", left: coords.x, top: coords.y});
    } // MainProdImage is there

    // home page offers class="hpo" 06/05/2008 10:40:09
    $$("img.hpoc").each(function(el) {
        el.addEvents({
            mouseenter: function() {
                this.removeClass("hpoc");
                $$("img.hpoc").fade(.5);
                this.addClass("hpoc");
            },
            mouseleave: function() {
                $$("img.hpoc").fade(1);
            }
        });
    });


    $W = Sale.initialize;

    $$(".sale").each(function(el) {
        $W(el);
    });

    $$(".cosmo").each(function(el) {
        $W(el, {
            esource: new Asset.image("/img/sml_cosmo.png", {title: "As featured in Cosmopolitan"})
        });
    });

    $$(".coming").each(function(el) {
        $W(el, {
            esource: new Asset.image("/img/sml_coming.png", {title: "Coming Soon To Shoe Envy"})
        });
    });
    $$(".lowstock").each(function(el) {
        $W(el, {
            esource: new Asset.image("/img/sml_low.png", {title: "Stock is Low"})
        });
    });
    $$(".soldout").each(function(el) {
        $W(el, {
            esource: new Asset.image("/img/sml_out.png", {title: "Sold Out"})
        });
    });

    var startDelay = (!Browser.Engine.trident) ? 0 : 2000;

    (function() {
        // contain image loops here.


    	if ($("home_mont_IR_01"))
        $("home_mont_IR_01").imageStack({
            images: [
					 	  {
                    url: "/Oxygen-Boots", // override to click on image 2 to it's own page.
					src: "oxygen_boots-banner.jpg"
                },

					  {
                    url: "/Bronx_Shoes_and_Bronx_Boots", // override to click on image 2 to it's own page.
					src: "Bronx-Boots.jpg"
                },
				  {
                    url: "/Caterpillar-Womens-Boots", // override to click on image 2 to it's own page.
					src: "caterpillar-boots.jpg"
                },

                {
                    url: "/Hush_Puppies_Boots_and_Hush_Puppies_Shoes", // override to click on image 2 to it's own page.
					src: "Hush-Puppies-Boots.jpg"
                }
            ],
            imagesDirectory: "/imageloop/", // directory where image frames are
            targetURL: "/Fly_London_Boots_and_Fly_London_Shoes", // default override url for any click, unless individually defined
            transitionDelay: 4 // seconds
        });



		if ($("home_head"))
        $("home_head").imageStack({
            images: [
                {
                    url: "/Delivery_i4.html", // override to click on image 2 to it's own page.
					src: "royal_mail_xmas-a.jpg"

                },
              	  {
					url: "/Delivery_i4.html", // override to click on image 2 to it's own page.
                    src: "royal_mail_xmas-b.jpg"
                }
            ],
            imagesDirectory: "/images/xmas/", // directory where image frames are
            targetURL: "/Delivery_i4.html", // default override url for any click, unless individually defined
            transitionDelay: 6 // seconds
        });



    	if ($("head_loop"))
        $("head_loop").imageStack({
            images: [
					   {
    				url: "http://www.shoe-envy.co.uk/Caterpillar-Womens-Boots", // override to click on image 2 to it's own page.
                    src: "head_cat-10.jpg"
                },
					  {
    				url: "http://www.shoe-envy.co.uk/Hush_Puppies_Boots_and_Hush_Puppies_Shoes", // override to click on image 2 to it's own page.
                    src: "head_hush-10.jpg"
                },
                {
    				url: "http://www.shoe-envy.co.uk/Emu_Boots", // override to click on image 2 to it's own page.
                    src: "head_emu-10.jpg"
                },
    			  {
    			    url: "http://www.shoe-envy.co.uk/FitFlops", // override to click on image 2 to it's own page.
                    src: "Official_fitflop.gif"
                }
            ],
            imagesDirectory: "/imageloop/", // directory where image frames are
            targetURL: "", // default override url for any click, unless individually defined
            transitionDelay: 4// seconds
        });

	}).delay(startDelay);


    if ($("brand_desc") && $("brand_desc").getElement("ul.tabber")) {
        var mt = new tabSe({
            targetElement: $("contentswapper"),
            sourceElement: $("brand_desc").getElement("ul.tabber"),
            onSelected: function() {
                Sale.move();
            }
        });

    }
}); // domready