function radians(degree) {
	var radians = degree * (Math.PI/180);
	return radians;
}

var elements = new Array();			//stores all Node elements to be drawn on screen
var xml_page_url = "index.php?id=12";	//the url to the xml output page in typo3

var canvas_width = 680;
var canvas_height = 500;

var xroot = 375;		// x-coordinate of the root element in the canvas -> scionic
var yroot = 200;		// y-coordinate of the root element in the canvas -> scionic

var defaultAngle = -15;


function tree(json, paper){  
 	this.json = json;
	this.paper = paper;
	
	var elements = new Array();
	var id = 0;
	
	var xroot = 375;
	var yroot = 200;
	  
	var main_ellipse = new ellipse(xroot, yroot, 1, json.level1, "index.php", defaultAngle);
	var side_ellipse;
	
	var last_position = json.level1;
	var last_angle = 10;
	
	
	main_ellipse.draw();
	
	//var cookieLog = $.Jookie.Get("Scionic", "Log");
	//var nobj = $.evalJSON(cookieLog);

	//nobj.draw();
	
	//if(cookieLog != null) {
		//var nlog = new nameslog(40, 80);
	 	//nlog = cookieLog;
		//nlog.draw();
		//alert("Cookie found");
	//} //else 
		var nlog = new nameslog(40, 118);
		nlog.addname("I< Home", json.level1, 0, "index.php");
		nlog.draw();
	//}
	
	function background(level){
		
		var background = paper.rect(140, 60, 400, 300);
		background.attr("fill", "#FFFFFF");
		background.attr("opacity", "0");
	
		background.click(function(event){
			paper.clear();
			nlog.draw();
			
			main_ellipse = new ellipse(xroot, yroot, 1, main_ellipse.parent, "", defaultAngle);
			main_ellipse.draw();
			
		});
	};
	
	function ellipse(x, y, opacity, level, url, startAngle){
		var nodes = new Array();
		var x = x;
		var y = y;
		
		this.startAngle = startAngle;
		
		var parent = json.level1;
		
		var node_number = level.length;
		var angle_interval = 360.0 / node_number;
		var angle = angle_interval + 10;
		var a = 80;
		var b = 120;
		
		var beta = -angle * (Math.PI / 180); //(Math.PI/180) converts Degree Value into Radians
  		var sinbeta = Math.sin(beta);
  		var cosbeta = Math.cos(beta);
		
		var node = 0;
		
		for (var i = startAngle; i < (360+startAngle); i += 360 / node_number) {
    		var alpha = i * (Math.PI / 180);
    		var sinalpha = Math.sin(alpha);
    		var cosalpha = Math.cos(alpha);
 
    		var xpoint = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta);
    		var ypoint = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta);
			
			nodes[node] = new element(xpoint, ypoint, opacity, level[node].title, level, node, i);
			
			node++;
   		}
		
		function draw(){
			
			background(parent);
			
			for(var i = 0; i < nodes.length; i++) {
				nodes[i].draw();
			}
		};
		
		function clear(){
			for(var i = 0; i < nodes.length; i++) {
				nodes[i].clear();
			}	
		};
		
		function animate(){
			for(var i = 0; i < nodes.length; i++) {
				nodes[i].animate();
			}	
		};
		
		function fade(time) {
			for(var i = 0; i < nodes.length; i++) {
				nodes[i].fade(time);
			}	
		}; 
		
		function move(xnew, ynew) {
			
			var xdif = xnew - x;
			var ydif = ynew - y;
			
			for(var i = 0; i < nodes.length; i++) {
				nodes[i].move(xdif, ydif);
			}	
		};
		
		this.draw = draw;
		this.clear = clear;
		this.animate = animate;
		this.fade = fade;
		this.move = move;
		this.parent = parent;
		this.level = level;
		this.url = url;
		
	};
	
	function element(x, y, opacity, title, level, node, startAngle){
		this.x = x;
		this.y = y;
		this.title = title;
		this.level = level;
		this.node = node;
		this.startAngle = startAngle;
		
		var name;
		var field;
		
		function draw() {
		
			name = paper.text(x, y, title);
			
			name.attr("font-size", 12);
			name.attr("opacity", opacity);
			
			var width = name.getBBox().width+10;
			
			field = paper.rect(x-(width/2), y-10, width,20);
			field.attr("fill", "#FFFFFF");
			field.attr("opacity", 0.1);
			field.attr("stroke-width", 0);

			field.mouseover(function(event){
				name.attr("fill", "#00B1E1");
				name.attr("opacity", 1);
				
				if(level[node].level2){
					side_ellipse = new ellipse(x, y, 0.2, level[node].level2, "", startAngle);
					side_ellipse.animate();
				}
				
				if(level[node].level3){
					side_ellipse = new ellipse(x, y, 0.2, level[node].level3, "", startAngle);
					side_ellipse.animate();
				}
				
				if(level[node].level4){
					side_ellipse = new ellipse(x, y, 0.2, level[node].level4, "", startAngle);
					side_ellipse.animate();
				}
			});
		
			field.mouseout(function(event){
				name.attr("fill", "#000000");
				name.attr("opacity", opacity);
				if(side_ellipse) {
					side_ellipse.fade(100);
				}
			});
			
			field.click(function (event) {
				
				var url = level[node].link;
				
				$('#content').load(url + ' #loaded_content', function(){
				
					Shadowbox.setup("a[rel^='shadowbox']", {
        				handleOversize: "resize",
    					modal: false
    				});
					
					$(".scrollable").scrollable();
					
					
					$("a[class^='internal-link']").each(function(){
																 
							var destination = $(this).attr("href");
							
							$(this).click(function(event){

								$('#content').load(destination + ' #loaded_content', function(){
																							  
										Shadowbox.setup("a[rel^='shadowbox']", {
        									handleOversize: "resize",
    										modal: false
    									});
					
										$(".scrollable").scrollable();
																							 
										
										$("a[class^='internal-link']").each(function(){									 
											var destination = $(this).attr("href");
											$(this).click(function(event){

											$('#content').load(destination + ' #loaded_content');
											return false;
										});
																 
							});			 
																							  
																							  });
								return false;
							});
																 
					});
					
					
				});
				
				$(".scrollable").scrollable();
				
				paper.clear();
				background();
				
				
				if(level[node].level2){
					main_ellipse = new ellipse(x, y, 1, level[node].level2, url, startAngle);
					main_ellipse.draw();
					main_ellipse.move(xroot, yroot);
					main_ellipse.parent = level;
					nlog.addname(title, level[node].level2, 1, url);
					
					//var src = $.toJSON(nlog);
					//$.Jookie.Set("Scionic", "Log", src);
				} else if(level[node].level3){
					main_ellipse = new ellipse(x, y, 1, level[node].level3, url, startAngle);
					main_ellipse.draw();
					main_ellipse.move(xroot, yroot);
					main_ellipse.parent = level;
					nlog.addname(title, level[node].level3, 2, url);
				
				} else if(level[node].level4){
					main_ellipse = new ellipse(x, y, 1, level[node].level4, url, startAngle);
					main_ellipse.draw();
					main_ellipse.move(xroot, yroot);
					main_ellipse.parent = level;
					nlog.addname(title, level[node].level4, 2, url);
				} else {
					main_ellipse.draw();
					nlog.addname(title, level, 3, url);
				}
				
				nlog.draw();
			});
			
		};
		
		function animate() {
			
			var id = elements.length;
		
			name = paper.text(xroot, yroot, title);
			name.toBack();
			name.attr("font-size", 12);
			name.attr("opacity", 0);
			
			name.animate({x: x, y: y, opacity: 0.4}, 700, "backOut");		
		};
		
		function fade(time) {
			name.animate({opacity: 0}, time, "backOut");
			
		};
		
		function move(xdif, ydif) {
			x = x+xdif;
			y = y+ydif;
			
			var width = name.getBBox().width+10;
			
			name.animate({x: x, y: y}, 450);
			field.animate({x: x-(width/2), y: y-10}, 450, ">");	
		};
		
		function clear(){
			name.remove();	
		}
		
		this.draw = draw;
		this.clear = clear;
		this.animate = animate;
		this.fade = fade;
		this.move = move;
	};
	
	function nameslog(x, y){
		var nodes = new Array();
		var x = x;
		var y = y;
		
		this.x=x;
		
		var counter = 0;
		var backbutton;
		
		this.backbutton = backbutton;
		
		function addname(title, level, rank, url) {

			contains(title);
			
			if(counter < 10) {
				nodes[counter] = new lname(title, level, rank, url);
				counter++;
			} else {
				for (var i = 1; i < nodes.length-1; i++) {
					nodes[i] = nodes[i+1];
				}
				nodes[nodes.length-1] = new lname(title, level, rank, url);
			}
		}
		
		function draw(){
			
			nodes[0].draw(x, y-8);
			
			for(var i = 1; i < nodes.length; i++) {
				nodes[i].draw(x, (i*15)+y);
			}	
			
			if(main_ellipse.level != json.level1) {
				backbutton = new lname("<< Back", main_ellipse.parent, 0, "index.php");
				backbutton.draw (x, (nodes.length*15)+126);
			}
		};
		
		function clear(){
			for(var i = 0; i < nodes.length; i++) {
				nodes[i].clear();
			}	
		};
		
		function contains(title){
			for(var i = 0; i < nodes.length; i++) {
				
				if(nodes[i].title == title){
					
					for (var j = i; j < nodes.length-1; j++) {
						nodes[j] = nodes[j+1];
					}
					
					counter--;
					break;
				}
			}
		};
		
		this.draw = draw;
		this.clear = clear;
		this.addname = addname;
		this.contains = contains;
	};
	
	function lname(title, level, rank, url){
		this.title = title;
		this.level = level;
		this.url = url;
		this.rank = rank;
		
		var name;
		var field;
		
		function draw(x, y) {
			
			name = paper.text(x, y, title);
			name.attr("font-size", 11);
			name.attr("opacity", 0.4);
			
			var width = name.getBBox().width;
			
			name.remove();
			
			name = paper.text(x+width/2, y, title);
			
			if(rank == 0){
				name.attr("opacity", 0.8);
				name.attr("font-weight", "bold");
			} else {
				name.attr("opacity", 0.4);
			}
			
			name.attr("font-size", 11);
			
			field = paper.rect(x, y-10, width,20);
			field.attr("fill", "#FFFFFF");
			field.attr("opacity", 0.1);
			field.attr("stroke-width", 0);

			field.mouseover(function(event){
				name.attr("fill", "#00B1E1");
				name.attr("opacity", 1);
			});
		
			field.mouseout(function(event){
									
				name.attr("fill", "#000000");
				
				if(rank == 0){
					name.attr("opacity", 0.8);
					name.attr("font-weight", "bold");
				} else {
					name.attr("opacity", 0.4);
				}
				
			});
			
			field.click(function (event) {

				$('#content').load(url + ' #loaded_content');
				
				paper.clear();
				
				main_ellipse = new ellipse(xroot, yroot, 1, level, url, defaultAngle);
				main_ellipse.draw();
				
				nlog.draw();
			});
			
		};
		
		function clear(){
			name.remove();	
		}
		
		this.draw = draw;
		this.clear = clear;
	};
	
	function get_new_center(node, level, startAngle){
	
		var node_number = level.length;
		var angle_interval = 360.0 / node_number;
		var angle = angle_interval + 30;
		var a = 80;
		var b = 120;
		
		var beta = -angle * (Math.PI / 180); //(Math.PI/180) converts Degree Value into Radians
  		var sinbeta = Math.sin(beta);
  		var cosbeta = Math.cos(beta);
		
		var i = startAngle;
		i += (360 / node_number) * node
    		
		var alpha = i * (Math.PI / 180) ;
    	var sinalpha = Math.sin(alpha);
    	var cosalpha = Math.cos(alpha);
 
    	var xpoint = xroot + (a * cosalpha * cosbeta - b * sinalpha * sinbeta);
    	var ypoint = yroot + (a * cosalpha * sinbeta + b * sinalpha * cosbeta);
		
		var center = new Array();
		
		center['x'] = xpoint;
		center['y'] = ypoint;
		
		return center;
	}
	
	this.nameslog = nameslog;
	this.lname = lname;
	this.element = element;
	this.ellipse = ellipse;
	this.background = background;
	this.get_new_center = get_new_center;
};

$(document).ready(function () {
							
	//$.Jookie.Initialise("Scionic", 60);
	
	var paper = Raphael("canvas", canvas_width, canvas_height);

	$.ajax({

		type: "GET",
		url: xml_page_url,
		dataType: "xml",
		complete: function(data) {
			var json = $.xmlToJSON(data.responseXML);
			//json.level1.SortByAttribute("uid");
			
			var test_tree = new tree(json, paper);
		}

	});
	
	$("a[class^='internal-link']").each(function(){
																 
							var destination = $(this).attr("href");
							
							$(this).click(function(event){

								$('#content').load(destination + ' #loaded_content', function(){
																							  
										Shadowbox.setup("a[rel^='shadowbox']", {
        									handleOversize: "resize",
    										modal: false
    									});
					
										$(".scrollable").scrollable();
																							 
										
										$("a[class^='internal-link']").each(function(){									 
											var destination = $(this).attr("href");
											$(this).click(function(event){

											$('#content').load(destination + ' #loaded_content');
											return false;
										});
																 
							});			 
																							  
																							  });
								return false;
							});
																 
	});
});