/*
This is the clock widget based on D3 visualization.
Goto InfoCaptor Dashboard, create a new page or add to existing page.
Drag the "Custom Draw" Widget on the canvas
Right click select "Data source"
Select "Just Text in SQL"
Go to the post javascript section
Copy this entire code and paste it.

*/

var clockName="My Location";
var clockStrSize=6; //font size w.r.t number size
var clockTimeOffset=-5; //give the UTC offset India is 5.5 hrs ahead of UTC
var timeOffset=new Date().getTimezoneOffset();
timeOffset=timeOffset/60; //get hours
clockTimeOffset=0;

var d3div= "#holder_"+this.divName;
var thisObj=this;
var digitalDiv="clock_"+this.divName;

$.getScript('https://my.infocaptor.com/dash/js/d3.v3.min.js', function(data, textStatus){
buildChord();

});

function buildChord()
{
// Generated by CoffeeScript 1.3.3
(function() {
  var clockGroup, fields, height, offSetX, offSetY, pi, render, scaleHours, scaleMins, scaleSecs, vis, width;

  fields = function() {
var currentTime, data, hour, minute, second,ampm,digiStr,min;
currentTime = new Date();
currentTime.setTime(currentTime.getTime() + (clockTimeOffset*60*60*1000));
second = currentTime.getSeconds();
minute = currentTime.getMinutes();
hour = currentTime.getHours();
ampm="a.m";
  if (minute<10) min="0"+minute;
  else min=minute;
if (hour>=12) {
  ampm="p.m";




  digiStr=(hour-12)+":"+min+" "+ampm;
}
else
{
  digiStr=(hour)+":"+min+" "+ampm;
}
hour+= minute / 60;

    return data = [
      {
        "unit": "seconds",
        "numeric": second
      }, {
        "unit": "minutes",
        "numeric": minute
      }, {
        "unit": "hours",
        "numeric": hour
      },
	  {
	    "unit":"digital",
		"string":digiStr,
		"numeric":hour
	  }
    ];
  };

  width = thisObj.dWidth;

  height = thisObj.dHeight;

  maxSize=Math.min(width,height);
  offSetX = maxSize/2;

  offSetY = offSetX;

  pi = Math.PI;

  var r=maxSize/2-40;
  scaleSecs = d3.scale.linear().domain([1, 60 + 999 / 1000]).range([0, 2 * pi]);

  scaleMins = d3.scale.linear().domain([0, 59 + 59 / 60]).range([0, 2 * pi]);

  scaleHours = d3.scale.linear().domain([0, 11 + 59 / 60]).range([0, 2 * pi]);

  vis = d3.selectAll(d3div).append("svg:svg").attr("width", width).attr("height", height);
//$(d3div).append("<div id='"+digitalDiv+"' style='font-size:14px;font-family:arial;text-align:center;display:block;top:0px;left:0px;'></div>");
/*
  tickGroup= vis.append("svg:g").attr("transform", "translate(" + offSetX + "," + offSetY + ")");
tickGroup.selectAll("rect.tick")
    .data(d3.range(24))
    .enter().append("svg:rect")
    .attr("class", "tick")
    .attr("x", -2)
    .attr("y", -80)
    .attr("width", 4)
    .attr("height", function(d, i){return (i%2) ? 5 : 15;})
    .attr("transform", function(d, i){return "rotate("+(i*15)+")";})
    .attr("fill", "steelblue");
*/


  clockGroup = vis.append("svg:g").attr("transform", "translate(" + offSetX + "," + offSetY + ")");

  clockGroup.append("svg:circle").attr("r", r).attr("fill", thisObj.fillColor).attr("class", "clock outercircle").attr("stroke", thisObj.lineColor).attr("stroke-width", thisObj.lineWidth);

  clockGroup.append("svg:circle").attr("r", 4).attr("fill", "black").attr("class", "clock innercircle");

tickLabelGroup=vis.append("svg:g").attr("transform", "translate(" + offSetX + "," + offSetY + ")");
tickLabelGroup.selectAll("text.label")
    .data(d3.range(12))
    .enter().append("svg:text")
    .attr("class", "label")
    .attr("font-size",thisObj.fontSize)
    .attr("font-family",thisObj.fontName)
    .attr("x", function(d, i){return ((r- thisObj.fontSize))*Math.cos(2*i*0.26-1.57)  })
    .attr("y", function(d, i){return 7+((r- thisObj.fontSize))*Math.sin(2*i*0.26-1.57)   })
    .attr("fill", thisObj.textColor)
//    .attr("alignment-baseline", "middle")
    .attr("text-anchor", "middle")
    .text(function(d, i)
             { 
               if (d==0) 
                  return 12;
              else return d;
             }
         );

clockLabelGroup=vis.append("svg:g").attr("transform", "translate(" + offSetX + "," + offSetY + ")");
clockLabelGroup
     .append("svg:text")
    .attr("class", "label")
    .attr("font-size",thisObj.fontSize+clockStrSize)
    .attr("font-family",thisObj.fontName)
    .attr("x", 0)
    .attr("y",r+thisObj.fontSize+clockStrSize+5 )
    .attr("fill", thisObj.textColor)
//    .attr("alignment-baseline", "middle")
    .attr("text-anchor", "middle")
    .text(clockName );

	
digitalGroup=vis.append("svg:g").attr("transform", "translate(" + offSetX + "," + offSetY + ")");
digitalGroup
     .append("svg:text")
    .attr("class", "label")
    .attr("font-size",thisObj.fontSize+clockStrSize)
    .attr("font-family",thisObj.fontName)
    .attr("id",digitalDiv)
    .attr("x", 0)
    .attr("y",-r-5 )
    .attr("fill", thisObj.textColor)
//    .attr("alignment-baseline", "middle")
    .attr("text-anchor", "middle")
    .text("11:11" );	
	
  render = function(data) {
    var hourArc, minuteArc, secondArc;
	$("#"+digitalDiv).text(data[3].string);
    clockGroup.selectAll(".clockhand").remove();
    secondArc = d3.svg.arc().innerRadius(0).outerRadius(r*0.85).startAngle(function(d) {
      return scaleSecs(d.numeric);
    }).endAngle(function(d) {
      return scaleSecs(d.numeric);
    });
    minuteArc = d3.svg.arc().innerRadius(0).outerRadius(r*0.7).startAngle(function(d) {
      return scaleMins(d.numeric);
    }).endAngle(function(d) {
      return scaleMins(d.numeric);
    });
    hourArc = d3.svg.arc().innerRadius(0).outerRadius(r*0.5).startAngle(function(d) {
      return scaleHours(d.numeric % 12);
    }).endAngle(function(d) {
      return scaleHours(d.numeric % 12);
    });
    return clockGroup.selectAll(".clockhand").data(data).enter().append("svg:path").attr("d", function(d) {
      if (d.unit === "seconds") {
        return secondArc(d);
      } else if (d.unit === "minutes") {
        return minuteArc(d);
      } else if (d.unit === "hours") {
        return hourArc(d);
      }
    }).attr("class", "clockhand").attr("stroke", "black").attr("stroke-width", function(d) {
      if (d.unit === "seconds") {
        return 1;
      } else if (d.unit === "minutes") {
        return 3;
      } else if (d.unit === "hours") {
        return 4;
      }
    }).attr("fill", "none");
  };

  setInterval(function() {
    var data;
    data = fields();
    //console.log(data[2].numeric + ":" + data[1].numeric + ":" + data[0].numeric);
    return render(data);
  }, 1000);

}).call(this);

}//end buildChord