﻿<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>News calendar generator for NewsWatcher</title>
        <style>
            
            /* Simple CSS reset */
            
            * {
                margin: 0;
                padding: 0
            }
            
            
            /* HTML tags */
            
            body {
                font-family: Arial, Helvetica, sans-serif;
                padding: 0em 2em
            }
            
            header { border-bottom: 1px solid #cccccc }
            footer { border-top: 1px solid #cccccc; margin-top: 2em; padding-top: 1em }
            
            h1, h2, h3, h4, h5, p { padding: 1em 0em }
            
            label {
                width: 150px;
                display: inline-block;
                margin: 5px;
                text-align: right
            }
            
            input { border: 1px solid #cccccc }           
            button, option, input { padding: 4px }
            select { padding: 3px }
                        
            /* Custom ids */
                        
            #csv-generator {
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa');
                background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); 
                background: -moz-linear-gradient(top, #ffffff, #fafafa);
                width: 100%;
                clear: both;
                overflow: hidden
            }
            
            #video {
                width: 30%;
                float: left;
                margin-right: 1em;
                -moz-box-shadow: 0px 3px 5px #888;
                -webkit-box-shadow: 0px 3px 5px #888;
                box-shadow: 0px 3px 5px #888;
                border:0
            }  
            
            #dialog { font-size: 12px }
            
            /* Form for adding the news */
            
            #form { width: 65%; float: right }
            input#datepicker, input#timepicker { width: 100px }
            input#description { width: 300px } 
            #add-new-button { float: left; margin-right: 1em }
            
            /* Sortable */
                        
            #news-calendar { clear: both; margin-top: 2em; padding: 0em 2em 2em 1em; background: #fafafa; border: 1px solid #cccccc }
            #sortable { list-style-type: none; margin: 0; padding: 0em; width: auto; clear: both }
            #sortable li { margin: 3px; padding: 0.4em; padding-left: 1.5em; }
            #sortable li span { position: absolute; margin-left: -1.3em; }
            
            a#get-csv {
                background: url('http://icons.iconarchive.com/icons/deleket/soft-scraps/24/File-New-icon.png') no-repeat 0px 8px;
                padding: 10px 58px 20px 30px;
            }
            
            /* Custom classes */
            
            .form-field { margin-bottom: 0.5em }
            
            /* Overwrites */
            
            .ui-dialog-title { font-size: 12px }
            
        </style>    
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
        <link rel="stylesheet" href="jquery.timepicker.css" />       
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script src="jquery.timepicker.min.js"></script>
        <script>
            $(function() { 
                
                // fix YouTube's zIndex iframes issue
                
                $('iframe').each(function(){
                    var url = $(this).attr("src");
                    $(this).attr("src",url+"?wmode=transparent");
                });
                
                // Init GUI elements
                
                $("#datepicker").datepicker({ 'dateFormat': 'yy.m.dd' });
                $("#timepicker").timepicker({ 'timeFormat': 'H:i:s' });                 
                $("#sortable").sortable().disableSelection();
                $("#news-calendar").hide();
                
                // Buttons behavior
                
                $("#add-new").click(function() {
                    
                    $("#news-calendar").fadeIn("500");
                    
                    $("#sortable").append('<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + 
                        $('#base-currency').val() + ';' + 
                        $('#datepicker').val() + ';' + 
                        $('#timepicker').val() + ';' + 
                        $('#description').val() + '</li>');
                    
                });
                
                $("#get-csv").click(function() {
                    
                    var csv = "Country;Time;Event\n";
                  
                    $("#sortable li").each(function(){
                        
                        csv += $(this).text() + "\n";
                        
                    });
                    
                    $("#dialog").empty().dialog({
                        modal: true,
                        width: 650,
                        show: {
                            effect: "blind",
                            duration: 400
                        },
                        hide: {
                            effect: "explode",
                            duration: 400
                        },
                        buttons: {
                            Ok: function() {
                            $( this ).dialog( "close" );
                            }
                        }
                    }).append(csv.replace(/\n/g, '<br/>'));
                                        
                    return false;
                    
                });
                
            });
        </script>
    </head>
    <body>
        <header>
            <h4>
                NewsWatcher, the <a href="http://www.mql5.com/en/articles/719">Automatic News Trader</a><br/>
                © laplacianlab, by Jordi Bassagañas
            </h4>                
        </header>         
        <div id="csv-generator">
            <p>Dear Bob, please, generate the CSV file for NewsWatcher EA while you listen to your favourite music:</p>
            <iframe id="video" width="400" height="280" src="http://www.youtube.com/embed/4pSh8kHKuYw" allowfullscreen></iframe>
            <div id="form">
                <p>Enter news in your CSV calendar:</p>
                <div class="form-field">
                    <label>Base currency:</label>
                    <select id="base-currency">
                        <option>AUD</option>
                        <option>CAD</option>
                        <option>CHF</option>
                        <option>CNY</option>
                        <option>EUR</option>
                        <option>GBP</option>
                        <option>JPY</option>
                        <option>NZD</option>
                        <option>USD</option>
                    </select>
                </div>
                <div class="form-field">
                    <label>Date:</label>
                    <input type="text" id="datepicker"/>
                </div>
                <div class="form-field">
                    <label>Time:</label>
                    <input type="text" id="timepicker"/>
                </div>
                <div class="form-field">
                    <label>Description:</label>
                    <input id="description" type="text"/>
                </div>
                <div id="add-new-button" class="form-field">
                    <label></label>
                    <button id="add-new">+ Add new</button>
                </div>
            </div>
        </div><!-- end of csv-generator -->
        <div id="news-calendar">
            <p><a id="get-csv" href="#">Get CSV</a></p>
            <ul id="sortable"></ul>
        </div>
        <div id="dialog" title="Please, copy and paste in data_folder\MQL5\FILES\news_watcher.csv"></div>
        <footer>
            <a href="http://www.w3.org/html/logo/">
                <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_64.png" alt="HTML5 Powered" title="HTML5 Powered">
            </a>
        </footer>
    </body>
</html>