/upstream/templates/covers/change.tmpl
Type: /type/template
body: value: $def with (doc, cover_selector=".bookCover img")

$if doc.type.key == '/type/author':
    $ add_url = doc.url('/add-photo')
    $ manage_url = doc.url('/manage-photos')
    $ title = "Author Photos"
    $if doc.get_photo():
        $ change = "Manage Author Photos"
        $ size = "smaller"        
    $else:
        $ change = "Add Author Photo"
        $ size = "smallest"
$else:
    $ add_url = doc.url('/add-cover')
    $ manage_url = doc.url('/manage-covers')
    $ title = "Book Covers"
    
    $if doc.get_cover():
        $ change = "Manage Covers"
        $ size = "smaller"
    $else:
        $ change = "Add Cover Image"
        $ size = "smallest"
    
<script type="text/javascript">
<!--
\$().ready(function(){
    if(jQuery.support.opacity){
        \$("#tabsImages").tabs({fx:{opacity:'toggle'}});
    } else {
        \$("#tabsImages").tabs();
    };
});

function update_image(image) {
    var url;
    
    $if doc.type.key in ["/type/edition", "/type/work", "/edit"]:
        if (image) {
            url = "$get_coverstore_url()/b/id/" + image + "-M.jpg";
            // XXX-Anand: Fix this hack
            // set url and show SRPCover  and hide SRPCoverBlank 
            \$("$cover_selector").attr('src', url)
                .parents("div:first").show()
                .next().hide();
        }
        else {
            // hide SRPCover and show SRPCoverBlank
            \$("$cover_selector")
                .parents("div:first").hide()
                .next().show();
        }
    $else:
        if (image) {
            url = "$get_coverstore_url()/a/id/" + image + "-M.jpg";
        }
        else {
            url = "/images/icons/avatar_author-lg.png";
        }
        \$("$cover_selector").attr('src', url);
}

\$().ready(function(){
    function add_iframe(selector, src) {
        \$(selector)
            .append('<iframe frameborder="0" height="530" width="580" marginheight="0" marginwidth="0" scrolling="auto"></iframe>')
            .find('iframe')
            .attr("src", src);
    }
    
    // Add iframes lazily when the popup is loaded.
    // This avoids fetching the iframes along with main page.
    \$(".coverPop").colorbox({inline: true, opacity: "0.5", href: "#addImage"})
        .bind("click", function() {
            $if doc.type.key == "/type/work":
                \$('#imagesAdd').prepend('<div id="throbber"><h3>$_("One sec, we\'re searching for covers...")</h3></div>');
            setTimeout(function() {
                // add iframe to add images
                add_iframe("#imagesAdd", "$:add_url");
                // add iframe to manage images
                add_iframe("#imagesManage", "$:manage_url");
            }, 0);
        })
        .bind("cbox_cleanup", function(){
            \$("#imagesAdd").html("");
            \$("#imagesManage").html("");
        });
    // Add function to close throbber
    closeThrobber = function() {\$("#throbber").customFadeOut();};
    // Open larger cover image
    \$(".coverLook").colorbox({inline: true, opacity:"0.5", href: "#seeImage"});
});
//-->
</script>

<div class="$size sansserif" style="margin-top:5px;"><a href="#addImage" class="coverPop">$change</a></div>

<div class="hidden">
    <div class="floater" id="addImage">
        <div class="floaterHead">
            <h2>$title</h2>
            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">$_("Close")</span></a>
        </div>

        <div id="tabsImages" class="tabs tabsPop">
            <ul>
                <li><a href="#imagesAdd">Add</a></li>
                <li><a href="#imagesManage">Manage</a></li>
            </ul>

            <div id="imagesAdd">
                $# add image iframe is added here when the popup is loaded
            </div>

            <div id="imagesManage">
                $# manage images iframe is added here when the popup is loaded
            </div>
        </div>
    </div>
</div>
title: Covers pop-up trigger
plugin: upstream