Show
Ignore:
Timestamp:
02.03.2012 12:54:33 (8 years ago)
Author:
sjm84
Message:

Some major upgrades to the document view

Location:
main/trunk/greenstone3/web/interfaces/oran
Files:
1 added
4 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/oran/js/document_scripts.js

    r25143 r25177  
    157157function setImageVisible(visible) 
    158158{ 
    159     var image = document.getElementById("gs-document-image"); 
    160     if(visible) 
    161     { 
    162         image.setAttribute("class", image.getAttribute("class").replace(/\bhidden\b/g, "")); 
    163     } 
    164     else 
    165     { 
    166         if(image.getAttribute("class").search(/\bhidden\b/) == -1) 
    167         { 
    168             image.setAttribute("class", image.getAttribute("class") + " hidden"); 
     159    var divs = document.getElementsByTagName("DIV"); 
     160    var images = new Array(); 
     161    for (var i = 0; i < divs.length; i++) 
     162    { 
     163        if(divs[i].id && divs[i].id.search(/^image/) != -1) 
     164        { 
     165            images.push(divs[i]); 
     166        } 
     167    } 
     168     
     169    for(var i = 0; i < images.length; i++) 
     170    { 
     171        var image = images[i]; 
     172        if(visible) 
     173        { 
     174            image.style.display = "block"; 
     175        } 
     176        else 
     177        { 
     178            image.style.display = "none"; 
    169179        } 
    170180    } 
     
    173183function setTextVisible(visible) 
    174184{ 
    175     var text = document.getElementById("gs-document-text"); 
    176     if(visible) 
    177     { 
    178         text.setAttribute("class", text.getAttribute("class").replace(/\bhidden\b/g, "")); 
    179     } 
    180     else 
    181     { 
    182         if(text.getAttribute("class").search(/\bhidden\b/) == -1) 
    183         { 
    184             text.setAttribute("class", text.getAttribute("class") + " hidden"); 
     185    var divs = document.getElementsByTagName("DIV"); 
     186    var textDivs = new Array(); 
     187    for (var i = 0; i < divs.length; i++) 
     188    { 
     189        if(divs[i].id && divs[i].id.search(/^text/) != -1) 
     190        { 
     191            textDivs.push(divs[i]); 
     192        } 
     193    } 
     194 
     195    for(var i = 0; i < textDivs.length; i++) 
     196    { 
     197        var text = textDivs[i]; 
     198        if(visible) 
     199        { 
     200            text.style.display = "block"; 
     201        } 
     202        else 
     203        { 
     204            text.style.display = "none"; 
    185205        } 
    186206    } 
     
    198218            document.getElementById("contentsArea").innerHTML = document.getElementById("contentsArea").innerHTML + ajax.responseText; 
    199219            replaceLinksWithSlider(); 
     220            var loading = document.getElementById("tocLoadingImage"); 
     221            loading.parentNode.removeChild(loading); 
     222        } 
     223        else if(ajax.readyState == 4) 
     224        { 
     225            var loading = document.getElementById("tocLoadingImage"); 
     226            loading.parentNode.removeChild(loading); 
    200227        } 
    201228    } 
     
    253280    //The container for the widget 
    254281    var _mainDiv = document.createElement("DIV"); 
    255     _mainDiv.setAttribute("class", "pageSlider"); 
     282    _mainDiv.setAttribute("class", "ui-widget-content pageSlider"); 
    256283     
    257284    //The table of images 
     
    287314 
    288315        var href = page.getAttribute("href"); 
    289         //ajax.open("GET", href + "&excerptid=meta&dmd=true"); 
    290         var template = '<xsl:template match="/"><html><gsf:metadata name="thumbicon"/></html></xsl:template>'; 
     316        var template = ''; 
     317        template += '<xsl:template match="/">'; 
     318        template +=   '<html>'; 
     319        template +=     '<img>'; 
     320        template +=       '<xsl:attribute name="src">'; 
     321        template +=         "<xsl:value-of disable-output-escaping=\"yes\" select=\"/page/pageResponse/collection/metadataList/metadata[@name = 'httpPath']\"/>"; 
     322        template +=         '<xsl:text>/index/assoc/</xsl:text>'; 
     323        template +=         "<xsl:value-of disable-output-escaping=\"yes\" select=\"/page/pageResponse/document/metadataList/metadata[@name = 'assocfilepath']\"/>"; 
     324        template +=         '<xsl:text>/</xsl:text>'; 
     325        template +=         "<xsl:value-of disable-output-escaping=\"yes\" select=\"/page/pageResponse/document/documentNode/metadataList/metadata[@name = 'Thumb']\"/>"; 
     326        template +=       '</xsl:attribute>'; 
     327        template +=     '</img>'; 
     328        template +=   '</html>'; 
     329        template += '</xsl:template>'; 
    291330        ajax.open("GET", href + "&ilt=" + template.replace(" ", "%20")); 
    292331        ajax.onreadystatechange = function() 
     
    295334            { 
    296335                var text = ajax.responseText; 
    297  
    298                 var start = text.indexOf("<img", text); 
    299                 if(start == -1) 
     336                var hrefStart = text.indexOf("src=\"") + 5; 
     337                if(hrefStart == -1) 
    300338                { 
    301339                    page.isLoading = false; 
     
    304342                    return; 
    305343                } 
    306                 var end = text.indexOf(">", start) + 4; 
    307                  
    308                 var image = text.substring(start, end); 
    309                 image = image.replace("[parent(Top):assocfilepath]", gs.documentMetadata.assocfilepath); 
    310                 page.link.innerHTML = image; 
    311                  
    312                 page.isLoading = false; 
    313                 page.imageLoaded = true; 
     344                var hrefEnd = text.indexOf("\"", hrefStart); 
     345                var href = text.substring(hrefStart, hrefEnd); 
     346                console.log(href); 
     347                var image = document.createElement("IMG"); 
     348                $(image).load(function() 
     349                { 
     350                    page.link.innerHTML = ""; 
     351                    page.link.appendChild(image); 
     352                    page.isLoading = false; 
     353                    page.imageLoaded = true; 
     354                }); 
     355                $(image).error(function() 
     356                { 
     357                    page.isLoading = false; 
     358                    page.noImage = true; 
     359                    image.setAttribute("src", gs.imageURLs.blank); 
     360                }); 
     361                image.setAttribute("src", href); 
    314362            } 
    315363            else if (ajax.readyState == 4 && !page.failed) 
     
    549597    var newCell = document.createElement("TD"); 
    550598    newCell.setAttribute("style", "font-size:0.7em; padding:0px 10px"); 
     599     
     600    var linkSpan = document.createElement("SPAN"); 
     601    linkSpan.setAttribute("class", "ui-state-default ui-corner-all"); 
     602    linkSpan.setAttribute("style", "padding: 2px; float:left;"); 
     603     
     604    var linkLabel = document.createElement("SPAN"); 
     605    linkLabel.innerHTML = "edit metadata"; 
     606    var linkIcon = document.createElement("SPAN"); 
     607    linkIcon.setAttribute("class", "ui-icon ui-icon-folder-collapsed"); 
     608     
     609    var uList = document.createElement("UL"); 
     610    var labelItem = document.createElement("LI"); 
     611    var iconItem = document.createElement("LI"); 
     612    uList.appendChild(iconItem); 
     613    uList.appendChild(labelItem); 
     614    labelItem.appendChild(linkLabel); 
     615    iconItem.appendChild(linkIcon); 
     616     
     617    uList.setAttribute("style", "outline: 0 none; margin:0px; padding:0px;"); 
     618    labelItem.setAttribute("style", "float:left; list-style:none outside none;"); 
     619    iconItem.setAttribute("style", "float:left; list-style:none outside none;"); 
     620     
    551621    var newLink = document.createElement("A"); 
    552     newLink.innerHTML = "edit metadata"; 
    553622    newLink.setAttribute("href", "javascript:;"); 
    554623    newLink.onclick = function() 
     
    556625        if(metaTable.style.display == "none") 
    557626        { 
     627            linkLabel.innerHTML = "hide metadata"; 
     628            linkIcon.setAttribute("class", "ui-icon ui-icon-folder-open"); 
    558629            metaTable.style.display = "block"; 
    559630            metaTable.metaNameField.style.display = "inline"; 
     
    562633        else 
    563634        { 
     635            linkLabel.innerHTML = "edit metadata"; 
     636            linkIcon.setAttribute("class", "ui-icon ui-icon-folder-collapsed"); 
    564637            metaTable.style.display = "none"; 
    565638            metaTable.metaNameField.style.display = "none"; 
     
    567640        } 
    568641    } 
    569     newCell.appendChild(newLink); 
     642    newLink.appendChild(uList); 
     643    linkSpan.appendChild(newLink); 
     644    newCell.appendChild(linkSpan); 
    570645    row.appendChild(newCell); 
    571646     
  • main/trunk/greenstone3/web/interfaces/oran/transform/config_format.xsl

    r25145 r25177  
    5454                <xsl:choose> 
    5555                    <xsl:when test="@type = 'thumb'"> 
    56                         <xslt:value-of disable-output-escaping="yes" select=".//metadataList/metadata[@name = 'Thumb']"/> 
     56                        <xslt:value-of disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name = 'Thumb']"/> 
    5757                    </xsl:when> 
    5858                    <xsl:when test="@type = 'screen'"> 
    59                         <xslt:value-of disable-output-escaping="yes" select=".//metadataList/metadata[@name = 'Screen']"/> 
     59                        <xslt:value-of disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name = 'Screen']"/> 
    6060                    </xsl:when> 
    6161                    <xsl:when test="@type = 'source'"> 
    62                         <xslt:value-of disable-output-escaping="yes" select=".//metadataList/metadata[@name = 'SourceFile']"/> 
     62                        <xslt:value-of disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name = 'SourceFile']"/> 
    6363                    </xsl:when> 
    6464                </xsl:choose> 
     
    9292                <a><xslt:attribute name='href'><xslt:value-of  
    9393                   disable-output-escaping="yes" select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']" />/index/assoc/<xslt:value-of  
    94                    disable-output-escaping="yes" select="metadataList/metadata[@name='assocfilepath']" />/<xslt:value-of  
    95                    disable-output-escaping="yes" select="metadataList/metadata[@name='srclinkFile']" /></xslt:attribute> 
     94                   disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name='assocfilepath']" />/<xslt:value-of  
     95                   disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name='srclinkFile']" /></xslt:attribute> 
    9696                  <xsl:apply-templates/> 
    9797                </a> 
     
    179179                        <xsl:text>(</xsl:text> 
    180180                    </xsl:if> 
    181                     <xsl:text>.//metadataList/metadata[@name='</xsl:text> 
     181                    <xsl:text>(.//metadataList)[last()]/metadata[@name='</xsl:text> 
    182182                    <xsl:apply-templates select="." mode="get-metadata-name"/> 
    183183                    <xsl:text>']</xsl:text> 
     
    209209        <xslt:value-of disable-output-escaping="yes"> 
    210210            <xsl:attribute name="select"> 
    211                 <xsl:text>.//metadataList/metadata[@name="</xsl:text> 
     211                <xsl:text>(.//metadataList)[last()]/metadata[@name="</xsl:text> 
    212212                <xsl:choose> 
    213213                    <xsl:when test="@select='parent'"> 
     
    242242            <xsl:for-each select="gsf:metadata"> 
    243243                <xslt:when> 
    244                     <xsl:attribute name="test">.//metadataList/metadata[@name='<xsl:apply-templates select="." mode="get-metadata-name"/>']</xsl:attribute> 
     244                    <xsl:attribute name="test">(.//metadataList)[last()]/metadata[@name='<xsl:apply-templates select="." mode="get-metadata-name"/>']</xsl:attribute> 
    245245                    <xsl:apply-templates select="."/> 
    246246                </xslt:when> 
     
    254254    <xsl:template match="gsf:switch"> 
    255255        <xsl:variable name="meta-name"><xsl:apply-templates select="gsf:metadata" mode="get-metadata-name"/></xsl:variable> 
    256         <xslt:variable name="meta"><xsl:choose><xsl:when test="@preprocess"><xslt:value-of select="util:{@preprocess}(.//metadataList/metadata[@name='{$meta-name}'])"/></xsl:when><xsl:otherwise><xslt:value-of select=".//metadataList/metadata[@name='{$meta-name}']"/></xsl:otherwise></xsl:choose></xslt:variable> 
     256        <xslt:variable name="meta"><xsl:choose><xsl:when test="@preprocess"><xslt:value-of select="util:{@preprocess}((.//metadataList)[last()]/metadata[@name='{$meta-name}'])"/></xsl:when><xsl:otherwise><xslt:value-of select="(.//metadataList)[last()]/metadata[@name='{$meta-name}']"/></xsl:otherwise></xsl:choose></xslt:variable> 
    257257        <xslt:choose> 
    258258            <xsl:for-each select="gsf:when"> 
  • main/trunk/greenstone3/web/interfaces/oran/transform/layouts/header.xsl

    r25142 r25177  
    4444         
    4545        <script type="text/javascript" src="interfaces/{$interface_name}/js/direct-edit.js"><xsl:text> </xsl:text></script> 
     46        <script type="text/javascript" src="interfaces/{$interface_name}/js/zoomer.js"><xsl:text> </xsl:text></script> 
    4647         
    4748        <xsl:if test="/page/pageResponse/format[@type='display' or @type='browse' or @type='search']/gsf:option[@name='mapEnabled']/@value = 'true'"> 
     
    4950        </xsl:if> 
    5051         
    51         <xsl:call-template name="init-direct-edit"/> 
     52        <xsl:if test="/page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))"> 
     53            <xsl:call-template name="init-direct-edit"/> 
     54        </xsl:if> 
    5255        <xsl:call-template name="setup-gs-variable"/> 
    5356        <xsl:call-template name="additionalHeaderContent"/> 
  • main/trunk/greenstone3/web/interfaces/oran/transform/pages/document.xsl

    r25144 r25177  
    100100             
    101101            <div id="doc{@nodeID}" class="sectionContainer"><!-- *** --> 
    102                 <xsl:if test="/page/pageRequest/paramList/param[@name = 'documentbasket']/@value = 'on' and /page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))"> 
     102                <xsl:if test="/page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))"> 
    103103                    <table id="meta{@nodeID}"> 
    104104                        <xsl:attribute name="style"> 
     
    124124                    </table> 
    125125                </xsl:if> 
     126 
     127                <gsf:variable name="screenImageWidth"><gsf:metadata name="ScreenWidth"/></gsf:variable> 
     128                <gsf:variable name="screenImageHeight"><gsf:metadata name="ScreenHeight"/></gsf:variable> 
     129                <gsf:variable name="imageWidth"><gsf:metadata name="ImageWidth"/></gsf:variable> 
     130                <gsf:variable name="imageHeight"><gsf:metadata name="ImageHeight"/></gsf:variable> 
     131 
     132                <xsl:choose> 
     133                    <xsl:when test="metadataList/metadata[@name = 'Screen'] and metadataList/metadata[@name = 'Source'] and /page/pageRequest/paramList/param[@name = 'zoom']/@value = 'true'"> 
     134                        <div id="wrap{util:replace(@nodeID, '.', '_')}" class="zoomImage" style="position:relative; width: {$screenImageWidth}px; height: {$screenImageHeight}px;"> 
     135                            <div id="small{util:replace(@nodeID, '.', '_')}" style="position:relative; width: {$screenImageWidth}px; height: {$screenImageHeight}px;"> 
     136                                <gsf:image type="screen"/> 
     137                            </div> 
     138                            <div id="mover{util:replace(@nodeID, '.', '_')}" style="border: 1px solid green; position: absolute; top: 0; left: 0; width: 198px; height: 198px; overflow: hidden; z-index: 100; background: white; display: none;"> 
     139                                <div id="overlay{util:replace(@nodeID, '.', '_')}" style="width: 200px; height: 200px; position: absolute; top: 0; left: 0; z-index: 200;"> 
     140                                    <xsl:text> </xsl:text> 
     141                                </div> 
     142                                <div id="large{util:replace(@nodeID, '.', '_')}" style="position: relative;"> 
     143                                    <gsf:image type="source"/> 
     144                                </div> 
     145                            </div> 
     146                        </div> 
     147                        <script type="text/javascript"> 
     148                            <xsl:text disable-output-escaping="yes"> 
     149                                $(window).load(function() 
     150                                { 
     151                                    var nodeID = "</xsl:text><xsl:value-of select="@nodeID"/><xsl:text disable-output-escaping="yes">"; 
     152                                    var bigHeight = </xsl:text><xsl:value-of select="$imageHeight"/><xsl:text disable-output-escaping="yes">; 
     153                                    var smallHeight = </xsl:text><xsl:value-of select="$screenImageHeight"/><xsl:text disable-output-escaping="yes"> 
     154                                     
     155                                    nodeID = nodeID.replace(/\./g, "_"); 
     156                                    var multiplier = bigHeight / smallHeight; 
     157 
     158                                    $("#wrap" + nodeID).anythingZoomer({ 
     159                                        smallArea: "#small" + nodeID, 
     160                                        largeArea: "#large" + nodeID, 
     161                                        zoomPort: "#overlay" + nodeID, 
     162                                        mover: "#mover" + nodeID, 
     163                                        expansionSize:50,   
     164                                        speedMultiplier:multiplier    
     165                                    });  
     166                                }); 
     167                            </xsl:text> 
     168                        </script> 
     169                    </xsl:when> 
     170                    <xsl:when test="metadataList/metadata[@name = 'Screen']"> 
     171                        <div id="image{@nodeID}"> 
     172                            <xsl:attribute name="style"> 
     173                                <xsl:choose> 
     174                                    <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'"> 
     175                                        <xsl:text>display:none;</xsl:text> 
     176                                    </xsl:when> 
     177                                    <xsl:otherwise> 
     178                                        <xsl:text>display:block;</xsl:text> 
     179                                    </xsl:otherwise> 
     180                                </xsl:choose> 
     181                            </xsl:attribute> 
     182                            <gsf:image type="screen"/> 
     183                        </div> 
     184                    </xsl:when> 
     185                </xsl:choose> 
    126186                <div id="text{@nodeID}" class="sectionText"><!-- *** --> 
     187                    <xsl:attribute name="style"> 
     188                        <xsl:choose> 
     189                            <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'"> 
     190                                <xsl:text>display:none;</xsl:text> 
     191                            </xsl:when> 
     192                            <xsl:otherwise> 
     193                                <xsl:text>display:block;</xsl:text> 
     194                            </xsl:otherwise> 
     195                        </xsl:choose> 
     196                    </xsl:attribute> 
    127197                    <!-- Get the section content from the document template --> 
    128198                    <xsl:apply-templates select="." mode="document"/> 
     
    137207    <!-- the page content --> 
    138208    <xsl:template match="/page/pageResponse/document"> 
    139         <xsl:if test="/page/pageRequest/paramList/param[@name = 'documentbasket']/@value = 'on' and /page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))"> 
     209        <xsl:if test="/page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))"> 
    140210            <script type="text/javascript" src="interfaces/{$interface_name}/js/documentmaker_scripts.js"><xsl:text> </xsl:text></script> 
    141211            <script type="text/javascript" src="interfaces/{$interface_name}/js/documentmaker_scripts_util.js"><xsl:text> </xsl:text></script> 
     
    162232            <xsl:call-template name="documentBerryForDocumentPage"/> 
    163233             
    164             <xsl:if test="/page/pageRequest/paramList/param[@name = 'documentbasket']/@value = 'on' and /page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))"> 
     234            <xsl:if test="/page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))"> 
    165235                <table style="width:100%"><tr> 
    166236                    <td id="editBarLeft" style="width:70%"><xsl:text> </xsl:text></td> 
     
    205275                                    <script type="text/javascript"> 
    206276                                        <xsl:text disable-output-escaping="yes"> 
    207                                             retrieveTableOfContents(); 
     277                                            $(window).load(function() 
     278                                            { 
     279                                                retrieveTableOfContents(); 
     280                                            }); 
    208281                                        </xsl:text> 
    209282                                    </script> 
     283                                    <div id="tocLoadingImage" style="text-align:center;"> 
     284                                        <img src="{util:getInterfaceText($interface_name, /page/@lang, 'loading_image')}"/><xsl:text> loading...</xsl:text> 
     285                                    </div> 
    210286                                </xsl:when> 
    211287                                <xsl:otherwise> 
     
    260336            <xsl:otherwise> 
    261337                <div id="gs-document"> 
    262                     <div id="gs-document-image"> 
    263                         <xsl:attribute name="class"> 
    264                             <xsl:text>sectionImage</xsl:text> 
    265                             <xsl:if test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'"><xsl:text> hidden</xsl:text></xsl:if> 
    266                         </xsl:attribute> 
    267                         <!-- Get the section content from the document template --> 
    268                         <xsl:call-template name="documentImage"/> 
    269                         <xsl:text> </xsl:text> 
    270                     </div> 
    271                     <div id="gs-document-text" collection="{/page/pageResponse/collection/@name}"><!-- *** --> 
    272                         <xsl:attribute name="class"> 
    273                             <xsl:text>documenttext</xsl:text> 
    274                             <xsl:if test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'"><xsl:text> hidden</xsl:text></xsl:if> 
    275                         </xsl:attribute> 
     338                    <div id="gs-document-text" class="documenttext" collection="{/page/pageResponse/collection/@name}"><!-- *** --> 
    276339                        <xsl:call-template name="wrapDocumentNodes"/> 
    277340                    </div> 
     
    337400        <xsl:variable name="imageTest"><gsf:metadata name="ScreenWidth"/></xsl:variable> 
    338401        <xsl:if test="$imageTest != ''"> 
    339             <h3>    
     402            <h3> 
    340403                <gsf:choose-metadata> 
    341404                    <gsf:metadata name="dc.Title"/> 
     
    474537         
    475538            <!-- Paged-image options --> 
    476             <xsl:if test="/page/pageResponse/document/@docType = 'paged'"> 
    477                 <td> 
    478                     <select id="viewSelection" onchange="changeView();"> 
    479                         <xsl:choose> 
    480                             <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'"> 
    481                                 <option>Default view</option> 
    482                                 <option selected="true">Image view</option> 
    483                                 <option>Text view</option> 
    484                             </xsl:when> 
    485                             <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'"> 
    486                                 <option>Default view</option> 
    487                                 <option>Image view</option> 
    488                                 <option selected="true">Text view</option> 
    489                             </xsl:when> 
    490                             <xsl:otherwise> 
    491                                 <option selected="true">Default view</option> 
    492                                 <option>Image view</option> 
    493                                 <option>Text view</option> 
    494                             </xsl:otherwise> 
    495                         </xsl:choose> 
    496                     </select> 
    497                 </td> 
    498             </xsl:if> 
     539            <td> 
     540                <select id="viewSelection" onchange="changeView();"> 
     541                    <xsl:choose> 
     542                        <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'"> 
     543                            <option>Default view</option> 
     544                            <option selected="true">Image view</option> 
     545                            <option>Text view</option> 
     546                        </xsl:when> 
     547                        <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'"> 
     548                            <option>Default view</option> 
     549                            <option>Image view</option> 
     550                            <option selected="true">Text view</option> 
     551                        </xsl:when> 
     552                        <xsl:otherwise> 
     553                            <option selected="true">Default view</option> 
     554                            <option>Image view</option> 
     555                            <option>Text view</option> 
     556                        </xsl:otherwise> 
     557                    </xsl:choose> 
     558                </select> 
     559            </td> 
    499560         
    500561            <!-- Realistic books link -->