(function(){

var awards =[{"id":"5048f75b57f0f3af076fb56d5fcba278","publication":"Techradar, 5 Stars","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/915969957713b59605dbdbeff89b2dd0\/images\/TR.jpeg","date":"2024-03-11","quote":"\u2026the first to combine maple with hemp to such good effect\u2026These are great-sounding headphones, with a list of sonic talents as long as your arm\u2026","link":"https:\/\/www.techradar.com\/audio\/headphones\/grado-hemp-review ","file":"","showsite":"Y","datef":"March 2024"},{"id":"7a9d5c992c3a93eb5555d8692af43f89","publication":"Forbes","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/915969957713b59605dbdbeff89b2dd0\/images\/forbes-logo-black-transparent.png","date":"2020-12-03","quote":"I simply can\u2019t fault the sound. These are some of the most musical and energetic headphones that I\u2019ve ever reviewed. The soundstage they create is as wide as the Grand Canyon and so immediate\u2026 Grado has scored with The Hemp Headphone Limited Edition. These are distinctive headphones both in terms of their looks and sound. The tone is beautifully crafted to bring out details in music without wrecking the rhythm or bassline in any way.","link":"https:\/\/www.forbes.com\/sites\/marksparrow\/2020\/12\/03\/brooklyns-grado-scores-with-the-limited-edition-hemp-headphone\/?sh=327e26f0252a","file":"","showsite":"Y","datef":"December 2020"},{"id":"641cd6d77c0b0590e815a20cfa9dd4ed","publication":"Hi-Fi Choice, 4.5 Stars, Recommended Award","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/915969957713b59605dbdbeff89b2dd0\/images\/Hi-Fi Choice Recommended logo.jpg","date":"2024-03-06","quote":"...it\u2019s the impeccable clarity and precision that really strikes me...The Hemp Headphone doesn\u2019t lack muscle either...the clarity and poise of the Hemp Headphone will certainly ensure that you enjoy your splendid isolation. ","link":"https:\/\/www.hifichoice.com\/content\/grado-hemp-headphones","file":"","showsite":"Y","datef":"March 2024"}]
var scriptElement=document.querySelector("[data-product='915969957713b59605dbdbeff89b2dd0']");

let div = document.createElement("div");
div.className="newawards";
let quotes=[];
let noquotes=[];
awards = awards.sort((a,b)=>{
    return a.date==b.date?0:a.date<b.date?1:-1;
});

for(let i=0;i<awards.length;i++){
    let link=awards[i].file!=""?awards[i].file:awards[i].link;
    if(link!="") link='href="'+link+'"';
    if(awards[i].quote!=""){
        let award = `<div class="awardwithquote">
        <div class="naward">
            <div><div class="nawardimage" style="background-image:url('`+awards[i].logourl+`')"></div><i class="awarddate">`+awards[i].datef+`</i></div>
            <div class="nawardquote"><p>"`+awards[i].quote+`"</p><a target="_blank" `+link+`>`+awards[i].publication+`</a></div>
        </div>
        </div>`;
        quotes.push(award);
    }else{
        let award = `<div class="awardnoquote">
        <div class="naward">
            <a target="_blank" `+link+` class="nawardimage" style="background-image:url('`+awards[i].logourl+`')"></a>
        </div>
        </div>`;
        noquotes.push(award);
    }
}
if(quotes.length>0){
    div.innerHTML+='<div class="nawardquotes">'+quotes.join("")+"</div>";
}
if(noquotes.length>0){
    div.innerHTML+='<div class="nrelative"><div class="nscrollleft"></div><div class="nscrollright"></div><div class="nnooverflow"><div class="nawardimages">'+noquotes.join("")+"</div></div></div>";
}

scriptElement.parentElement.insertBefore(div,scriptElement);

let styles=document.createElement("style");
styles.innerHTML=`
i.awarddate{
    display: block;
    text-align: center;
}
.newawards{
   padding: 0 30px;
   text-align: left;
}
.newawards p{
	width: auto;
}
.nawardimage{
    width: 100%;
    padding-top: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
}
.nawardquotes{
    display:grid;
    grid-template-columns: auto auto;
}
@media (max-width: 750px){
    .nawardquotes{
        grid-template-columns: 1fr;
    }
}
.awardwithquote .naward{
    display:grid;
    grid-template-columns: 1fr 3fr;
    align-items: flex-start;
}
.nawardquote{
    padding: 10px 20px;
    align-self: center;
}
.nawardquote p{
    margin: 0;padding: 0;
}
.nawardquote a{
    color: blue;
    text-deocration: none;
    font-weight: bold;
    text-decoration: none;
}
.awardnoquote{
    width: 150px;
    display: inline-block;
    height: 150px;
    padding: 0px 20px 0px 0px;
}
.nnooverflow{
    max-width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.nrelative{
    position: relative;
}
.nrelative .nscrollleft{
    position: absolute;
    left: 5px;
    top: 50px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px;
    width: 30px;
    height: 50px;
    z-index: 1;
}
.nrelative .nscrollleft:before{
    content: " ";
    position: absolute;
    top: 12px;
    left: 10px;
    transform: rotate(-45deg);
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    height: 20px;
    width: 20px;
}

.nrelative .nscrollright{
    position: absolute;
    right: 5px;
    top: 50px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px;
    width: 30px;
    height: 50px;
    z-index: 1;
}
.nrelative .nscrollright:before{
    content: " ";
    position: absolute;
    top: 12px;
    right: 10px;
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    height: 20px;
    width: 20px;
}
.nawardimages{
    white-space: nowrap;
}
`;
scriptElement.parentElement.insertBefore(styles,scriptElement);

var scrollarea=div.querySelector(".nnooverflow");
var scrollright = div.querySelector(".nscrollright");
var scrollleft= div.querySelector(".nscrollleft");
scrollright.onclick=function(){
    scrollarea.scrollTo({
        top: 0,
        left: scrollarea.scrollLeft+scrollarea.scrollWidth,
        behavior: 'smooth'
      });
}
scrollleft.onclick=function(){
    scrollarea.scrollTo({
        top: 0,
        left: scrollarea.scrollLeft-scrollarea.scrollWidth,
        behavior: 'smooth'
      });
}

let setupOverflow = function(){
    scrollright.style.display="none";
    scrollleft.style.display="none";
    if(scrollarea.offsetWidth<scrollarea.scrollWidth){
        scrollright.style.display="block";
        scrollleft.style.display="block";
    }
}
setupOverflow();
window.addEventListener("resize",setupOverflow)
})()