JS PLAYGROUND

JavaScript system handling custom element creation, pushing nodes into database.

    var tm = {

      image : function()
      {
        var e = document.createElement("img");
        e.width = "30";
        e.height = "30";
        e.style.border = "1px solid";
        e.style.position = "absolute";
        e.className = "moveable";
        e.style.backgroundColor = "transparent";
        document.getElementById("playground").appendChild(e);
      },

      custom : function()
      {
        var e = document.createElement("div");
        e.style.width = "30px";
        e.style.height = "30px";
        e.style.border = "1px solid";
        e.style.position = "absolute";
        e.className = "moveable";
        e.style.zIndex = 1;
        e.style.backgroundColor = "transparent";
        e.style.textAlign = "center";
        e.style.fontSize = "15px";

        if(tm.a.tagName == "DIV")
        {
          e.style.width = (tm.a.offsetWidth - parseInt(tm.a.style.borderWidth.replace("px",""))*2) /2 + "px";
          e.style.height = (tm.a.offsetHeight - parseInt(tm.a.style.borderWidth.replace("px",""))*2) /2+ "px";
          e.style.Zindex = tm.a.style.Zindex + 1;
          tm.a.appendChild(e);
        }

        else
          document.getElementById("playground").appendChild(e);
      },

      ac : function(el)
      {
        if(el == ''){return;}
        var vls = document.getElementsByClassName("inp");
        this.fn = this.fn || [];

        el.style.width = vls[0].value + "px";
        el.style.height = vls[1].value + "px";
        el.style.borderColor = vls[2].value;
        el.style.borderWidth = vls[3].value + "px";
        el.style.backgroundColor = vls[4].value;
        el.style.fontSize = vls[5].value + "px";
        el.innerHTML = vls[6] == "" ? el.innerHTML : vls[6].value;

          tm.cw(document.getElementById("playground").cloneNode(true));
      },

      qz : function(obj)
      {

       var pairs = "";
       for(var i=0; i<=obj.length-1; i++)
       {
       	pairs = pairs+"('"+obj[i][0]+"','"+obj[i][1]+"'),";
       }

       pairs = pairs.replace(/,\s*$/, "");
       var query = "INSERT INTO `nodes` VALUES "+pairs;
       ajax_id_base(query,"query");
      },

      cw : function(html)
      {
        document.getElementById("view").innerHTML = "";
        html.removeChild(html.children[0]);
        this.fn = [];

        for(var i=0;i<=html.getElementsByClassName("moveable").length-1;i++)
        {
          html.getElementsByClassName("moveable")[i].style.width = (document.getElementById("playground").getElementsByClassName("moveable")[i].offsetWidth/document.getElementById("playground").getElementsByClassName("moveable")[i].parentNode.offsetWidth)*100+"%";
          html.getElementsByClassName("moveable")[i].style.left = (document.getElementById("playground").getElementsByClassName("moveable")[i].offsetLeft/document.getElementById("playground").getElementsByClassName("moveable")[i].parentNode.offsetWidth)*100+"%";
        }

        for(var i=0;i<=html.children.length-1;i++){document.getElementById("view").appendChild(html.children[i].cloneNode(true));}
        for(var i=0;i<=document.getElementById("view").children.length-1;i++){this.fn.push([document.getElementById("view").children[i].outerHTML,document.getElementById("view").children[i].offsetHeight - parseInt(document.getElementById("view").children[i].style.borderWidth.replace("px",""))*2]);}
      },

      gs : function()
      {
        var vls = document.getElementsByClassName("inp");
        vls[0].value = tm.a.offsetWidth - parseInt(tm.a.style.borderWidth.replace("px",""))*2;
        vls[1].value = tm.a.offsetHeight - parseInt(tm.a.style.borderWidth.replace("px",""))*2;
        vls[2].value = tm.a.style.borderColor;
        vls[3].value = tm.a.style.borderWidth.replace("px","");
        vls[4].value = tm.a.style.backgroundColor;
        vls[5].value = tm.a.style.fontSize.replace("px","");
        vls[6].value = tm.a.innerHTML.indexOf(">") > -1 ? "" : tm.a.innerHTML;
       },

       a : ""
      }

      document.getElementById("playground").onmousedown = function(e)
      {
        if(e.target.className != "moveable"){return;}

        var mouse_x_origin = e.pageX;
        var mouse_y_origin = e.pageY;
        var origin_left = e.target.offsetLeft;
        var origin_top = e.target.offsetTop;

        tm.a = e.target;
        tm.gs();

        document.getElementById("playground").onmousemove = function(e)
        {
          var mouse_relative_left = e.pageX;
          var mouse_relative_top = e.pageY;
          tm.a.style.left = origin_left + mouse_relative_left-mouse_x_origin + "px";
          tm.a.style.top = origin_top + mouse_relative_top-mouse_y_origin + "px";
        }
      }
      document.getElementById("playground").onmouseup = function(e){document.getElementById("playground").onmousemove = function(e){return false;}}