root/ui/web/htdocs/worksheet_panel.inc

<script type="text/javascript" src="js/eye/datepicker.js"></script>
<script type="text/javascript" src="js/eye/eye.js"></script>
<script type="text/javascript" src="js/eye/utils.js"></script>
<script type="text/javascript">
<!--
var ws_displayinfo = { start : 14*86400, cnt: '100', end: '' };
var wsinfo = {};
function update_current_worksheet(f) {
  var str = JSON.stringify(wsinfo);
  $.post("json/worksheet/store",
         {'json':str},
         function(d) {
           wsinfo.id = d.id;
           if(d.error) $("#ws-tool-error").html(d.error).fadeIn('fast');
           else $("#ws-tool-error").fadeOut('fast');
           if(wsinfo.id && wsinfo.title && wsinfo.saved != true &&
              $(".rememberWorksheet:visible").length == 0) {
             $(".rememberWorksheet").html('"Remember" this worksheet.').fadeIn('slow');
             $(".rememberWorksheet").click(function() {
               wsinfo.saved = true;
               update_current_worksheet(function(r) {
                 if(r.error) wsinfo.saved = false;
                 else $(".rememberWorksheet").html('Remebered').fadeOut('slow');
               });
             });
           }
           if(f) f(d);
         }, 'json');
}

function process_worksheet_json(r) {
  wsinfo.id = r.sheetid;
  wsinfo.title = r.title;
  var ul = $("ul#worksheet-graphs");
  $("h2#worksheetTitle").html(r.title);
  ul.empty();
  for(var i = 0; i < r.graphs.length; i++) {
    var g = {};
    g.graphid = r.graphs[i];
    g.start = ws_displayinfo.start;
    g.end = ws_displayinfo.end;
    g.cnt = ws_displayinfo.cnt;
    var o = $('<div></div>').ReconGraph(g);
    ul.append($('<li/>').append(o));
    o.ReconGraphRefresh();
  }
  ul.sortable("refresh");
}
function add_graph_to_worksheet(graphid) {
  var g = { start: ws_displayinfo.start,
            end: ws_displayinfo.end,
            cnt: ws_displayinfo.cnt,
            graphid: graphid };
  var o = $('<div></div>').ReconGraph( g );
  var ul = $("ul#worksheet-graphs");
  ul.append($('<li/>').append(o));
  o.ReconGraphRefresh();
  ul.sortable("refresh");
  if(!wsinfo.graphs) wsinfo.graphs = new Array();
alert('pushing ' + graphid);
  wsinfo.graphs.push(graphid);
  update_current_worksheet();
}
function refresh_worksheet() {
  var g = { start: ws_displayinfo.start,
            end: ws_displayinfo.end,
            cnt: ws_displayinfo.cnt };
  $("ul#worksheet-graphs > li > div").ReconGraphRefresh(g);
}
function load_worksheet(id) {
  $.getJSON("json/worksheet/info/" + id, process_worksheet_json);
}
-->
</script>
<span class="rememberWorksheet"></span>
<span class="blankWorksheet">New Blank</span>
<h2 id="worksheetTitle">Worksheet Title</h2>
<p/>
<!-- date range box -->
<script type="text/javascript">
$(document).ready(function(){
        var time_windows = { '2d' : 86400*2,
                             '1w' : 86400*7,
                             '2w' : 86400*14,
                             '4w' : 86400*28,
                             '1y' : 86400*365,
                           };
        var state = false;
        $("h2#worksheetTitle").editable(function(value, settings) {
          wsinfo.title = value;
          update_current_worksheet();
          return(value);
        }, { });
        $("#ws_datetool .btn-slide").click(function(){
                $("#ws_widgetCalendar").stop().animate({
                     height: state ? 0 :
                       $('#ws_widgetCalendar div.datepicker').get(0).offsetHeight
                  }, 500);
                state = !state;
                $(this).toggleClass("active");
                return false;
        });
        $("#ws_datetool .datechoice").click(function(){
                $("#ws_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD");
                $("#ws_widgetCalendar").slideUp("slow");
                $(".datechoice").removeClass("selected");
                ws_displayinfo.start = time_windows[$(this).html()];
                ws_displayinfo.end = '';
                $(this).addClass("selected");
                refresh_worksheet();
                return false;
        });
        $('#ws_widgetCalendar').DatePicker({
                flat: true,
                format: 'Y/m/d',
                date: [new Date(), new Date()],
                calendars: 3,
                mode: 'range',
                starts: 1,
                onChange: function(formated) {
                        var dates;
                        dates = formated[0].split('/');
                        var start = new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0);
                        dates = formated[1].split('/');
                        var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
                        ws_displayinfo.start = start.toUTCString();
                        ws_displayinfo.end = end.toUTCString();
                        refresh_worksheet();
                        $(".datechoice").removeClass("selected");
                        $('#ws_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - ');
                }
        });
        $("#ws-tool-error").click(function(){
          $("#ws-tool-error").fadeOut("slow");
        });
  var ul = $("ul#worksheet-graphs");
  ul.sortable({ handle: '.graphTitle',
                scroll: true,
                stop:
                  function (e,ui) {
                    wsinfo.graphs = new Array();
                    ui.item.parent().find("> li > div").each(
                      function(i) { wsinfo.graphs.push($(this).attr("id")); }
                    );
                    update_current_worksheet();
                  }
              });
});
</script>

<div id="ws_datetool">
        <div class="zoom">
                <dl>
                        <dt>Zoom:</dt>
                        <dd><a href="#" class="first datechoice">2d</a></dd>
                        <dd><a href="#" class="datechoice">1w</a></dd>
                        <dd><a href="#" class="selected datechoice">2w</a></dd>
                        <dd><a href="#" class="datechoice">4w</a></dd>
                        <dd><a href="#" class="datechoice">1y</a></dd>
                </dl>
        </div>
        <div class="range">
                <dl>
                        <dt>Date Range:</dt>
                        <dd><a href="" class="btn-slide">YYYY/MM/DD - YYYY/MM/DD</a></dd>
                </dl>
        </div>
<br style="clear:both; margin-bottom:0.5em;"/>
        <div id="ws_widgetCalendar" class="widgetCalendar"></div>
</div>

<div>
  <ul id="worksheet-graphs" />
  <br style="clear:left" />
</div>                  
<div style="display:none">
        <div id="maingraph-template">
        <h3 class="graphTitle">graph title</h3>
        <div class="plot-area" style="width:380px;height:180px"></div>
        <div class="plot-legend">legend</div>
        </div>
</div>

<div class="error"><p class="error" id="ws-tool-error"></p></div>

<div id="ws_payload">
</div>