(function(){

var awards =[{"id":"cfe4d0aa4bed8907ba0b160cf07f50a1","publication":"What Hi-Fi?, Awards 2020, Best Speaker Package \u00a3500-\u00a31000","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/20709dbcedf71d777d8ccc0edf7cffcb\/images\/Best speaker package s\u0301500-s\u03011000-jpg.jpg","date":"2021-07-29","quote":"...it\u2019s hard to find fault with the Q Acoustics 3010i 5.1 Cinema Pack in either aesthetic or sonic terms. Whether as a stereo pair or as a full surround sound package like this one (for anyone after an affordable and entertaining home cinema speaker set-up), we can highly recommend the 3000i series.","link":"https:\/\/www.whathifi.com\/q-acoustics\/3010i-51-cinema-pack\/review","file":"","showsite":"Y","datef":"July 2021"},{"id":"309ee1e468238690767d82dfeb900dc9","publication":"What Hi-Fi?, Awards 2019, Best Speaker Package \u00a3500-\u00a31000","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/20709dbcedf71d777d8ccc0edf7cffcb\/images\/BB_SpeakerPackages_QAcoustics3010i-small (1).jpg","date":"2021-07-29","quote":"With five speakers and the sub wired and ready to go, the package provides a convincing surround sound presentation that, like its predecessor, is bags of fun to listen to. That\u2019s not surprising, considering the front and rear channels are made up of speakers we called \u201crhythmically entertaining\u201d as a stereo pair.","link":"https:\/\/www.whathifi.com\/q-acoustics\/3010i-51-cinema-pack\/review","file":"","showsite":"Y","datef":"July 2021"},{"id":"7b5b7b85fad0e029ed294ec7e1f53bb8","publication":"What Hi-Fi?, Awards 2018, Best Speaker Package \u00a3500-\u00a31000","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/20709dbcedf71d777d8ccc0edf7cffcb\/images\/BB_SpeakerPackages_QAcoustics3010i-jpg.jpg","date":"2021-07-29","quote":"It\u2019s all backed up by decent scale and spaciousness \u2013 winning traits for home cinema set-ups, of course \u2013 as well as tight integration between the speakers. Placed around our AV testing room, they manage to deliver a gapless, busy-yet-coherent soundfield.","link":"https:\/\/www.whathifi.com\/q-acoustics\/3010i-51-cinema-pack\/review","file":"","showsite":"Y","datef":"July 2021"},{"id":"52427a53a42f8a244f5a1dfea2b2f0b6","publication":"Home Cinema Choice, 5 Stars, Best Buy","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/20709dbcedf71d777d8ccc0edf7cffcb\/images\/HCC_best_buy_x2.jpg","date":"2021-07-29","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"},{"id":"f033893e907b61b773c5cb5239fa552f","publication":"The Independent, Indy Best Buy","logourl":"https:\/\/secure.armourhome.co.uk\/awards\/resize\/200x200\/20709dbcedf71d777d8ccc0edf7cffcb\/images\/The-Independent-logo.png","date":"2021-08-16","quote":"The 3010i cinema pack from Q Acoustics has everything you need to produce a faithful, detailed cinema sound in your front room. For the small real estate this system actually takes up, the sound is phenomenal\u2026The cinema pack fills any mid-sized room, and most above, with a sophisticated soundscape, no matter the task.","link":"https:\/\/www.independent.co.uk\/extras\/indybest\/gadgets-tech\/audio\/best-surround-sound-system-b1878979.html","file":"","showsite":"Y","datef":"August 2021"}]
var scriptElement=document.querySelector("[data-product='20709dbcedf71d777d8ccc0edf7cffcb']");

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