var Log = {
    elem: false,
    write: function(text){
        if (!this.elem) 
            this.elem = document.getElementById('log');
        this.elem.innerHTML = text;
        this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
    }
};

function addEvent(obj, type, fn) {
    if (obj.addEventListener) obj.addEventListener(type, fn, false);
    else obj.attachEvent('on' + type, fn);
};


function init(){
    
    //init data
    var json = "{children:[{children:[{children:[], data:{$area:\"80\", $color:\"30\", image:\"http://images.amazon.com/images/P/B0007DAZW8.01.MZZZZZZZ.jpg\"}, id:\"056e4f3e-d505-4dad-8ec1-d04f521cbb56Human After All\", name:\"Human After All\"}], data:{$area:80}, id:\"056e4f3e-d505-4dad-8ec1-d04f521cbb56a\", name:\"Daft Punk\"}, {children:[{children:[], data:{$area:\"94\", $color:\"23\", image:\"http://cdn.last.fm/coverart/130x130/2393956.jpg\"}, id:\"f2fa5cf6-e0b0-4559-8641-e033f1a9e6fcClearing the Channel\", name:\"Clearing the Channel\"}], data:{$area:94}, id:\"f2fa5cf6-e0b0-4559-8641-e033f1a9e6fca\", name:\"Sinch\"}, {children:[{children:[], data:{$area:\"211\", $color:\"2\", image:\"http://cdn.last.fm/coverart/130x130/2564320-1193176651.jpg\"}, id:\"4bd95eea-b9f6-4d70-a36c-cfea77431553Music Bank\", name:\"Music Bank\"}], data:{$area:211}, id:\"4bd95eea-b9f6-4d70-a36c-cfea77431553a\", name:\"Alice in Chains\"}, {children:[{children:[], data:{$area:\"153\", $color:\"6\", image:\"http://userserve-ak.last.fm/serve/174s/8590493.jpg\"}, id:\"8bfac288-ccc5-448d-9573-c33ea2aa5c30One Hot Minute\", name:\"One Hot Minute\"}, {children:[], data:{$area:\"69\", $color:\"35\", image:\"http://userserve-ak.last.fm/serve/174s/8593509.jpg\"}, id:\"8bfac288-ccc5-448d-9573-c33ea2aa5c30Californication\", name:\"Californication\"}, {children:[], data:{$area:\"69\", $color:\"35\", image:\"http://userserve-ak.last.fm/serve/174s/8672727.jpg\"}, id:\"8bfac288-ccc5-448d-9573-c33ea2aa5c30Greatest Hits\", name:\"Greatest Hits\"}], data:{$area:291}, id:\"8bfac288-ccc5-448d-9573-c33ea2aa5c30a\", name:\"Red Hot Chili Peppers\"}, {children:[{children:[], data:{$area:\"114\", $color:\"15\", image:\"http://images.amazon.com/images/P/B0000UX5IY.01._SCMZZZZZZZ_.jpg\"}, id:\"ff6e677f-91dd-4986-a174-8db0474b1799Thicker Than Water\", name:\"Thicker Than Water\"}, {children:[], data:{$area:\"83\", $color:\"28\", image:\"http://userserve-ak.last.fm/serve/174s/8599099.jpg\"}, id:\"ff6e677f-91dd-4986-a174-8db0474b1799On and On\", name:\"On and On\"}, {children:[], data:{$area:\"62\", $color:\"41\", image:\"http://userserve-ak.last.fm/serve/174s/8664981.jpg\"}, id:\"ff6e677f-91dd-4986-a174-8db0474b1799Brushfire Fairytales\", name:\"Brushfire Fairytales\"}], data:{$area:259}, id:\"ff6e677f-91dd-4986-a174-8db0474b1799a\", name:\"Jack Johnson\"}, {children:[{children:[], data:{$area:\"65\", $color:\"38\", image:\"http://userserve-ak.last.fm/serve/174s/23727633.jpg\"}, id:\"83b9cbe7-9857-49e2-ab8e-b57b01038103Vs.\", name:\"Vs.\"}, {children:[], data:{$area:\"61\", $color:\"44\", image:\"http://userserve-ak.last.fm/serve/174s/19611679.jpg\"}, id:\"83b9cbe7-9857-49e2-ab8e-b57b01038103Riot Act\", name:\"Riot Act\"}, {children:[], data:{$area:\"61\", $color:\"44\", image:\"http://userserve-ak.last.fm/serve/174s/17492447.jpg\"}, id:\"83b9cbe7-9857-49e2-ab8e-b57b01038103Yield\", name:\"Yield\"}], data:{$area:187}, id:\"83b9cbe7-9857-49e2-ab8e-b57b01038103a\", name:\"Pearl Jam\"}, {children:[{children:[], data:{$area:\"115\", $color:\"14\", image:\"http://userserve-ak.last.fm/serve/174s/17484209.jpg\"}, id:\"bfd085b8-0bbf-46b3-8ab9-193bca5c85e7Above\", name:\"Above\"}], data:{$area:115}, id:\"bfd085b8-0bbf-46b3-8ab9-193bca5c85e7a\", name:\"Mad Season\"}, {children:[{children:[], data:{$area:\"108\", $color:\"17\", image:\"http://images.amazon.com/images/P/B000002J8M.01._SCMZZZZZZZ_.jpg\"}, id:\"8c32bb01-58a3-453b-8050-8c0620edb0e5Tiny Music... Songs From the Vatican Gift Shop\", name:\"Tiny Music... Songs From the Vatican Gift Shop\"}, {children:[], data:{$area:\"60\", $color:\"46\", image:\"http://images.amazon.com/images/P/B000002IU3.01.MZZZZZZZ.jpg\"}, id:\"8c32bb01-58a3-453b-8050-8c0620edb0e5Core\", name:\"Core\"}], data:{$area:168}, id:\"8c32bb01-58a3-453b-8050-8c0620edb0e5a\", name:\"Stone Temple Pilots\"}, {children:[{children:[], data:{$area:\"63\", $color:\"40\", image:\"http://images.amazon.com/images/P/B00005NWLC.01.MZZZZZZZ.jpg\"}, id:\"7b2f87f6-db90-464e-a27a-deb4f7219e90Leitmotif\", name:\"Leitmotif\"}], data:{$area:63}, id:\"7b2f87f6-db90-464e-a27a-deb4f7219e90a\", name:\"dredg\"}, {children:[{children:[], data:{$area:\"188\", $color:\"3\", image:\"http://images.amazon.com/images/P/B000EULJLU.01._SCMZZZZZZZ_.jpg\"}, id:\"66fc5bf8-daa4-4241-b378-9bc9077939d210,000 Days\", name:\"10,000 Days\"}], data:{$area:188}, id:\"66fc5bf8-daa4-4241-b378-9bc9077939d2a\", name:\"Tool\"}, {children:[{children:[], data:{$area:\"62\", $color:\"41\", image:\"http://images.amazon.com/images/P/B00001P4TH.01._SCMZZZZZZZ_.jpg\"}, id:\"b7ffd2af-418f-4be2-bdd1-22f8b48613daThe Fragile (Left)\", name:\"The Fragile (Left)\"}], data:{$area:62}, id:\"b7ffd2af-418f-4be2-bdd1-22f8b48613daa\", name:\"Nine Inch Nails\"}, {children:[{children:[], data:{$area:\"240\", $color:\"1\", image:\"http://userserve-ak.last.fm/serve/174s/21881921.jpg\"}, id:\"a5585acd-9b65-49a7-a63b-3cc4ee18846eMother Love Bone\", name:\"Mother Love Bone\"}], data:{$area:240}, id:\"a5585acd-9b65-49a7-a63b-3cc4ee18846ea\", name:\"Mother Love Bone\"}, {children:[{children:[], data:{$area:\"67\", $color:\"37\", image:\"http://userserve-ak.last.fm/serve/174s/8634595.jpg\"}, id:\"7527f6c2-d762-4b88-b5e2-9244f1e34c46Around the Fur\", name:\"Around the Fur\"}], data:{$area:67}, id:\"7527f6c2-d762-4b88-b5e2-9244f1e34c46a\", name:\"Deftones\"}, {children:[{children:[], data:{$area:\"62\", $color:\"41\", image:\"http://images.amazon.com/images/P/B0000A5BYD.03.MZZZZZZZ.jpg\"}, id:\"7bdb6921-8380-422c-8514-87cf30d5d8ccIt All Makes Sense Now\", name:\"It All Makes Sense Now\"}], data:{$area:62}, id:\"7bdb6921-8380-422c-8514-87cf30d5d8cca\", name:\"Kr\xF3m\"}, {children:[{children:[], data:{$area:\"57\", $color:\"48\", image:\"http://images-eu.amazon.com/images/P/B00005IABM.02.MZZZZZZZ.jpg\"}, id:\"cb67438a-7f50-4f2b-a6f1-2bb2729fd53810,000 Hz Legend\", name:\"10,000 Hz Legend\"}], data:{$area:57}, id:\"cb67438a-7f50-4f2b-a6f1-2bb2729fd538a\", name:\"Air\"}, {children:[{children:[], data:{$area:\"168\", $color:\"5\", image:\"http://userserve-ak.last.fm/serve/174s/23091681.jpg\"}, id:\"c5998351-be49-49d8-8593-3e96f129c1fcMamagubida\", name:\"Mamagubida\"}, {children:[], data:{$area:\"141\", $color:\"7\", image:\"http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_mega.png\"}, id:\"c5998351-be49-49d8-8593-3e96f129c1fcReggae \xE0 Coup de Cirque\", name:\"Reggae \xE0 Coup de Cirque\"}, {children:[], data:{$area:\"135\", $color:\"8\", image:\"http://userserve-ak.last.fm/serve/174s/16799743.jpg\"}, id:\"c5998351-be49-49d8-8593-3e96f129c1fcGrain de sable\", name:\"Grain de sable\"}, {children:[], data:{$area:\"80\", $color:\"30\", image:\"http://userserve-ak.last.fm/serve/174s/8635653.jpg\"}, id:\"c5998351-be49-49d8-8593-3e96f129c1fcFaut qu'ils s'activent...\", name:\"Faut qu'ils s'activent...\"}], data:{$area:524}, id:\"c5998351-be49-49d8-8593-3e96f129c1fca\", name:\"Tryo\"}, {children:[{children:[], data:{$area:\"57\", $color:\"48\", image:\"http://userserve-ak.last.fm/serve/174s/8634627.jpg\"}, id:\"4bb4e4e4-5f66-4509-98af-62dbb90c45c5The Sickness\", name:\"The Sickness\"}], data:{$area:57}, id:\"4bb4e4e4-5f66-4509-98af-62dbb90c45c5a\", name:\"Disturbed\"}, {children:[{children:[], data:{$area:\"72\", $color:\"34\", image:\"http://userserve-ak.last.fm/serve/174s/8673813.jpg\"}, id:\"95f5b748-d370-47fe-85bd-0af2dc450bc0Second-Hand Smoke\", name:\"Second-Hand Smoke\"}], data:{$area:72}, id:\"95f5b748-d370-47fe-85bd-0af2dc450bc0a\", name:\"Sublime\"}, {children:[{children:[], data:{$area:\"73\", $color:\"33\", image:\"http://userserve-ak.last.fm/serve/174s/7737695.jpg\"}, id:\"020bfbb4-05c3-4c86-b372-17825c262094Audioslave\", name:\"Audioslave\"}], data:{$area:73}, id:\"020bfbb4-05c3-4c86-b372-17825c262094a\", name:\"Audioslave\"}, {children:[{children:[], data:{$area:\"124\", $color:\"10\", image:\"http://userserve-ak.last.fm/serve/174s/8605651.jpg\"}, id:\"e9571c17-817f-4d34-ae3f-0c7a96f822c1Temple of the Dog\", name:\"Temple of the Dog\"}], data:{$area:124}, id:\"e9571c17-817f-4d34-ae3f-0c7a96f822c1a\", name:\"Temple of the Dog\"}, {children:[{children:[], data:{$area:\"82\", $color:\"29\", image:\"http://images.amazon.com/images/P/B0002ZEUKO.01._SCMZZZZZZZ_.jpg\"}, id:\"06fb1c8b-566e-4cb2-985b-b467c90781d4Are You Experienced?\", name:\"Are You Experienced?\"}, {children:[], data:{$area:\"64\", $color:\"39\", image:\"http://userserve-ak.last.fm/serve/174s/8729219.jpg\"}, id:\"06fb1c8b-566e-4cb2-985b-b467c90781d4First Rays of the New Rising Sun\", name:\"First Rays of the New Rising Sun\"}], data:{$area:146}, id:\"06fb1c8b-566e-4cb2-985b-b467c90781d4a\", name:\"Jimi Hendrix\"}, {children:[{children:[], data:{$area:\"56\", $color:\"50\", image:\"http://images.amazon.com/images/P/B0000DZDYN.01.MZZZZZZZ.jpg\"}, id:\"fbd2a255-1d57-4d31-ac11-65b671c19958The Singles 1992-2003\", name:\"The Singles 1992-2003\"}], data:{$area:56}, id:\"fbd2a255-1d57-4d31-ac11-65b671c19958a\", name:\"No Doubt\"}, {children:[{children:[], data:{$area:\"123\", $color:\"11\", image:\"http://userserve-ak.last.fm/serve/174s/11393921.jpg\"}, id:\"078a9376-3c04-4280-b7d7-b20e158f345dMer de Noms\", name:\"Mer de Noms\"}, {children:[], data:{$area:\"93\", $color:\"24\", image:\"http://userserve-ak.last.fm/serve/174s/11403219.jpg\"}, id:\"078a9376-3c04-4280-b7d7-b20e158f345dThirteenth Step\", name:\"Thirteenth Step\"}], data:{$area:216}, id:\"078a9376-3c04-4280-b7d7-b20e158f345da\", name:\"A Perfect Circle\"}, {children:[{children:[], data:{$area:\"109\", $color:\"16\", image:\"http://images.amazon.com/images/P/B00005LNP5.01._SCMZZZZZZZ_.jpg\"}, id:\"1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fElija y Gane\", name:\"Elija y Gane\"}, {children:[], data:{$area:\"85\", $color:\"26\", image:\"http://images.amazon.com/images/P/B0000B193V.01._SCMZZZZZZZ_.jpg\"}, id:\"1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fPara los Arboles\", name:\"Para los Arboles\"}], data:{$area:194}, id:\"1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fa\", name:\"Luis Alberto Spinetta\"}, {children:[{children:[], data:{$area:\"87\", $color:\"25\", image:\"http://userserve-ak.last.fm/serve/174s/8772827.jpg\"}, id:\"e795e03d-b5d5-4a5f-834d-162cfb308a2c4-Track Demos\", name:\"4-Track Demos\"}, {children:[], data:{$area:\"77\", $color:\"32\", image:\"http://userserve-ak.last.fm/serve/174s/9929071.jpg\"}, id:\"e795e03d-b5d5-4a5f-834d-162cfb308a2cRid of Me\", name:\"Rid of Me\"}], data:{$area:164}, id:\"e795e03d-b5d5-4a5f-834d-162cfb308a2ca\", name:\"PJ Harvey\"}, {children:[{children:[], data:{$area:\"102\", $color:\"19\", image:\"http://userserve-ak.last.fm/serve/174s/7410551.jpg\"}, id:\"e3e0abcd-7671-4482-a9d8-462f5acc9be5Make Yourself\", name:\"Make Yourself\"}, {children:[], data:{$area:\"84\", $color:\"27\", image:\"http://images.amazon.com/images/P/B00018D5CQ.01._SCMZZZZZZZ_.jpg\"}, id:\"e3e0abcd-7671-4482-a9d8-462f5acc9be5A Crow Left of the Murder\", name:\"A Crow Left of the Murder\"}, {children:[], data:{$area:\"60\", $color:\"46\", image:\"http://userserve-ak.last.fm/serve/174s/19681051.jpg\"}, id:\"e3e0abcd-7671-4482-a9d8-462f5acc9be5Morning View\", name:\"Morning View\"}], data:{$area:246}, id:\"e3e0abcd-7671-4482-a9d8-462f5acc9be5a\", name:\"Incubus\"}, {children:[{children:[], data:{$area:\"130\", $color:\"9\", image:\"http://userserve-ak.last.fm/serve/174s/15113951.jpg\"}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186eNico\", name:\"Nico\"}, {children:[], data:{$area:\"120\", $color:\"12\", image:\"http://images.amazon.com/images/P/B00005V5PW.01.MZZZZZZZ.jpg\"}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186eClassic Masters\", name:\"Classic Masters\"}, {children:[], data:{$area:\"103\", $color:\"18\", image:\"http://images.amazon.com/images/P/B000002TPF.01.MZZZZZZZ.jpg\"}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186eSoup\", name:\"Soup\"}, {children:[], data:{$area:\"99\", $color:\"20\", image:\"http://userserve-ak.last.fm/serve/174s/15157989.jpg\"}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186eBlind Melon\", name:\"Blind Melon\"}], data:{$area:452}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186ea\", name:\"Blind Melon\"}, {children:[{children:[], data:{$area:\"173\", $color:\"4\", image:\"http://userserve-ak.last.fm/serve/174s/8590515.jpg\"}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4Superunknown\", name:\"Superunknown\"}, {children:[], data:{$area:\"117\", $color:\"13\", image:\"http://userserve-ak.last.fm/serve/174s/5269310.jpg\"}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4Louder Than Love\", name:\"Louder Than Love\"}, {children:[], data:{$area:\"96\", $color:\"21\", image:\"http://userserve-ak.last.fm/serve/174s/8600371.jpg\"}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4Down on the Upside\", name:\"Down on the Upside\"}, {children:[], data:{$area:\"95\", $color:\"22\", image:\"http://images.amazon.com/images/P/B000000M4A.01.MZZZZZZZ.jpg\"}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4Ultramega OK\", name:\"Ultramega OK\"}], data:{$area:481}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4a\", name:\"Soundgarden\"}], data:{$area:4949}, id:\"topAlbums\", name:\"top albums\"}";
    //end
    var get = function(id){
        return document.getElementById(id);
    };
    var infovis = get('infovis');
    var w = infovis.offsetWidth, h = infovis.offsetHeight;
    infovis.style.width = w + 'px';
    infovis.style.height = h + 'px';

    //init tm
    var tm = new TM.Squarified({
        //The id of the treemap container
        rootId: 'infovis',
        //Set the max. depth to be shown for a subtree
        levelsToShow: 1,

        //Add click handlers for
        //zooming the Treemap in and out
        addLeftClickHandler: true,
        addRightClickHandler: true,
        
        //When hovering a node highlight the nodes
        //between the root node and the hovered node. This
        //is done by adding the 'in-path' CSS class to each node.
        selectPathOnHover: true,
                
        //Allow tips
        Tips: {
          allow: true,
          //add positioning offsets
          offsetX: 20,
          offsetY: 20,
          //implement the onShow method to
          //add content to the tooltip when a node
          //is hovered
          onShow: function(tip, node, isLeaf, domElement) {
              tip.innerHTML = "<div class=\"tip-title\">" + node.name + "</div>" + 
                "<div class=\"tip-text\">" + this.makeHTMLFromData(node.data) + "</div>"; 
          },  

          //Aux method: Build the tooltip inner html by using the data property
          makeHTMLFromData: function(data){
              var html = '';
              html += "playcount" + ': ' + data.$area + '<br />';
              if ("$color" in data) 
                  html += "rank" + ': ' + data.$color + '<br />';
              if ("image" in data) 
                  html += "<img class=\"album\" src=\"" + data.image + "\" />";
              return html;
          }
        },

        //Implement this method for retrieving a requested
        //subtree that has as root a node with id = nodeId,
        //and level as depth. This method could also make a server-side
        //call for the requested subtree. When completed, the onComplete 
        //callback method should be called.
        request: function(nodeId, level, onComplete){
            var tree = eval('(' + json + ')');
            var subtree = TreeUtil.getSubtree(tree, nodeId);
            TreeUtil.prune(subtree, 1);
            onComplete.onComplete(nodeId, subtree);
        },
        
        //Remove all events for the element before destroying it.
        onDestroyElement: function(content, tree, isLeaf, leaf){
            if(leaf.clearAttributes) leaf.clearAttributes();
        }
    });
  
    var pjson = eval('(' + json + ')');
    TreeUtil.prune(pjson, 1);
    tm.loadJSON(pjson);
    //end
}