var CubeMenu = new Class({
	Implements: Options,

	options: {
		parent: null,
		items: [],
		css: 'cube',
		
		dimension: 0.3,
		centerX: 500,
		centerY: 300,
		pauseMaxMs: 500
	},

	initialize: function(options){
		this.setOptions(options);
		this.options.parent = this.options.parent || document.body;

		this.isIE = Browser.Engines.trident();

		// Flags
		this.dragStarted = false;
		this.dragStopped = false;
		this.pauseFlag = false;
		this.stopFlag = false;

		this.dragXStart = 0;
		this.dragYStart = 0;
		this.dragX = 0;
		this.dragY = 0;
		this.oldMouseX = 0;
		this.oldMouseY = 0;
		
		this.angle = 0;
		this.timeout = 30;
		this.storeCenterX = this.centerX = this.cubeCenterX = this.options.centerX;
		this.storeCenterY = this.centerY = this.cubeCenterY = this.options.centerY;

		this.radius = this.dimension = this.options.dimension;

		this.pauseMs = 0;
		this.pauseMaxMs = this.options.pauseMaxMs;

		this.a = this.b = 0;

		this.size = 2;
		this.hover = false;
		this.element_opacity = 0;
		this.element_width = 0;
		this.element_height = 0;
		this.element_left = 0;
		this.element_top = 0;
		this.element_text_opacity = 0;
		this.hidden = false;
		this.oX=0;
		this.oY=0;

		this.build();
	},

	build: function(){
		
		this.guard = new Element('div', {'class': this.options.css + '-guard'})
		this.guard.inject(this.options.parent);
		
		this.options.items.each(function(item, index){
			var img = new Element('img', {
				id: 'icon-' + index,
				src: item[1],
				border: 0,
				styles: {
					'position': 'absolute'
				}
			});
			img.inject(this.options.parent);
			var link = new Element('a', {
				href: '#',
				events: {
					'mouseenter': this.onEnter.bind(this, index),
					'mouseleave': this.onLeave.bind(this, index),
					'click': item[2]
				}
			});
			link.wraps(img);

			var text = new Element('a', {
				'id': 'icon-text-' + index,
				'href': '#',
				'class': this.options.css + '-text',
				'html': item[0]
			});
			text.inject(this.options.parent);

		}, this);
		
		this.init();
		this.rotate.periodical(this.timeout, this);

		this.options.parent.addEvents({
			'mousewheel': this.resize.bindWithEvent(this),
			'mousedown': function(event){
				event.stop();
				this.stopFlag = false;
				this.pauseFlag = false;
				this.dragStarted = true;
				this.dragXStart = event.client.x;
				this.dragYStart = event.client.y;
				this.dragX = this.dragXStart;
				this.dragY = this.dragYStart;
				this.oldMouseX = this.dragX;
				this.oldMouseY = this.dragY;
				this.storeCenterX = this.centerX;
				this.storeCenterY = this.centerY;
			}.bindWithEvent(this),
			'mousemove': function(event){
				this.oldMouseX = this.dragX;
				this.oldMouseY = this.dragY;
				this.dragX = event.client.x;
				this.dragY = event.client.y;
			}.bindWithEvent(this),
			'mouseup': function(event){
				event.stop();
				this.dragStarted = false;
				this.dragStopped = true;
				this.stopFlag = false;
				this.pauseFlag = true;
				this.pauseMs = 0;
			}.bindWithEvent(this)//,
			//'keydown': 
		});
		document.addEvent('keyup', this.showIconText.bindWithEvent(this));
	},
	
	onEnter: function(i){
		this.stopFlag = true;
		var icon = $('icon-'+i);
		var style = {
			width: icon.style.width,
			height: icon.style.height,
			left: icon.style.left,
			top: icon.style.top,
			opacity: icon.style.opacity,
			filter: icon.style.filter
		}
		icon.style.width = Math.round(parseInt(style.width)) * 1.5 + 'px';
		icon.style.height = Math.round(parseInt(style.height)) * 1.5 + 'px';

		icon.style.left = (parseInt(style.left) - (parseInt(icon.style.width) - parseInt(style.width))/2) + 'px';
		icon.style.top = (parseInt(style.top) - (parseInt(icon.style.height) - parseInt(style.height))/2) + 'px';

		var text = $('icon-text-'+i);
		style.textOpacity = text.style.opacity;
		style.textFilter = text.style.filter;
		style.textBackground = text.style.background;

		if(this.isIE) {
			icon.style.filter = text.style.filter = 'alpha(opacity: 100)';
		} else {
			icon.style.opacity = text.style.opacity = 1;
		}

		text.style.background = '#000000';
		icon.store('oldStyles', style);
	},

	onLeave: function(i){
		this.stopFlag = false;
		this.pauseFlag = true;
		this.pauseMs = 0;
		
		var icon = $('icon-'+i);
		var styles = icon.retrieve('oldStyles');
		icon.style.width = styles.width;
		icon.style.height = styles.height;
		icon.style.left = styles.left;
		icon.style.top = styles.top;
		icon.style.opacity = styles.opacity;
		icon.style.filter = styles.filter;
		
		var text = $('icon-text-'+i);
		text.style.opacity = styles.textOpacity;
		text.style.filter = styles.textFilter;
		text.style.background = styles.textBackground;
	},
	
	rotate: function(){
		if(this.stopFlag) {
		} else if (this.pauseFlag) {
			this.pauseMs += this.timeout;
			if(this.pauseMs>= this.pauseMaxMs) this.pauseFlag=false;
		} else {
			if(!this.dragStarted) {
				this.angle+=1/(this.radius*650);
				if(this.angle>2*Math.PI) this.angle=0;
			} else {
				this.centerX = this.storeCenterX + this.dragX - this.dragXStart;
				this.centerY = this.storeCenterY + this.dragY - this.dragYStart;
			}
			this.oX = Math.round(this.centerX + Math.cos(this.angle)*this.radius*2000);
			this.oY = Math.round(this.centerY + Math.sin(this.angle)*this.radius*2000);
			this.a = this.oX / 99; this.b = this.oY / 99;
			this.init();
		}
	},

	showIconText: function(event){
		if(event.control && event.code == 113){
			if(!this.hidden) {
				$(this.options.parent).getElements('a.' + this.options.css + '-text').each(function(el){
					el.style.display = '';
				});
				this.hidden = true;
			} else {
				$(this.options.parent).getElements('a.' + this.options.css + '-text').each(function(el){
					el.style.display = 'none';
				});
				this.hidden = false;
			}
		}		
	},

	resize: function(event){
		var delta=0;
		if(event.wheel){
			delta = event.wheel/120;
		} else if(event.detail) {
			delta = -event.detail/3;
		}

		this.radius = this.dimension += (delta>=0)?-0.1:0.1;
		this.size += (delta>=0)?-0.5:0.5;

		this.init();
		event.stop();
	},

	init: function(){
		
		if(this.dimension>=0.4 && !this.hidden){
			$(this.options.parent).getElements('a.' + this.options.css + '-text').each(function(el){
				el.style.display = '';
			});
		} else {
			$(this.options.parent).getElements('a.' + this.options.css + '-text').each(function(el){
				el.style.display = 'none';
			});
		}
		i = 0;
		for (var x = -this.dimension; x <= this.dimension; x += this.dimension) {
			for (var y = -this.dimension; y <= this.dimension; y += this.dimension) {
				for (var z = -this.dimension; z <= this.dimension; z += this.dimension) {
					u = x;
					v = y;
					w = z;
					u2 = u * Math.cos(this.a) - v * Math.sin(this.a);
					v2 = u * Math.sin(this.a) + v * Math.cos(this.a);
					w2 = w;
					u = u2; v = v2; w = w2;
					u2 = u;
					v2 = v * Math.cos(this.b) - w * Math.sin(this.b);
					w2 = v * Math.sin(this.b) + w * Math.cos(this.b);
					u = u2; v = v2; w = w2;
					var c = Math.round((w + 2) * 70);
					if (c < 0) c = 0;
					if (c > 255) c = 255;

					var left = this.cubeCenterX + u * (w + 2) * 50;
					var top = this.cubeCenterY + v * (w + 2) * 50;
					var width = (w + this.size) * 10;
					var height = (w + this.size) * 10;
					var zIndex = Math.round((w + 2) * 10);

					var icon = $('icon-'+i);
					icon.style.left = left + 'px';
					icon.style.top = top + 'px';
					icon.style.width = width + 'px';
					icon.style.height = height + 'px';
					icon.style.zIndex = zIndex;

					var iconText = $('icon-text-'+i);

					//iconText.style.left = (left + (width/2 - ((this.options.items[i].length)*((w + 2) * 6))/2)) + 'px';
					iconText.style.top = (top + w*40) + 'px';
					iconText.style.zIndex = zIndex;
					iconText.style.fontSize = (w + 2) * 6 + 'px';

					iconText.style.left = (left + (width/2 - iconText.clientWidth/2)) + 'px';

					if(this.isIE) {						
						icon.style.filter = 'alpha(opacity:'+((0.3 + w)*100)+')';
						iconText.style.filter = 'alpha(opacity:'+((0.1 + w)*100)+')';
					}else{
						icon.style.opacity = 0.3 + w;
						iconText.style.opacity = 0.1 + w;
					}					
	 
					i++;
				}
			}
		}

	}
});