(function(){

output=`
 <style>
            .caawards{
                background-color: #fff;
                color: #000;
                padding: 20px;
            }
            .canav{
                font-size: 20px;
                padding-left: 20px;
            }
            .nabuttons{
                border: 1px solid #000;
                border-radius: 20px;
                display: inline-block;
                margin-left: 20px;
            }
            .nabuttons button{
                border: 0;
                background-color: transparent;
                color: #000;
                font-size: 20px;
                padding: 10px;
            }
            .calayout{
                display: grid;
                grid-template-columns: 1fr 250px;
                min-height: 200px;
                padding: 20px;
                gap: 20px;
            }
            .caquote{
                font-size: 32px;
                align-self: center;
                padding: 20px;
                transition: all 0.5s ease;
                opacity: 0;
                font-weight: 100;
            }
            .caquote a{
                text-decoration: none;
                font-size: 16px;
                font-weight: bold;
                color: #000;
                display: block;
                padding-top: 5px;
            }
            .calayout.hide .caquote{
                opacity: 0;
                transform: translate(-100%, 0);
            }
            .calayout.show .caquote{
                opacity: 1;
                transform: translate(0, 0);
            }
            .calogo{
                align-self: center;
                transition: all 0.5s ease;
                background-color: #fff;
                padding: 15px;
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .calogo img{
                object-fit: contain;
                width: 200px;
                height: 200px;
            }
            .calayout.hide .calogo{
                opacity: 0;
            }
            .calayout.show .calogo{
                opacity: 1;
            }
            .capages{
                display: flex;
                gap: 10px;
                width: 100%;
                padding: 20px;
                box-sizing: border-box;
            }
            .capages > div {
                background-color: #888;
                width: 100%;
                /*border-radius: 10px;*/
                overflow: hidden;
            }
            .capages > div div{
                width: 0;
                height: 10px;
                background-color: #000;
            }
            
            .capages > div.active div{
                animation: growWidth 7s forwards;
            }
            @keyframes growWidth {
                from {
                    width: 0%;
                }
                to {
                    width: 100%;
                }
            }
            @media (max-width: 900px){
                .caquote{
                    font-size: 24px;
                }
                .calayout{
                    grid-template-columns: 1fr;
                }
                
                .calayout .caquote{
                    order: 2;
                }
            }

        </style>
        <div class="caawards">
            <div class="canav">
                <span id="capage">1</span> of <span id="catotal">4</span> <div class="nabuttons"><button id="caleft">&lt;</button><button id="caright">&gt;</button></div>
            </div>
            <div class="calayout hide">
                <div class="caquote">
                    
                </div>
                <div class="calogo">
                    <a><img src=""></a>
                </div>
            </div>
            <div class="capages">
            </div>
        </div>
`

var scriptElement=document.querySelector("[data-productscroll='4e4276876ad5e444e3b9af47a89062d3']");
var div=document.createElement("div");
div.innerHTML=output;
div.style.width="100%";
scriptElement.parentElement.insertBefore(div,scriptElement);


const AWARDS = [
            [`The 3040c feels like the right speaker at the right time. It is proportionally elegant, well made and attractive and it delivers a massive chunk of the 3050c's performance in a more forgiving and room friendly box. The result is a very fine, small floorstander indeed and one that should be on any shortlist at the price.`,'https://secure.armourhome.co.uk/awards/resize/300x300/4e4276876ad5e444e3b9af47a89062d3/images/Q-Acoustics-3040c.png','https://www.avforums.com/reviews/q-acoustics-3040c-floorstanding-speaker-review.23735/',`<a href="https://www.avforums.com/reviews/q-acoustics-3040c-floorstanding-speaker-review.23735/">AVForums, Highly Recommended Award</a>`],
        ];
let totalPages = AWARDS.length;

let caPages = document.querySelector(".capages")
for(let i=0; i < totalPages; i++){
    let page = document.createElement("div");
    page.appendChild(document.createElement("div"));
    let idx = i;
    page.onclick=()=>{ setCurrentPage(idx); clearInterval(timer); }
    caPages.appendChild(page);
}
document.getElementById("catotal").innerHTML=totalPages;

let currentPage=0;

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

function setCurrentPage(page){
    document.getElementById("capage").innerHTML=page+1;
    let pages = document.querySelectorAll(".capages > div");
    pages[currentPage].classList.remove("active");
    currentPage = page;
    pages[currentPage].classList.add("active");
    let calyout = document.querySelector(".calayout");
    calyout.classList.add("hide");
    calyout.classList.remove("show");
    setTimeout(()=>{
        document.querySelector(".caquote").innerHTML='"'+AWARDS[currentPage][0]+'"'+AWARDS[currentPage][3];
        document.querySelector(".calogo img").src=AWARDS[currentPage][1];
        document.querySelector(".calogo a").href=AWARDS[currentPage][2];
        calyout.classList.add("show");
        calyout.classList.remove("hide");
    },500)
}

function nextPage(){
    setCurrentPage((currentPage+1)%totalPages)
}
function prevPage(){
    setCurrentPage((currentPage+totalPages-1)%totalPages)
}

let timer = setInterval(()=>{
    let caawards=document.querySelector(".caawards");
    if(!isElementInViewport(caawards)) return;
    nextPage();
},7000);

document.getElementById("caleft").onclick=()=>{
    clearInterval(timer);
    prevPage();
};

document.getElementById("caright").onclick=()=>{
    clearInterval(timer);
    nextPage();
};

setCurrentPage(currentPage);

})()