if(typeof $j == 'undefined'){
  var $j = jQuery.noConflict();
}

function loadPortaitBanner(attach) {
    $j.ajaxSetup({ cache: true });

// get list of comics from json file
$j.getJSON("https://spiderforest.com/widgets/comicsJSON.php?g="+pBannerRatedG+"&id="+pBannerComicCode+"&jsoncallback=?",
        function(data){
            if (pBannerRatedG == 1) {
                data = data.filter((i)=>(i.Rating != "M" && i.Rating != "A"));
            }
            var ranNum=Math.floor(Math.random()*data.length);

            var d= 1;
            if(d % 4 == 0){
                var banners = new Array();
                var dataLink = "https://spiderforest.com/";
                // reset ranNum
                var ranNum = Math.floor(Math.random() * banners.length);
                var img = $j("#rancomicimg").attr("src",banners[ranNum]);
                $j("#rancomicurl").attr("href",dataLink);
            } else {
                var ranComic = data[ranNum];
                if (ranComic.Short_Code == pBannerComicCode){
                    while (ranComic.Short_Code == pBannerComicCode){
                        ranNum=Math.floor(Math.random()*data.length);
						ranComic=data[ranNum];
                    }
                }
                
                var bannerImgPath = ranComic.Portrait_Banner_Image;
                if (bannerImgPath.charAt(0) === '/') {
                    bannerImgPath = 'https://spiderforest.com'+bannerImgPath;
                }
                
                var img = $j("#portrancomicimg").attr({src: bannerImgPath, alt: ranComic.Title});
                $j("#portrancomicurl").attr({href: ranComic.URL, title: ranComic.Title+": "+ranComic.Tagline});
            }
});

var pBannerStyles = '<style>'+
'article#sf-banner-portrait {width:160px;height:250px;padding:0;margin:0 auto;}'+
'.portbanDiv {position:relative;width:160px;height:250px;top:0;left:0;margin:0 auto;z-index:1001;'+
    'background-color:#807284;background-image:url("https://spiderforest.com/widgets/images/loading_circle.gif");background-repeat:no-repeat;background-position:center center;}'+
'#portrancomicurl {position:absolute;top:0;left:0;right:0;height:83%;width:100%;z-index:1003;}'+
'#portbanner-sflink {position:absolute;bottom:0;left:0;right:0;height:17%;width:100%;z-index:1003;}'+
'.portban-overlay {position:absolute;top:0;left:0;z-index:1002;}'+
'img#portrancomicimg {position:relative;top:0;z-index:1001}'+
'</style>';

var pBannerHTML = '<div class="portbanDiv">'+

// random comic URL populates here
'<a id="portrancomicurl" href="" target="_blank" tabindex="0" title=""></a>'+

// sf link
'<a id="portbanner-sflink" href="https://spiderforest.com" target="_blank" tabindex="0" title="Go to SpiderForest: Webcomic Collective"></a>'+

//overlay image
'<img class="portban-overlay" src="https://spiderforest.com/widgets/images/160x250_banner.png">'+

// random comic portrait populates here
'<img id="portrancomicimg" src="">'+

'</div>';

// append styles to 'head' element
    $j("<style type='text/css'/>").text(pBannerStyles).appendTo("head");

    //add sf_header
    if (attach) {
        $j('<article id="sf-banner-portrait"/>').append(pBannerHTML).appendTo(tBannerAttachElem);
    } else {
        document.writeln('<article id="sf-banner-portrait">'+pBannerHTML+'</article>');
    }
};

if (pBannerReadyLoad) {
    $j(document).ready(loadPortaitBanner(pBannerAttachElem));
} else {
    loadPortaitBanner(pBannerAttachElem);
}