anna.md

(function(){

	function Circle(){

		var top, left, width, height, bgcolor, figure, figureType, figureWidth, figurePositionX, figurePositionY, figureColor,
        clickedFigure;
	
		setSize = function(){
			if(newWidth.value){
				if (newWidth.value > 400){
					alert("Too big figure, choose less one")
					return false;                                             ///???????????????????????
				}else{
					width = newWidth.value + "px"
					height = width;
          return true;
				}
			}else{
				 newWidth.value = 30;
      	 width = newWidth.value+'px';
         return true;
			}
		}
    document.querySelector('.save-btn')
      .addEventListener('click', editFigure)

		setCoordinates = function(newTop, newLeft){
			top = (newTop - 0.5*newWidth.value) + "px";
			left = (newLeft - 0.5*newWidth.value) + "px";

			// top = newTop + "px";
			// left = newLeft + "px"
		}

		setColor = function(){
			bgcolor =  newColor.value;
		}



		setFigure = function(){
			var radios = document.getElementsByName("figure");
			for (var i = 0; i < radios.length; i++){
				if (radios[i].checked){
					figure = radios[i].value
				}
			}
		}

	// 1) При нажатии на созданную фигуру передавать данные о фигуре в окно для редактирования.
		infoFigure = function(event){
			figureType = event.target.className
			figureWidth = event.target.clientWidth
			figureColor = event.target.style.backgroundColor;
			figurePositionX = parseInt(event.target.style.left);
			figurePositionY = parseInt(event.target.style.top);
      clickedFigure = event.target;

			var type = document.getElementById("figureType").value = figureType
			var wdth = document.getElementById("figureWidth").value = figureWidth
			var color = document.getElementById("figureColor").value = figureColor
			var position = document.getElementById("figurePosition").value = figurePositionX + "; " + figurePositionY
		}
    
    function editFigure() {
      if (!clickedFigure) {
        return;
      }
      var type = document.getElementById("figureType").value;
			var width = document.getElementById("figureWidth").value;
			var color = document.getElementById("figureColor").value;
			var position = document.getElementById("figurePosition").value;
      
      clickedFigure.style.width = width + "px";
			clickedFigure.style.height = width + "px";
      var coords = position.split(/;\s*/g)
      if (isNaN(+coords[0]) || isNaN(+coords[1])) {
        alert("Your coordinates is not valid");
        return;
      }
			clickedFigure.style.top = coords[1] + "px";
			clickedFigure.style.left = coords[0] + "px";
			clickedFigure.style.backgroundColor = color
      
      if(type === "circle") {
        clickedFigure.classList.remove("square")
        clickedFigure.classList.add("circle")
      }
      if(type === "square") {
        clickedFigure.classList.remove("circle")
        clickedFigure.classList.add("square")
      }
    }
    
    function isWhiteLike() {
      var pattern = /^#([0-9a-fA-F]{1,2})([0-9a-fA-F]{1,2})([0-9a-fA-F]{1,2})$/g;
      var matches = pattern.exec(bgcolor)
      matches.shift();
      
      return matches.every(function(hex){
         var integer = parseInt(hex, 16);
         return integer > 220;
      })
      
      // var result = true;
      // for (var i = 0; i < matches.length; i++)
      // {
      //   var integer = parseInt(matches[i], 16);
      //   if(integer < 220) {
      //     result = false;
      //     break;
      //   }
      // }
      //return result;
    }


		this.create = function(event){
			// console.log(event)
			
			var element = document.createElement("div")
			setFigure()
      console.log(figure)
      if(!figure) return;
			element.className = figure
			
			if (!setSize()) {
        return;
      }
			if((event.target.classList.contains("circle"))||(event.target.classList.contains("square"))){
				return
			}
			setCoordinates(event.layerY, event.layerX)
			
			setColor()
			element.style.width = width
			element.style.height = height
			element.style.top = top;
			element.style.left = left;
			element.style.backgroundColor = bgcolor
      if (isWhiteLike()) {
        element.style.border = "2px solid #000"
      }
			area.appendChild(element)
			element.addEventListener("click", infoFigure)
		}
	}

	var c = new Circle();
	area.addEventListener("click", c.create)


}())