/*
 * PMMI map overlay
 *
 * @author Zsolt Mészárovics
 */

/*extern jQuery, pmmi*/
Object.setToDotRef("pmmi.Overlay", function ($) {
    var inited = false;

    var Overlay = Object.extendClass(pmmi.Emitter, {
        constructor: function (config) {
            if (!inited) {
                Overlay.defaultCfg = {
                    $overlay: $("#pmmap_overlay"),
                    outDelay: 500,
                    width: 138,
                    height: 205,
                    xOffsetInlay: 5, // container div -> real content offset for hotsopot detect
                    yOffsetInlay: 12,
                    hotspotBleedY: 25,
                    contentWidth: 120,
                    contentHeight: 177,
                    xOffset: 4,
                    yOffset: 0
                };
            }
            Overlay.superclass.constructor.call(this);
            this.addEvents("show", "hide");
            this.c = $.extend({}, Overlay.defaultCfg, config);
            this.visible = false;
            this.hotspot = new pmmi.Hotspot();
            this.outTimerId = null;
            this.slideTimerId = null;
            this.city_id = null;
            this.active_museum = null;
            this.prev_museums = null;
            this.hotspot.
                addReceiver("enter", this.onHotspotEnter, this).
                addReceiver("leave", this.onHotspotLeave, this);
        },

        isVisible: function () {
            return this.visible;
        },

        setActiveMuseum: function (idx) {
            var newMuseum;

            if (this.active_museum === null || this.active_museum !== idx) {
                newMuseum = this.c.cities[this.city_id][idx];
                $("div.label a:first", this.c.$overlay).
                    text(newMuseum.name).
                    attr("href", newMuseum.href);

                this.getPictureList().css("left", idx * -120);
                this.getStepDot(this.active_museum).removeClass("active");
                this.getStepDot(idx).addClass("active");
            }

            this.active_museum = idx;
        },

        setSlideshow: function (started) {
            var toStart = started && this.c.cities[this.city_id].length > 0, self = this;
            if (toStart) {
                if (!this.slideTimerId) {
                    this.slideTimerId = setInterval(function () {
                        self.slideTimeout();
                    }, 2000);
                }
            } else if (this.slideTimerId) {
                if (this.slideTimerId) {
                    clearInterval(this.slideTimerId);
                    this.slideTimerId = null;
                }
            }
            return this.visible;
        },

        slideTimeout: function () {
            var nextSlide = this.active_museum;
            
            nextSlide = ++nextSlide === this.c.cities[this.city_id].length ? 0 : nextSlide;
            this.setActiveMuseum(nextSlide);
        },

        // private
        getPictureList: function () {
            return $("div.pictures ul:first", this.c.$overlay);
        },

        // private
        getStepDot: function (idx) {
            var selector = "table.steps tr:first a";
            if (idx !== null) {
                selector += ":eq(" + idx + ")";
            }
            return $(selector);
        },

        setup: function (id) {
            var museums, i, len, prevLen, $stepsRow, $picturesList, removeGt, img;

            if (this.city_id !== id && this.c.cities[id]) {
                museums = this.c.cities[id];

                len = museums.length;
                prevLen = this.prev_museums ? this.prev_museums.length : 1;

                if (prevLen < len) {
                    // rows
                    $stepsRow = $("table.steps tr:first", this.c.$overlay);
                    for (i = prevLen; i < len; i++) {
                        $stepsRow.append($("<td><a href=\"\" /></td>")); // set class active on anchor
                    }
                } else if (prevLen > len) {
                    removeGt = len - 1;
                    // steps
                    $("table.steps tr:first td:gt(" + removeGt + ")", this.c.$overlay).remove();
                }

                // pictures
                $picturesList = this.getPictureList().empty();
                for (i = 0; i < len; i++) {
                    img =  museums[i].img;
                    $picturesList.append(
                        "<li><div><img src=\"" + img.path + "\" width=\"" +img.w +
                            "\" height=\"" + img.h + "\" alt=\"kép #" + (i + 1) +
                            "\" /></div></li>");
                }

                this.prev_museums = museums;
                if (this.city_id !== id) {
                    this.active_museum = null;
                }
                this.city_id = id;
            }

            this.setActiveMuseum(0);
            this.setSlideshow(true);
        },

        onHotspotEnter: function () {
            //console.log("overlay: %s", "enter");
            if (this.outTimerId) {
                clearTimeout(this.outTimerId);
            }
        },

        onHotspotLeave: function () {
            var self = this;
            //console.log("overlay: %s", "leave");
            this.outTimerId = setTimeout(function () {
                self.hide();
            }, this.c.outDelay);
        },

        show: function (x, y, id) {
            this.setup(id);

            x += this.c.xOffset;
            y += this.c.yOffset;

            var h = this.c.height,
                w = this.c.width,
                iw = this.c.contentWidth,
                ih = this.c.contentHeight + this.c.hotspotBleedY,
                isBelow = y < h,
                top = Math.round(isBelow ? y : y - h),
                left = Math.round(x - w / 2),
                absLeft,
                absTop,
                absPosition;

            if (this.visible) {
                this.hide();
            }
            
            this.visible = true;
            this.emitEvent("show");

            absPosition = this.c.$overlay.css({top: top, left: left, display: "block"})[
                isBelow ? "removeClass" : "addClass"]("top").offset();

            absLeft = absPosition.left + this.c.xOffsetInlay;
            absTop = absPosition.top + this.c.yOffsetInlay - (isBelow ? this.c.hotspotBleedY : 0);

            this.hotspot.start([{x: absLeft, y: absTop}, {x: absLeft + iw, y: absTop},
                {x: absLeft + iw, y: absTop + ih}, {x: absLeft, y: absTop + ih}, {x: absLeft, y: absTop}]);

        },

        hide: function () {
            if (this.visible) {
                this.visible = false;
                this.setSlideshow(false);
                this.hotspot.stop();
                if (this.outTimerId) {
                    clearTimeout(this.outTimerId);
                }
                this.c.$overlay.css({display: "none"});
                this.emitEvent("hide");
            }
        }
    });

    return Overlay;
}(jQuery));