(function(){

var awards =[{"id":"cc366b11fe9a931bdcb8c861bbc6c152","publication":"AVForums, Highly Recommended Award","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/cad8075840b185c93ed27bfa45d0c5d9\/images\/AVForums-logo.png","date":"2022-06-20","quote":"The reason why Grado persists in doing what it does is that the result is two drivers in free space, utterly free of mechanical transfer. It is a listening experience unlike almost anything else at the price and if you fall for it, very little else will do.","link":"https:\/\/www.avforums.com\/reviews\/grado-rs1x-headphone-review.19855\/","file":"","showsite":"Y","datef":"June 2022"},{"id":"ded953c3505740697ba16805ffa1584b","publication":"Hi-Fi Choice, 5 Stars, Recommended Award","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/cad8075840b185c93ed27bfa45d0c5d9\/images\/HFC_Recommend_badge_new.jpg","date":"2023-01-23","quote":"What results is still very much a Grado, but one that combines effortless space and three dimensionality with a newfound level of drive and attack, all encased in a more compact and comfortable design. The RS1x might look like more of the same, but the result is a startlingly capable home headphone that will win many new converts to the brand.","link":"","file":"https:\/\/secure.armourhome.co.uk\/awards\/products\/cad8075840b185c93ed27bfa45d0c5d9\/files\/Hi-Fi Choice, February 2023.pdf","showsite":"Y","datef":"January 2023"},{"id":"28b449f7b3349f87c7448e378bab8a8a","publication":"What Hi-Fi? 5 Stars","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/cad8075840b185c93ed27bfa45d0c5d9\/images\/whf5star.jpg","date":"2022-08-15","quote":"...the RS1x are very much up there with the most compelling pairs around at this price...Four generations in, the top Reference Series model is more entertaining (and exotic) than ever before","link":"https:\/\/www.whathifi.com\/reviews\/grado-rs1x","file":"","showsite":"Y","datef":"August 2022"}]
var scriptElement=document.querySelector("[data-product='cad8075840b185c93ed27bfa45d0c5d9']");

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)
})()