function ContentCircle(radius)
{
	this.get_random_string = function() {
		var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
		var string_length = 8;
		var randomstring = '';
		for (var i=0; i<string_length; i++) {
			var rnum = Math.floor(Math.random() * chars.length);
			randomstring += chars.substring(rnum,rnum+1);
		}
		return randomstring;
	}


	var className = 'content_circle' + this.get_random_string();
	window[className] = this;
	
	this.radius = radius;
			
	var items = new Array();
	var biggest_height = 0;
	var biggest_width = 0;
	
	// main object
	var main;
	
	this.panel;
	this.selected;
	this.started = false;
	
	this.link_container;
	
	var parsed = 0;
	
	// build the content circle
	this.build = function()
	{
		var next;

		$("#inner_content").find("h2").each(function f()
		{
			var object = new Object();
			object.title = this.innerHTML;
			object.childs = document.createElement('div');
			var i = 0;
			while (true)
			{
				next = $(this).next();
				if (next.size() == 0)
					break;
				next = next[0];
				
				if ((next.tagName.length == 2) && (next.tagName.charAt(0) == "H"))
					break;
				
				// try to remove picture
				var pic = $(next).find("img");
				if (pic.size() > 0)
				{
					pic.remove();
					pic = pic[0];
					object.img_src = pic.src;
					if (pic.width > biggest_width)
						biggest_width = parseInt(pic.width);
					object.img_width = pic.width;
					if (pic.height > biggest_height)
						biggest_height = pic.height;
					object.img_height = parseInt(pic.height);
				}
				
				$(next).remove();
				object.childs.appendChild(next);
				i++;
			}
			
			$(this).remove();
			
			if (parsed > 0)			
				items[items.length] = object;
			else
			{
				main = object;
			}
			parsed++;
		});
		// build up the area
		this.panel = document.createElement('div');
		var classi = document.createAttribute('class');
		classi.nodeValue = 'content_circle_container';
		this.panel.setAttributeNode(classi);
		//var stylei = document.createAttribute('style');
		//stylei.nodeValue = "position:relative;width:" + parseInt(parseInt(this.radius*2)+parseInt(biggest_width)) + 'px;height:' 
								+ parseInt(parseInt(this.radius*2)+parseInt(biggest_height)) + 'px;';
		//this.panel.setAttributeNode(stylei);
		this.panel.style.position = 'relative';
		this.panel.style.width = parseInt(parseInt(this.radius*2)+parseInt(biggest_width)) + 'px';
		this.panel.style.height = parseInt(parseInt(this.radius*2)+parseInt(biggest_height)) + 'px';

		// insert panel		
		var next = $("#inner_content").find("h1").next();
		while (1 == 1)
		{
			next = next[0];
			if ($(next).next().size() == 0)
				break;
			if ((next.tagName.length == 2) && (next.tagName.charAt(0) == "H"))
			{
				break;
			}
			next = $(next).next();
		}

		//$("#inner_content").find("h1").next().after(this.panel);
		if (next == undefined)
		{
			this.next_element = $("#inner_content").find("h1")[0];
		}
		else 
		{
			this.next_element = next;
		}
		$(this.next_element).after(this.panel);
		
		var sel_div = document.createElement('div');
		var classi = document.createAttribute('class');
		classi.nodeValue = 'content_circle_selected';
		sel_div.setAttributeNode(classi);
		this.panel.appendChild(sel_div);
		
		sel_div.innerHTML = '<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>';
		sel_div.innerHTML += '<div class="inner"></div>';
		sel_div.innerHTML += '<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>';
		
		
		this.panel = $(".content_circle_container:first");
		this.panel_width = this.panel.width();
		this.panel_height = this.panel.height();
		
		this.show_set_main();
		
		// link container
		this.link_container = document.createElement('div');
		var classi = document.createAttribute('class');
		classi.nodeValue = 'link_circle_container';
		this.link_container.setAttributeNode(classi);
		
		$(this.main_circle_container).after(this.link_container);
		
		// main circle container
		//$(this.main_circle_container).after(this.link_container);
		
		// insert every item
		for (var i=0;i < items.length; i++)
		{
			var angle = (i+2) / items.length;
			this.set_values(items[i], angle);
			
			if (items[i].angle == Math.round(1000*2 / items.length) / 1000)
			{
				this.selected = items[i];
			}
			
			var item = document.createElement('div');
			var classi = document.createAttribute('class');
			classi.nodeValue = 'item_circle_container';
			item.setAttributeNode(classi);
			item.style.position = 'absolute';
			item.style.top =  items[i].y + 'px';
			item.style.left =  items[i].x + 'px';
			item.style.width =  items[i].img_width + 'px';
			item.style.height =  items[i].img_height + 'px';
			//item.style.backgroundImage = 'url(' + items[i].img_src + ')';
			item.title = items[i].title;
			//var onclick = document.createAttribute('onclick');
			//onclick.nodeValue = 'window["' + className +  '"]["select_item"](this);';
			//item.setAttributeNode(onclick);
			//item.onclick = 'alert("hallo");';
			
			item.innerHTML = '<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>';
			item.innerHTML += '<div class="inner" style="background-image:url(' + items[i].img_src +  ')"></div>';
			item.innerHTML += '<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>';
			
			items[i].html_container = item;
			
			this.panel[0].appendChild(item);
			this.add_link(item);
		}

		$(".item_circle_container").find(".inner").mouseover(function f() {
			$(this).parent().find("b").find("b").addClass("hover");
			$(this).addClass("hover");
		});
		
		$(".item_circle_container").find(".inner").mouseout(function f() {
			$(this).parent().find("b").removeClass("hover");
			$(this).removeClass("hover");
		});


		
		$(".item_circle_container").click(function f() {
			window[className]['select_item'](this);
		});
		
		// above container
		var above_container = document.createElement('div');
		var classi = document.createAttribute('class');
		classi.nodeValue = 'text_above_circle_container';
		above_container.setAttributeNode(classi);
		
		// insert h2 and textcontainer
		this.heading = document.createElement('h2');
		var classi = document.createAttribute('class');
		classi.nodeValue = 'heading_circle_container';
		this.heading.setAttributeNode(classi);
		
		this.text_container = document.createElement('div');
		var classi = document.createAttribute('class');
		classi.nodeValue = 'text_circle_container';
		this.text_container.setAttributeNode(classi);

		above_container.appendChild(this.heading);
		above_container.appendChild(this.text_container);
		
		//$("#inner_content").find(".content_circle_container").after(above_container);
		$(this.link_container).after(above_container);
		
		this.show_selected(this.selected);
		
	}
	
	/**
	 * add link
	 */	
	this.add_link = function(item)
	{
		var a_link = document.createElement('a');
		a_link.innerHTML = item.title;
		a_link.href = '#';		
		$(a_link).click(function f() {
			window[className]['select_item_by_name'](item.title);
			return false;
		});
		this.link_container.appendChild(a_link);		
	}
	
	/**
	 * show main and set values
	 */
	this.show_set_main = function()
	{
		main.x = this.panel_width/2 - main.img_width / 2;
		main.y = this.panel_height/2 - main.img_height / 2;
		var item = document.createElement('div');
		var classi = document.createAttribute('class');
		classi.nodeValue = 'item_circle_container_main';
		item.setAttributeNode(classi);
		item.style.position = 'absolute';
		item.style.top =  main.y + 4 + 'px';
		item.style.left =  main.x + 'px';
		item.style.width =  main.img_width + 'px';
		item.style.height =  main.img_height + 'px';
		item.style.backgroundImage = 'url(' + main.img_src + ')';
		item.style.zIndex = 200;
		item.title = main.title;
		this.panel[0].appendChild(item);
		
		var item_zw = document.createElement('div');
		$(this.next_element).after(item_zw);
		
		if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
		{
			var txti = '';
			//alert(txti.anchor(className + 'assds'));
			var anchor = txti.anchor('content_circle_anchor_' + className);
			$(item_zw).before(anchor);
		}
		else 
		{
			var anchor = document.createElement('a');
			anchor.name = 'content_circle_anchor_' + className;
			item_zw.appendChild(anchor);
		}
		
		
		
		var item = document.createElement('h2');
		item.innerHTML = main.title;
		item_zw.appendChild(item);
		item_zw.appendChild(main.childs);
		
		this.main_circle_container = item_zw;
	}
	
	/**
	 * select item by name
	 */
	this.select_item_by_name = function(name)
	{
		if (this.started == true)
			return;
		var item;
		for (var i=0;i < items.length; i++)
		{
			if (items[i].title == name)
			{
				item = items[i];
				break;
			}			
		}
		var diff = (item.angle - (2/items.length));
		if (1 + 2/items.length - item.angle < diff)
			diff = 1 + 2/items.length - item.angle;
		else
			diff = - diff;
		//document.location.href = '#inner_content_left';
		document.location.href = '#' + 'content_circle_anchor_' + className;			
		this.rotate(diff);		
	}

	this.select_item = function(object)
	{
		//alert(object);
		if (this.started == true)
			return;
		var item;
		for (var i=0;i < items.length; i++)
		{
			if (items[i].html_container == object)
			{
				item = items[i];
				break;
			}
		}
		var diff = (item.angle - (2/items.length));
		if (1 + 2/items.length - item.angle < diff)
			diff = 1 + 2/items.length - item.angle;
		else
			diff = - diff;
		//document.location.href = '#inner_content_left';		
		document.location.href = '#' + 'content_circle_anchor_' + className;			
		this.rotate(diff);
	}

	this.rotate = function(diff)
	{
		var clockwise = 1;
		if (diff < 0)
			clockwise = -1;
		this.rotate_help(Math.abs(diff), clockwise);
	}
	
	this.rotate_help = function(diff, clockwise)
	{
		this.started = true;
		if (diff <= 0)
		{
			this.started = false;
			this.show_selected(this.selected);
			return;
		}
			
		var delta = 0.01;
		var c = 0.06;
		delta = Math.min(-c*4*( (diff) - 0.5 )*( (diff) - 0.5 ) + c  ,0.01);
		delta = Math.max(0.001, delta);			

		if (diff - delta < 0)
			delta = diff;
		diff = diff - delta;
		
		for (var i=0;i < items.length; i++)
		{
			this.set_values(items[i], items[i].angle + (delta*clockwise));
			items[i].html_container.style.left = items[i].x + 'px';
			items[i].html_container.style.top = items[i].y + 'px';
			if (Math.round(10*items[i].angle) / 10 == Math.round(10*2 / items.length) / 10 )
			{
				if (this.selected != undefined)
					$(this.selected.html_container).removeClass('selected');				
				this.selected = items[i];
			}
		}		
		
		window.setTimeout('window["' + className + '"]["rotate_help"](' + diff + ',' + clockwise + ')', 20);
	}
	
	/**
	 * show selected things like text and heading
	 */
	this.show_selected = function(item)
	{
		this.heading.innerHTML = item.title;
		$(this.text_container).empty();
		this.text_container.appendChild(item.childs);
		// show links to
		$(".link_circle_container").find("a").each(function f() {
			if (this.innerHTML == item.title)
				$(this).addClass('selected');
			else
				$(this).removeClass('selected');
		});
		$(item.html_container).addClass('selected');
	}
	
	/**
	 * set the values of an item to angle angle
	 */	
	this.set_values = function(item, angle)
	{
		if (angle >= 1)
			angle -= 1;
		else if (angle < 0)
			angle += 1;
			
		//var middle_x = this.panel.offset().left + this.panel.width() / 2;
		//var middle_y = this.panel.offset().top + this.panel.height() / 2;
		item.angle = Math.round(angle*1000) / 1000;
		
		var x = Math.sin(2* Math.PI * angle) * this.radius;
		var y = Math.cos(2* Math.PI * angle) * this.radius;
		
		x = this.panel_width / 2 + x - item.img_width / 2;
		y = this.panel_height / 2 - y - item.img_height / 2;
		
		item.x = x;
		item.y = y;			
	}
	
	/**
	 * build the circle_container
	 */	
	this.build();
}