'); if (this.Tab.Type == "Text") { var textJSON = []; textJSON.title = $(this.El).readAttribute("title"); textJSON.imageFile = $(this.El).readAttribute("src").replace("width=85", "width=150"); textJSON.color = $(this.El).readAttribute("Color"); textJSON.visible = "block"; textJSON.buyvisible = "none"; this.TextPopup(textJSON) } else if (this.Tab.Type == "Draft") { var textJSON = []; textJSON.ID = idElement; textJSON.imageFile = this.El.src.replace("width=85", "width=150").replace("height=85", "height=150"); textJSON.DraftPicture = ""; var temp = this.El.src.toQueryParams().file; var index = temp.lastIndexOf("/"); if (index > -1) textJSON.DraftPicture = temp.substring(index + 1); this.OutfitDraftPopup(textJSON) } else { Avenue7_Presentation.ProductService.ProductDetailsByProductID(idElement, this.OnSuccess, this.OnFailure, this) } if (!event) var event = window.event; event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation(); var top = $(this.El).positionedOffset().top + $(this.El).getHeight() / 2; var left = $(this.El).positionedOffset().left + $(this.El).getWidth() / 2; this.PopupcontainerDiv.setStyle({ top: top + "px", left: left + "px" }); $(this.El).parentNode.appendChild(this.PopupcontainerDiv); this.PopupcontainerDiv.show() } this.OnItemDrag = false; return false }, TextPopup: function (args) { var templateProduct = new Template('' + '
' + ''); try { this.PopupcontainerDiv.update(templateProduct.evaluate(args)) } catch (e) { context.hideOverlay() } }, OutfitDraftPopup: function (args) { var templateProduct = new Template('' + ''); try { this.PopupcontainerDiv.update(templateProduct.evaluate(args)) } catch (e) { context.hideOverlay() } }, OnSuccess: function (args, context) { var templateProduct = new Template('' + '' + ''); try { var data = args.evalJSON(); context.PopupcontainerDiv.update(templateProduct.evaluate(data)); Event.observe("aFav", 'click', context.AddToFavourites.bindAsEventListener(context)); if (context.Tab.ID == 1) { $($("aFav").parentNode).hide() } } catch (e) { context.hideOverlay() } }, OnFailure: function (args, context) { }, hideOverlay: function () { if ($('divPopup')) $('divPopup').remove(); if ($("cp_" + this.ID)) $("cp_" + this.ID).hide(); if ($("ClrPalette")) $("ClrPalette").hide(); this.HideFontSelection() }, OnKeyPress: function (event) { event = event || window.event; var keyCode = event.which || event.keyCode; if (keyCode == 27) this.hideOverlay() }, AddToFavourites: function (event) { var ele = Event.element(event); var Pid = $(ele).readAttribute("PID"); this.hideOverlay(); if ($('LoggedInCheck')) { ret = Avenue7_Presentation.FavouriteService.FavouritesAddTo(Pid, this.OnFavSuccess, function (args) { }) } else if ($('LoggedOutCheck')) { var aCookie = (unescape(document.cookie)).split("; "); for (var i = 0; i < aCookie.length; i++) { var aCrumb = aCookie[i].split("="); if (Pid == aCrumb[1]) { MM.showMessage("This item is already in your favourites!", "Item Already Added"); return false } } var numFavs = 0; cookieNumFavs = readCookie("numFavs"); if (cookieNumFavs) numFavs = parseInt(cookieNumFavs) + 1; else numFavs = 1; createCookie("numFavs", numFavs, 9); createCookie("Favourite" + numFavs, Pid, 9); ret = Avenue7_Presentation.FavouriteService.FavouritesAddToCookie(numFavs, this.OnFavSuccess, function () { }); return false } return false }, DeleteItemFromFavourites: function (event) { var ele = Event.element(event); var Pid = $(ele).readAttribute("PID"); if (confirm("Are you want to delete this item from your favorites?")) { ret = Avenue7_Presentation.FavouriteService.FavouriteItemRemove(Pid, this.OnFavSuccess, function (args) { }); this.hideOverlay() } return false }, OnFavSuccess: function (args) { av7design.palette.RefreshTabDetails(1) }, HideFontSelection: function () { $("sFont").hide() } }; AutoComplete = Class.create(); AutoComplete.prototype = { selector: null, input: null, _timeout: null, visible: false, drawn: false, _hideTimeout: null, options: null, initialize: function (input, panel) { this.input = $(input); this.input.autocomplete = "off"; this.options = new AutoComplete.Options(); this.TabPanel = panel; this.defaultColor = "#000"; this.selector = document.createElement('select'); Event.observe(this.input, 'focus', this._onInputFocus.bindAsEventListener(this)); Event.observe(this.input, 'keydown', this._onInputKeyDown.bindAsEventListener(this)); Event.observe(this.input, 'blur', this._onInputBlur.bindAsEventListener(this)); Event.observe(this.input, 'change', this._onInputBlur.bindAsEventListener(this)); Event.observe(this.selector, 'focus', this._onSelectorFocus.bindAsEventListener(this)); Event.observe(this.selector, 'change', this._onSelectorChange.bindAsEventListener(this)); Event.observe(window, 'resize', this._reposition.bind(this)); Event.observe(window, 'scroll', this._reposition.bind(this)); this.insertMessage() }, insertMessage: function () { if (this.input.value.length == 0 || this.input.value == this.options.text) { this.input.value = this.options.text; this.input.setStyle({ color: this.options.color }) } else this.input.setStyle({ color: this.defaultColor }) }, _onInputFocus: function (event) { this.input.value = ""; this._onSelectorFocus(event) }, _onSelectorBlur: function (event) { this._onInputBlur(event) }, _onInputBlur: function (event) { this.insertMessage() }, _checkOnBlur: function () { this._hideTimeout = null; this.hide() }, _onInputKeyUp: function (event) { this._suggest(event) && Event.stop(event) }, _onInputKeyDown: function (event) { this._suggest(event) && Event.stop(event) }, _onSelectorFocus: function (event) { if (this._hideTimeout) { clearTimeout(this._hideTimeout); this._hideTimeout = null } }, _onSelectorChange: function (event) { this.select() }, draw: function () { if (this.drawn) return; if (this.options.cssClass) this.selector.className = this.options.cssClass; Element.setStyle(this.selector, { display: 'none', position: 'absolute', fontSize: '11px', width: this.input.offsetWidth + 'px' }); this.selector.size = this.options.size; document.body.appendChild(this.selector); this.input.autocomplete = 'off'; this.drawn = true }, hide: function () { if (!this.drawn || !this.visible) return; this.visible = false; if (window.Scriptaculous) { new Effect.BlindUp(this.selector, { duration: this.options.delay, queue: 'end', afterFinish: function (event) { Element.setStyle(this.selector, { display: 'none' }); this.selector.options.length = 0; setTimeout(this._restoreFocus.bind(this), 50) } .bind(this) }) } else { Element.setStyle(this.selector, { display: 'none' }); this.selector.options.length = 0; setTimeout(this._restoreFocus.bind(this), 50) } }, _restoreFocus: function () { this.input.focus() }, show: function () { if (!this.drawn) this.draw(); var trigger = null; if (this.selector.options.length) { if (window.Scriptaculous) { new Effect.BlindDown(this.selector, { duration: this.options.delay, queue: 'end' }) } else { Element.setStyle(this.selector, { display: 'inline' }) } this._reposition(); this.visible = true } }, _cancelTimeout: function () { if (this._timeout) { clearTimeout(this._timeout); this._timeout = null } }, _suggest: function (event) { this._cancelTimeout(); var key = Event.keyPressed(event); var ignoreKeys = [20, 16, 17, 18, 91, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 45, 36, 35, 33, 34, 144, 145, 44, 19, 93, ]; if (ignoreKeys.indexOf(key) > -1) return false; switch (key) { case Event.KEY_LEFT: case Event.KEY_RIGHT: return false; break; case Event.KEY_TAB: case Event.KEY_RETURN: if (this.visible) { if (this.selector.selectedIndex > -1) this.select(); else { if (this.selector.length > 0) { this.selector.selectedIndex = 0; this.select() } else this.cancel(); this.insertMessage() } return true } else { this.cancel(); Event.stop(event); this.insertMessage() } return false; break; case Event.KEY_ESC: this.cancel(); return true; break; case Event.KEY_UP: case Event.KEY_DOWN: this._interact(event); return true; break; default: break } if (this.input.value.length <= 1 && (key == Event.KEY_BACKSPACE || key == 46)) { this.cancel(); return false } if (this.input.value.length >= this.options.threshold - 1) { this._timeout = setTimeout(this._sendRequest.bind(this), 1000 * this.options.delay) } return false }, _sendRequest: function () { var result = []; var ArrObj = this.TabPanel.BrandsJSON; var entry = this.input.value; var count = 0; for (var i = 0; i < ArrObj.length; i++) { var elem = ArrObj[i]; var elem_name = elem.name; var elem_value = elem.id; var foundPos = elem_name.toLowerCase().indexOf(entry.toLowerCase()); var temp = []; while (foundPos != -1) { if (foundPos == 0) { temp.Guid = elem_value; temp.Name = elem_name; result.push(temp); break } foundPos = elem_name.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) } } this._process(result, this) }, _reposition: function () { if (!this.drawn) return; var pos = Position.cumulativeOffset(this.input); pos.push(pos[0] + this.input.offsetWidth); pos.push(pos[1] + this.input.offsetHeight); Element.setStyle(this.selector, { left: pos[0] + 'px', top: pos[3] + 'px' }) }, _process: function (responseText, context) { context.selector.options.length = 0; try { context._parseJSON(responseText); if (context.selector.options.length > (context.options.size)) context.selector.size = context.options.size; else context.selector.size = context.selector.options.length > 1 ? context.selector.options.length : 2; if (context.selector.options.length) { context.selector.selectedIndex = -1; context.show() } else context.cancel() } catch (e) { context.cancel() } }, _parseJSON: function (json) { if (!json) json = []; for (i = 0; i < json.length; i++) this._addOption(json[i].Guid, json[i].Name) }, _addOption: function (value, suggestion) { var opt = new Option(suggestion, value); Prototype.Browser.IE ? this.selector.add(opt) : this.selector.add(opt, null) }, cancel: function () { this.hide() }, select: function () { if (this.selector.selectedIndex > -1) { if (this.selector.options.length) this.input.value = this.selector.options[this.selector.selectedIndex].text; this.cancel(); this.TabPanel.onBrandSearch(this.selector.options[this.selector.selectedIndex].value, this.input.value); if (typeof this.options.onSelect == 'function') { this.options['onSelect'](this.input) } } else { this.cancel() } this.insertMessage() }, _interact: function (event) { if (!this.visible) return; var key = Event.keyPressed(event); if (key != Event.KEY_UP && key != Event.KEY_DOWN) return; var mx = this.selector.options.length; if (key == Event.KEY_UP) { if (this.selector.selectedIndex == 0) this.selector.selectedIndex = this.selector.options.length - 1; else this.selector.selectedIndex-- } else { if (this.selector.selectedIndex == this.selector.options.length - 1) this.selector.selectedIndex = 0; else this.selector.selectedIndex++ } } }; AutoComplete.Options = Class.create({ size: 15, cssClass: "fontAllTexts", onSelect: null, threshold: 1, delay: .1, text: "Search brands", color: "#aaa", initialize: function (overrides) { Object.extend(this, overrides || {}) } }); Object.extend(Event, { KEY_BACKSPACE: 8, KEY_TAB: 9, KEY_RETURN: 13, KEY_ESC: 27, KEY_LEFT: 37, KEY_UP: 38, KEY_RIGHT: 39, KEY_DOWN: 40, KEY_DELETE: 46, KEY_SHIFT: 16, KEY_CONTROL: 17, KEY_CAPSLOCK: 20, KEY_SPACE: 32, keyPressed: function (event) { return Prototype.Browser.IE ? window.event.keyCode : event.which } }); function getElementXYPos(ele) { var point = []; if (ele.getBoundingClientRect) { var box = ele.getBoundingClientRect(); var doc = document; var TopPos = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop); var LeftPos = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft); if (Prototype.Browser.IE) { box.left -= 2; box.top -= 2 } point.x = box.left + LeftPos; point.y = box.top + TopPos } else { var offsetVal = []; offsetVal.x = ele.offsetLeft; offsetVal.y = ele.offsetTop; var NodeParentOffset = ele.offsetParent; var IsWebkit = Prototype.Browser.WebKit; var StyleDet = this.RetrieveStyleAttributeDetails(ele, "position") == "absolute"; if (NodeParentOffset != ele) { while (NodeParentOffset) { offsetVal.x += NodeParentOffset.offsetLeft; offsetVal.y += NodeParentOffset.offsetTop; if (IsWebkit && !StyleDet && this.RetrieveStyleAttributeDetails(NodeParentOffset, "position") == "absolute") { StyleDet = true } NodeParentOffset = NodeParentOffset.offsetParent } } if (IsWebkit && StyleDet) { offsetVal.x -= document.body.offsetLeft; offsetVal.y -= document.body.offsetTop } NodeParentOffset = node.parentNode; while (NodeParentOffset && NodeParentOffset.tagName != "HTML" && NodeParentOffset.tagName != "BODY") { if (this.RetrieveStyleAttributeDetails(NodeParentOffset, "display") != "inline") { offsetVal.x -= NodeParentOffset.scrollLeft; offsetVal.y -= NodeParentOffset.scrollTop } NodeParentOffset = NodeParentOffset.parentNode } point = offsetVal } return point } function RetrieveStyleAttributeDetails(ele, prop) { if (ele.style && ele.style[attribute]) { return ele.style[attribute] } else { if (ele.currentStyle) { return ele.currentStyle[attribute] } else { if (document.defaultView && document.defaultView.getComputedStyle) { attribute = attribute.replace(/([A-Z])/g, "-$1"); attribute = attribute.toLowerCase(); var s = document.defaultView.getComputedStyle(ele, ""); return s && s.getattributeertyValue(attribute) } else { return null } } } }
' + '
' + '
#{title}
' + '- ' + '
- Add item to canvas ' + '
- Buy this item ' + '
' + '' + '
' + '' + ' ' + '' + '
#{title}
' + '#{description} More details...
' + '- ' + '
- Add item to canvas ' + '
- Add to my favorites ' + '
- Report item ' + '