jQuery Prizm Cloud Plugin

Allows you to display the Prizm Cloud Viewer with clickable thumbnails which update the base viewer with a new document dynamically. Multiple viewers can be on the same page.

HTML

<div id="prizm-cloud-container">
    <div class="documents-for-switching" id="documents-for-switching"> 
        <a href="http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf" data-doc-link="http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf" class="doc-link active"><img src="http://prizmcloud.accusoft.com/img/pc-demo-pdf-thumb-1.gif" /></a>
     <a href="http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf" class="doc-link"><img src="http://prizmcloud.accusoft.com/img/pc-demo-pdf-thumb-3.gif" /></a>
    </div>
    <div class="prizm-cloud-viewer" id="prizm-cloud-viewer">
        <iframe id="viewerBox" width="460" height="630" frameborder="0" src="http://connect.ajaxdocumentviewer.com/?key=03232898832&viewertype=slideshow&document=http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf&viewerheight=600&viewerwidth=440&printButton=Yes"></iframe>
    </div>
</div>
<div id="prizmcloud-container-2">
    <div class="documents-for-switching" id="documents-for-switching">
        <a href="http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf" data-doc-link="http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf" class="doc-link">
            <img src="http://prizmcloud.accusoft.com/img/pc-demo-pdf-thumb-1.gif" /></a>
        <a href="http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf" class="doc-link active" data-doc-link="http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf">
            <img src="http://prizmcloud.accusoft.com/img/pc-demo-pdf-thumb-3.gif" /></a>
    </div>
    <div class="prizmcloud-viewer" id="prizm-cloud-viewer">
        <iframe id="viewerBox" width="480" height="620" frameborder="0" src="http://connect.ajaxdocumentviewer.com/?key=03232898832&viewertype=html5&document=http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf&viewerheight=600&viewerwidth=460&printButton=Yes&toolbarColor=CCCCCC&cache=yes"></iframe>
    </div>
</div>

CSS

.documents-for-switching a {
    display:block;
    float:left;
    margin:0 10px 10px;
    border:4px solid white;
}
.documents-for-switching a.active {
    border:4px solid #ddd;
}
.prizmcloud-viewer iframe {
     max-width:100%;
}

JavaScript

/*
 * jQuery plugin to display Prizm Cloud Document Viewer
 * with clickable thumbnails that dynamically update viewer
 * with new document, with a slideshow feature
 *
 * Plugin url: www.prizmcloud.com
 * Author: Accusoft
 * Author url: www.accusoft.com
 * Documentaion: http://www.prizmcloud.com/plugins/documentation/jquery.html
 * 
 * Structure example
 * <div with "your container id">
 *     <div "container for document links">
 *        <a href="http://path/to/document" class="doc-links"></a>
 *    </div>
 *    <div "container for viewer"></div>
 * </div>
 * script jQuery("your container id").prizmcloud({ key: "", viewerwidth: 650, viewerheight: 700 });
 */
(function ($) {
    $.fn.prizmcloud = function (options) {

        // extend default options.
        var opts = $.extend(true,{}, $.fn.prizmcloud.defaults, options);
        var base_url = "//connect.ajaxdocumentviewer.com/?key=";

        bindClicks(this);
        
        function bindClicks(obj) {
            var $docs_container = $(opts.documents_container);
            obj.children($docs_container).addClass('prizm-cloud-viewer-active');
            obj.children($docs_container).children('.doc-link').each(function () {

                $(this).on('click', function (e) {
                    e.preventDefault();
                    var $link = $(this),
                        docurl = "&document=",
                        rand_num = Math.floor(Math.random() * 11),
                        src_url = base_url + opts.key;
                    // don't reload active document
                    if(!$link.hasClass('active'))
                    {
                        $link.parent().find('.doc-link').removeClass('active');
                        $link.addClass('active');

                        if($link.data('doc-link') !== undefined) 
                        {
                            docurl += $link.data('doc-link');
                        }
                        else if($link.attr('href') !==...