var stCss = document.createElement("link");
stCss.setAttribute("rel", "stylesheet");
stCss.setAttribute("type", "text/css");
stCss.setAttribute("href", "https://myshopifyapps.com/simple-testimonials/flat-ui/css/fonts.css");
document.getElementsByTagName("head")[0].appendChild(stCss);

var stCss = document.createElement("link");
stCss.setAttribute("rel", "stylesheet");
stCss.setAttribute("type", "text/css");
    stCss.setAttribute("href", "https://myshopifyapps.com/simple-testimonials/css/st-grid.css");
document.getElementsByTagName("head")[0].appendChild(stCss);


var stWidget = `
<div id="st-widget"
    style="float:left; margin: 10px auto 30px auto;">
    <div class="st-title"><h2>Testimonials</h2></div>
    <div class="st-subtitle">
        <a href="/apps/testimonials?action=new">Share your testimonial</a>
    </div>
                    <div class="st-block" id="st-block-1" >
                                            <div class="st-block-image" style="background-image: url(https://etechfocus.s3.amazonaws.com/simple-testmonials/204/d7bba07fab68768e033664d91d80852d.png);"></div>
                                        <div class="st-block-title">
                        <a href="/apps/testimonials?action=view&id=3126">
                            Niswonger Children&#039;s Hospital                        </a>
                    </div>
                    <div class="st-block-body">“ Thank you for your help (and gentle nudging) throughout this process. Working with Soft Stuff Creations has made these bears affordable again, and has allowed our Scrubs Bear program for our children’s hospital patients to remain viable. ”</div>
                    <div class="st-block-submitter">Joanna Swinehart</div>
                </div>
                            <div class="st-block" id="st-block-2" style="display:none;">
                                            <div class="st-block-image" style="background-image: url(https://etechfocus.s3.amazonaws.com/simple-testmonials/204/033fb9209662eaa771496bf1a60de8de.jpg);"></div>
                                        <div class="st-block-title">
                        <a href="/apps/testimonials?action=view&id=3127">
                            Pip, Life 100.3                        </a>
                    </div>
                    <div class="st-block-body">“ We are very happy with them, they look great and even the tags look awesome. We couldn’t have asked for better product! ”</div>
                    <div class="st-block-submitter">Life 100.3</div>
                </div>
                            <div class="st-block" id="st-block-3" style="display:none;">
                                            <div class="st-block-image" style="background-image: url(https://etechfocus.s3.amazonaws.com/simple-testmonials/204/ca0f87628632ecf08c448d85d5639df1.png);"></div>
                                        <div class="st-block-title">
                        <a href="/apps/testimonials?action=view&id=3128">
                            GHS Strings                        </a>
                    </div>
                    <div class="st-block-body">“ We had a marketing firm even come up and tell us they thought that he was the best promotional item of the show. How about that?
Thank you so much for all your help with it, we truly appreciate it! ”</div>
                    <div class="st-block-submitter"> Jon Moody, GHS Strings</div>
                </div>
                            <div class="st-block" id="st-block-4" style="display:none;">
                                            <div class="st-block-image" style="background-image: url(https://etechfocus.s3.amazonaws.com/simple-testmonials/204/e172a4b33ad9295e9204eaf782d40eac.jpg);"></div>
                                        <div class="st-block-title">
                        <a href="/apps/testimonials?action=view&id=3129">
                            Bixby the Beverly Hills Bear                        </a>
                    </div>
                    <div class="st-block-body">Bixby arrived and is even more adorable than we imagined!</div>
                    <div class="st-block-submitter">Lisa</div>
                </div>
                            <div class="st-block" id="st-block-5" style="display:none;">
                                            <div class="st-block-image" style="background-image: url(https://etechfocus.s3.amazonaws.com/simple-testmonials/204/5dd9a7dc7b0283d7bf23a03c8ed0ccc8.jpg);"></div>
                                        <div class="st-block-title">
                        <a href="/apps/testimonials?action=view&id=3181">
                            Mavis Pearl Dog                        </a>
                    </div>
                    <div class="st-block-body">I just wanted you to see where your sweet stuffed Mavis Pearl dogs are going!  Thank you for all of your help as well!  We hand make every item that goes on these dogs, and they are each unique and special.  I know many times you have no idea where your little stuffed animals end up.  I wanted you to see where these are going :)

Thank you ladies!  It&#039;s a joy working with you! </div>
                    <div class="st-block-submitter">?</div>
                </div>
                            <div class="st-block" id="st-block-6" style="display:none;">
                                            <div class="st-block-image" style="background-image: url(https://etechfocus.s3.amazonaws.com/simple-testmonials/204/a9d7d76c4066a2dc315d392af75a74d1.jpg);"></div>
                                        <div class="st-block-title">
                        <a href="/apps/testimonials?action=view&id=3183">
                            Aventura                        </a>
                    </div>
                    <div class="st-block-body">We received them and handed them out to everyone in the company. They loved them! Thanks for your good work.</div>
                    <div class="st-block-submitter">Catherine</div>
                </div>
            
            <nav class="st-widget-nav">
                <ul class="st-widget-pager">
                    <li class="st-widget-previous">
                        <a href="#" id="st-prev"><span aria-hidden="true">←</span> Prev</a>
                    </li>
                    <li class="st-widget-next">
                        <a href="#" id="st-next">Next <span aria-hidden="true">→</span></a>
                    </li>
                </ul>
            </nav>
        </div>
`;
var stElem = '';
var stCurrent = 1;
var stLimit = 6;

$(function(){
    stElem = $('#simple-testimonial-widget');

    if (stElem.length) {
        stInit();
    }

    $('#st-prev').click(function(event){
        event.preventDefault();
        stPrev();
    });

    $('#st-next').click(function(event){
        event.preventDefault();
        stNext();
    });
});

function stInit()
{
    $(stElem).html(stWidget);
}

function stAnimate(from, to)
{
    $('#st-block-'+from).fadeOut(function(){
        $('#st-block-'+to).fadeIn();
    });
}

function stPrev()
{
    if (stCurrent!=1) {
        stAnimate(stCurrent, stCurrent-1);
        stCurrent--;
    } else {
        stAnimate(stCurrent, stLimit);
        stCurrent = stLimit;
    }
}

function stNext()
{
    if (stCurrent!=stLimit) {
        stAnimate(stCurrent, stCurrent+1);
        stCurrent++;
    } else {
        stAnimate(stCurrent, 1);
        stCurrent = 1;
    }
}