var Tagcloud = Class.create({
    initialize: function(id, options){
		$(id).blindUp({queue:'end', afterFinish: this.init.bind(this,id,options), duration: 0.5, transition: Effect.Transitions.sinoidal});
    },
	init: function(id,options) {
		this.width = $(id).getWidth();
		this.height = $(id).getHeight();
		this.id = id;
		this.words = options.schlagwoerter;
		this.setup();
		$(id).blindDown({queue:'end', duration: 0.5, transition: Effect.Transitions.sinoidal});		
	},
	setup: function() {
        $(this.id).update();

        for (var i = 0; i < this.words.length; i++) {

			var size = 20 - i/(this.words.length/8);			
            var ele = new Element('div',{title: this.words[i]}).update(this.words[i]).setStyle({display:'inline',fontSize: size+"px"});
            $(this.id).insert(ele);
			var weit = $(ele).getWidth();
			var hoch = $(ele).getHeight();
			var left = Math.abs(Math.random()*this.width - weit);
			var top = Math.abs(Math.random()*this.height - hoch);

			var opac = (100-(i/(this.words.length/75)))/100;

			$(ele).setStyle({color: '#FFFFFF', position:'absolute',display:'block',left:left+"px",top:top+"px", width: weit+"px", height: hoch+"px"}).setOpacity(opac);
			$(ele).observe('click', this.click.bind(this,i)).observe('mouseover',this.hover.bind(this)).observe('mouseout',this.mouseout.bind(this));
			if (Math.random() < 0.2) $(ele).setStyle('-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);');
			
        }
		this.collision();
	},
	hover: function(e) {
		e.element().setStyle({color: '#DDDDDD'});
	},
	mouseout: function(e) {
		e.element().setStyle({color: '#FFFFFF'})
	},
	click: function(i, e) {
		//alert (this.words[i])
	},
	collision: function() {
		var id = this.id;
		var collision = false;
		$$('#'+this.id+' > div').each(function(el){
			var weit = el.getWidth(); 
			var hoch = el.getHeight();
			var left = parseInt(el.getStyle('left'));
			var top  = parseInt(el.getStyle('top'));
			$$('#'+id+' div').each(function(el2) {
				var weit2 = el2.getWidth(); 
				var hoch2 = el2.getHeight();
				var left2 = parseInt(el2.getStyle('left'));
				var top2  = parseInt(el2.getStyle('top'));
				if ((left2 > left && left2 < left+weit && top2 > top && top2 < top+hoch)) {
					$(el2).morph({top: (top+hoch+5)+"px", left: left+weit+5+"px"},{duration:0.5});
					collision = true;
				}
			});
		});
		if (collision==true) setTimeout(this.collision, 1200);
	}
});