<style type='text/css'>
      .mandala-wrap {
        max-width: 1170px;
        margin: 0 auto;
        text-align: center;
      }
      canvas#mandalaCanvas {
        margin-top: 50px;
        margin-bottom: 30px;
        width: 600px;
        max-width: 100%;
      }
      .mandala-download {
        padding: 5px 10px;
        background-color: #000;
        color: #fff;
        border-radius: 4px;
        text-decoration: none;
        display: none;
        cursor: pointer;
      }
    </style><div class="mandala-wrap">
    <h2>e-Mandala zilei <br>(a unei date, fie ea zi de naștere, sau o zi oarecare)</h2>
	<center><small>Un proiect realizat de Vlad T. Popescu</small><br>
	Aplicație realizată de Bran Andrei Petru</small></center>
	</center><br>
    <p>Alege ziua pentru care doresti sa vizualizezi mandala! 
	<br>Imaginea generată poate fi descărcată cu click dreapta, <br>sau apăsând butonul "Descarcă imaginea" de sub ea.<br>
	</p>
	  
      <select name="day" id="day" onchange="setFormDays(month,this,year)"></select>
      <select name="month" id="month" onchange="setFormDays(this,day,year)"></select>
      <select name="year" id="year" onchange="setFormDays(month,day,this)"></select>
      <button type="submit" id="generate">Genereaza</button>
      <div>
        <canvas id="mandalaCanvas" width="1000" height="1000"></canvas>
      </div>
      <button class="mandala-download" id="download">Descarca Imaginea</button>
    </div><script>
    //Set the number of days each month has and the month names
    var monthDays = {'1': 31, '2': 28, '3': 31, '4': 30, '5': 31, '6': 30, '7': 31, '8': 31, '9': 30, '10': 31, '11': 30, '12': 31},
        months = ['Ianuarie', 'Februarie', 'Martie', 'Aprilie', 'Mai', 'Iunie', 'Iulie', 'August', 'Septembrie', 'Octombrie', 'Noiembrie', 'Decembrie'],
        dayInput = document.getElementById('day'),
        monthInput = document.getElementById('month'),
        yearInput = document.getElementById('year'),
        generateBtn = document.getElementById('generate');

    //Append the data to the month select
    for (var i = 0; i < months.length; i++) {
      var opt = document.createElement('option');
      var value = i + 1;
      opt.value = value;
      opt.innerHTML = months[i];
      monthInput.appendChild(opt);
    }

    //Append the data to the day select
    for (var i = 1; i <= 31; i++) {
      var opt = document.createElement('option');
      opt.value = i;
      opt.innerHTML = i;
      dayInput.appendChild(opt);
    }

    //Append the data to the year select
    var futureYear = new Date().getFullYear() + 50,
        startYear = new Date().getFullYear() - 100;
    for (var i = startYear; i <= futureYear; i++) {
      var opt = document.createElement('option');
      opt.value = i;
      opt.innerHTML = i;
      yearInput.appendChild(opt);
    }

    //Generate number of days each month has. Also works with bisect years.
    function setFormDays(oMonthSel, oDaysSel, oYearSel) {
    	var nDays, oDaysSelLgth, opt, i = 1;
    	nDays = monthDays[oMonthSel[oMonthSel.selectedIndex].value];
    	if (nDays == 28 && oYearSel[oYearSel.selectedIndex].value % 4 == 0)
    		++nDays;
    	oDaysSelLgth = oDaysSel.length;
    	if (nDays != oDaysSelLgth) {
    		if (nDays < oDaysSelLgth)
    			oDaysSel.length = nDays;
    		else for (i; i < nDays - oDaysSelLgth + 1; i++) {
    			opt = new Option(oDaysSelLgth + i, oDaysSelLgth + i);
          oDaysSel.options[oDaysSel.length] = opt;
    		}
    	}
    	var oForm = oMonthSel.form;
    	var month = oMonthSel.options[oMonthSel.selectedIndex].value;
    	var day = oDaysSel.options[oDaysSel.selectedIndex].value;
    	var year = oYearSel.options[oYearSel.selectedIndex].value;
    }

    generateBtn.onclick = function() {
      var days = 12,
          segmentDepth = 498,
          segmentHeight = segmentDepth / 12,
          dayVal = dayInput.value,
          monthVal = monthInput.value,
          yearVal = yearInput.value.substring(2);
      if(dayVal < 10) {
        dayVal = '0'+dayVal;
      }
      if(monthVal < 10) {
        monthVal = '0'+monthVal;
      }

      var mandalaNumbers = [];

      var fullDate = dayVal + monthVal + yearVal,
          reversedDate = reverseString(fullDate),
          initialValues = fullDate + reversedDate + fullDate + reversedDate,
          valuesArr = Array.from(initialValues);

      if(valuesArr.length == 24) {
        mandalaNumbers.push(valuesArr);
        // start drawing our chart
        for (var i = 0; i < days; i++) {
          var prevValues = mandalaNumbers[i-1],
              newValues = [],
              centervalues = [];
          if(i > 0 && i < 11) {
            for (var v = 0; v < prevValues.length; v++) {
              var firstValue = Number(prevValues[0]),
                  lastValue = Number(prevValues[prevValues.length-1]),
                  nextValue = Number(prevValues[v+1]),
                  prevValue = Number(prevValues[v-1]),
                  currentValue = Number(prevValues[v]),
                  pushValue = prevValue + currentValue;
              if(v == 0) {
                pushValue = firstValue + lastValue;
              }

              if(pushValue >= 10) {
                pushValue = Array.from(pushValue.toString()).map(Number);
                pushValue = pushValue[0] + pushValue[1];
              }
              newValues.push(pushValue.toString());
            }
            mandalaNumbers.push(newValues);
          } else if(i == 11) {
            centerValue = Number(prevValues[prevValues.length-1]) + Number(prevValues[prevValues.length-2]);
            if(centerValue >= 10) {
              centerValue = Array.from(centerValue.toString()).map(Number);
              centerValue = centerValue[0] + centerValue[1];
            }
            mandalaNumbers.push([centerValue.toString()]);
          }
          var radius = segmentDepth - (i * segmentHeight);
          drawSegments(radius, segmentDepth, i, mandalaNumbers);
        }
        drawLines();
      }

    }

    function drawSegments(radius, segmentDepth, canvasNo, mandalaNumbers) {
      var canvas = document.getElementById('mandalaCanvas'),
          context = canvas.getContext('2d'),
          x = canvas.width / 2,
          y = canvas.height / 2,
          segments = (canvasNo == 11 ? 1 : 24),
          angleFills = mandalaNumbers[canvasNo];

      // size of a pie : it is an angle in radians
      var pieAngle = 2 * Math.PI / segments;

      for (var i = 0; i < segments; i++) {
        var sAngle = i*pieAngle - (Math.PI/2),
            eAngle = (i+1)*pieAngle - (Math.PI/2),
            colorNo = (angleFills ? angleFills[i] : ''),
            defColor = '#fff';

        if(canvasNo > 0 && canvasNo != 11) {
          var decale = (canvasNo / 2) * pieAngle;
          sAngle = sAngle - decale;
          eAngle = eAngle - decale;
        }

        context.beginPath();
        context.moveTo(x, y);

        if(canvasNo == 11) {
          context.arc(x, y, radius, 0, 2 * Math.PI, false);
        } else {
          context.arc(x, y, radius, sAngle, eAngle, false);
        }

        if (colorNo == 1) {
      defColor = '#FF0000';
    } else if (colorNo == 2) {
      defColor = '#0000ff';
    } else if (colorNo == 3) {
      defColor = '#00cc00';
    } else if (colorNo == 4) {
      defColor = '#FFFF00';
    } else if (colorNo == 5) {
      defColor = '#bfddff';
    } else if (colorNo == 6) {
      defColor = '#00eeee';
    } else if (colorNo == 7) {
      defColor = '#ff1493';
    } else if (colorNo == 8) {
      defColor = '#ff911f';
    } else if (colorNo == 9) {
      defColor = '#9400d3';
    }

        context.fillStyle = defColor;
        context.lineWidth = 1;
        context.strokeStyle = '#000';

        context.closePath();

        if(canvasNo == 11) {
          context.stroke();
          context.fill();
        } else {
          context.fill();
          context.stroke();
        }

      }

      //display the download link
      document.getElementById('download').style.display = 'inline-block';
    }

    function drawLines() {
      var canvas = document.getElementById('mandalaCanvas'),
          context = canvas.getContext('2d');

      //draw the lines
      var canvasLines = {
        'line0' : {
          'startPosition' : [459, 489],
          'points': { 0:[421, 478], 1:[424, 467], 2:[385, 453], 3:[392, 437], 4:[357, 417], 5:[368, 398], 6:[336, 374], 7:[354, 352], 8:[325, 322], 9:[349, 301], 10:[325, 268], 11:[355, 247], 12:[336, 212], 13:[373, 193], 14:[356, 155], 15:[404, 139], 16:[392, 100], 17:[447, 88], 18:[441, 48], 19:[500, 43], 20:[500, 0] },
        },
        'line1' : {
          'startPosition' : [541, 489],
          'points': { 0:[579, 478], 1:[576, 467], 2:[615, 453], 3:[608, 437], 4:[643, 417], 5:[632, 398], 6:[664, 374], 7:[646, 352], 8:[675, 322], 9:[651, 301], 10:[675, 268], 11:[645, 247], 12:[664, 212], 13:[627, 193], 14:[644, 155], 15:[596, 139], 16:[608, 100], 17:[553, 88], 18:[559, 48], 19:[500, 43], 20:[500, 0] },
        },
        'line2' : {
          'startPosition' : [459, 511],
          'points': { 0:[421, 522], 1:[424, 533], 2:[385, 547], 3:[392, 563], 4:[357, 583], 5:[368, 602], 6:[336, 626], 7:[354, 648], 8:[325, 678], 9:[349, 699], 10:[325, 732], 11:[355, 753], 12:[336, 788], 13:[373, 807], 14:[356, 845], 15:[404, 861], 16:[392, 900], 17:[447, 912], 18:[441, 952], 19:[500, 957], 20:[500, 1000] },
        },
        'line3' : {
          'startPosition' : [541, 511],
          'points': { 0:[579, 522], 1:[576, 533], 2:[615, 547], 3:[608, 563], 4:[643, 583], 5:[632, 602], 6:[664, 626], 7:[646, 648], 8:[675, 678], 9:[651, 699], 10:[675, 732], 11:[645, 753], 12:[664, 788], 13:[627, 807], 14:[644, 845], 15:[596, 861], 16:[608, 900], 17:[553, 912], 18:[559, 952], 19:[500, 957], 20:[500, 1000] },
        }
      }

      for (var s = 0; s < 4; s++) {
        var startPosition = canvasLines['line'+s].startPosition,
            points = canvasLines['line'+s].points;
        context.beginPath();
        context.lineWidth = 4;
        context.strokeStyle = '#000';
        context.moveTo(startPosition[0],startPosition[1]);
        for (var point in points) {
          context.lineTo(points[point][0],points[point][1]);
        }
        context.stroke();
        context.closePath();
      }

    }

    function reverseString(str) {
      var splitString = str.split('');
      var reverseArray = splitString.reverse();
      var joinArray = reverseArray.join('');
      return joinArray;
    }

    /**
     * This is the function that will take care of image extracting and
     * setting proper filename for the download.
    */
    function downloadCanvas(link, canvasId, filename) {
      link.href = document.getElementById(canvasId).toDataURL();
      link.download = filename;
    }

    /**
     * The event handler for the link's onclick event. We give THIS as a
     * parameter (=the link element), ID of the canvas and a filename.
    */
    document.getElementById('download').addEventListener('click', function() {
      downloadCanvas(this, 'mandalaCanvas', 'mandala-zi-nastere.png');
    }, false);

    /**
     * Rotate canvas 90 degrees
    */
    var canvas = document.getElementById('mandalaCanvas'),
        context = canvas.getContext('2d');
    context.translate(canvas.width , 0);
    context.rotate(Math.PI / 2);

    </script>{"id":453,"date":"2017-09-17T10:48:44","date_gmt":"2017-09-17T10:48:44","guid":{"rendered":"https:\/\/sfat.info.ro\/wordpress\/?p=453"},"modified":"2018-03-13T16:34:40","modified_gmt":"2018-03-13T16:34:40","slug":"aplicatie-pentru-generarea-mandalei-unei-date","status":"publish","type":"post","link":"https:\/\/sfat.info.ro\/wordpress\/?p=453","title":{"rendered":"Genereaz\u0103 e-mandala zilei"},"content":{"rendered":"<p><center><a href=\"https:\/\/sfat.info.ro\/wordpress\/?p=623\" target=\"_blank\"><strong>Aici g\u0103si\u021bi mai multe despre numerele \u0219i culorile e-mandalei<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala-150x150.png\" alt=\"\" width=\"150\" height=\"150\" class=\"aligncenter size-thumbnail wp-image-690\" srcset=\"https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala-150x150.png 150w, https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala-300x300.png 300w, https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala-768x768.png 768w, https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala.png 1000w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/center><br \/>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aici g\u0103si\u021bi mai multe despre numerele \u0219i culorile e-mandalei<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[27],"class_list":["post-453","post","type-post","status-publish","format-standard","hentry","category-e-mandala","tag-e-mandala","has_thumb"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p9kw6W-7j","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=453"}],"version-history":[{"count":8,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/453\/revisions"}],"predecessor-version":[{"id":1046,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/453\/revisions\/1046"}],"wp:attachment":[{"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}