<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <title>JavaScript Sample</title>
        <link href="../common.css" rel="stylesheet" type="text/css"/>
        
        <link type="text/css" rel="stylesheet" href="general.css" />
        <link type="text/css" rel="stylesheet" href="table.css" />
        
        <script type="text/javascript" src="flotr2.min.js"></script>
        <script type="text/javascript" src="../awesomizr.js"></script>
        <script type="text/javascript" src="script.js"></script>
        
        <script type="text/javascript">
            function executeScripts() {
                // retrieve the data from the table
                getData(document.getElementById("table"));
                
                // calculate the total precipitation to the last column
                calculateTotal(document.getElementById("table"));
                
                // draw the graphs
                drawLines(document.getElementById("graphs").children[0]);
                drawBars(document.getElementById("graphs").children[1]);
                drawPie(document.getElementById("graphs").children[2]);
                
                // transform the table
                transformTable(document.getElementById("table"));
                
                // insert PDF pages as images
                insertPdfAsImages("resources/magazine.pdf");
            }
        </script> 
    </head>
    <body onload="executeScripts()">
        <h1>JavaScript Sample</h1>
        <p>This document shows precipitation values for several cities (taken from 
        the cities' respective Wikipedia articles). JavaScript is used to create graphs and 
        improve the look of the table.
        This sample includes several external style sheets and script files:</p>
        <ul>
            <li><em>script.js</em> Retrieves data from the HTML table, calculates totals and passes them to Flotr.</li>
            <li><em>flotr2.min.js</em> A popular Open Source JavaScript library to create graphs.</li>
            <li><em>awesomizr.js</em> A RealObjects-made JavaScript library used to transform table headers.</li>
            <li><em>style.css</em> Styles tables with advanced CSS3 properties and selectors.</li>
        </ul>
        <div id="graphs">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <table id="table" class="styled">
            <thead>
                <tr>
                    <td>City</td>
                    <td>January</td>
                    <td>February</td>
                    <td>March</td>
                    <td>April</td>
                    <td>May</td>
                    <td>June</td>
                    <td>July</td>
                    <td>August</td>
                    <td>September</td>
                    <td>October</td>
                    <td>November</td>
                    <td>December</td>
                    <td>Total</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>New York City</td>
                    <td>71.1</td>
                    <td>65.5</td>
                    <td>88.4</td>
                    <td>77.7</td>
                    <td>101.3</td>
                    <td>95.8</td>
                    <td>94.5</td>
                    <td>74.2</td>
                    <td>94.5</td>
                    <td>86.4</td>
                    <td>80.5</td>
                    <td>77.5</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Los Angeles</td>
                    <td>79.2</td>
                    <td>96.5</td>
                    <td>61.7</td>
                    <td>23.1</td>
                    <td>6.6</td>
                    <td>2.3</td>
                    <td>0.3</td>
                    <td>1</td>
                    <td>6.1</td>
                    <td>16.8</td>
                    <td>26.4</td>
                    <td>59.2</td>
                    <td></td>
                </tr>
                <tr>
                    <td>San Francisco</td>
                    <td>114.3</td>
                    <td>113</td>
                    <td>82.6</td>
                    <td>37.1</td>
                    <td>18</td>
                    <td>4.1</td>
                    <td>0</td>
                    <td>1.5</td>
                    <td>5.3</td>
                    <td>28.4</td>
                    <td>80.3</td>
                    <td>115.8</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Washington. D.C.</td>
                    <td>69.1</td>
                    <td>68.8</td>
                    <td>80.5</td>
                    <td>68.8</td>
                    <td>93.0</td>
                    <td>85.9</td>
                    <td>96.5</td>
                    <td>99.3</td>
                    <td>84.1</td>
                    <td>76.7</td>
                    <td>79.2</td>
                    <td>79.2</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Boston</td>
                    <td>85.3</td>
                    <td>82.6</td>
                    <td>109.7</td>
                    <td>95</td>
                    <td>88.4</td>
                    <td>93.5</td>
                    <td>87.1</td>
                    <td>83.6</td>
                    <td>87.4</td>
                    <td>100.1</td>
                    <td>101.3</td>
                    <td>96</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Berlin</td>
                    <td>42.3</td>
                    <td>33.3</td>
                    <td>40.5</td>
                    <td>37.1</td>
                    <td>53.8</td>
                    <td>68.7</td>
                    <td>55.5</td>
                    <td>58.2</td>
                    <td>45.1</td>
                    <td>37.3</td>
                    <td>43.6</td>
                    <td>55.3</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Stockholm</td>
                    <td>39</td>
                    <td>27</td>
                    <td>26</td>
                    <td>30</td>
                    <td>30</td>
                    <td>75</td>
                    <td>72</td>
                    <td>66</td>
                    <td>55</td>
                    <td>50</td>
                    <td>53</td>
                    <td>46</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Cape Town</td>
                    <td>15</td>
                    <td>17</td>
                    <td>20</td>
                    <td>41</td>
                    <td>69</td>
                    <td>93</td>
                    <td>82</td>
                    <td>77</td>
                    <td>40</td>
                    <td>30</td>
                    <td>14</td>
                    <td>17</td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="14"><dfn>Precipitation [mm] per month</dfn></td>
                </tr>
            </tfoot>
        </table>
        <h2 style="break-before: auto;">Awesomizr</h2>
        <p>RealObjects provides you its Open Source JavaScript library <em>Awesomizr</em>.
            This library provides among other things a function that can be used to rotate
            the header of any table in an arbitrary angle, by using CSS3 transforms.</p>
        <h3>Usage</h3>
        <p>Transform a table by including the library in your document and calling the <em>rotateTableHeader</em> function in your JavaScript code.
            <em>Awesomizr</em> will automatically create a <code>&lt;thead&gt;</code> element from the first row in the specified table if 
            no such element is present.</p>
        <div class="code">
            <pre>
&lt;script type="text/javascript" src="awesomizr.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    ...
    Awesomizr.rotateTableHeader(table, params);
&lt;/script&gt;</pre>
        </div>
        <ul>
            <li>
                <code>table</code> The HTML node of the table to transform.
            </li>
            <li>
                <code>params</code> An object of optional parameters.
            </li>
        </ul>
        <p>In the PDFreactor manual, you can find more information on the optional parameters
         and other functionality of the awesomizr library.</p>
        <h3>Example</h3>
        <div class="code">
            <pre>
Awesomizr.rotateTableHeader(document.getElementById("myTable"), { angle: 40, width: "20pt" });</pre>
        </div>
        
        <h2 style="break-before: always;">PDF Images</h2>
        <p>PDFreactor enables you to embed PDFs as images through the <code>&lt;img&gt;</code> element. 
        PDF image elements have support for additional CSS and JavaScript properties:
            <ul>
                <li>You can select which page should be displayed as image via the CSS property <code>-ro-source-page</code>.</li>
                <li>Using JavaScript, you can retrieve the number of pages a PDF image object has via the proprietary 
                <code>roPageCount</code> property.</li>
            </ul>
        </p>
        <h3>Usage</h3>
        <p>You can use JavaScript to retrieve the number of pages of a PDF image object, and automatically generate a PDF image
        for each page by creating an image element for each page, where you can set the page to be displayed through the CSS property
        <code>-ro-source-page</code>.</p>
        <h3>Example</h3>
        <div id="pdfAsImagesContainer"></div>
    </body>
</html>