// Main WANT API var wb = { t : null, items : [], twlURL : 'http://button.wanttt.com', pageUrl : undefined, pageBody : null, wantText : null, savedText : null, errorText : null, buttonDimensions : null, hoverSize : 'small', arrowWidth : 6, hoverMessage: "Keep track of what you Want", hoverMessages: { "bnakedb": "", "Finishline": "", "Koastal Surf to Street - Longboards": "", "marissab": "", "80sTees": "", "Subtle Luxury": "", "Elm And Oak": "", "rdeco-shop.myshopify": "", "LSD Fashion LAB accessories": "", "Foxx Foe": "", "The Lost At E Minor store": "", "ICEJERSEYS": "", "Valerie Jewellery": "", "Snapback Season": "", "Epic Meal Time": "What is this?", "ALIBI JEWELRY NYC": "", "Love Eco": "", "Ashley Watson Boutique": "", "LSD Fashion LAB ": "", "Obviously Chic": "", "Bride Couture": "", "Moosejaw": "", "Brand X T-Shirts": "", "PopFunk": "", "LUVEST Official Website": "", "Drake General Store": "", "softspoken": "", "swrve": "", "Party Rock Clothing": "Might Want this Later?", "Liv-Chic Furniture": "", "dN|Be Apparel": "", "lydias": "", "DAR LIN": "", "by natalie frigo": "", "Beaute Ultrasonic": "", "Uncommon Goods": "", "High Five Threads": "", "wind and water designs": "", "Cycletherapy BMX": "", "Panam Sneakers": "", "Old Tom Foolery": "", "ACE Hackware": "", "eDiva": "", "The Sharper Image": "Keep track of what you Want!", "Vielle and Frances": "", "Rdeco shop": "", "Shoebacca": "Discover a new way to create a shoe collection!", "Vielle Frances": "", "Carolina Rustica": "", "Lionesque Style": "", "Backpage Press": "", "Luxury XX Clothing": "", "Rivals of Time": "", "Lille Boutique": "", "Island Outfitters": "", "Shabbyapple": "", "Her Campus Shop": "", "Beautiful One": "", "Zakhs": "", "orientina": "", "theuncommongreen": "", "Liz Law": "" }, init : function(hasMessage) { var actualDems; wb.pageUrl = String(document.URL); // prevents the script from being ran more then once if(typeof hasLoaded == "undefined") { wb.buttonDimensions = { "wb1": {"true": {"width":122, "height":28, "class" : "count"}, "false": {"width":71, "height":28, "class" : "noCount"}, "fb" : false}, "wb2": {"true": {"width":110, "height":24, "class" : "count"}, "false": {"width":60, "height":24, "class" : "noCount"}, "fb" : false}, "wb3": {"true": {"width":100, "height":20, "class" : "count"}, "false": {"width":49, "height":20, "class" : "noCount"}, "fb" : false}, "txt": {"true": {"width":150, "height":16}, "false": {"width":96, "height":16}}, "wbabovebubble" : {"true" : {"width" : 60, "height" : 50, "class" : "count bubble"}, "false" : {"width" : 60, "height" : 24, "class" : "noCount"}, "fb" : false}, "wbfb1" : {"true": {"width":162, "height":28, "class" : "fb count"}, "false" : {"width":100, "height":28, "class" :"noCount fb"}, "fb" : true}, "wbfb2" : {"true": {"width":145, "height":28, "class" : "fb count"}, "false" : {"width":85, "height":24, "class" :"noCount fb"}, "fb" : true}, "wbfb3" : {"true": {"width":122, "height":28, "class" : "fb count"}, "false" : {"width":70, "height":20, "class" :"noCount fb"}, "fb" : true}, "tab": {"false" : {"width":36, "height":95}}, "wazala1": {"false": {"width":19, "height":19}} }; wb.processLinks(); wb.fbActualDems = { fbIcon : true, wbfb1 : { fbIconWidth : 29, fbIconHeight : 28, buttonWidth : 71, buttonHeight : 28 }, wbfb2 : { fbIconWidth : 25, fbIconHeight : 24, buttonWidth : 60, buttonHeight : 26 }, wbfb3 : { fbIconWidth : 20, fbIconHeight : 20, buttonWidth : 50, buttonHeight : 20 } }; wb.defaultActualDems = { fbIcon : false, wb1 : { buttonWidth: 71, buttonHeight: 28 }, wb2 : { buttonWidth: 60, buttonHeight: 24 }, wbabovebubble : { buttonWidth: 60, buttonHeight: 24 }, wb3 : { buttonWidth: 49, buttonHeight: 20 }, wazala1 : { buttonWidth: 20, buttonHeight: 50 } }; if(wb.items[0].style === "wbfb1" || wb.items[0].style === "wbfb2" || wb.items[0].style === "wbfb3"){ actualDems = wb.fbActualDems; } else{ actualDems = wb.defaultActualDems; } // create the layers that will be used for the comment box as well as the tool tip wb.pageBody = document.getElementsByTagName("body")[0]; wb.createToolTip(wb.pageBody, wb.twlURL, wb.items[0].style, actualDems); // code that gets run in the hidden var data = wb.pageUrl.split("?"); if(data.length > 1) { // user clicks button to mark it as wanted var btnIndex = 0; var button = null; if(wb.pageUrl.split("wantStatus=").length > 1) { btnIndex = parseFloat(wb.pageUrl.split("btnIndex=")[1]); var isWanted = wb.pageUrl.split("wantStatus=")[1].split("&")[0] || false; var wantId = parseFloat(wb.pageUrl.split("wantId=")[1]) || -1; if(!isNaN(btnIndex)) { wb.items[btnIndex].wantId = wantId; button = parent.parent.document.getElementById("wantBtn-" + btnIndex); button.wanted = wantId; // get position of the button that was clicked (can't use data set becuase it wants to use the postion of the button in the hidden iframe) var currentPos = wb.findPos(button); parent.parent.document.getElementById("whatIsThis").style.display = "none"; parent.parent.document.getElementById("twl").style.display = "block"; } } } var hasLoaded = true; } }, getElementsByIdOrClass : function(name) { var elementList = null; if(document.getElementById(name)) { elementList = [document.getElementById(name)]; } else { elementList = wb.getElementsByClass(name); } return elementList; }, getWantButtons : function() { var buttons = wb.getElementsByIdOrClass('wantButton'); if (!buttons || buttons.length==0) { // Look for legacy buttons buttons = wb.getElementsByIdOrClass('sabIWant'); } return buttons; }, processLinks : function(btns) { wb.wantBtns = wb.getWantButtons(); // want events if(wb.wantBtns) { var total = wb.wantBtns.length; for(var i = 0; i < total; i++) { // data provided via the want anchor on the merchant page var button = wb.populateData(wb.wantBtns[i], i); wb.items.push(button); wb.createButton(i); } } }, populateData : function(anchor, index) { var button = new Object(); // populate the array of the button objs with their info // item // - index (Number) // - absolute return url (String) // - want id (Number) // - merchant name (String) // - product desc (String) // - product price (String) // - product name (String) // - button style (String) // - button counter (String) // - absolute product image url (String) // - button X Cords in pixels (Number) // - button Y Cords in pixels (Number) button.index = index; button.wLink = anchor; if (anchor.getAttribute("data-price") || anchor.getAttribute("data-price") == "") { wb.populatButtonAttributes(button, anchor); } else { wb.populateButtonAttributesLegacy(button, anchor); } button.wantId = -1; if(!button.pName) { button.pName = document.title; } if(!button.returnURL || button.returnURL==null || button.returnURL=='null') { button.returnURL = document.URL; } // if the counter param is not used on the want button api code and the style param is set to text then set the counter value to false var patt = /count=/g; if(button.style == "txt" && !patt.test(button.data)) { button.counter = "false"; } // used for position of the comment box and tool tip var btnPos = wb.findPos(button.wLink); button.xCord = btnPos[0]; button.yCord = btnPos[1]; return button; }, /** * New html5 data- method * @param button * @param anchor */ populatButtonAttributes : function(button, anchor) { button.merchant = unescape(anchor.getAttribute("data-merchant_name")); button.pPrice = unescape(anchor.getAttribute("data-price")); button.pName = unescape(anchor.getAttribute("data-title")); button.returnURL = unescape(anchor.getAttribute("data-return_url")); button.pImage = unescape(anchor.getAttribute("data-image_url")); button.style = unescape(anchor.getAttribute("data-style")); button.counter = unescape(anchor.getAttribute("data-count")); button.pageSource = unescape(anchor.getAttribute("data-page_source")); button.inventory = unescape(anchor.getAttribute("data-inventory")); button.centered = unescape(anchor.getAttribute("data-centered")); if (!button.style) { button.style = "wb1"; } if (!button.counter) { button.counter = "true"; } if(button.style === "wbFb1" || "wbFb2" || "wbFb3"){ button.fb = true; } }, /** * Legacy href method. Remember, these are encoded, where they are * not in the new mode! We must unescape them all. * @param button * @param anchor */ populateButtonAttributesLegacy : function(button, anchor) { button.merchant = unescape(wb.getDataValue(anchor.href, "merchant_name=", "")); button.pDesc = unescape(wb.getDataValue(anchor.href, "description=", "")); button.pPrice = unescape(wb.getDataValue(anchor.href, "price=", "")); button.pName = unescape(wb.getDataValue(anchor.href, "title=", "")); button.returnURL = unescape(wb.getDataValue(anchor.href, "return_url=", "")); button.pImage = unescape(wb.getDataValue(anchor.href, "image=", "")); if (!button.pImage) { button.pImage = unescape(wb.getDataValue(anchor.href, "image_url=", "")); } button.style = unescape(wb.getDataValue(anchor.href, "style=", "wb1")); button.counter = unescape(wb.getDataValue(anchor.href, "count=", "true")); button.pageSource = unescape(wb.getDataValue(anchor.href, "page_source=", "NOT_SET_WANT_JS")); }, /** * Currently not used * @param string */ HTMLUnencode : function(string) { var rval = string; rval = rval.replace("&", "&"); rval = rval.replace(" " , " ").replace(" ", " "); rval = rval.replace("<", "<"); rval = rval.replace(">", ">"); rval = rval.replace("¢", "¢").replace("¢", "¢"); rval = rval.replace("£", "£").replace("£", "£"); rval = rval.replace("€", "€").replace("€", "€"); rval = rval.replace("©", "©").replace("©", "©"); rval = rval.replace("®", "®").replace("®", "©"); rval = rval.replace("™", "™").replace("™", "™"); rval = rval.replace(""", "\""); return rval; }, getDataValue : function(string, paramName, defaultVal) { var value = defaultVal; if(string) { // check to see if the param that was request was really included with the data if(string.split(paramName).length > 1) { if(string.split(paramName)[1].split("&")[0]) { value = string.split(paramName)[1].split("&")[0]; } } } return value; }, createButton : function(index) { var item = wb.items[index]; var buttonCont = document.createElement("div"); buttonCont.id = "wantBtn-" + index; buttonCont.className = String(wb.buttonDimensions[item.style][item.counter]["class"]) + " wantbutton"; buttonCont.style.width = String(wb.buttonDimensions[item.style][item.counter]["width"]) + "px"; buttonCont.style.height = String(wb.buttonDimensions[item.style][item.counter]["height"]) + "px"; var btnIframe = document.createElement("iframe"); btnIframe.src = wb.buildIframeSrc(item, index); btnIframe.width = String(wb.buttonDimensions[item.style][item.counter]["width"]); btnIframe.height = String(wb.buttonDimensions[item.style][item.counter]["height"]); btnIframe.frameBorder = "0"; btnIframe.scrolling = "no"; btnIframe.allowTransparency = "false"; if(wb.items[index].style === "tab"){ btnIframe.style.position = "fixed"; btnIframe.style.top = "45%"; btnIframe.style.left = "0"; } buttonCont.appendChild(btnIframe); if (item.wLink.parentNode != null) { item.wLink.parentNode.replaceChild(buttonCont, wb.items[index].wLink); } if (wb.hoverMessages && wb.items[0].merchant in wb.hoverMessages) { if (wb.hoverMessages[wb.items[0].merchant].length > 0) { wb.addEvent(buttonCont, "mouseover", wb.showInfo); wb.addEvent(buttonCont, "mouseout", wb.delay); } } else { wb.addEvent(buttonCont, "mouseover", wb.showInfo); wb.addEvent(buttonCont, "mouseout", wb.delay); } }, /** * Builds the iFrame src string - used in multiple locations * @param index the button index */ buildIframeSrc : function(data, index) { var centered = ""; if (!index) { index = 0; } var styleVal = data.style; if(data.counter == "true") { styleVal = data.style + "-counter"; } if(data.centered !== ""){ centered = "¢ered=" + data.centered } return wb.twlURL + "/button/?merchant_name=" + escape(data.merchant) + "&price=" + data.pPrice + "&name=" + escape(data.pName) + "&index=" + index + "&style=" + styleVal + "&parentUrl=" + escape(String(document.URL)) + "&image=" + escape(data.pImage) + "&returnUrl=" + escape(data.returnURL) + "&count=" + data.counter + "&page_source=" + data.pageSource + "&inventory=" + data.inventory + centered ; }, createToolTip : function(theBody, url, style, dems) { var iconWidth, tooltip = document.createElement("div"), button = document.getElementById('wantBtn-0'), buttonWidth = dems[style].buttonWidth, buttonHeight = dems[style].buttonHeight, buttonPos = wb.findPos(button); function hoverPos(){ if(style === "wb1" || style === "wbfb1"){ tooltip.style.left = (buttonPos[0] - ((buttonWidth/2) - iconWidth)) - wb.arrowWidth + 'px'; } else if(style === "wb2" || style === "wbfb2" || style === "wbabovebubble"){ tooltip.style.left = (buttonPos[0] - (buttonWidth)) + iconWidth + 12 + 'px'; } else if(style === "wb3"){ tooltip.style.left = (buttonPos[0] - buttonWidth) - 6 + 'px'; } else if(style === "wbfb3"){ tooltip.style.left = ((buttonPos[0] - buttonWidth) + iconWidth) - wb.arrowWidth + 'px'; } } if(!document.getElementById("whatIsThis")) { if(dems.fbIcon === true){ iconWidth = dems[style].fbIconWidth; } else{ iconWidth = 0; } tooltip.id = "whatIsThis"; tooltip.style.position = "absolute"; tooltip.style.zIndex = "99999"; tooltip.style.width = "160px"; tooltip.style.height = "43px"; tooltip.style.background = " url(" + wb.twlURL + "/static/images/button/bkg/hoverBg.png) 0 99% no-repeat"; var tooltipSpan2 = document.createElement("span"); tooltipSpan2.style.display = "block"; tooltipSpan2.style.position = "relative"; var message = ""; if (wb.hoverMessages && wb.hoverMessages[wb.items[0].merchant]) { message = wb.hoverMessages[wb.items[0].merchant]; } else { message = wb.hoverMessage; } if (message.length != 0 && message.length < 25) { wb.hoverSize = 'small'; } else if (message.length>= 25 && message.length < 50 ) { wb.hoverSize = 'medium'; } else if (message.length >= 50 && message.length <75 ) { wb.hoverSize = 'large'; } else if (message.length >=75) { wb.hoverSize = 'xlarge'; } else { wb.hoverSize = 'default'; } // We can comfortably handle around 110 characters, more if they're nicely spaced switch (wb.hoverSize){ case "default": tooltipSpan2.style.top = "2px"; tooltipSpan2.style.font = "italic 11px/1 'Georgia', Times, Times New Roman, serif"; break; case "small": tooltipSpan2.style.top = "6px"; tooltipSpan2.style.font = "italic 14px/1 'Georgia', Times, Times New Roman, serif"; break; case "medium": tooltipSpan2.style.top = "2px"; tooltipSpan2.style.font = "italic 12px/1 'Georgia', Times, Times New Roman, serif"; break; case "large": tooltipSpan2.style.top = "2px"; tooltipSpan2.style.font = "italic 10px/1 'Georgia', Times, Times New Roman, serif"; break; case "xlarge": tooltipSpan2.style.top = "0px"; tooltipSpan2.style.font = "italic 9px/1 'Georgia', Times, Times New Roman, serif"; } hoverPos(); tooltip.style.display = "none"; tooltip.style.top = (buttonHeight) + buttonPos[1] +'px'; function hasClass (obj, className) { if (typeof obj == 'undefined' || obj==null || !RegExp) { return false; } var re = new RegExp("(^|\\s)" + className + "(\\s|$)"); if (typeof(obj)=="string") { return re.test(obj); } else if (typeof(obj)=="object" && obj.className) { return re.test(obj.className); } return false; } var hasCount = hasClass(button, "count"); if (style === "wbabovebubble" && hasCount){ tooltip.style.top = "60px" } window.onresize = function() { buttonPos = wb.findPos(button); hoverPos(); tooltip.style.top = (parseInt(buttonHeight[0]) + buttonPos[1]) +'px'; if(button.className === "count wantbutton"){ tooltip.style.left = (parseInt(buttonWidth[0])/2) + (buttonPos[0] - 64) - 40 + 'px'; } }; var ttArrow = document.createElement("img"); ttArrow.src = wb.twlURL + "/static/images/button/bkg/hoverArrow.png"; ttArrow.width = 8; ttArrow.height = 4; ttArrow.alt = ""; ttArrow.style.position = "absolute"; ttArrow.style.top = 0 + "px"; ttArrow.style.left = 76 + "px"; var ttPara = document.createElement("p"); ttPara.style.padding = "8px 5px 12px"; ttPara.style.margin = "0"; ttPara.style.font = "12px/1 'Calibri', Arial, Helvetica, sans-serif"; ttPara.style.color = "#333333"; ttPara.style.textAlign = "center"; var tooltipEm = document.createElement("em"); tooltipEm.style.color = "#0099cc"; tooltipEm.style.fontStyle = "normal"; var tooltipSpan1 = document.createElement("span"); tooltipSpan1.style.display = "block"; tooltipSpan1.style.font = "15px/1 'Calibri', Arial, Helvetica, sans-serif"; theBody.appendChild(tooltip).appendChild(ttArrow); tooltipSpan1.appendChild(document.createTextNode("?")); tooltip.appendChild(ttPara).appendChild(tooltipSpan2).appendChild(document.createTextNode(message)); wb.addEvent(tooltip, "mouseout", wb.delay); wb.addEvent(tooltip, "mouseover", wb.showInfo); //wb.addEvent(tooltip, "click", wb.addWant); } }, delay : function () { wb.t = setTimeout("wb.hideInfo()", 150); }, addEvent : function( obj, type, fn, callback ) { if (obj.addEventListener) { obj.addEventListener( type, fn, false ); EventCache.add(obj, type, fn); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }; obj.attachEvent( "on"+type, obj[type+fn] ); EventCache.add(obj, type, fn); } else { obj["on"+type] = obj["e"+type+fn]; } if (callback) { callback(); } }, createCookie : function(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; }, readCookie : function(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }, findPos : function (obj) { var pos = new Object(); pos.x = pos.y = 0; if (obj.offsetParent) { do { pos.x += obj.offsetLeft; pos.y += obj.offsetTop; } while (obj = obj.offsetParent); } return [pos.x, pos.y]; }, showInfo : function(e) { // get the layer based off status or location of the user's mouse // var infoBox = null, classes = wb.getElementsByClass('wantbutton'), message = document.getElementById('whatIsThis'), body = document.getElementsByTagName('body')[0], hasMessage = true; if (classes.length > 1){ hasMessage = false; } if(hasMessage === false) return false; if(!this.wanted && wb.items[0].style != "wazala1") { infoBox = document.getElementById("whatIsThis"); infoBox.style.display = "block"; } // prevents position from being changed when on the layer if(this.className == "sabIWant") { // get index of the current button var index = String(this.id).split("-")[1]; infoBox.style.top = wb.items[index].yCord + (wb.buttonDimensions[wb.items[index].style][wb.items[index].counter]["height"] + 5) + "px"; if(!this.wanted) { infoBox.style.left = (wb.findPos(this)[0] - (parseFloat(infoBox.style.width) / 2)) + wb.buttonDimensions[wb.items[index].style][wb.items[index].counter]["left"] + "px"; } } clearTimeout(wb.t); }, hideInfo : function(fromIframe) { document.getElementById("whatIsThis").style.display = "none"; }, unescape : function(str) { var rVal = unescape(str); rVal = rVal.replace(/\+/g, " "); return rVal; }, addWant : function() { var iframe = document.getElementById("wantBtn").getElementsByTagName("iframe")[0]; var orgSrc = iframe.src; iframe.src = orgSrc + "&outSideClick=true"; }, popupWindow : function(e) { e.preventDefault(); window.open(this.href + "&addWant=true&action=want_button", "ShareAbillWANT", "width=550, height=393, scrollbars=1, location=0, menubar=0, status=0, titlebar=0, resizable=1"); }, getElementsByClass : function(searchClass, node, tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { // test to determine if inside the iframe or not if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; }, removeElement : function (el, parentEl) { if(el) { parentEl.removeChild(el); } } }; var EventCache = function(){ var listEvents = []; return { listEvents : listEvents, add : function(node, sEventName, fHandler){ listEvents.push(arguments); }, flush : function(){ var i, item; for(i = listEvents.length - 1; i >= 0; i = i - 1){ item = listEvents[i]; if(item[0].removeEventListener){ item[0].removeEventListener(item[1], item[2], item[3]); } if(item[1].substring(0, 2) != "on"){ item[1] = "on" + item[1]; } if(item[0].detachEvent){ item[0].detachEvent(item[1], item[2]); } item[0][item[1]] = null; } } }; }(); // Dynamic WANT API var WANT = { init : function(wb) { WANT.wb = wb; WANT.button = wb.wantBtns[0]; var paramNames = ['price', 'name', 'image_url'], updateWANT = false; if(typeof _WANT !== "undefined"){ for(var i = 0; i < paramNames.length; i++){ if(_WANT[paramNames[i]]){ WANT[paramNames[i]] = _WANT[paramNames[i]]; updateWANT = true; } } if(updateWANT){ WANT.update(); } } }, /** * Set the button's price * @param string * @param immediate Reload the iframe immediately */ setPrice : function(string, immediate) { WANT.price = string; if (immediate) WANT.update(); }, /** * Set the button's name * @param string * @param immediate Reload the iframe immediately */ setName : function(string, immediate) { WANT.name = string; if (immediate) WANT.update(); }, /** * Set the button's image url * @param string * @param immediate Reload the iframe immediately */ setImageUrl : function(string, immediate) { WANT.image_url = string; if (immediate) WANT.update(); }, /** * Reload the button with any set values */ update : function() { var data = wb.items[0]; if (WANT.name) { data.pName = WANT.name; } if (WANT.price) { data.pPrice = WANT.price; } if (WANT.image_url) { data.pImage = WANT.image_url; } var iframe = document.getElementById("wantBtn-0").getElementsByTagName("iframe")[0]; iframe.src = wb.buildIframeSrc(data); } }; /** * Initialize the raw button code and the consumer API */ function want_init() { wb.init(); WANT.init(wb); } wb.addEvent(window,'unload',EventCache.flush); if (wb.getWantButtons().length>0) { want_init(); } else { wb.addEvent(window, 'load', want_init); }