var dx = {
 
                               open : function()
                               {
                           
                                var spacer = "<font color='blue'><strong> | </strong></font>"; 
                                var q = document.getElementsByTagName('*');
                                var k = q.length;
                                var active_x = '';
                                var el = [];
 
                                container = document.createElement('div');
                                container.style.position = 'absolute';
                                container.style.top = 20 + 'px';
                                container.style.left = 20 + 'px';
                                container.style.width = window.innerWidth /2 + 'px';
                                container.style.height = window.innerHeight /3 + 'px';
                                container.style.zIndex = 1000;
                                container.style.backgroundColor = 'rgba(255,255,255,0.9)';
                                container.style.border = '1px solid';
                                container.id='dx_container_v_88661_92701uniq.9';
 
                                 document.body.appendChild(container);
 
                                   var hd = document.createElement('div');
                                   hd.style.position = 'absolute';
                                   hd.style.top = 5 + 'px';
                                   hd.style.left = 10 + 'px';
                                   hd.style.height = 15 + 'px';
                                   hd.style.fontFamily = "‘Lucida Console’, Monaco, monospace";
                                   hd.style.fontSize = '70%';
                                   container.appendChild(hd);
 
                                   var itemstore = document.createElement('div');
                                   itemstore.style.top = 21 + 'px';
                                   itemstore.style.left = 10 + 'px';
                                   itemstore.style.position = 'absolute';
                                   itemstore.style.width = container.offsetWidth -25 + 'px';
                                   itemstore.style.height = container.offsetHeight - 10 - 21*2 + 'px';
                                   itemstore.style.overflow = 'scroll';
                                   container.appendChild(itemstore);

                                  cnv = document.createElement('canvas');
                                  cnv.style.position = 'absolute';
                                  cnv.style.left = 2 + 'px';
                                  cnv.style.top = 10 + 'px';
                                  cnv.height = k*17-5;
                                  cnv.width = 30;
                                  itemstore.appendChild(cnv);
 
                                    var changer = document.createElement('div');
                                    changer.style.position = 'absolute';
                                    changer.style.left = 10 + 'px';
                                    changer.style.bottom = 2 + 'px';
                                    changer.style.width = container.offsetWidth-25 + 'px';
                                    changer.style.height = 18 + 'px';
                                    container.appendChild(changer);
 
                                    var idf = document.createElement('input');
                                    idf.type='text';
                                    idf.placeholder = 'Id';
                                    idf.style.position = 'absolute';
                                    idf.style.top = 0;idf.style.left = 0;
                                    idf.style.fontSize = '60%';
                                    idf.style.height = 7 + 'px';
                                    idf.style.width = 100 + 'px';
                                    idf.style.fontFamily = "‘Lucida Console’, Monaco, monospace";
                                    changer.appendChild(idf);
 
                                    var clf = document.createElement('input');
                                    clf.type='text';
                                    clf.placeholder = 'Class';
                                    clf.style.position='absolute';
                                    clf.style.top = 0;clf.style.left = idf.offsetWidth + 5 + 'px';
                                    clf.style.fontSize = '60%';
                                    clf.style.height = 7 + 'px';
                                    clf.style.width = 100 + 'px';
                                    clf.style.fontFamily = "‘Lucida Console’, Monaco, monospace";
                                    changer.appendChild(clf);

                                    var evf = document.createElement('input');
                                    evf.type='text';
                                    evf.placeholder = 'Eval';
                                    evf.style.position='absolute';
                                    evf.style.top = 0;evf.style.left = clf.offsetLeft + clf.offsetWidth + 5 + 'px';
                                    evf.style.fontSize = '60%';
                                    evf.style.height = 7 + 'px';
                                    evf.style.width = 100 + 'px';
                                    clf.style.fontFamily = "‘Lucida Console’, Monaco, monospace";
                                    changer.appendChild(evf);
 
                                    idf.onkeyup = function(e)
                                    {
                                     active_x.id = idf.value;
                                     hd.innerHTML = "ID='"+active_x.id+"'"+spacer+"Class='"+active_x.className+"'"+spacer+'Children='+active_x.children.length+spacer+"Parent Node='"+active_x.parentNode.tagName+"'"+spacer; 
                                    }
 
                                    clf.onkeyup = function(e)
                                    {
                                     active_x.className = clf.value;
                                     hd.innerHTML = "ID='"+active_x.id+"'"+spacer+"Class='"+active_x.className+"'"+spacer+'Children='+active_x.children.length+spacer+"Parent Node='"+active_x.parentNode.tagName+"'"+spacer; 
                                    }

                                    evf.onkeypress = function(e)
                                    {

                                     if(e.keyCode == 13)
                                     {
                                      var query = evf.value;
                                      eval("active_x"+query);
                                      hd.innerHTML = "ID='"+active_x.id+"'"+spacer+"Class='"+active_x.className+"'"+spacer+'Children='+active_x.children.length+spacer+"Parent Node='"+active_x.parentNode.tagName+"'"+spacer; ;
                                     }                  
                                    }
                                   
                                window.onresize = function(e)
                                {
 
                                 container.style.top = 20 + 'px';
                                 container.style.left = 20 + 'px';
                                 container.style.width = window.innerWidth /2 + 'px';
                                 container.style.height = window.innerHeight /3 + 'px';
                                 itemstore.style.width = container.offsetWidth -25 + 'px';
                                 itemstore.style.height = container.offsetHeight - 10 - 21*2 + 'px';
                                 changer.style.width = container.offsetWidth-25 + 'px';
                                 for(var i=0;i<=k-1;i++){el[i].style.width = itemstore.offsetWidth-20-10 + 'px';}
                                };
 
                                  for(var i=0;i<=k-1;i++)
                                  {
 
                                   el[i] = document.createElement('div');
                                   el[i].style.position = 'absolute';
                                   el[i].style.top = 10+ i*17 + 'px';
                                   el[i].style.height = 15 + 'px';
                                   el[i].style.width = itemstore.offsetWidth-20-10 + 'px';
                                   el[i].style.cursor = 'pointer';
                                   el[i].style.textAlign = 'center';
                                   el[i].style.fontFamily = "‘Lucida Console’, Monaco, monospace";
                                   el[i].style.fontSize = '60%';
                                   el[i].innerHTML = '< ' +q[i].tagName.toLowerCase() + '>';
                                   el[i].onmouseover = function(e){e.target.style.backgroundColor='rgba(128,128,128,0.5)';e.target.style.color='white';q[parseInt(e.target.id)].style.border = '1px solid black';}
                                   el[i].onmouseout = function(e){e.target.style.backgroundColor='inherit';e.target.style.color='black';q[parseInt(e.target.id)].style.border = 'inherit';}
                                   el[i].onclick = function(e){
 
                                                                            active_x=q[parseInt(e.target.id)];
                                                                            idf.value=q[parseInt(e.target.id)].id;
                                                                            clf.value=q[parseInt(e.target.id)].className;1
 
                                                                            e.target.innerHTML = '* '+'< ' +q[parseInt(e.target.id)].tagName.toLowerCase() + '>'+' *';
                                                                            for(var d=0;d<=k-1;d++){if(d!=parseInt(e.target.id))el[d].innerHTML='< ' +q[d].tagName.toLowerCase() + '>';}

                                                                               var ctx = cnv.getContext('2d');
                                                                               var child = e.target.offsetTop-3;
                                                                               var passtru = false;
                                                                               for(var i=0;i<=el.length-1;i++){if(q[i] == q[e.target.id].parentNode){parent=el[i].offsetTop-3;passtru=true;break;}}

                                                                               cnv.width = cnv.width;

                                                                               if(passtru)
                                                                               {
                                                                                ctx.beginPath();
                                                                                ctx.strokeStyle = 'blue';

                                                                                ctx.moveTo(10,child);                                                                             
                                                                                ctx.lineTo(1,child);
                                                                                ctx.moveTo(10,parent);
                                                                                ctx.lineTo(1,parent);
                                                                                ctx.moveTo(1,parent);
                                                                                ctx.lineTo(1,child);

                                                                                ctx.stroke();
                                                                                ctx.closePath();
                                                                               }

                                                                            var kids = [];
                                                                            for(var b=0;b<=q[parseInt(e.target.id)].children.length-1;b++)
                                                                            {
                                            
                                                                             for(var m=0;m<=k-1;m++)
                                                                             {
                                                                              if(q[m] == q[parseInt(e.target.id)].children[b]){kids.push(el[m].offsetTop-3);}
                                                                             }
                                                                            }

                                                                             var ctx = cnv.getContext('2d');                                                                         
                                                                             ctx.beginPath();

                                                                            for(var i=0;i<=kids.length-1;i++)
                                                                            {
                                                                            
                                                                              ctx.strokeStyle='red';
                                                                              ctx.moveTo(30,kids[i]);
                                                                              ctx.lineTo(20,kids[i]);
                                                                              ctx.moveTo(20,kids[i]);
                                                                              ctx.lineTo(20,kids[i+1]);
                                                                              ctx.moveTo(20,kids[i+1]);
                                                                             
                                                                            }  

                                                                            ctx.stroke();          
                                                                            ctx.closePath();                                                               

                                                                            hd.innerHTML = "ID='"+q[parseInt(e.target.id)].id+"'"+spacer+"Class='"+q[parseInt(e.target.id)].className+"'"+spacer+'Children='+q[parseInt(e.target.id)].children.length+spacer+"Parent Node='"+q[parseInt(e.target.id)].parentNode.tagName+"'"+spacer;}
                                                                            el[i].id = i.toString();
                                  }
 
                                   for(var c=0;c<=el.length-1;c++){itemstore.appendChild(el[c]);}
                               },
 
                               kill : function(){document.body.removeChild(container);},
                               count : document.getElementsByTagName('*').length
                             }