$(document).ready(function(){
  var R = Raphael("paper", 980, 500);
  var a=new Array();
  var opath = new Array(
    "M143.567 139.481L168.358 139.481z",
    "M146.667,116.045 L146.667,162.917",
    "M155.962,127.667 L155.962,151.297",
    "M165.250,116.045 L165.260,162.917",
    "M146.667,127.667 L165.260,127.667",
    "M146.667,151.294 L165.260,151.294"
  );

  var path = new Array(
    "M108.203,238.188 L123.833,253.167 186.833,253 202.688,238.563z",//sY
    "M108.083,47.833 L124.083,35.25 186.031,35.281 202.417,47.667z",//nY
    "M197.458,63.24 L202.792,47.907 238.459,84.907 238.792,201.573 202.792,238.573 195.792,222.573 224.459,193.573 225.375,91.547z",//eB
    "M117.131,222.526 L108.167,238.167 202.792,238.573 195.797,222.526 z",//sB
    "M117.198,222.563 L108.167,238.167 72.49,199.729 72.823,85.958 107.833,47.833 114.865,63.229 87.157,93.729 86.823,191.396z",//wB
    "M107.833,47.833 L114.833,63.167 197.5,63.167 202.833,47.833z",//nB
    "M190.104,83.526 L197.437,63.193 225.354,91.5 224.438,193.526 195.771,222.526 190.5,201.833 207.859,183.979 207.781,102.495z",//eY
    "M117.23,222.474 L121.23,202.474 190.563,201.807 195.896,222.474 117.23,222.474z",//innerSY
    "M121.438,202.75 L117.438,222.75 87.104,191.417 87.438,93.75 115.104,63.417 121.583,83.781 103.438,103.417 103.104,183.75z",//wY
    "M114.833,63.167 L197.5,63.167 190.167,83.5 121.313,83.531z", //nOrange
    "M195.719,196.688 L195.563,89.188 207.844,102.219 207.917,184.167z",//rGreen
    //"M177.385,191.03 L134.244,191.03 134.333,202.333 177.385,202.083z",//sOrange
    "M116.453,197.625 L102.833,183.5 102.875,171.646 103.125,114.396 103.167,103.167 116.375,88.75z"//lGreen
  );
  var b = new Array("rgb( 96, 56, 19)","rgb(158, 80, 16)");
  var y = new Array("rgb(219,213, 42)","rgb(255,255,  100)");
  var g = new Array("rgb(  0,146, 69)","rgb(  5,206, 43)");
  var o = new Array("rgb(241, 90, 36)","rgb(247,147, 30)");

  var rgb = new Array (y[0],y[0],b[0],b[0],b[0],b[0],y[0],y[0],y[0],o[0],g[0]/*,o[0]*/,g[0]);
  var rgbGlow = new Array(y[1],y[1],b[1],b[1],b[1],b[1],y[1],y[1],y[1],o[1],g[1]/*,o[1]*/,g[1]);
  //R.rect(1,1,980,467.997).attr({fill:"rgb(0,33,61)"});
  R.rect(1,1,980,467.997);
  //R.path("M458.38,37.257 L458.38,318.436 237.542,318.436 238.049,341.247 62.272,341.226 62.272,37.257z").attr({stroke:"#000000","stroke-width": "4",fill:"#000000",opacity:"0.34"});
  R.path("M121.167,202.5 L102.833,183.5 103.167,103.167 121.313,83.531 190.167,83.5 207.833,102.167 207.917,184.167 190.5,201.833z").attr({fill: "rgb(0, 27, 48)"});
  R.rect(135.635,106.297,40.168,66.224).attr({fill:"rgb(161,176,44)"});
  R.rect(143.375,115.851,25.178,47.26).attr({fill:"rgb(0,113,188)", stroke:"#ffffff","stroke-width":"1","stroke-linejoin": "round"});

  for (var i=0;i<opath.length;i++){
    R.path(opath[i]).attr({fill: "none", stroke:"rgb(255,255,255)", "stroke-linejoin": "round","stroke-width":"1"});
  }

  var c=null;   

  for (var i=0;i<path.length;i++){
    a[i] = R.path(path[i]).attr({fill:rgb[i], stroke:"none"});
    a[i].node.id = i;

    (function (b,it){
      var id= b.node.id;
      b.node.style.cursor="pointer";
      b.node.onmouseover = function(){
        c&&c.animate({fill:rgb[c.node.id],stroke:"none"},200);
        b.animate({
          fill: rgbGlow[id],
          stroke:"#11f1f7"
        },1500,"elastic");//, stroke: "#838ACC", "stroke-width": 0, "stroke-linejoin": "round"
        b.toFront();
        c=b;
      };
      b.node.onmousedown = function(){
        $('#ticket_region_details').html('');
        $('#loading').css('display','block');
        $.ajax({
          url: Webroot+'misc/get_ticket_info/'+it,
          type: "GET",
          cache:false,
          error:function(){
            $('#loading').css('display','none');
            $('#ticket_region_details').html('<p>An error has occured. Please try refreshing the page.</p>');
          },
          success: function(output) {
            $('#loading').css('display','none');
            output=JSON.parse(output);
            if(output[0]){
              $('#ticket_region_details').html(output[1]);
            }
            else{
              $('#ticket_region_details').html('<p>'+output[1]+'</p>');
            }
          }
        });
      }
      b.node.onmouseout = function(){
        b.animate({fill:rgb[id],stroke:"none"},200);
        b.toFront();
      };
    })(a[i],i);
  }
  
  var t = R.text(155, 20, "North").attr({fill:'#B2D0ED','font-size':'13'});
  var t = R.text(155, 267, "South").attr({fill:'#B2D0ED','font-size':'13'});
  var t = R.text(265, 140, "East").attr({fill:'#B2D0ED','font-size':'13'});
  var t = R.text(45, 140, "West").attr({fill:'#B2D0ED','font-size':'13'});
});