(function(){

var awards =[{"id":"09aa241386817820e35c5495eeba4acd","publication":"Expert Reviews, 5 Stars, Recommended","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/8c7222929accd38fdeae17ba70ffa076\/images\/Expert Reviews.png","date":"2020-12-07","quote":"Whether you\u2019re looking to put together a Hi-Fi system on a budget or simply don\u2019t have room for larger stand-mount or floor-standing speakers, the 3010i are unlikely to disappoint. These compact bookshelf speakers pack more sound per pound than you have any right to expect for the money.","link":"https:\/\/www.expertreviews.co.uk\/speakers\/1407400\/q-acoustics-3010i-review","file":"","showsite":"Y","datef":"December 2020"},{"id":"05e080aed3a3c596a9fdabc1f7a4968a","publication":"What Hi-Fi?, 5 Stars","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/8c7222929accd38fdeae17ba70ffa076\/images\/WHF_5 star logo.jpg","date":"2021-07-28","quote":"Exemplary budget bookshelf speakers for smaller living spaces","link":"https:\/\/www.whathifi.com\/q-acoustics\/3010i\/review","file":"","showsite":"Y","datef":"July 2021"},{"id":"7dd39ebdafb53e55257a729f56fa3d6f","publication":"BBC Music Magazine, Best Buy","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/8c7222929accd38fdeae17ba70ffa076\/images\/bbcmusic.jpg","date":"2021-07-28","quote":"The 3010i are incredibly sturdy and look great, sound superb and cost relative peanuts...Despite the compact size there's a richness to the sound and a fullness to the bass I wasn't expecting...Stunning","link":"","file":"","showsite":"Y","datef":"July 2021"},{"id":"efdba3a4305a8e0df631538984e0723d","publication":"Home Cinema Choice, 5 Stars, Best Buy","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/8c7222929accd38fdeae17ba70ffa076\/images\/HCC_best_buy_x2.jpg","date":"2021-07-28","quote":"The 3010i system is impressive all-round, from styling to surround delivery. An essential audition for those shopping for 5.1 below \u00a31,000.","link":"https:\/\/www.homecinemachoice.com\/content\/q-acoustics-3010i-51-cinema-pack-speaker-system-review-0","file":"","showsite":"Y","datef":"July 2021"}]
var scriptElement=document.querySelector("[data-product='8c7222929accd38fdeae17ba70ffa076']");

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