documentcloud-cloud-crowd 0.0.5 → 0.0.6

data/lib/cloud_crowd/worker.rb

@@ -5,10 +5,17 @@ module CloudCrowd
   # units that they are able to handle (for which they have an action in their
   # actions directory). If communication with the central server is interrupted, 
   # the WorkUnit will repeatedly attempt to complete its unit -- every 
-  # +worker_retry_wait+ seconds. Any exceptions that take place during 
+  # Worker::RETRY_WAIT seconds. Any exceptions that take place during 
   # the course of the Action will cause the Worker to mark the WorkUnit as 
   # having failed.
   class Worker
+    
+    # The time between worker check-ins with the central server, informing
+    # it of the current status, and simply that it's still alive.
+    CHECK_IN_INTERVAL = 60
+    
+    # Wait five seconds to retry, after internal communcication errors.
+    RETRY_WAIT = 5
             
     attr_reader :action
     
@@ -18,6 +25,7 @@ module CloudCrowd
     def initialize
       @id               = $$
       @hostname         = Socket.gethostname
+      @name             = "#{@id}@#{@hostname}"
       @store            = AssetStore.new
       @server           = CloudCrowd.central_server
       @enabled_actions  = CloudCrowd.actions.keys
@@ -37,7 +45,7 @@ module CloudCrowd
       keep_trying_to "complete work unit" do
         data = completion_params.merge({:status => 'succeeded', :output => result})
         unit_json = @server["/work/#{data[:id]}"].put(data)
-        log "finished #{@action_name} in #{data[:time]} seconds"
+        log "finished #{display_work_unit} in #{data[:time]} seconds"
         clear_work_unit
         setup_work_unit(unit_json)
       end
@@ -46,14 +54,37 @@ module CloudCrowd
     # Mark the current work unit as failed, returning the exception to central.
     def fail_work_unit(exception)
       keep_trying_to "mark work unit as failed" do
-        data = completion_params.merge({:status => 'failed', :output => exception.message})
+        data = completion_params.merge({:status => 'failed', :output => {'output' => exception.message}.to_json})
         unit_json = @server["/work/#{data[:id]}"].put(data)
-        log "failed #{@action_name} in #{data[:time]} seconds\n#{exception.message}\n#{exception.backtrace}"
+        log "failed #{display_work_unit} in #{data[:time]} seconds\n#{exception.message}\n#{exception.backtrace}"
         clear_work_unit
         setup_work_unit(unit_json)
       end
     end
     
+    # Check in with the central server. Let it know the condition of the work 
+    # thread, the action and status we're processing, and our hostname and PID.
+    def check_in(thread_status)
+      keep_trying_to "check in with central" do
+        @server["/worker"].put({
+          :name          => @name,
+          :thread_status => thread_status
+        })
+      end
+    end
+    
+    # Inform the central server that this worker is finished. This is the only
+    # remote method that doesn't retry on connection errors -- if the worker 
+    # can't connect to the central server while it's trying to shutdown, it 
+    # should close, regardless.
+    def check_out
+      @server["/worker"].put({
+        :name       => @name,
+        :terminated => true
+      })
+      log 'exiting'
+    end
+    
     # We expect and require internal communication between the central server
     # and the workers to succeed. If it fails for any reason, log it, and then 
     # keep trying the same request.
@@ -61,11 +92,10 @@ module CloudCrowd
       begin
         yield
       rescue Exception => e
-        wait_time = CloudCrowd.config[:worker_retry_wait] 
-        log "failed to #{title} -- retry in #{wait_time} seconds"
+        log "failed to #{title} -- retry in #{RETRY_WAIT} seconds"
         log e.message
         log e.backtrace
-        sleep wait_time
+        sleep RETRY_WAIT
         retry
       end
     end
@@ -75,6 +105,11 @@ module CloudCrowd
       @action_name && @input && @options
     end
     
+    # Loggable string of the current work unit.
+    def display_work_unit
+      "unit ##{@options['work_unit_id']} (#{@action_name})"
+    end
+    
     # Executes the current work unit, catching all exceptions as failures.
     def run_work_unit
       begin
@@ -103,7 +138,10 @@ module CloudCrowd
     
     # Common parameters to send back to central.
     def base_params
-      @base_params ||= {:enabled_actions => @enabled_actions.join(',')}
+      @base_params ||= {
+        :worker_name    => @name, 
+        :worker_actions => @enabled_actions.join(',')
+      }
     end
     
     # Common parameters to send back to central upon unit completion, 
@@ -124,13 +162,13 @@ module CloudCrowd
       @options['job_id'] = unit['job_id']
       @options['work_unit_id'] = unit['id']
       @options['attempts'] ||= unit['attempts']
