<!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.</p>
        <p>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>