/**
 * Javascript Sparklines Library
 * Written By John Resig
 * http://ejohn.org/projects/jspark/
 * 
 * This work is licensed under a Creative Commons Attribution 2.5 License
 * More Info: http://creativecommons.org/licenses/by/2.5/
 * 
 * To use, place your data points within your HTML, like so:
 * <span class="sparkline">10,8,20,5...</span>
 *
 * in your CSS you might want to have the rule:
 * .sparkline { display: none }
 * so that non-compatible browsers don't see a huge pile of numbers.
 *
 * Finally, include this library in your header, like so:
 * <script language="javascript" src="jspark.js"></script>
 */

addEvent( window, "load", function() {
  var a = document.getElementsByTagName("*") || document.all;

  for ( var i = 0; i < a.length; i++ )
    if ( has( a[i].className, "sparkline" ) )
      sparkline( a[i] );
} );

function has(s,c) {
  var r = new RegExp("(^| )" + c + "\W*");
  return ( r.test(s) ? true : false );
}

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}

function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

/*
 * 2008.12.02 hashimoto.add
 */
var AUTO = "auto";
var COMMA = ',';
var INLINE = 'inline';
var COLOR = '#ff4444';
var GRAPHIC = '2d';
var HEIGHT = "1em";
var CANVAS = "canvas";

function sparkline(o, p) {
  p == null ? p = o.innerHTML.split(COMMA) : void(0);
//  var p = o.innerHTML.split(COMMA);
  while ( o.childNodes.length > 0 )
    o.removeChild( o.firstChild );

  var nw = AUTO;
  var nh = AUTO;
  if ( window.getComputedStyle ) {
    nw = window.getComputedStyle( o, null ).width;
    nh = window.getComputedStyle( o, null ).height;
  }

  if ( nw != AUTO ) nw = nw.substr( 0, nw.length - 2 );
  if ( nh != AUTO ) nh = nh.substr( 0, nh.length - 2 );

  var f = 2;
  var w = ( nw == AUTO || nw == 0 ? p.length * f : nw - 0 );
  var h = ( nh == AUTO || nh == 0 ? HEIGHT : nh );

  var co = document.createElement(CANVAS);

  if ( co.getContext ) o.style.display = INLINE;
  else return false;

  co.style.height = h;
  co.style.width = w;
  co.width = w;
  o.appendChild( co );

  var h = co.offsetHeight;
  co.height = h;

  var min = 9999;
  var max = -1;

  for ( var i = 0; i < p.length; i++ ) {
    p[i] = p[i] - 0;
    if ( p[i] < min ) min = p[i];
    if ( p[i] > max ) max = p[i];
  }

  if ( co.getContext ) {
    var c = co.getContext(GRAPHIC);
    c.strokeStyle = COLOR;
    c.lineWidth = 1.0;
    c.beginPath();

    for ( var i = 0; i < p.length; i++ ) {
      if ( i == 0 )
        c.moveTo( (w / p.length) * i, h - (((p[i] - min) / (max - min)) * h) );
      c.lineTo( (w / p.length) * i, h - (((p[i] - min) / (max - min)) * h) );
    }

    c.stroke();
    o.style.display = INLINE;
  }
}