function CreatePopUpObjects(element) { element.getElementsBySelector("div[GSwidget^=FO]").each(function (s) { new PopUp(s) }) } var PopUpManager = Class.create({ initialize: function () { this.popUps = []; this.bodyOffset = {}; this.bodyOffset.h = $$("form")[0].cumulativeOffset().left; this.bodyOffset.v = $$("form")[0].cumulativeOffset().top; this.formOffset = $$("form")[0].cumulativeScrollOffset(); this.pOUnlock = true; Event.observe($$("body")[0], "resize", this.SetScrolled.bindAsEventListener(this)); Event.observe($$("body")[0], "scroll", this.SetScrolled.bindAsEventListener(this)) }, CloseAll: function () { this.popUps.each(function (s) { if (s.flyout != null) { s.isContained = false; s.ClearTimeout(); s.flyout.HideFO() } }) }, SetScrolled: function () { this.popUps.each(function (s) { if (s.flyout != null) { s.flyout.haveResized = true } }) }, CreateFlyoutContainer: function () { var base = (new Element("div", { id: "flyoutContainer" })).setStyle({ position: "relative", height: "0px", width: "0px", zIndex: 300 }); $$("body")[0].insert({ top: base }); return base } }); var pageFOManager = new PopUpManager(); var templateProduct = new Template('<div><img src="http://static.avenue7.co.uk/App_Themes/Av7/images/all-lang/clothes_page/item_popup_top.gif" /><div class="popOverBase"><div class="popItemName">#{title}<br /><span class="popBrandName">#{brandName}</span></div><div><strong>#{price}</strong></div><div class="popAddedBy">added by <a href=#{authorLink} class="popAddedBy">#{authorName}</a></div><div><input type="button" value="ADD TO FAVOURITES" actionType="addToFavs" id="btnAddFavs" class="btnFavs" /><input type="button" value="ADD TO DESIGNER" actionType="addToCanvas" id="btnAddCanvas" class="btnCanvas" /></div></div><img src="http://static.avenue7.co.uk/App_Themes/Av7/images/all-lang/clothes_page/item_popup_bottom.gif" /></div>'); var PopUp = Class.create({ initialize: function (el) { this.outerElement = el; this.isContained = false; this.flyout; this.currentTimeout; this.manager = pageFOManager; this.flyoutContainer = $("flyoutContainer") || this.manager.CreateFlyoutContainer(); try { this.options = this.outerElement.readAttribute("GSwidgetParams").evalJSON() } catch (e) { this.options = null } this.options = Object.extend({ itemGuid: false, itemType: 1, FOHeight: 300, FOWidth: 200, hOffset: 3, sOffset: 10, maxLoadAttempts: 3, itemID: false, imageFile: false, imageProp: 1 }, this.options || {}); this.manager.popUps.push(this); this.innerElement = (new Element("div")).setStyle({ position: "relative" }); this.el = new Element("div", { "class": "itemContainerInner" }).update(this.outerElement.innerHTML); this.el.wrap(this.innerElement); this.outerElement.update(this.innerElement); Event.observe(this.el, "mouseover", this.OnMouseOver.bindAsEventListener(this)); Event.observe(this.el, "mouseout", this.OnMouseOut.bindAsEventListener(this)) }, checkContained: function (xPos, yPos) { var posn = this.el.cumulativeOffset(); if (posn.top < yPos && posn.top + this.el.getHeight() > yPos && posn.left < xPos && posn.left + this.el.getWidth() > xPos) { return true } else { return false } }, OnMouseOver: function (event) { if (this.manager.pOUnlock) { this.goneIn = true; this.OpenWindow.bind(this).delay(0.5, Event.pointerX(event), Event.pointerY(event)) } }, OpenWindow: function (x, y) { if (this.goneIn) { if (!this.isContained) { if (this.flyout == null) { this.flyout = new Flyout(this) } else { this.flyout.showFO() } this.isContained = true } } }, OnMouseOut: function (event) { this.goneIn = false; if (!this.checkContained(Event.pointerX(event), Event.pointerY(event))) { this.isContained = false; if (this.flyout != null) { this.RecordTimeout(this.HideFO.delay(0.5, this)) } } }, HideFO: function (scope) { if (!scope.isContained) { scope.flyout.HideFO() } }, RecordTimeout: function (newTimeoutID) { this.ClearTimeout(); this.currentTimeout = newTimeoutID }, ClearTimeout: function () { if (this.currentTimeout != null) { window.clearTimeout(this.currentTimeout); this.currentTimeout = null } } }); var Flyout = Class.create({ initialize: function (parentItem) { this.parentItem = parentItem; this.loadAttempts = 0; this.haveResized = false; this.containerDiv = new Element("div", { style: "display:none;" }, { "class": "popOverBase" }).update('<div><img src="http://static.avenue7.co.uk/App_Themes/Av7/images/all-lang/clothes_page/item_popup_top.gif" /><div class="popOverLoadingTempDiv">Loading...</div><div><img src="http://static.avenue7.co.uk/App_Themes/Av7/images/all-lang/clothes_page/item_popup_bottom.gif" /></div>'); this.SetPosition(); Event.observe(this.containerDiv, "mouseover", this.OnMouseOver.bindAsEventListener(this)); Event.observe(this.containerDiv, "mouseout", this.OnMouseOut.bindAsEventListener(this)); this.parentItem.flyoutContainer.insert({ bottom: this.containerDiv }); this.showFO(); this.LoadData() }, showFO: function () { this.parentItem.manager.CloseAll(); currentID = this.parentItem.options.itemGuid; this.parentItem.isContained = true; if (this.haveResized) { this.SetPosition() } this.parentItem.outerElement.setStyle({ "z-index": 100 }); this.containerDiv.show() }, HideFO: function () { this.containerDiv.hide(); this.parentItem.outerElement.setStyle({ "z-index": 0 }) }, OnMouseOver: function () { if (!this.isContained) { this.showFO(); this.parentItem.isContained = true } }, LoadData: function () { ret = Avenue7_Presentation.ProductService.ProductDetailsGet(this.parentItem.options.itemGuid, this.OnLoadComplete.bind(this), this.OnLoadFail.bind(this)); this.loadAttempts++ }, OnLoadComplete: function (data) { this.data = data.replace(/(\n|\r|\t)/g, ""); this.data = this.data.evalJSON(); this.containerDiv.update(templateProduct.evaluate(this.data)); this.SetButtonEvents() }, OnLoadFail: function (arg) { if (this.loadAttempts >= this.parentItem.options.maxLoadAttempts) { this.containerDiv.update("There was a problem getting information about this item"); this.containerDiv.addClassName("popOverLoadingTempDiv") } else { this.LoadData() } }, OnMouseOut: function (event) { if (!this.parentItem.checkContained(Event.pointerX(event), Event.pointerY(event))) { this.parentItem.RecordTimeout(this.parentItem.HideFO.delay(0.5, this.parentItem)); this.parentItem.isContained = false } }, SetPosition: function () { var parentOffset = this.parentItem.el.cumulativeOffset(); var parentDimensions = this.parentItem.el.getDimensions(); var parentScrollOffset = this.parentItem.el.cumulativeScrollOffset(); var windowOffsets = document.viewport.getScrollOffsets(); this.leftDisp = parentOffset.left - parentScrollOffset.left + windowOffsets.left + parentDimensions.width + this.parentItem.options.hOffset; this.topDisp = parentOffset.top - parentScrollOffset.top + windowOffsets.top + this.parentItem.manager.formOffset.top - this.parentItem.manager.bodyOffset.v + (parentDimensions.height - this.parentItem.options.FOHeight) / 2; if (this.parentItem.el.viewportOffset().left + parentDimensions.width + this.parentItem.options.FOWidth + this.parentItem.options.sOffset < document.viewport.getWidth()) { } else { if (this.parentItem.el.viewportOffset().left - this.parentItem.options.hOffset - this.parentItem.options.FOWidth - this.parentItem.options.sOffset > 0) { this.leftDisp = parentOffset.left - parentScrollOffset.left + windowOffsets.left - (this.parentItem.options.hOffset + this.parentItem.options.FOWidth) } else { this.leftDisp = parentOffset.left - parentScrollOffset.left + windowOffsets.left + this.parentItem.options.sOffset - this.parentItem.el.viewportOffset().left } } if (this.topDisp + this.parentItem.options.FOHeight > document.viewport.getScrollOffsets().top + document.viewport.getHeight()) { this.topDisp = document.viewport.getScrollOffsets().top + document.viewport.getHeight() - this.parentItem.options.FOHeight - this.parentItem.options.sOffset - parentScrollOffset.top + windowOffsets.top } if (this.topDisp < document.viewport.getScrollOffsets().top) { this.topDisp = document.viewport.getScrollOffsets().top + this.parentItem.options.sOffset - parentScrollOffset.top + windowOffsets.top } this.elementStyle = "position:absolute;height:" + this.parentItem.options.FOHeight + "px,width:" + this.parentItem.options.FOWidth + "px;top:" + this.topDisp + "px;left:" + this.leftDisp + "px;z-index:300"; this.containerDiv.setStyle({ position: "absolute", height: this.parentItem.options.FOHeight + "px", width: this.parentItem.options.FOWidth + "px", top: this.topDisp + "px", left: this.leftDisp + "px", zIndex: 300 }); this.haveResized = false }, AddToFavourites: function () { this.HideFO(); AddToFavourites_onclick(this.parentItem.options.itemGuid) }, AddToWishList: function () { this.HideFO(); MW.showBoxP(absoluteRoot + "ModalContent/AddToWishList.aspx?ProductGuid=" + this.parentItem.options.itemGuid) }, Buy: function () { ret = Avenue7_Presentation.ProductService.ProductRecordBuyItem(this.parentItem.options.itemGuid, this.data.redirectURL, OnCompleteE, OnCompleteE); window.open(this.data.redirectURL) }, AddFavouriteOC: function (arg) { var FlashButtonFunction = window.parent.FlashNewOutfit.bindAsEventListener(this); if (arg == "alreadyAdded") { MM.showMessage("This item is already in your favourites!", "Item Already Added") } else { if (arg == "login") { MW.showBoxP(absoluteRoot + "ModalContent/loginSml.aspx") } else { $("numFavsDiv").update(arg); MM.showMessageFunc("Item successfully added to your favourites.", "Item Added to Favourites", FlashButtonFunction) } } }, AddFavouriteOE: function (arg) { MM.showMessage("There was an error adding this item to your Favourites.", "Error Adding to Favourites") }, AddFavouriteCookieOC: function (arg) { }, AddFavouriteCookieOE: function (arg) { }, SetButtonEvents: function () { this.containerDiv.getElementsBySelector("input[actionType=addToFavs]").each(function (s) { Event.observe(s, "click", this.AddToFavourites.bindAsEventListener(this)) } .bind(this)); this.containerDiv.getElementsBySelector("input[actionType=addToCanvas]").each(function (s) { Event.observe(s, "click", this.AddToCanvas.bindAsEventListener(this)) } .bind(this)) }, AddToCanvas: function () { this.HideFO(); var objAddToCanvas = new AddToCanvas(); objAddToCanvas.AddToCanvas(this.parentItem.options.itemID, this.parentItem.options.imageFile, this.parentItem.options.imageProp) } }); function OnCompleteE(arg) { } var pointer = Class.create({ initialize: function () { } });