@()(implicit request: play.api.mvc.RequestHeader)

@main("Sample on responsive design") {

    @* We use a fluid layout from bootstrap to adapt to different resolutions *@
    <div class="container-fluid">
        <div class="row-fluid">
            @* The sidebar won't be shown in smallest screens like phone or tablet. This means that we want to load the content conditionally as per screen size *@
            <div class="span2 visible-desktop">
                <!--Sidebar content, this could go into main.scala or a parent template -->
                <h2>Dynamic Sidebar</h2>
                <p>This sidebar loads a minimal amount of content by default. If we will display it, some ajax requests will populate it with extra content.</p>
                <hr/>
                <div id="sidebar">
                    @* We provide a link to access the data we are not loading in case the user resizes the screen and sees this bar *@
                    <a href="http://www.google.com/search?q=responsive+design&amp;amp;tbm=nws">Search Google on Responsive Design</a>
                </div>
            </div>
            <div class="span10">
                <!--Body content-->
                <h1>A Responsive page</h1>
                <p>The idea of this sample is to show 2 important concepts in a simplified environment:</p>
                <ul>
                    <li><strong>Responsive Layout</strong>: the layout adapts dynamically to the size of the browser displaying the data</li>
                    <li><strong>Mobile first design</strong>: the layout is rendered for a mobile version and adds extra details for bigger screens</li>
                </ul>
                <p><strong>Responsive layout</strong> is not just a Buzzword. We are in a mobile world, were you can't guess the resolution of the screen browsing your web application.
                    <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> provides styles to facilitate the construction of responsive layouts, which is great.
                    But Responsive is not only "hide some elements when you are in a tiny screen". Elements hidden by CSS are downloaded anyway, and in a mobile network that can be problematic.
                </p>
                <p>
                    <strong>Mobile First</strong> is a concept that tries to solve that. The idea is to design the minimal layout that works for your application, that layout that mobile users will see, and add more options if the user has a bigger screen.
                    How? By conditionally loading elements, using Javascript to modify your HTML or via Ajax requests.
                </p>
                <p>
                    This single page will use media queries and javascript to delay loading some content and to not render other content according to your viewport.
                    It is a simplified environment, but it should give an idea on how to develop these concepts for bigger projects.
                    To test the CSS media queries, the border of the body will change color as per viewport size.
                </p>
                <h3>Asynchronous Javascript</h3>
                <p>
                    <a href="http://css-tricks.com/thinking-async/">This article</a> talks about loading Javascript resources asynchronously. With HTML 5 you can use the <strong>async</strong> attribute
                    for <em>script</em> tags. You can also use libraries like <strong>yepnop</strong> to trigger a callback after loading a Javascript resource.
                    The link contains some samples on async loading for popular resources.
                </p>
                <h3>Responsive Favicons</h3>
                <p>Favicons may be used in different contexts by the browser, like Bookmark links, etc. This, along new HD displays, means that 16x16 favicons may not be enough.</p>
                <p>To solve the issue you should provide:</p>
                <ul>
                    <li>An ico favicon with layeers at 16x16, 24x24, 32x32 and 64x64. See instructions for Gimp <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp">here</a>. This way the system will use the best size for the job</li>
                    <li>Provide several png versions of the favicon, at 57x57, 72x72, 114x114 and 144x144. They will be used by mobile devices (like IOS). You can link them in the header via <em>link</em> or you can just leave them in the root of the application, they'll be picked up anyway. You can read more about it <a href="http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/">here</a> </li>
                </ul>
                <h3>Google Ads</h3>
                <p>
                    One issue with responsive design is making Google Ads change according to the viewport size. Google Ads are not responsive, they have a fixed size which means that you won't be able
                    to modify them dynamically. Luckily <a href="http://www.labnol.org/internet/google-adsense-responsive-design/25252/">http://www.labnol.org/internet/google-adsense-responsive-design/25252/</a>
                    proposes a solution to this problem.
                </p>
                <p>
                    The solution consists on creating 3 sets of ad units (say 768×90, 468×60 and 300×250) and based on the size (width) of the user’s device, the most appropriate format get served.
                    The following code shows how it would be done (replace <em>ad_slot</em> and <em>ad_client</em> by the values of your own ads):
                </p>
                <pre>
                    <code>
                        &lt;script type="text/javascript"&gt;
                            google_ad_client = "my-ad-id";
                            if (window.innerWidth >= 800) {
                                google_ad_slot = "ad-size-1";
                                google_ad_width = 728;
                                google_ad_height = 60;
                            } else if (window.innerWidth < 400) {
                                google_ad_slot = "ad-size-2";
                                google_ad_width = 300;
                                google_ad_height = 250;
                            } else {
                                google_ad_slot = "ad-size-3";
                                google_ad_width = 468;
                                google_ad_height = 60;
                            }
                        &lt;/script&gt;
                        &lt;script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;&lt;/script&gt;
                    </code>
                </pre>
                <h3>Responsive images with Picturefill</h3>
                <p>Picturefilll allows us to select the image we want to display using a media-query. This javascript library uses <em>div</em> tags to which we add some specific metadata, the
                path and the media query to validate against. When loading the page, the library will scan all div elements with valid metadata and replace the ones that pass the media query by an image.</p>
                <p>The image is kept responsive, browser size changes will load the corresponding image. This is also a form of delayed loading, in which the image is loaded after the text content is rendered, speeding up the site.</p>
                @* Example *@
                <div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
                    <div data-src="@routes.Assets.at("images/small.jpg")"></div>
                    <div data-src="@routes.Assets.at("images/medium.jpg")"     data-media="(min-width: 400px)"></div>
                    <div data-src="@routes.Assets.at("images/large.jpg")"      data-media="(min-width: 800px)"></div>
                    <div data-src="@routes.Assets.at("images/extralarge.jpg")" data-media="(min-width: 1000px)"></div>

                    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
                    <noscript>
                        <img src="@routes.Assets.at("images/small.jpg")" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
                    </noscript>
                </div>
                @* End Example *@
                <hr/>
                <h2>Below: delayed load of images</h2>
                <p>The following images are loaded after all the text content is loaded. Sizes change as per viewport (only on load, if you resize the size keeps the same)</p>
                @* Loading many random comments with random avatars *@
                @for(i <- 1 to 100) {
                <div class="row-fluid">
                    @for(j <- 1 to 5) {
                    <div class="span2">
                        <h4>
                            <a href="http://gravatar.com/" data-gravatar-hash="205e460b479e2e5b48aec07710c08d50">Drew McLellan</a>
                        </h4>
                        <p>This is a great article!</p>
                    </div>
                    }
                </div>
                }
            </div>
        </div>
    </div>
    <script>
        /* Declaring this method outside the "on load" calls so it's on scope for callbacks */
        var displayNews = function(news) {
            var html = '';
            var items = news.responseData.results;
            var total = items.length;
            if (total > 0) {
                for (var i=0; i < total; i++) {
                    var item = items[i];
                    html+= '<article>';
                    html+= '<a href="'+item.unescapedUrl+'">';
                    html+= '<h3>'+item.titleNoFormatting+'</h3>';
                    html+= '</a>';
                    html+= '<p>';
                    html+= item.content;
                    html+= '</p>';
                    html+= '</article>';
                }
                document.getElementById('sidebar').innerHTML = html;
            }
        };

        /* This loads the content of the side bar asynchronously, so we won't do that request if the sidebar won't be shown */
        $(function() {
            var searchGoogle = function(term) {
                var elem = document.createElement('script');
                elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+term+'&callback=displayNews';
                document.getElementsByTagName('head')[0].appendChild(elem);
            };

            if ($(window).width() >= 979) {
                searchGoogle('responsive+design');
            }
       });

       /* This loads the avatars asynchronously, so the response time of the page improves as images are loaded by the browser after all content is ready */
       $(function() {
            /* Dynamically select an image size as per viewport size */
            function getAvatarSize() {
                var size = 100;
                // we check the viewport width against the same sizes we use in media queries in CSS */
                var viewport = $(window).width();
                if(viewport <=  480) {
                    size = 25;
                } else if(viewport <= 768) {
                    size = 75;
                } else if(viewport <= 979) {
                    size = 125;
                } else {
                    size = 175;
                }
                return size;
            }
            var avatarSize = getAvatarSize();

            /* Load all avatars now */
            $('a[data-gravatar-hash]').prepend(function(index){
                var hash = $(this).attr('data-gravatar-hash')
                return '<img alt="Avatar Image" src="http://www.gravatar.com/avatar.php?size=' + avatarSize + '&amp;gravatar_id=' + hash + '"><br/>'
            });



        });
    </script>
}