var Log = {
    elem: false,
    write: function(text){
        if (!this.elem) 
            this.elem = document.getElementById('log');
       this.elem.innerHTML = '';
        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(){
    function get(id) {
      return document.getElementById(id);  
    };
    //init data
    var json = {
        id: "node02",
        name: "Artwalker",
        data: {},
        children: [
		{
                id: "node20",
                name: "About",
                data: {},
                children: [
				{
	                id: "node200",
	                name: "About Artwalker",
	                data: {link: "http://www.artwalker.org/about_us"},
	                children: []
	            },{
	                id: "node201",
	                name: "About Scud",
	                data: {link: "http://www.citywithoutbaseball.com/CityWithoutBaseball.html"},
	                children: []
	            }]
            }, {
                id: "node21",
                name: "Casts",
                data: {},
                children: [
				{
					id: "node210",
					name: "City Without Baseball",
					data: {
						link: "http://www.citywithoutbaseball.com/CityWithoutBaseball.html"
					},
					children: []
				},{
					id: "node211",
					name: "Permanent Residence",
					data: {
						link: "http://www.permanent-residence.com/cast/cast"
					},
					children: []
				},{
					id: "node212",
					name: "Amphetamine",
					data: {
						link: "http://www.amphetaminemovie.com/about_amphetamine/cast"
					},
					children: []
				}]
            }, {
                id: "node25",
                name: "Guestbook",
                data: {},
                children: [
				{
					id: "node250",
					name: "City Without Baseball",
					data: {
						link: "http://www.citywithoutbaseball.com/CityWithoutBaseball.html"
					},
					children: []
				},{
					id: "node251",
					name: "Permanent Residence",
					data: {
						link: "http://guestbook.permanent-residence.com/"
					},
					children: []
				},{
					id: "node252",
					name: "Amphetamine",
					data: {
						link: "http://guestbook.amphetaminemovie.com/"
					},
					children: []					
				}]
            }, {
                id: "node26",
                name: "Making Of",
                data: {},
                children: [
				{
					id: "node260",
					name: "City Without Baseball",
					data: {
						link: "http://www.citywithoutbaseball.com/CityWithoutBaseball.html"
					},
					children: []
				},{
					id: "node261",
					name: "Permanent Residence",
					data: {
						link: "http://www.permanent-residence.com/movie/makingof"
					},
					children: []
				},{
					id: "node262",
					name: "Amphetamine",
					data: {
						link: "http://www.amphetaminemovie.com/videos/makingof"
					},
					children: []					
				}]
            }, {
                id: "node28",
                name: "Movies",
                data: {},
                children: [
				{
					id: "node280",
					name: "City Without Baseball",
					data: {
						link: "http://www.citywithoutbaseball.com/CityWithoutBaseball.html"
					},
					children: []
				},{
					id: "node281",
					name: "Permanent Residence",
					data: {
						link: "http://www.permanent-residence.com/"
					},
					children: []
				},{
					id: "node282",
					name: "Amphetamine",
					data: {
						link: "http://www.amphetaminemovie.com/"
					},
					children: []					
				},{
					id: "node283",
					name: "Love actually… sucks!",
					data: {
						link: "http://www.loveactuallysucks.com/"
					},
					children: []					
				}]
            }, {
                id: "node27",
                name: "News",
                data: {},
                children: [
				{
					id: "node270",
					name: "Artwalker",
					data: {
						link: "http://www.artwalker.org/home/news"
					},
					children: []
				},{
					id: "node271",
					name: "Permanent Residence",
					data: {
						link: "http://www.permanent-residence.com/movie/news"
					},
					children: []
				},{
					id: "node272",
					name: "Amphetamine",
					data: {
						link: "http://www.amphetaminemovie.com/events/list"
					},
					children: []					
				}]
            }, {
                id: "node23",
                name: "Screen Shots",
                data: {},
                children: [
				{
					id: "node230",
					name: "City Without Baseball",
					data: {
						link: "http://www.citywithoutbaseball.com/CityWithoutBaseball.html"
					},
					children: []
				},{
					id: "node231",
					name: "Permanent Residence",
					data: {
						link: "http://www.permanent-residence.com/screenshot/screenshot"
					},
					children: []
				},{
					id: "node232",
					name: "Amphetamine",
					data: {
						link: "http://www.amphetaminemovie.com/about_amphetamine/screenshot"
					},
					children: []					
				}]
            }, {
                id: "node24",
                name: "Trailer",
                data: {},
                children: [
				{
					id: "node240",
					name: "City Without Baseball",
					data: {
						link: "http://www.citywithoutbaseball.com/CityWithoutBaseball.html"
					},
					children: []
				},{
					id: "node241",
					name: "Permanent Residence",
					data: {
						link: "http://www.permanent-residence.com/movie/trailer"
					},
					children: []
				},{
					id: "node242",
					name: "Amphetamine",
					data: {
						link: "http://www.amphetaminemovie.com/videos/trailer"
					},
					children: []					
				}]
            }]
        };
    //end
    var infovis = document.getElementById('infovis');
    var w = infovis.offsetWidth, h = infovis.offsetHeight;
    //init canvas
    //Create a new canvas instance.
    var canvas = new Canvas('mycanvas', {
        'injectInto': 'infovis',
        'width': w,
        'height': h,
        'backgroundColor': '#1a1a1a'
    });
    //end
    
    //init st
    //Create a new ST instance
    var st = new ST(canvas, {
        //set duration for the animation
        duration: 800,
        //set animation transition type
        transition: Trans.Quart.easeInOut,
        //set distance between node and its children
        levelDistance: 50,
        //set node and edge styles
        //set overridable=true for styling individual
        //nodes or edges
        Node: {
            height: 30,
            width: 120,
            type: 'rectangle',
            color: '#aaa',
            overridable: true
        },
        
        Edge: {
            type: 'bezier',
            overridable: true
        },
        
        onBeforeCompute: function(node){
            Log.write("loading " + node.name);
        },
        
        onAfterCompute: function(){
            Log.write("done");
        },
        
        //This method is called on DOM label creation.
        //Use this method to add event handlers and styles to
        //your node.
        onCreateLabel: function(label, node){
            label.id = node.id; 
			if (node.data.link){
				var html = "<a href='"+ node.data.link+"' target='_blank'>" + node.name  + "</a>";           				
			}
			else{
				var html = node.name;           				
			}       
           // label.innerHTML = node.name;
		    label.innerHTML = html;
            label.onclick = function(){
                st.onClick(node.id);
            };
            //set label styles
            var style = label.style;
            style.width = 120 + 'px';
            style.height = 25 + 'px';            
            style.cursor = 'pointer';
            style.color = '#333';
            style.fontSize = '11px';
            style.lineHeight = '13px';
            style.textAlign= 'center';
            style.paddingTop = '2px';
        },
        
        //This method is called right before plotting
        //a node. It's useful for changing an individual node
        //style properties before plotting it.
        //The data properties prefixed with a dollar
        //sign will override the global node style properties.
        onBeforePlotNode: function(node){
            //add some color to the nodes in the path between the
            //root node and the selected node.
            if (node.selected) {
                node.data.$color = "#ff7";
            }
            else {
                delete node.data.$color;
				
                var GUtil = Graph.Util;
                //if the node belongs to the last plotted level
                if(!GUtil.anySubnode(node, "exist")) {
                    //count children number
                    var count = 0;
					GUtil.eachSubnode(node, function(n) { count++; 
					});
					
                    //assign a node color based on
                    //how many children it has
                    node.data.$color = ['#C9C9C8', '#C9C9C8', '#C9C9C8', '#C9C9C8', '#C9C9C8', '#C9C9C8'][count];  
					                 
                }
            }
        },
        
        //This method is called right before plotting
        //an edge. It's useful for changing an individual edge
        //style properties before plotting it.
        //Edge data proprties prefixed with a dollar sign will
        //override the Edge global style properties.
        onBeforePlotLine: function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = "#eed";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        }
    });
    //load json data
    st.loadJSON(json);
    //compute node positions and layout
    st.compute();
    //optional: make a translation of the tree
    st.geom.translate(new Complex(-400, 0), "startPos");
    //emulate a click on the root node.
    st.onClick(st.root);
    //end
    //Add event handlers to switch spacetree orientation.
    var top = get('r-top'), 
    left = get('r-left'), 
    bottom = get('r-bottom'), 
    right = get('r-right');
    
    function changeHandler() {
        if(this.checked) {
            top.disabled = bottom.disabled = right.disabled = left.disabled = true;
            st.switchPosition(this.value, "animate", {
                onComplete: function(){
                    top.disabled = bottom.disabled = right.disabled = left.disabled = false;
                }
            });
        }
    };
    
    //top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
    //end

}