/* Global Variables */ var container; var eTarget; /* Constructors */ //Constructor function for the selectedProduct array function selectedProduct(soNum, text1, link1, cat1, bg1) { this.length = 6; this.soNum = soNum; this.text1 = text1; this.link1 = link1; this.cat1 = cat1; this.bg1 = bg1; } /* Arrays */ //Array for the thumnails and selectedProduct(s) var prodArray = new Array prodArray[0] = new selectedProduct('s0199180', 'You can\'t tell it\'s recycled, but the environment can. Choose recycled papers and choose to make a difference.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110DP1424&catalogIdentifier=SH110', 'paper', 'images/14_bg.jpg'); prodArray[1] = new selectedProduct('s0073349', 'File the eco way with Staples \u2014 up to 100% recycled file folders.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG15&catalogIdentifier=SH110', 'filing supplies', 'images/12_bg.jpg'); prodArray[2] = new selectedProduct('s0204859', 'Made with naturally derived, biodegradable ingredients, these soaps are gentle on you and the environment.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG8&catalogIdentifier=SH110', 'cleaning products', 'images/test_bg.gif'); prodArray[3] = new selectedProduct('s0219566', 'Spills, stains and messes don\'t stand a chance against these recycled paper towels, but the planet does.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110DP1865&catalogIdentifier=SH110', 'paper products', 'images/8_bg.jpg'); prodArray[4] = new selectedProduct('s0040657', 'These recycled files expand and protect the planet! Made of up to 100% recycled fibers, and a minimum of 50% post-consumer material.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110DP1458&catalogIdentifier=SH110', 'filing supplies', 'images/13_bg.jpg'); prodArray[5] = new selectedProduct('s0238682', 'Light the way to a greener earth. Energy saver light bulbs use up to 75% less energy and last longer.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110DP1476&catalogIdentifier=SH110', 'light bulbs', 'images/15_bg.jpg'); prodArray[6] = new selectedProduct('s0214798', 'Add a little green to your 9 to 5 day. Recycled office supplies are the responsible way to go about your workday.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG1036&catalogIdentifier=SH110', 'office supplies', 'images/3_bg.jpg'); prodArray[7] = new selectedProduct('s0200255', 'Look for ENERGY STAR (r) qualified technology products to reduce energy use and save money.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG4&catalogIdentifier=SH110', 'monitors', 'images/2_bg.jpg'); prodArray[8] = new selectedProduct('s0203050', 'You won\'t notice a difference, but the environment will. Recycled Post-it\u00AE notes stick securely to more surfaces than most other notes.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG25&catalogIdentifier=SH110', 'Post-it notes', 'images/1_bg.jpg'); prodArray[9] = new selectedProduct('s0202176', 'Get organized the green way. Store all your important files in recycled storage boxes.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG30&catalogIdentifier=SH110', 'storage', 'images/5_bg.jpg'); prodArray[10] = new selectedProduct('s0204837', 'Clean your dishes and the earth. This natural dish soap is nontoxic, biodegradable and hypoallergenic.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG8&catalogIdentifier=SH110', 'cleaning products', 'images/10_bg.jpg'); prodArray[11] = new selectedProduct('s0105003', 'Whether they\'re refillable, non-toxic, or made from recycled content, these eco-friendly pens, pencils and highlighters let you write in good conscience.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG11&catalogIdentifier=SH110', 'writing supplies', 'images/11_bg.jpg'); prodArray[12] = new selectedProduct('s0067089', 'Pack it up and ship it out the responsible way with recycled mailing and shipping supplies.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG16&catalogIdentifier=SH110', 'mailing and shipping supplies', 'images/7_bg.jpg'); prodArray[13] = new selectedProduct('s0197688', 'The memo is out. Bulletin boards made from recycled content are one of our coolest new products!', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110CG101&catalogIdentifier=SH110', 'boards', 'images/4_bg.jpg'); prodArray[14] = new selectedProduct('s0281045', 'Greener surge protectors turn off peripherals automatically, saving you energy and money.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110SC3&catalogIdentifier=SH110', 'energy efficient products', 'images/0_bg.jpg'); prodArray[15] = new selectedProduct('s0166165', 'Whether you\'re doodling, jotting or crunching numbers, you can feel good about using recycled pads and notebooks.', 'http://www.staples.com/webapp/wcs/stores/servlet/StaplesCategoryDisplay?storeId=10001&identifier=SH110DP3775&catalogIdentifier=SH110', 'pads and notebooks', 'images/6_bg.jpg'); /* Runtime */ /* Functions */ //Initialize Options function initializeOptions() { container = document.getElementById('jkContDiv') createLayout(); } //Function to create the thb layout when the page loads function createLayout() { //Check to see if the container has child nodes and remove them if (container.hasChildNodes) { while (container.hasChildNodes()) { container.removeChild(container.firstChild); } } if (container.removeEventListener) { container.removeAttribute('style'); container.removeAttribute('class'); } else { container.style.backgroundImage = 'none'; container.style.width = '281px'; container.style.height = '281px'; container.removeAttribute('className'); } //Add a listener to the container container.addEventListener ? container.addEventListener("mouseup", myListener, false) : container.attachEvent('onmouseup', myListener); //Loop through the array and create a thumbnail for each line item in the array for (x = 0, y = 0; x < prodArray.length; x++, y++) { //Create a div to hold the thb var imgHolder = document.createElement('DIV'); imgHolder.addEventListener ? imgHolder.setAttribute('class', 'jkProdThb') : imgHolder.setAttribute('className', 'jkProdThbA'); //Remove border-right on every 4th div if (y == 3) { imgHolder.setAttribute('style', 'margin-right: -1px'); y = -1; } //Create thb img node and set attributes var imgNode = document.createElement('IMG'); imgNode.setAttribute('src', 'http://s7d5.scene7.com/is/image/Staples/' + prodArray[x].soNum + '_sc7?$thb$'); imgNode.setAttribute('width', '60'); imgNode.setAttribute('height', '60'); imgNode.setAttribute('style', 'padding-top: 4px;'); //Append the node to the holder imgHolder.appendChild(imgNode); //Access the main container div //Add the holder to the main container div container.appendChild(imgHolder); } } //Function to create the std callout function createCallout(num) { container.removeEventListener ? container.removeEventListener('mouseup', myListener, false) : container.detachEvent('onmouseup', myListener); if (container.hasChildNodes) { while (container.hasChildNodes()) { container.removeChild(container.firstChild); } } container.addEventListener ? container.setAttribute('class', 'jkProdStd') : container.setAttribute('className', 'jkProdStd'); //Create a div to hold the std if (container.removeEventListener) { container.setAttribute('style', 'background-image: url(' + prodArray[num].bg1 + '); background-repeat: no-repeat; width: 280px; height: 280px;'); } else { container.style.backgroundImage = 'url(' + prodArray[num].bg1 + ')'; container.style.width = '280px'; container.style.height = '280px'; } //Create a text node for the img text var imgTextPara = document.createElement('P'); imgTextPara.addEventListener ? imgTextPara.setAttribute('class', 'prodText') : imgTextPara.setAttribute('className', 'prodText'); var imgText = document.createTextNode(prodArray[num].text1); imgTextPara.appendChild(imgText); //Create p & anchor nodes for the img link var imgAnchor = document.createElement('A'); imgAnchor.setAttribute('href', prodArray[num].link1); var imgLink = document.createTextNode('View all ' + prodArray[num].cat1); imgAnchor.appendChild(imgLink); var imgAnchorPara = document.createElement('P'); imgAnchorPara.addEventListener ? imgAnchorPara.setAttribute('class', 'categoryLink') : imgAnchorPara.setAttribute('className', 'categoryLink'); imgAnchorPara.appendChild(imgAnchor); //Create a div to hold the close button var imgHolderClose = document.createElement('P'); imgHolderClose.addEventListener ? imgHolderClose.setAttribute('class', 'closex_bu') : imgHolderClose.setAttribute('className', 'closex_bu'); //Create the close x img node and set attributes var imgCloseX = document.createElement('IMG'); imgCloseX.setAttribute('src', 'images/closex_bu.gif'); imgCloseX.setAttribute('width', 81); imgCloseX.setAttribute('height', 12); imgCloseX.addEventListener ? imgCloseX.addEventListener('mouseup', createLayout, false) : imgCloseX.attachEvent('onmouseup', createLayout); imgHolderClose.appendChild(imgCloseX); //Append the text to the holder. container.appendChild(imgTextPara); //Append the anchor to the holder. container.appendChild(imgAnchorPara); //Append the close x div to the holder container.appendChild(imgHolderClose); } function myListener(event) { event.target ? eTarget = event.target : eTarget = event.srcElement; if (eTarget.nodeName == 'IMG') { for (x=0; x