-      log "fetched work unit for #{@action_name}"
+      log "fetched #{display_work_unit}"
       return true
     end
     
     # Log a message to the daemon log. Includes PID for identification.
     def log(message)
-      puts "Worker ##{@id}: #{message}"
+      puts "Worker ##{@id}: #{message}" unless ENV['RACK_ENV'] == 'test'
     end
     
     # When we're done with a unit, clear out our instance variables to make way 

data/public/css/admin_console.css

@@ -1,21 +1,74 @@
 body {
-  background: #c7c7c7;
+  background: #979797;
   font-family: Arial;
   font-size: 12px;
+  color: #252525;
 }
 
+.small_caps {
+  font: 11px Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+#header {
+  height: 110px;
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  background: url(/images/header_back.png);
+}
+  #logo {
+    position: absolute;
+    left: 37px; top: 9px;
+    width: 236px; height: 91px;
+    background: url(/images/logo.png);
+  }
+  
+#disconnected {
+  position: absolute;
+  top: 122px; right: 15px;
+  background: #7f7f7f;
+  color: #333;
+  border: 1px solid #555;
+  font-size: 10px;
+  line-height: 18px;
+  padding: 3px 4px 1px 4px;
+  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
+}
+  #disconnected .server_error {
+    float: left;
+    width: 16px; height: 16px;
+    background: url(/images/server_error.png);
+    opacity: 0.7;
+    margin-right: 3px;
+  }
+
 #queue {
   position: absolute;
-  top: 100px; left: 100px; right: 100px;
+  top: 16px; left: 327px; right: 15px;
   height: 77px;
+  overflow: hidden;
 }
+  #no_jobs {
+    text-align: left;
+    position: absolute;
+    bottom: 8px; right: 8px;
+    color: #999;
+    display: none;
+  }
+    #queue.no_jobs #no_jobs {
+      display: block;
+    }
   #queue_fill {
     position: absolute;
-    width: 100%; height: 75px;
+    left: 0; right: 0; top: 0;
+    height: 75px;
     border: 1px solid #5c5c5c;
-    -moz-border-radius: 10px; -webkit-border-radius: 10px;
+    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
     background: transparent url(/images/queue_fill.png) repeat-x 0px -1px;
   }
+    #queue.no_jobs #queue_fill {
+      opacity: 0.3;
+    }
   #queue .job {
     position: relative;
     margin-top: 1px;
@@ -36,6 +89,9 @@ body {
       opacity: 0.5;
       overflow: hidden;
     }
+      #queue .completion.zero {
+        border: 0;
+      }
     #queue .percent_complete {
       position: absolute;
       bottom: 8px; left: 8px;
@@ -48,4 +104,118 @@ body {
       position: absolute;
       top: 8px; left: 8px;
       z-index: 10;
+    }
+    
+#sidebar {
+  position: absolute;
+  top: 120px; left: 10px; bottom: 10px;
+  width: 300px;
+  overflow: hidden;
+}
+  #sidebar_background {
+    position: absolute;
+    top: 21px; bottom: 21px;
+    width: 298px;
+    background: #e0e0e0;
+    border: 1px solid #8b8b8b;
+    border-top: 0; border-bottom: 0;
+  }
+  .sidebar_back {
+    position: absolute;
+    height: 21px; width: 300px;
+  }
+    #sidebar_top {
+      top: 0px;
+      background: url(/images/sidebar_top.png);
+    }
+    #sidebar_bottom {
+      bottom: 0px;
+      background: url(/images/sidebar_bottom.png);
+    }
+  #sidebar_header {
+    position: absolute;
+    top: 5px; left: 8px;
+    color: #404040;
+    text-shadow: 0px 1px 1px #eee;
+  }
+    #sidebar_header.no_workers .no_workers,
+    #sidebar_header .has_workers {
+      display: block;
+    }
+    #sidebar_header .no_workers,
+    #sidebar_header.no_workers .has_workers {
+      display: none;
+    }
+  #workers {
+    position: absolute;
+    padding: 2px 0;
+    top: 21px; left: 0; bottom: 21px;
+    width: 298px;
+    overflow-y: auto; overflow-x: hidden;
+  }
+    #workers .worker {
+      border: 1px solid transparent;
+      margin: 1px 7px;
+      padding-left: 18px;
+      font-size: 11px;
+      line-height: 22px;
+      background: url(/images/bullet_white.png) no-repeat left center;
+      cursor: pointer;
+    }
+      #workers .worker.processing,
+      #workers .worker.splitting,
+      #workers .worker.merging {
+        background: url(/images/bullet_green.png) no-repeat left center;
+      }
+      #workers .worker:hover {
+        border: 1px solid #aaa;
+        border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
+        background-color: #ccc;
+      }
+      
+#worker_info {
+  position: absolute;
+  width: 231px; height: 79px;
+  margin: -9px 0 0 -20px;
+  background: url(/images/worker_info.png);
+  overflow: hidden;
+  cursor: pointer;
+}
+  #worker_info_inner {
+    margin: 15px 15px 15px 32px;
+    line-height: 15px;
+    color: #333;
+    text-shadow: 0px 1px 1px #eee;
+  }
+    #worker_info.loading #worker_info_inner {
+      background: url(/images/worker_info_loading.gif) no-repeat right bottom;
+      width: 45px; height: 9px;
+    }
+    #worker_info.awake #worker_details, 
+    #worker_sleeping {
+      display: block;
+    }
+    #worker_details, #worker_info.loading #worker_details, 
+    #worker_info.loading #worker_sleeping, #worker_info.awake #worker_sleeping {
+      display: none;
+    }
+      
+#graphs {
+  position: absolute;
+  padding: 17px 15px 15px 17px;
+  top: 110px; left: 310px; right: 0px; bottom: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+  .graph_container {
+    margin-bottom: 25px;
+  }
+    .graph_title {
+      color: #333;
+      font-size: 16px;
+      text-shadow: 0px 1px 1px #eee;
+      margin-bottom: 10px;
+    }
+    .graph {
+      height: 150px;
     }

