var Carousel = {
    rotate: function(old, path, ss, start, description) {
        var req = new Requester("/platform/thumbs.pd", "GET", true, true);
        req.onsuccess = this.success_func(this, old);
        var url = "ss=" + ss + "&path=" + path + "&start=" + start + "&with_info=true&with_carousel=true";
        if (description != undefined) {
            url += "&description=" + description;
        }
        req.sendRequest(url);
    },
    success_func: function(carousel, old) {
        return function(r) {
            carousel.switch_html(old, r.responseText);
        }
    },
    switch_html: function(old, new_) {
        var div = document.createElement("div");
        div.innerHTML = new_;
        group = old.previousSibling;
        thumbs = old.nextSibling;
        old.parentNode.insertBefore(div, group);
        old.parentNode.removeChild(group);
        old.parentNode.removeChild(thumbs);
        old.parentNode.removeChild(old);
    }
};
function getMousePositionFromEvent(e) {
    var x = 0;
    var y = 0;
    if (e.pageX || e.pageY) {
        x = e.pageX;
        y = e.pageY;
    } else if (e.clientX || e.clientY) {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    return {x: x, y: y}
}

blnGecko = navigator.userAgent.toLowerCase().indexOf("gecko") > 0;

var ThumbRolloverHTML = {
    _element: null,
    _iframe: null,
    _doc: null,
    _pointers: {},
    _images: {},
    _hidden_objects: [],
    show: function() {
        this._element.style.visibility = "visible";
        this._checkObjectIntersections();
        return;
    },
    hide: function() {
        this._element.style.visibility = "hidden";
        for (var idx in this._hidden_objects) {
            var a = this._hidden_objects[idx];
            a[0].style.visibility = a[1];
        }
        this._hidden_objects = [];
        return;
    },
    create: function(doc, imghost) {
        /* we create once, and cache */
        if (this._element) { return; }
        this._doc = doc;
        this._createIFrame(doc);

        var container = this._doc.createElement("div");
        this._element = container;
        this._element.style.visibility = "hidden";
        this._element.style.display = "block";
        container.setAttribute("id", "product-rollover");
        var tpc = {orientation: "horizontal", style: {bottom: "-3px"}, pointers: {"top-left": "up", "top-right": "up"/*, middle: "up"*/}};
        var bpc = {orientation: "horizontal", style: {top: "-4px"}, pointers: {"bottom-left": "dn", "bottom-right": "dnr"/*, middle: "dn"*/}};
        var lpc = {orientation: "vertical", style: {right: "-6px"}, pointers: {"left-top": "lt", /*"center-middle": "lt",*/ "left-bottom": "ltb"}};
        var rpc = {orientation: "vertical", style: {left: "-5px"}, pointers: {"right-top": "rt", /*"center-middle": "rt",*/ "right-bottom": "rtb"}};
        container.appendChild(this._create_pointer_container(tpc, imghost));
        container.appendChild(this._create_pointer_container(lpc, imghost));
        container.appendChild(this._create_product_container(imghost));
        container.appendChild(this._create_pointer_container(rpc, imghost));
        container.appendChild(this._create_pointer_container(bpc, imghost));
        this._doc.body.appendChild(container)
    },
    setProduct: function(product_number, title, image_url, short_desc, long_desc, reporttype) {
        this._doc.getElementById("product-rollover-title").innerHTML = title;
        this._doc.getElementById("product-content-type").innerHTML = short_desc;
        this._doc.getElementById("product-type-desc").innerHTML = long_desc;
        var container = this._doc.getElementById("product-rollover-image-container");
        if (container.childNodes.length) {
            container.removeChild(container.firstChild);
        }
        // fun for emoticons - no r-asset yet
        if (typeof(image_url) == "string") {
            var image = this._images[product_number];
            if (!image) {
                image = this._doc.createElement("img");
                image.src = image_url;
                if ((image_url.indexOf(".png") > 0) && reporttype == "EU") {
                    image.style.border = "none";
                }
                image.className = "product-rollover-image";
                this._images[product_number] = image;
            }
            container.appendChild(image);
        } else {
            var el = this._doc.createElement("div");
            el.className = "emoticon-container";
            if (!this._images[product_number]) {
                this._images[product_number] = new Array();
                for (var idx in image_url) {
                    var image = this._doc.createElement("img");
                    image.src = image_url[idx];
                    this._images[product_number].push(image);
                }
            }
            for (var idx in this._images[product_number]) {
                el.appendChild(this._images[product_number][idx])
            }
            container.appendChild(el);
        }
    },
    _createStyleSheet: function(doc, url) {
        var style = doc.createElement("link");
        style.setAttribute("type", "text/css");
        style.setAttribute("rel", "stylesheet");
        style.setAttribute("href", url);
        return style;
    },
    _createIFrame: function(doc) {
        this._iframe = doc.createElement("iframe");
        this._iframe.setAttribute("allowtransparency", "true");
        //this._iframe.setAttribute("id", "product-rollover");
        this._iframe.setAttribute("name", "product-rollover");
        this._iframe.setAttribute("frameBorder", "0");
        this._iframe.setAttribute("width", "400");
        this._iframe.setAttribute("height", "500");
        this._iframe.style.position = "absolute";
        this._iframe.style.top = "0px";
        this._iframe.style.left = "0px";
        doc.body.appendChild(this._iframe);
        var doc2 = this._iframe.contentWindow.document;
        doc2.open();
        doc2.close();
        doc2.body.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
        this._iframe.style.visibility = "hidden";
        doc2.onmouseover = function() { parent.ThumbRollover._kill_timer(); }
        //doc2.onmouseover = function() { parent.ThumbRollover._keep = true; }
        //doc2.onmouseout = function() { parent.ThumbRollover._keep = false; }
    },
    _create_pointer_container: function(cfg, imghost) {
        var c = this._doc.createElement("div");
        c.className = "pointer-container pointer-container-" + cfg.orientation;
        for (var s in cfg.style) {
            c.style[s] = cfg.style[s];
        }
        for (var n in cfg.pointers) {
            var v = cfg.pointers[n];
            var pointer = this._create_pointer(v, n, imghost);
            c.appendChild(pointer);
            this._pointers[n] = pointer;
            pointer.style.display = "none";
        }
        var span = this._doc.createElement("span");
        c.appendChild(span);
        span.appendChild(this._doc.createTextNode("p"));
        span.style.visibility = "hidden";
        return c;
    },
    _create_pointer: function(orientation, classname, imghost) {
        var pointer = this._doc.createElement("img");
        pointer.className = "pointer pointer-" + classname + " pointer-" + classname.split("-")[1];
        var url = imghost + "/kiw/bubble_point" + orientation + ".png";
        pointer.setAttribute("src", url);
        return pointer;
    },
    _create_product_container: function(imghost) {

        var topborder = this._doc.createElement("img");
        topborder.setAttribute("src", imghost + "/kiw/bubble_top.png");
        var bottomborder = this._doc.createElement("img");
        bottomborder.setAttribute("src", imghost + "/kiw/bubble_bottom.png");

        /* product title */
        var title = this._doc.createElement("p");
        title.setAttribute("id", "product-rollover-title");
        title.className = "product-title";
        title.appendChild(this._doc.createTextNode(" "));
        /* the two <hr>s */
        var hr_top = this._doc.createElement("img");
        hr_top.setAttribute("src", imghost + "/kiw/bubble_hr.gif");
        var hr_bottom = this._doc.createElement("img");
        hr_bottom.setAttribute("src", imghost + "/kiw/bubble_hr.gif");
        /* the rollover image */
        var image_container = this._doc.createElement("div");
        image_container.setAttribute("id", "product-rollover-image-container");
        /* content-type details */
        var ctype = this._doc.createElement("p");
        ctype.setAttribute("id", "product-content-type");
        ctype.className = "content-type";
        ctype.appendChild(this._doc.createTextNode(" "));
        var ctype_desc = this._doc.createElement("p");
        ctype_desc.setAttribute("id", "product-type-desc");
        ctype_desc.appendChild(this._doc.createTextNode(" "));

        var pc = this._doc.createElement("div");
        pc.className = "product-container";
        pc.setAttribute("class", "product-container");
        pc.setAttribute("id", "rollover-product-container");
        pc.appendChild(title);
        pc.appendChild(hr_top);
        pc.appendChild(image_container);
        pc.appendChild(hr_bottom);
        pc.appendChild(ctype);
        pc.appendChild(ctype_desc);

        var c = this._doc.createElement("div");
        c.appendChild(topborder);
        c.appendChild(pc);
        c.appendChild(bottomborder);
        c.className = "product-rollover-center float-parent";
        c.style.overflow = "visible";
        return c;
    },
    _position: function(alpha, beta, position) {
        var pointer = null;
        for (var idx in this._pointers) {
            var p = this._pointers[idx];
            var regex = new RegExp(alpha + "-" + beta);
            if (regex.test(p.className)) {
                pointer = p;
            } else {
                p.style.display = "none";
            }
        }
        pointer.style.display = "block";
        pointer.style.position = "relative";
        window.pointer = pointer;
        if (alpha == "left" || alpha == "right") {
            if (beta == "top") {
                pointer.style.top = "15px";
            } else {
                pointer.style.top = (this._doc.getElementById("rollover-product-container").clientHeight - 35) + "px";
            }
        } else {
        }

        /* Firefox has some weird issues when moving the iframe over the page */
        if (blnGecko) this._iframe.style.display = "none";
        this._element.style.top = position.top;
        this._element.style.left = position.left;
        this._element.style.right = position.right;
        this._element.style.bottom = position.bottom;
        this._iframe.style.top = position.top;
        this._iframe.style.left = position.left;
        this._iframe.style.right = position.right;
        this._iframe.style.bottom = position.bottom;
        this._iframe.style.height = this._element.clientHeight;
        this._iframe.style.width = this._element.clientWidth;
        if (blnGecko) this._iframe.style.display = "block";
    },
    _doHideIntersection: function(el, a) {
        if (el.getAttribute("wmode") == "transparent") { return; }
        var b = getAbsObjTL(el);
        b.right = b.left + el.clientWidth;
        b.bottom = b.top + el.clientHeight;
        if (this._intersects(a, b) || this._intersects(b, a)) {
            this._hidden_objects.push([el, el.style.visibility]);
            el.style.visibility = "hidden";
        }
    },
    _checkObjectIntersections: function() {
        var names = ["object"];
        if (!(blnGecko || is_ie7)) {
            names.push("select");
        }
        var a = getAbsObjTL(this._element);
        a.right = a.left + this._element.clientWidth;
        a.bottom = a.top + this._element.clientHeight;
        for (var i in names) {
            var name = names[i];
            var elements = document.getElementsByTagName(name);
            for (var idx in elements) {
                var el = elements.item(idx);
                if (!el) { continue; }
                this._doHideIntersection(el, a);
            }
        }
    },
    _intersects: function(a, b) {
        if ((a.top > b.top && a.top < b.bottom) || (a.bottom > b.top && a.bottom < b.bottom)) {
            if ( (a.left > b.left && a.left < b.right) || (a.right > b.left && a.right < b.right) ) {
                return true;
            }
        }
        return false;
    },
    position: function(doc, element, mouse) {
        if (this._posit) {
        } else {
            this._posit = true;
            this.position2(doc, element, mouse);
            this._posit = false;
        }
    },
    position2: function(doc, element, mouse) {
        var el_position = getAbsObjTL(element);
        var left = el_position.left - doc.documentElement.scrollLeft;
        var top = el_position.top - doc.documentElement.scrollTop;
        var right = doc.documentElement.clientWidth - (left + element.clientWidth);
        var bottom = doc.documentElement.clientHeight - (top + element.clientHeight);
        var fits_left = left >= this._element.clientWidth;
        var fits_right = right >= this._element.clientWidth;
        var fits_top = top >= this._element.clientHeight;
        var fits_bottom = bottom >= this._element.clientHeight;
        /* this is for dealing with the ad */
        var needs_left = false;
        var parent = element.parentNode;
        if ((getAbsObjTL(parent).left + parent.clientWidth) < (getAbsObjTL(element).left + 320)) {
            needs_left = true;
        }
        if (needs_left) { fits_right = false; }

        var _top = "auto";
        var _bottom = "auto";
        var _left = "auto";
        var _right = "auto";

        var vertical = "";
        var horizontal = "";

        /* find the best horizontal position */
        if (fits_right) {
            horizontal = "right";
        } else if (fits_left || needs_left) {
            horizontal = "left";
        } else {
            if (fits_top || fits_bottom) {
                horizontal = "center";
            } else {
                horizontal = left > right ? "left" : "right";
            }
        }
        /* find the best vertical position */
        if (fits_top) {
            vertical = "top";
        } else if (fits_bottom) {
            vertical = "bottom";
        } else if (horizontal != "center") {
            vertical = "center";
        } else {
            vertical = top > bottom ? "top" : "bottom";
        }

        var alpha = horizontal == "left" ? "right" : "left";
        var beta = vertical == "top" ? "bottom" : "top";
        if (horizontal == "center") {
            horizontal = left > right ? "left" : "right";
            alpha = vertical == "top" ? "bottom" : "top";
            beta = horizontal == "left" ? "right" : "left";
        }
        if (vertical == "center") {
            vertical = top > bottom ? "top" : "bottom";
            alpha = horizontal == "left" ? "right" : "left";
            beta = vertical == "top" ? "bottom" : "top";
        }

        if (horizontal == "left") {
            _left = (mouse.x - this._element.clientWidth - 15) + "px";
        } else {
            _left = (mouse.x + 10) + "px";
        }
        if (vertical == "top") {
            _top = (mouse.y - 315) + "px";
        } else {
            _top = (mouse.y - 40) + "px";
        }

        this._position(alpha, beta, {top: _top, left: _left, right: _right, bottom: _bottom});
        return;
    }
};

























ThumbRollover = {
    _html: null,
    _data: {},
    _timer: null,
    _imghost: imghost,
    _event: null,
    _element: null,
    _pointer: null,
    _doc: null,
    _positioning: false,
    _pointers: {},
    _keep: false,
    _product_number: null,
    setup: function(doc, imghost) {
        ThumbRolloverHTML.create(doc, imghost);
        this._imghost = imghost;
    },
    setProduct: function(product_number) {
        if (product_number == this._product_number) {
            return;
        }
        this._product_number = product_number;
        var product = this._data[product_number];
        var title = product.title;
        var rptype = product.rptype.toUpperCase();
        // temporary fun for emoticons (no r-asset)
        var image_url;
        if (rptype != "ER" || product.ext.length == 3) {
            image_url = this._imghost + "/product/thumbs/" + product_number + "r." + product.ext;
        } else {
            image_url = new Array();
            if (typeof product.ext == "string") {
                try {
                    product.ext = eval(product.ext);
                } catch (e) { }
            }
            for (var x in product.ext) {
                // this is not safe, but at the moment, they're all gifs
                if (product_number == 3068879 || product_number == 3068880 || product_number == 3068878) {
                image_url.push(this._imghost + "/product/full/em/" + product.ext[x] + "f.png");
                } else {
                image_url.push(this._imghost + "/product/full/em/" + product.ext[x] + "f.gif");
                }
            }
        }
        var short_desc = this._data[rptype]["short"];
        var long_desc = this._data[rptype].full;
        ThumbRolloverHTML.setProduct(product_number, title, image_url, short_desc, long_desc, rptype);
     },
    _set_timer: function(prodnum, event, element) {
        if (this._timer) {
            this._kill_timer(prodnum);
        }
        this.setProduct(prodnum);
        this._event = event;
        this._mouse = getMousePositionFromEvent(event);
        this._element = element;
        this._timer = setTimeout(__tr_timer_func, 1000); 
        if (this._element) {
            var images = this._element.getElementsByTagName("img");
            var thumb = null;
            for (var i=0; i < images.length; i++) {
                var el = images.item(i);
                if (/product-image/.test(el.className)) {
                    thumb = el;
                } else {
                    el.setAttribute("title", "");
                    el.setAttribute("alt", "");
                }
            }
            if (thumb && thumb.getAttribute("title")) {
                thumb.setAttribute("old_title", thumb.getAttribute("title"));
                thumb.setAttribute("title", "");
            }
            if (thumb && thumb.getAttribute("alt")) {
                thumb.setAttribute("old_alt", thumb.getAttribute("alt"));
                thumb.setAttribute("alt", "");
            }
        }
    },
    _kill_timer: function(prodnum) {
        if (this._keep) { return; }
        if (this._timer) {
            clearTimeout(this._timer);
            this._timer = null;
        }
        ThumbRolloverHTML.hide();
    },
    display: function(doc) {
        if (this._timer) {
            clearTimeout(this._timer);
            this._timer = null;
        }
        if (this._mouse) {
            ThumbRolloverHTML.position(doc, this._element, this._mouse);
        }

        ThumbRolloverHTML.show();
    },
    position: function(doc, event) {
        if (!this._element) { return; }
        this._mouse = getMousePositionFromEvent(event);
        ThumbRolloverHTML.position(doc, this._element, this._mouse);
    },
    positionFromRollover: function(doc, event) {
        return;
        child_mouse = getMousePositionFromEvent(event);
        position = getAbsObjTL(ThumbRollover._element);
        this._mouse = {x: child_mouse.x + position.left, y: child_mouse.y + position.top};
        ThumbRolloverHTML.position(doc, this._element, this._mouse);
    },
    mouseover: function(el) {
        var tr = this;
        function f(evt) {
            var event = evt || window.event;
            event.cancelBubble = true;
            if (evt.stopPropagation) event.stopPropagation();
            var prodnum = el.getAttribute("kiw:product");
            tr._set_timer(prodnum, event, el);
        }
        return f;
    },
    mouseout: function(el) {
        var tr = this;
        function f(evt) {
            //return;
            var event = evt || window.event;
            event.cancelBubble = true;
            if (evt.stopPropagation) event.stopPropagation();
            tr._kill_timer();
        }
        return f;
    }
};

/* for making it easier to add all the data for the thumbs */
__tr = ThumbRollover;
__tr_active = false;
function __tr_timer_func()
{
    try {
        ThumbRollover.display(document);
    } catch(e) {
        //alert("ERR display: " + e.message);
    }
}
function __tr_setup() {
    if (!__tr_active) {
        return;
    }
    /* make sure this is only called once */
    __tr_active = false;
    /* this actually kind of sucks...we're assuming the <ul> etc... */
    var e = document.body.getElementsByTagName("ul");
    for (var i=0; i < e.length; i++) {
        var el = e.item(i);
        if (/product-thumbs/.test(el.className)) {
            for (var j=0; j < el.childNodes.length; j++) {
                var c = el.childNodes.item(j);
                if (c.nodeType == 3) {
                    continue;
                }
                setEventHandler(c, "mouseover", __tr.mouseover(c));
                setEventHandler(c, "mouseout", __tr.mouseout(c));
                setEventHandler(c, "mousemove", __tr_mousemove);
                c.style.position = "relative";
            }
        }
    }
    ThumbRollover.setup(document, imghost);
}
function __tr_mousemove(evt) {
    var event = evt || window.event;
    __tr.position(document, event);
}
setEventHandler(window, "load", __tr_setup);