var DATASERVER = "http://data.alertme.com/swingometer/";

   function AlertMeSwingometer(args){
      

      this.draw = function(){

         var thisobj = this;

         var canvas = document.getElementById('swingometer');
         if (canvas != null) {

            if (typeof G_vmlCanvasManager !== 'undefined') 
               G_vmlCanvasManager.initElement(canvas);
            
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {
            
            
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               
               
               //var needle = new Image();  
               //needle.onload = function(){  
                  ctx.save();  
                  ctx.clearRect(0,0,500,500); 
                  //ctx.fillRect(230,230,1,1);
 		          //ctx.fillStyle = "rgb(200,0,0)";
 		    
                  ctx.translate(229,230);
                  ctx.rotate(thisobj.getDisplayAngle()*Math.PI/180); 
                  //ctx.drawImage(needle,-230,-235);
		          ctx.fillStyle = "#333";
                  ctx.lineCap = "round";
                  ctx.lineJoin = "round";
         		  ctx.lineWidth = 4.0;
           		  ctx.beginPath();
         		  ctx.moveTo(0, -205);
                  ctx.lineTo(-12, -132.5);
		    
         		  ctx.quadraticCurveTo(0, -135, 12, -132.5);
         	      ctx.lineTo(0, -205);
         		  ctx.stroke();
         		  ctx.fill();
                  ctx.restore();  
                  
                  var face = thisobj.mode;
                  
                  document.getElementById('swingometer_sky').src=DATASERVER+"sky_0" + thisobj.getDisplaySegment() + "_lrg.png";
                  document.getElementById('swingometer_face_'+face).src=DATASERVER+face+"_0" + thisobj.getDisplaySegment() + "_lrg.png";
                  
                  if(face=='country'){
                     document.getElementById('swingometer_shadow').src=DATASERVER+'country_shadow_lrg.png';
                     document.getElementById('swingometer_shadow').style.display= "block";
					 document.getElementById('swingometer_face_country').style.display= "block";
					 document.getElementById('swingometer_face_region').style.display= "none";
                     //document.getElementById('swingometer_face').style.height = "340px";
                  } else {
                     document.getElementById('swingometer_shadow').src=DATASERVER+"heatmap/blank.gif";
                     document.getElementById('swingometer_shadow').style.display= "none";
					 document.getElementById('swingometer_face_country').style.display= "none";
					 document.getElementById('swingometer_face_region').style.display= "block";
                     //document.getElementById('swingometer_face').style.height = "300px";
                  }

               //}  
               //needle.src = DATASERVER+'pointer_11_lrg.png';  
               
            }
            else {
               setTimeout(function(){
                  thisobj.draw()
               }, 100);
            }
         }
      };
      
      this.getDisplayAngle = function(){
         
         var angle = this.angle;
         
//         if(angle>90){
//            angle = 95;
//         }
//         if(angle< -95){
//            angle = -95;
//         }
         
         angle = -angle*1.14;
         
         return angle;
      }
      
      this.getDisplaySegment = function(){
         
         if (this.angle>=90){
            return 1;
         } else {
            return Math.min( Math.ceil((-this.angle+90)/(180/7)), 7);
         }
         
      }
      
      this.setArgs = function(args){
         
         this.args = args;
         this.setMode(this.args?this.args.mode:null);
         this.setAngle(this.args?this.args.angle:null);
         this.setDuration(this.args?this.args.duration:null);
         
      }
      
      this.setMode = function(mode){
         
         this.mode = this.validMode(mode);
         this.preloadImages(mode);
         
      }
      
      this.validMode = function(mode){
         
         switch(mode) {
            case "region":
               break;
            case "country":
            default: 
               mode = "country";
         }
         
         return mode;
         
      }
      
      this.setAngle = function(angle){
         angle = parseFloat(angle);
         this.angle = isNaN(angle)? 0 : angle;
      }
      
      this.setDuration = function(duration){
         duration = parseInt(duration);
         this.duration = isNaN(duration)? 2000 : duration;
      }
            
      this.easingBouncePast = function(pos) {
         if (pos < (1/2.75)) {
            return (7.5625*pos*pos);
         } else if (pos < (2/2.75)) {
            return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75);
         } else if (pos < (2.5/2.75)) {
            return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375);
         } else {
            return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375);
         }
      }
      
      this.easingSpring = function(pos){
        return  1 - (Math.cos(pos * (5*pos)  * Math.PI) * Math.exp(-pos * 6));
      }  
      
      this.easingElastic = function(pos) {
         return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1;
      } 
      
      this.animateToValue = function(value){
         
         var start = (new Date).getTime();
         var duration = this.duration;
         var finish = start+duration;
         
         var startValue = this.angle;
         var endValue = value;
         
         var thisobj = this;
         
         clearInterval(thisobj.interval);
         
         thisobj.interval = setInterval(function(){
            var time = (new Date).getTime();
            pos = time>finish ? 1 : (time-start)/duration;
            
            thisobj.setAngle(startValue + (endValue - startValue) * thisobj.easingSpring(pos));
            thisobj.draw();
            
            if(time>finish){
               clearInterval(thisobj.interval);
            }
         }, 10);
         
         
      }
      
      this.showRegion = function(value){
         this.setMode("region");
         this.animateToValue(value);
      }
      this.showCountry = function(value){
         this.setMode("country");
         this.animateToValue(value);
      }
      
      this.preloadImages = function(mode){
         var face = this.validMode(mode);
         
         for(var i=1; i<=7; i++){
            var image = new Image();
            var image2 = new Image();
            image.src = DATASERVER+"sky_0" + i + "_lrg.png";
            image2.src = DATASERVER+face+"_0" + i + "_lrg.png";
         }
      }

      this.setArgs(args);
      this.draw();
   }
   



   function AlertMeHeatmap(swingometer, values){
   
      this.values=values;

      this.regions = {
         "sc": "Scotland",
         "ni": "Northern Ireland",
         "er": "the East of England",
         "wm": "the West Midlands",
         "sw": "the South West",
         "nw": "the North West",
         "yh": "Yorkshire and the Humber",
         "se": "the South East",
         "ln": "London",
         "wl": "Wales",
         "em": "the East Midlands",
         "ne": "the North East"
      }

      
      this.swingometer = swingometer;
      this.bgDefaultOpacity = 0.99; 
      this.bgFullOpacity = 0.99;      
      this.bgSelectedOpacity = 0.2; 
      
      this.time = (new Date).getTime();
      
      var thisObj = this;
      
      
      for(region in thisObj.regions){
         
         var area = document.getElementById('swingometer_map_'+region);
         
         area.region = region;
         
         area.onmouseover = function(e){
            //console.log(e);
            thisObj.setBgOpacity("selected"); 
            document.getElementById('swingometer_heatmap_hi').style.background="url("+DATASERVER+"heatmap/"+this.region+".png?"+thisObj.time+")";
         }
         area.onmouseout = function(e){
            thisObj.setBgOpacity("default"); 
            document.getElementById('swingometer_heatmap_hi').style.background="url("+DATASERVER+"heatmap/blank.gif)";
         }
         area.onclick = function(e){
	         this.blur();
            thisObj.selectRegion(this.region);
            return false;
         }
         
         var image = new Image();
         image.src = DATASERVER+"heatmap/"+region+".png?"+thisObj.time;
         
      }
      
      
      
      
      this.setBgOpacity = function(value) {
         
         switch(value) {
         	case "full":
         	    value = this.bgFullOpacity;
         		break;
            case "selected":
                value = this.bgSelectedOpacity;
               break;
            case "default":
                value = this.bgDefaultOpacity;
               break;
         	default: 
         		value = parseInt(value);
         }

         document.getElementById('swingometer_heatmap_bg').style.opacity = value;
         document.getElementById('swingometer_heatmap_bg').style.filter = 'alpha(opacity=' + value*100 + ')';
      }
      
      
      this.selectRegion = function(region){
         document.getElementById('swingometer_title').innerHTML="How is "+ thisObj.regions[region] +" doing?";
         
         thisObj.bgDefaultOpacity = thisObj.bgSelectedOpacity;
         thisObj.setBgOpacity("default");
         document.getElementById('swingometer_heatmap_sel').style.background="url("+DATASERVER+"heatmap/"+region+".png?"+thisObj.time+")";
         document.getElementById('swingometer_heatmap_all').style.display="block";
         document.getElementById('swingometer_heatmap_copy').style.display="none";
         
         var value = thisObj.values.regions[region];
         value = isNaN(value) ? 0 : value;
         
         thisObj.swingometer.showRegion(value);
      }
      
      this.selectCountry = function(){
         document.getElementById('swingometer_title').innerHTML="How is the UK doing?";
         
         thisObj.bgDefaultOpacity = thisObj.bgFullOpacity;
         thisObj.setBgOpacity("default");
         document.getElementById('swingometer_heatmap_sel').style.background="url("+DATASERVER+"heatmap/blank.gif)";
         document.getElementById('swingometer_heatmap_all').style.display="none";
         document.getElementById('swingometer_heatmap_copy').style.display="block";
         
         thisObj.swingometer.showCountry(thisObj.values.country);
      }
	  
	  
	  this.update = function(values){
		thisObj.values = values;
		thisObj.time = (new Date).getTime();
		document.getElementById('swingometer_heatmap_bg').src = DATASERVER+"heatmap/uk.gif?"+thisObj.time;
	  }
      
   }