(function(){

var awards =[{"id":"9682fad9e035f762af1fdc6602bef1e1","publication":"Hi-Fi World, 5 Globes, September 2022 issue","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/b03affdfa5035a4300a6ffe3b07ded93\/images\/Hi-Fi World 5 Globe logo.jpg","date":"2022-09-13","quote":"An IEC mains lead with audible benefits that doesn't cost the earth\u2026Outstanding \u2013 Amongst the best.","link":"","file":"https:\/\/secure.armourhome.co.uk\/awards\/products\/b03affdfa5035a4300a6ffe3b07ded93\/files\/Hi-Fi World - XT3.pdf","showsite":"Y","datef":"September 2022"},{"id":"e2cfdeb76ba3f6d9da97666f37a61939","publication":"The Audiophile Man, Groovy Award","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/b03affdfa5035a4300a6ffe3b07ded93\/images\/The Audiophile Man - 8:10 Groovy Award.jpg","date":"2022-11-28","quote":"...the improvements over the basic, default kettle-type cable are real and impressive. If you run such cabling on your HiFi then please consider an upgrade for each component sullied with the dratted things. And if you decide to go with the XT3 as a source of sonic solace then your hifi and your ears will thank you for it. ","link":"https:\/\/theaudiophileman.com\/xt3-mains-cable-from-qed\/","file":"","showsite":"Y","datef":"November 2022"},{"id":"215d7aa01b281109b23c4f6fa9091529","publication":"Hi-Fi Choice, 5 Stars, Recommended Award","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/b03affdfa5035a4300a6ffe3b07ded93\/images\/HFC_Recommend_badge_new.jpg","date":"2022-09-05","quote":"The modestly priced XT3 really does seem to free up my equipment to operate at its best","link":"","file":"https:\/\/secure.armourhome.co.uk\/awards\/products\/b03affdfa5035a4300a6ffe3b07ded93\/files\/Hi-Fi Choice QED XT3 review.pdf","showsite":"Y","datef":"September 2022"}]
var scriptElement=document.querySelector("[data-product='b03affdfa5035a4300a6ffe3b07ded93']");

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