/htdocs/default/view-graph.js

<script src="/epic-<?php echo $instance ?>/default/ui-20110309.01/js/jquery-1.5.1.min.js"></script>

<link rel="stylesheet" href="/epic-<?php echo $instance ?>/default/ui-20110309.01/css/jquery/cupertino/jquery-ui-1.8.13.custom.css">

<!-- Click and Time Span Focusing -->

<link rel='stylesheet' type='text/css' media='screen' href='/epic-<?php echo $instance ?>/default/ui-20110309.01/js/jquery.imgareaselect-0.9.6/css/imgareaselect-default.css' />
<script type='text/javascript' src='/epic-<?php echo $instance ?>/default/ui-20110309.01/js/jquery.imgareaselect-0.9.6/scripts/jquery.imgareaselect.pack.js'></script>

<script type='text/javascript'>
   $(document).ready(function () {
      $('#photo').imgAreaSelect({
         minHeight:   <?php echo $h ?>,
         maxHeight:   <?php echo $h ?>,
         onSelectEnd: function (img, selection) { window.location.href = '/epic-<?php print "{$instance}{$uipage}?$cgi_params_get" ?>&x1=' + selection.x1 + '&x2=' + selection.x2; }
      });
   });
</script>

<!-- Autocomplete ds_list -->

<script src="/epic-<?php echo $instance ?>/default/ui-20110309.01/js/jquery-ui-1.8.13.custom.min.js"></script>

<script>
$(function() {
        var ds_list=new Array();
        $.getJSON("/<?php echo $instance ?>?a=query&ds_attrib_list=ds&n=<?php echo $_GET['n'] ?>&ng=<?php echo $_GET['ng'] ?>&ds=.*", function(json) {
           $.each(json.query, function(i, object) {
              $.each(object, function(c, ds) {
                 ds_list.push(ds);
              });
           });
        });
        function split( val ) {
                return val.split( /,\s*/ );
        }
        function extractLast( term ) {
                return split( term ).pop();
        }

        $( "#ds_list" )
                // don't navigate away from the field on tab when selecting an item
                .bind( "keydown", function( event ) {
                        if ( event.keyCode === $.ui.keyCode.TAB &&
                                        $( this ).data( "autocomplete" ).menu.active ) {
                                event.preventDefault();
                        }
                })
                .autocomplete({
                        minLength: 0,
                        source: function( request, response ) {
                                // delegate back to autocomplete, but extract the last term
                                response( $.ui.autocomplete.filter(
                                        ds_list, extractLast( request.term ) ) );
                        },
                        focus: function() {
                                // prevent value inserted on focus
                                return false;
                        },
                        select: function( event, ui ) {
                                var terms = split( this.value );
                                // remove the current input
                                terms.pop();
                                // add the selected item
                                terms.push( ui.item.value );
                                // add placeholder to get the comma-and-space at the end
                                terms.push( "" );
                                this.value = terms.join( "," );
                                return false;
                        }
                });
});
</script>

<!-- time/query/parameter area hiding -->

<!-- TODO - oh my god this is a lot of code for some simple div hiding and cookie setting -->
<!-- TODO - rewrite this mess with a function like diveHideByCookie('div-name') or something -->

<script>

   var timeToggle = getCookie('timeToggle');

   if (timeToggle == null) {
      setCookie('timeToggle', 'hidden', 1);
      timeToggle = 'hidden';
   }

   var queryToggle = getCookie('queryToggle');

   if (queryToggle == null) {
      setCookie('queryToggle', 'hidden', 1);
      queryToggle = 'hidden';
   }

   var parameterToggle = getCookie('parameterToggle');

   if (parameterToggle == null) {
      setCookie('parameterToggle', 'hidden', 1);
      parameterToggle = 'hidden';
   }

   $(document).ready(function() {

      // hides the time-div as soon as the DOM is ready
      if (timeToggle == 'hidden') {
         $('#time-div').hide();
      };

      // toggles the time-div on clicking the noted link
      $('#time-div-toggle').click(function() {
         $('#time-div').toggle(100);
         timeToggle = (timeToggle == 'hidden') ? 'exposed' : 'hidden';
         setCookie('timeToggle', timeToggle, 1);
         return false;
      });

      // hides the query-div as soon as the DOM is ready
      if (queryToggle == 'hidden') {
         $('#query-div').hide();
      };

      // toggles the query-div on clicking the noted link
      $('#query-div-toggle').click(function() {
         $('#query-div').toggle(100);
         queryToggle = (queryToggle == 'hidden') ? 'exposed' : 'hidden';
         setCookie('queryToggle', queryToggle, 1);
         return false;
      });

      // hides the parameter-div as soon as the DOM is ready
      if (parameterToggle == 'hidden') {
         $('#parameter-div').hide();
      };

      // toggles the parameter-div on clicking the noted link  
      $('#parameter-div-toggle').click(function() {
         $('#parameter-div').toggle(100);
         parameterToggle = (parameterToggle == 'hidden') ? 'exposed' : 'hidden';
         setCookie('parameterToggle', parameterToggle, 1);
         return false;
      });

   });
</script>