data/public/css/reset.css

@@ -10,43 +10,33 @@ a, abbr, acronym, address, big, cite, code,
 del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	font-weight: inherit;
-	font-style: inherit;
-	font-size: 100%;
-	font-family: inherit;
-	vertical-align: baseline;
+fieldset, form, label, legend {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
 }
 /* remember to define focus styles! */
 :focus {
-	outline: 0;
+  outline: 0;
 }
 body {
-	line-height: 1;
-	color: black;
-	background: white;
+  line-height: 1;
+  color: black;
+  background: white;
 }
 ol, ul {
-	list-style: none;
-}
-/* tables still need 'cellspacing="0"' in the markup */
-table {
-	border-collapse: separate;
-	border-spacing: 0;
-}
-caption, th, td {
-	text-align: left;
-	font-weight: normal;
+  list-style: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
-	content: "";
+  content: "";
 }
 blockquote, q {
-	quotes: "" "";
+  quotes: "" "";
 }

data/public/js/admin_console.js

@@ -1,33 +1,86 @@
+// The Console handles all of the Admin interaction with the active workers
+// and job queue.
+//
 // Think about pulling in the DCJS framework, instead of just raw jQuery here.
+// Leaving it hacked together like this just cries out for templates, dunnit?
 window.Console = {
   
+  // Maximum number of data points to record and graph.
+  MAX_DATA_POINTS : 100,
+  
+  // Milliseconds between polling the central server for updates to Job progress.
   POLL_INTERVAL : 3000,
   
+  // Default speed for all animations.
   ANIMATION_SPEED : 300,
   
+  // Keep this in sync with the map in cloud-crowd.rb
+  DISPLAY_STATUS_MAP : ['unknown', 'processing', 'succeeded', 'failed', 'splitting', 'merging'],    
+  
+  // Images to preload
+  PRELOAD_IMAGES : ['/images/server_error.png'],
+  
+  // All options for drawing the system graphs.
+  GRAPH_OPTIONS : {
+    xaxis :   {mode : 'time', timeformat : '%M:%S'},
+    yaxis :   {tickDecimals : 0},
+    legend :  {show : false},
+    grid :    {backgroundColor : '#7f7f7f', color : '#555', tickColor : '#666', borderWidth : 2}
+  },
+  JOBS_COLOR        : '#db3a0f',
+  WORKERS_COLOR     : '#a1003d',
+  WORK_UNITS_COLOR  : '#ffba14',
+  
+  // Starting the console begins polling the server.
   initialize : function() {
+    this._jobsHistory = [];
+    this._workersHistory = [];
+    this._workUnitsHistory = [];
+    this._histories = [this._jobsHistory, this._workersHistory, this._workUnitsHistory];
     this._queue = $('#jobs');
-    this.getJobs();
+    this._workerInfo = $('#worker_info');
+    this._disconnected = $('#disconnected');
+    $(window).bind('resize', Console.renderGraphs);
+    $('#workers .worker').live('click', Console.getWorkerInfo);
+    this.getStatus();
+    $.each(this.PRELOAD_IMAGES, function(){ var i = new Image(); i.src = this; });
   },
   
-  getJobs : function() {
-    $.get('/jobs', null, function(resp) {
-      Console._jobs = resp;
+  // Request the lastest status of all jobs and workers, re-render or update
+  // the DOM to reflect.
+  getStatus : function() {
+    $.ajax({url : '/status', dataType : 'json', success : function(resp) {
+      Console._jobs           = resp.jobs;
+      Console._workers        = resp.workers;
+      Console._workUnitCount  = resp.work_unit_count;
+      Console.recordDataPoint();
+      if (Console._disconnected.is(':visible')) Console._disconnected.fadeOut(Console.ANIMATION_SPEED);
+      $('#queue').toggleClass('no_jobs', Console._jobs.length <= 0);
       Console.renderJobs();
-      setTimeout(Console.getJobs, Console.POLL_INTERVAL);
-    }, 'json');
+      Console.renderWorkers();
+      Console.renderGraphs();
+      setTimeout(Console.getStatus, Console.POLL_INTERVAL);
+    }, error : function(request, status, errorThrown) {
+      if (!Console._disconnected.is(':visible')) Console._disconnected.fadeIn(Console.ANIMATION_SPEED);
+      setTimeout(Console.getStatus, Console.POLL_INTERVAL);
+    }});
   },
   
+  // Render an individual job afresh.
   renderJob : function(job) {
-    this._queue.prepend('<div class="job" id="job_' + job.id + '" style="width:' + job.width + '%; background: #' + job.color + ';"><div class="completion" style="width:' + job.percent_complete + '%;"></div><div class="percent_complete">' + job.percent_complete + '%</div><div class="job_id">#' + job.id + '</div></div>');
+    this._queue.append('<div class="job" id="job_' + job.id + '" style="width:' + job.width + '%; background: #' + job.color + ';"><div class="completion ' + (job.percent_complete <= 0 ? 'zero' : '') + '" style="width:' + job.percent_complete + '%;"></div><div class="percent_complete">' + job.percent_complete + '%</div><div class="job_id">#' + job.id + '</div></div>');
   },
   
+  // Animate the update to an existing job in the queue.
   updateJob : function(job, jobEl) {
     jobEl.animate({width : job.width + '%'}, this.ANIMATION_SPEED);
-    $('.completion', jobEl).animate({width : job.percent_complete + '%'}, this.ANIMATION_SPEED);
+    var completion = $('.completion', jobEl);
+    if (job.percent_complete > 0) completion.removeClass('zero');
+    completion.animate({width : job.percent_complete + '%'}, this.ANIMATION_SPEED);
     $('.percent_complete', jobEl).html(job.percent_complete + '%');
   },
   
+  // Render all jobs, calculating relative widths and completions.
   renderJobs : function() {
     var totalUnits = 0;
     var totalWidth = this._queue.width();
@@ -36,14 +89,78 @@ window.Console = {
       jobIds.push(this.id);
       totalUnits += this.work_units; 
     });
+    $.each($('.job'), function() {
+      var el = this;
+      if (jobIds.indexOf(parseInt(el.id.replace(/\D/g, ''), 10)) < 0) {
+        $(el).animate({width : '0%'}, Console.ANIMATION_SPEED - 50, 'linear', function() {
+          $(el).remove();
+        });
+      }
+    });
     $.each(this._jobs, function() {
       this.width  = (this.work_units / totalUnits) * 100;
       var jobEl = $('#job_' + this.id);
       jobEl[0] ? Console.updateJob(this, jobEl) : Console.renderJob(this);
     });
-    $.each($('.job'), function() {
-      if (jobIds.indexOf(parseInt(this.id.replace(/\D/g, ''), 10)) < 0) $(this).remove();
+  },
+  
+  // Re-render all workers from scratch each time.
+  renderWorkers : function() {
+    var header = $('#sidebar_header');
+    $('.has_workers', header).html(this._workers.length + " Active Worker Daemons");
+    header.toggleClass('no_workers', this._workers.length <= 0);
+    $('#workers').html($.map(this._workers, function(w) { 
+      return '<div class="worker ' + w.status + '" rel="' + w.name + '">' + w.name + '</div>';
+    }).join(''));
+  },
+  
+  // Record the current state and re-render all graphs.
+  recordDataPoint : function() {
+    var timestamp = (new Date()).getTime();
+    this._jobsHistory.push([timestamp, this._jobs.length]);
+    this._workersHistory.push([timestamp, this._workers.length]);
+    this._workUnitsHistory.push([timestamp, this._workUnitCount]);
+    $.each(this._histories, function() { 
+      if (this.length > Console.MAX_DATA_POINTS) this.shift(); 
     });
+  },
+  
+  // Convert our recorded data points into a format Flot can understand.
+  renderGraphs : function() {
+    $.plot($('#jobs_graph'), [{label : 'Jobs in Queue', color : Console.JOBS_COLOR, data : Console._jobsHistory}], Console.GRAPH_OPTIONS);
+    $.plot($('#workers_graph'), [{label : 'Active Workers', color : Console.WORKERS_COLOR, data : Console._workersHistory}], Console.GRAPH_OPTIONS);
+    $.plot($('#work_units_graph'), [{label : 'Work Units in Queue', color : Console.WORK_UNITS_COLOR, data : Console._workUnitsHistory}], Console.GRAPH_OPTIONS);
+  },
+  
+  // Request the Worker info from the central server.
+  getWorkerInfo : function(e) {
+    e.stopImmediatePropagation();
+    var info = Console._workerInfo;
+    var row = $(this);
+    info.addClass('loading');
+    $.get('/worker/' + row.attr('rel'), null, Console.renderWorkerInfo, 'json');
+    info.css({top : row.offset().top, left : 325});
+    info.fadeIn(Console.ANIMATION_SPEED);
+    $(document).bind('click', Console.hideWorkerInfo);
+    return false;
+  },
+  
+  // When we receieve worker info, update the bubble.
+  renderWorkerInfo : function(resp) {
+    var info = Console._workerInfo;
+    info.toggleClass('awake', !!resp.status);
+    info.removeClass('loading');
+    if (!resp.status) return;
+    $('.status', info).html(Console.DISPLAY_STATUS_MAP[resp.status]);
+    $('.action', info).html(resp.action);
+    $('.job_id', info).html(resp.job_id);
+    $('.work_unit_id', info).html(resp.id);
+  },
+  
+  // Hide worker info and unbind the global hide handler.
+  hideWorkerInfo : function() {
+    $(document).unbind('click', Console.hideWorkerInfo);
+    Console._workerInfo.fadeOut(Console.ANIMATION_SPEED); 
   }
   
 };

data/public/js/excanvas.pack.js

@@ -0,0 +1 @@
+if(!window.CanvasRenderingContext2D){(function(){var m=Math;var mr=m.round;var ms=m.sin;var mc=m.cos;var Z=10;var Z2=Z/2;var G_vmlCanvasManager_={init:function(opt_doc){var doc=opt_doc||document;if(/MSIE/.test(navigator.userAgent)&&!window.opera){var self=this;doc.attachEvent("onreadystatechange",function(){self.init_(doc)})}},init_:function(doc){if(doc.readyState=="complete"){if(!doc.namespaces["g_vml_"]){doc.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml")}var ss=doc.createStyleSheet();ss.cssText="canvas{display:inline-block;overflow:hidden;"+"text-align:left;width:300px;height:150px}"+"g_vml_\\:*{behavior:url(#default#VML)}";var els=doc.getElementsByTagName("canvas");for(var i=0;i<els.length;i++){if(!els[i].getContext){this.initElement(els[i])}}}},fixElement_:function(el){var outerHTML=el.outerHTML;var newEl=el.ownerDocument.createElement(outerHTML);if(outerHTML.slice(-2)!="/>"){var tagName="/"+el.tagName;var ns;while((ns=el.nextSibling)&&ns.tagName!=tagName){ns.removeNode()}if(ns){ns.removeNode()}}el.parentNode.replaceChild(newEl,el);return newEl},initElement:function(el){el=this.fixElement_(el);el.getContext=function(){if(this.context_){return this.context_}return this.context_=new CanvasRenderingContext2D_(this)};el.attachEvent('onpropertychange',onPropertyChange);el.attachEvent('onresize',onResize);var attrs=el.attributes;if(attrs.width&&attrs.width.specified){el.style.width=attrs.width.nodeValue+"px"}else{el.width=el.clientWidth}if(attrs.height&&attrs.height.specified){el.style.height=attrs.height.nodeValue+"px"}else{el.height=el.clientHeight}return el}};function onPropertyChange(e){var el=e.srcElement;switch(e.propertyName){case'width':el.style.width=el.attributes.width.nodeValue+"px";el.getContext().clearRect();break;case'height':el.style.height=el.attributes.height.nodeValue+"px";el.getContext().clearRect();break}}function onResize(e){var el=e.srcElement;if(el.firstChild){el.firstChild.style.width=el.clientWidth+'px';el.firstChild.style.height=el.clientHeight+'px'}}G_vmlCanvasManager_.init();var dec2hex=[];for(var i=0;i<16;i++){for(var j=0;j<16;j++){dec2hex[i*16+j]=i.toString(16)+j.toString(16)}}function createMatrixIdentity(){return[[1,0,0],[0,1,0],[0,0,1]]}function matrixMultiply(m1,m2){var result=createMatrixIdentity();for(var x=0;x<3;x++){for(var y=0;y<3;y++){var sum=0;for(var z=0;z<3;z++){sum+=m1[x][z]*m2[z][y]}result[x][y]=sum}}return result}function copyState(o1,o2){o2.fillStyle=o1.fillStyle;o2.lineCap=o1.lineCap;o2.lineJoin=o1.lineJoin;o2.lineWidth=o1.lineWidth;o2.miterLimit=o1.miterLimit;o2.shadowBlur=o1.shadowBlur;o2.shadowColor=o1.shadowColor;o2.shadowOffsetX=o1.shadowOffsetX;o2.shadowOffsetY=o1.shadowOffsetY;o2.strokeStyle=o1.strokeStyle;o2.arcScaleX_=o1.arcScaleX_;o2.arcScaleY_=o1.arcScaleY_}function processStyle(styleString){var str,alpha=1;styleString=String(styleString);if(styleString.substring(0,3)=="rgb"){var start=styleString.indexOf("(",3);var end=styleString.indexOf(")",start+1);var guts=styleString.substring(start+1,end).split(",");str="#";for(var i=0;i<3;i++){str+=dec2hex[Number(guts[i])]}if((guts.length==4)&&(styleString.substr(3,1)=="a")){alpha=guts[3]}}else{str=styleString}return[str,alpha]}function processLineCap(lineCap){switch(lineCap){case"butt":return"flat";case"round":return"round";case"square":default:return"square"}}function CanvasRenderingContext2D_(surfaceElement){this.m_=createMatrixIdentity();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=Z*1;this.globalAlpha=1;this.canvas=surfaceElement;var el=surfaceElement.ownerDocument.createElement('div');el.style.width=surfaceElement.clientWidth+'px';el.style.height=surfaceElement.clientHeight+'px';el.style.overflow='hidden';el.style.position='absolute';surfaceElement.appendChild(el);this.element_=el;this.arcScaleX_=1;this.arcScaleY_=1}var contextPrototype=CanvasRenderingContext2D_.prototype;contextPrototype.clearRect=function(){this.element_.innerHTML="";this.currentPath_=[]};contextPrototype.beginPath=function(){this.currentPath_=[]};contextPrototype.moveTo=function(aX,aY){this.currentPath_.push({type:"moveTo",x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.lineTo=function(aX,aY){this.currentPath_.push({type:"lineTo",x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.bezierCurveTo=function(aCP1x,aCP1y,aCP2x,aCP2y,aX,aY){this.currentPath_.push({type:"bezierCurveTo",cp1x:aCP1x,cp1y:aCP1y,cp2x:aCP2x,cp2y:aCP2y,x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.quadraticCurveTo=function(aCPx,aCPy,aX,aY){var cp1x=this.currentX_+2.0/3.0*(aCPx-this.currentX_);var cp1y=this.currentY_+2.0/3.0*(aCPy-this.currentY_);var cp2x=cp1x+(aX-this.currentX_)/3.0;var cp2y=cp1y+(aY-this.currentY_)/3.0;this.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,aX,aY)};contextPrototype.arc=function(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise){aRadius*=Z;var arcType=aClockwise?"at":"wa";var xStart=aX+(mc(aStartAngle)*aRadius)-Z2;var yStart=aY+(ms(aStartAngle)*aRadius)-Z2;var xEnd=aX+(mc(aEndAngle)*aRadius)-Z2;var yEnd=aY+(ms(aEndAngle)*aRadius)-Z2;if(xStart==xEnd&&!aClockwise){xStart+=0.125}this.currentPath_.push({type:arcType,x:aX,y:aY,radius:aRadius,xStart:xStart,yStart:yStart,xEnd:xEnd,yEnd:yEnd})};contextPrototype.rect=function(aX,aY,aWidth,aHeight){this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath()};contextPrototype.strokeRect=function(aX,aY,aWidth,aHeight){this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.stroke()};contextPrototype.fillRect=function(aX,aY,aWidth,aHeight){this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.fill()};contextPrototype.createLinearGradient=function(aX0,aY0,aX1,aY1){var gradient=new CanvasGradient_("gradient");return gradient};contextPrototype.createRadialGradient=function(aX0,aY0,aR0,aX1,aY1,aR1){var gradient=new CanvasGradient_("gradientradial");gradient.radius1_=aR0;gradient.radius2_=aR1;gradient.focus_.x=aX0;gradient.focus_.y=aY0;return gradient};contextPrototype.drawImage=function(image,var_args){var dx,dy,dw,dh,sx,sy,sw,sh;var oldRuntimeWidth=image.runtimeStyle.width;var oldRuntimeHeight=image.runtimeStyle.height;image.runtimeStyle.width='auto';image.runtimeStyle.height='auto';var w=image.width;var h=image.height;image.runtimeStyle.width=oldRuntimeWidth;image.runtimeStyle.height=oldRuntimeHeight;if(arguments.length==3){dx=arguments[1];dy=arguments[2];sx=sy=0;sw=dw=w;sh=dh=h}else if(arguments.length==5){dx=arguments[1];dy=arguments[2];dw=arguments[3];dh=arguments[4];sx=sy=0;sw=w;sh=h}else if(arguments.length==9){sx=arguments[1];sy=arguments[2];sw=arguments[3];sh=arguments[4];dx=arguments[5];dy=arguments[6];dw=arguments[7];dh=arguments[8]}else{throw"Invalid number of arguments";}var d=this.getCoords_(dx,dy);var w2=sw/2;var h2=sh/2;var vmlStr=[];var W=10;var H=10;vmlStr.push(' <g_vml_:group',' coordsize="',Z*W,',',Z*H,'"',' coordorigin="0,0"',' style="width:',W,';height:',H,';position:absolute;');if(this.m_[0][0]!=1||this.m_[0][1]){var filter=[];filter.push("M11='",this.m_[0][0],"',","M12='",this.m_[1][0],"',","M21='",this.m_[0][1],"',","M22='",this.m_[1][1],"',","Dx='",mr(d.x/Z),"',","Dy='",mr(d.y/Z),"'");var max=d;var c2=this.getCoords_(dx+dw,dy);var c3=this.getCoords_(dx,dy+dh);var c4=this.getCoords_(dx+dw,dy+dh);max.x=Math.max(max.x,c2.x,c3.x,c4.x);max.y=Math.max(max.y,c2.y,c3.y,c4.y);vmlStr.push("padding:0 ",mr(max.x/Z),"px ",mr(max.y/Z),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",filter.join(""),", sizingmethod='clip');")}else{vmlStr.push("top:",mr(d.y/Z),"px;left:",mr(d.x/Z),"px;")}vmlStr.push(' ">','<g_vml_:image src="',image.src,'"',' style="width:',Z*dw,';',' height:',Z*dh,';"',' cropleft="',sx/w,'"',' croptop="',sy/h,'"',' cropright="',(w-sx-sw)/w,'"',' cropbottom="',(h-sy-sh)/h,'"',' />','</g_vml_:group>');this.element_.insertAdjacentHTML("BeforeEnd",vmlStr.join(""))};contextPrototype.stroke=function(aFill){var lineStr=[];var lineOpen=false;var a=processStyle(aFill?this.fillStyle:this.strokeStyle);var color=a[0];var opacity=a[1]*this.globalAlpha;var W=10;var H=10;lineStr.push('<g_vml_:shape',' fillcolor="',color,'"',' filled="',Boolean(aFill),'"',' style="position:absolute;width:',W,';height:',H,';"',' coordorigin="0 0" coordsize="',Z*W,' ',Z*H,'"',' stroked="',!aFill,'"',' strokeweight="',this.lineWidth,'"',' strokecolor="',color,'"',' path="');var newSeq=false;var min={x:null,y:null};var max={x:null,y:null};for(var i=0;i<this.currentPath_.length;i++){var p=this.currentPath_[i];if(p.type=="moveTo"){lineStr.push(" m ");var c=this.getCoords_(p.x,p.y);lineStr.push(mr(c.x),",",mr(c.y))}else if(p.type=="lineTo"){lineStr.push(" l ");var c=this.getCoords_(p.x,p.y);lineStr.push(mr(c.x),",",mr(c.y))}else if(p.type=="close"){lineStr.push(" x ")}else if(p.type=="bezierCurveTo"){lineStr.push(" c ");var c=this.getCoords_(p.x,p.y);var c1=this.getCoords_(p.cp1x,p.cp1y);var c2=this.getCoords_(p.cp2x,p.cp2y);lineStr.push(mr(c1.x),",",mr(c1.y),",",mr(c2.x),",",mr(c2.y),",",mr(c.x),",",mr(c.y))}else if(p.type=="at"||p.type=="wa"){lineStr.push(" ",p.type," ");var c=this.getCoords_(p.x,p.y);var cStart=this.getCoords_(p.xStart,p.yStart);var cEnd=this.getCoords_(p.xEnd,p.yEnd);lineStr.push(mr(c.x-this.arcScaleX_*p.radius),",",mr(c.y-this.arcScaleY_*p.radius)," ",mr(c.x+this.arcScaleX_*p.radius),",",mr(c.y+this.arcScaleY_*p.radius)," ",mr(cStart.x),",",mr(cStart.y)," ",mr(cEnd.x),",",mr(cEnd.y))}if(c){if(min.x==null||c.x<min.x){min.x=c.x}if(max.x==null||c.x>max.x){max.x=c.x}if(min.y==null||c.y<min.y){min.y=c.y}if(max.y==null||c.y>max.y){max.y=c.y}}}lineStr.push(' ">');if(typeof this.fillStyle=="object"){var focus={x:"50%",y:"50%"};var width=(max.x-min.x);var height=(max.y-min.y);var dimension=(width>height)?width:height;focus.x=mr((this.fillStyle.focus_.x/width)*100+50)+"%";focus.y=mr((this.fillStyle.focus_.y/height)*100+50)+"%";var colors=[];if(this.fillStyle.type_=="gradientradial"){var inside=(this.fillStyle.radius1_/dimension*100);var expansion=(this.fillStyle.radius2_/dimension*100)-inside}else{var inside=0;var expansion=100}var insidecolor={offset:null,color:null};var outsidecolor={offset:null,color:null};this.fillStyle.colors_.sort(function(cs1,cs2){return cs1.offset-cs2.offset});for(var i=0;i<this.fillStyle.colors_.length;i++){var fs=this.fillStyle.colors_[i];colors.push((fs.offset*expansion)+inside,"% ",fs.color,",");if(fs.offset>insidecolor.offset||insidecolor.offset==null){insidecolor.offset=fs.offset;insidecolor.color=fs.color}if(fs.offset<outsidecolor.offset||outsidecolor.offset==null){outsidecolor.offset=fs.offset;outsidecolor.color=fs.color}}colors.pop();lineStr.push('<g_vml_:fill',' color="',outsidecolor.color,'"',' color2="',insidecolor.color,'"',' type="',this.fillStyle.type_,'"',' focusposition="',focus.x,', ',focus.y,'"',' colors="',colors.join(""),'"',' opacity="',opacity,'" />')}else if(aFill){lineStr.push('<g_vml_:fill color="',color,'" opacity="',opacity,'" />')}else{lineStr.push('<g_vml_:stroke',' opacity="',opacity,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',processLineCap(this.lineCap),'"',' weight="',this.lineWidth,'px"',' color="',color,'" />')}lineStr.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",lineStr.join(""))};contextPrototype.fill=function(){this.stroke(true)};contextPrototype.closePath=function(){this.currentPath_.push({type:"close"})};contextPrototype.getCoords_=function(aX,aY){return{x:Z*(aX*this.m_[0][0]+aY*this.m_[1][0]+this.m_[2][0])-Z2,y:Z*(aX*this.m_[0][1]+aY*this.m_[1][1]+this.m_[2][1])-Z2}};contextPrototype.save=function(){var o={};copyState(this,o);this.aStack_.push(o);this.mStack_.push(this.m_);this.m_=matrixMultiply(createMatrixIdentity(),this.m_)};contextPrototype.restore=function(){copyState(this.aStack_.pop(),this);this.m_=this.mStack_.pop()};contextPrototype.translate=function(aX,aY){var m1=[[1,0,0],[0,1,0],[aX,aY,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.rotate=function(aRot){var c=mc(aRot);var s=ms(aRot);var m1=[[c,s,0],[-s,c,0],[0,0,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.scale=function(aX,aY){this.arcScaleX_*=aX;this.arcScaleY_*=aY;var m1=[[aX,0,0],[0,aY,0],[0,0,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.clip=function(){};contextPrototype.arcTo=function(){};contextPrototype.createPattern=function(){return new CanvasPattern_};function CanvasGradient_(aType){this.type_=aType;this.radius1_=0;this.radius2_=0;this.colors_=[];this.focus_={x:0,y:0}}CanvasGradient_.prototype.addColorStop=function(aOffset,aColor){aColor=processStyle(aColor);this.colors_.push({offset:1-aOffset,color:aColor})};function CanvasPattern_(){}G_vmlCanvasManager=G_vmlCanvasManager_;CanvasRenderingContext2D=CanvasRenderingContext2D_;CanvasGradient=CanvasGradient_;CanvasPattern=CanvasPattern_})()}