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 infovis = document.getElementById('infovis');
    var w = infovis.offsetWidth, h = infovis.offsetHeight;
    infovis.style.width = w + 'px';
    infovis.style.height = h + 'px';
    
    //init tm
    //You can also do TM.SliceAndDice and TM.Squarified
    var tm = new TM.Strip({ 
        //Where to inject the treemap.
        rootId: 'infovis',
        
        titleHeight: 0,
        orientation: "h",
        offset: 0,
                
        //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,
        
        Color: {
            //Allow coloring
            allow: true,
            //Set min value and max value constraints
            //for the *$color* property value.
            //Default's to -100 and 100.
            minValue: 1,
            maxValue: 50,
            //Set color range. Default's to reddish and greenish.
            //It takes an array of three
            //integers as R, G and B values.
            minColorValue: [0, 255, 50],
            maxColorValue: [255, 0, 50]
        },
        
        //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>"; 
          },  

          //Build the tooltip inner html by taking each node 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;
          }
        },

        //This method is invoked when a DOM element is created.
        //Its useful to set DOM event handlers here or manipulate
        //the DOM Treemap nodes.
        onCreateElement: function(content, tree, isLeaf, leaf){
            //Add background image
            if(isLeaf) {
                var style = leaf.style, 
                width = parseInt(style.width) - 2, 
                height = parseInt(style.height) - 2;
                
                leaf.innerHTML = tree.name + 
                "<img src=\"../css/gradient.png\" " +
                " style=\"position:absolute;top:0;left:0;width:" + 
                width + "px;height:" + height + "px;\" />";
                
                style.width = width + "px";
                style.height = height + "px";
            }
        },

        //Remove all events for the element before destroying it.
        onDestroyElement: function(content, tree, isLeaf, leaf){
            if(leaf.clearAttributes) leaf.clearAttributes();
        }
    });
    
    //load JSON and plot
    tm.loadJSON(json);
    //end

    document.getElementById('out_button').onclick = function(){
        tm.out();
    };
    
}