$(function(){
  
  var testObjs = [{
    name: "CSS Gradients",
    id: "cssgradients"
  }, {
    name: "Box Shadow",
    id: "boxshadow"
  }, {
    name: "Border Radius",
    id: "borderradius"
  }, {
    name: "rgba()",
    id: "rgba"
  }, {
    name: "@font-face",
    id: "fontface"
  }, {
    name: "CSS Gradient",
    id: "cssgradients"
  }]
    
  $("#tweet").tweet({
    username: "sardwon",
    count: 1,
    loading_text: "loading tweets..."
  });
  
  
  $("#computersOwnedTable").drawChart({
    bgColors: ["#fff"],
    type: "bar",
    height: 200
  });
  
  $("#timeOnlineTable").drawChart({
    type: "pie",
    valueUnits: "hours",
    height: 80
  });
  
  
  $("#diigo_linkroll style").remove();
  
  $(testObjs).each(function(){
    
    if (!Modernizr[this.id]) {
        
        var $noSupportMsg = $("<div id='noSupportMsg'><p>This site has two purposes: To embrace new web technologies and to deliver some information about myself.</p>"+
        "<p>Unfortunately your browser does not support some modern features however I can still show you the content.</p></div>");
        $("head link").attr("href","css/terminal.css");   
        $("#alert").html($noSupportMsg);       
        $(".chart").remove();
    }
  });
  
  $("#diigo_linkroll, #tweet").slideDown();
  
});


(function($){
  // Adapted from http://blog.jeremi.info/entry/creating-a-chart-with-raphael-js-from-a-google-spreadsheet
  $.fn.drawChart = function(options){
    var opts = $.extend({}, $.fn.drawChart.defaults, options);
    
    return this.each(function(){
      $this = $(this);
      $this.hide();
      
      var values = [], labels = [];
      $this.find("tbody tr").each(function(){
        values.push(parseInt($("td", this).text(), 10));
        labels.push($("th", this).text());
      });
      
      var chartId = $this.attr("id") + "Chart";
      var chartHolder = $("<div>").attr("id", chartId).addClass("chart");
      $this.after(chartHolder);
      
      var r = Raphael(chartId);
      
      var chartWidth = $this.parent().width();
      
      r.g.txtattr = {
        font: "12px Fontin-Sans, Arial, sans-serif",
        fill: opts.labelColor,
        "font-weight": "bold",
      
      };
      
      switch (opts.type) {
        case "bar":
          
          chartHolder.css("height", opts.height * 1.1);
          var chart = r.g.barchart(-10, 10, chartWidth, opts.height, [values], {
            stacked: true,
            type: "soft",
            colors: opts.bgColors
          });
          
          /*
         * Create an hover effect to display the value when the mouse is over the graph.
         */
          chart.hover(function(){
            // Create a popup element on top of the bar
            this.flag = r.g.popup(this.bar.x, this.bar.y, (this.bar.value || "0") + " " + opts.valueUnits).insertBefore(this).attr({
              fill: "rgba(0,0,0,0.2)",
              stroke: "none"
            });
          }, function(){
            // hide the popup element with an animation and remove the popup element at the end
            this.flag.animate({
              opacity: 0
            }, 300, function(){
              this.remove();
            });
          });
          
          chart.label(labels);
          break;
          
        case "pie":
          
          chartHolder.css("height", opts.height * 2 + 20);
          var chart = r.g.piechart(opts.height + 10, opts.height + 10, opts.height, values, {
            legend: labels,
            legendpos: "east",
            colors: opts.bgColors,
            legendcolor: opts.labelColor
          });
          
          chart.hover(function(){
            this.sector.stop();
            this.sector.scale(1.1, 1.1, this.cx, this.cy);
            if (this.label) {
              this.label[0].stop();
              this.label[0].scale(1.5);
            }
          }, function(){
            this.sector.animate({
              scale: [1, 1, this.cx, this.cy]
            }, 500, "bounce");
            if (this.label) {
              this.label[0].animate({
                scale: 1
              }, 500, "bounce");
            }
          });
          break;
          
      }
      
    });
  };
  //
  // plugin defaults
  //
  $.fn.drawChart.defaults = {
    type: "bar",
    height: 100,
    bgColors: ["#083A60", "#115285", "#67B9F7", "#A8D9FF"],
    labelColor: "#fff",
    valueUnits: ""
  };
})(jQuery);