var SuperPoly = new Class({

    Implements: new Options, 
	
	options : {		
		images : [],				
		left : 0,
		top : 0,
		handle : null,				
		//poly : new Cube({}),
		counterSpin : false
	},

	initialize: function(options){ 		
		this.setOptions(options);
		this.a = 1; 
		this.b = 2;
		this.lastA = 0;
		this.lastB = 0;				
		this.poly = this.options.poly;		
		this.left = this.options.left;
		this.top = this.options.top;	
		this.polyFaces = [];
		this.handle = $(this.options.handle) ? $(this.options.handle) : new Element("div");			
		this.interval;
		this.sidebar = false;
		this.rotate = false;
		//this.id = "superPoly" + this.poly.id;
		this.constructPoly(this.poly);
		window.addEvent('selectstart',function(e){					
			return false;
		});		
		this.handle.addEvent('mousedown',function(e){					
			if(!this.sidebar){
				this.attach();
				e.stop();
				return false;
			}
		}.bind(this));		
		this.handle.addEvent('keydown',function(e){					
			return false;
		});		
		this.handle.addEvent('mouseleave',function(e){		
			this.fireEvent('mouseup');
		});	
		this.handle.addEvent('mouseup',function(e){			
			if(!Browser.Engine.trident) this.detach();	
			this.rotate = false;			
		}.bind(this));	
		if(Browser.Engine.trident) this.attach();		
		this.poly.rotatePoly(this.a, this.b, this.left, this.top);		
	},

	detach : function(){
		this.handle.removeEvents('mousemove');
	},
	
	attach : function(){
		this.rotate = true;
		this.handle.addEvent('mousemove',function(e){	
			e = new Event(e);
			if(e.leftClick){
				var moveup = false;
				var movedown = false;
				if((e.page.y / this.poly.rotateSpeed) > this.b) moveup = true;
				if((e.page.y / this.poly.rotateSpeed) < this.b) movedown = true;
				this.a = e.page.x / this.poly.rotateSpeed; //aka rotateSpeed
				this.b = e.page.y / this.poly.rotateSpeed;	
				$("dot").style.left = (e.page.x - 103)  + "px";
				$("dot").style.top = (e.page.y - 4)  + "px";		
				if(e.control){				
					if(movedown && this.poly.width > 20){
						this.poly.width--;
						this.poly.height--;
					}
					if(moveup && this.poly.width > 20){
						this.poly.width++;
						this.poly.height++;
					}			
				}		
				this.poly.rotatePoly(this.a, this.b,this.left, this.top);	
			}
		}.bind(this));
	},
	
	findObj : function(iter){
		return (iter < (this.poly.data.length)) ? this.poly.root + this.poly.data[iter] : this.poly.root + this.poly.notFound;
	},
	
	constructPoly : function(poly){	
		if($('polyContainer'+this.poly.id)){
			$('polyContainer'+this.poly.id).destroy(); // for morphing class to class
			this.detach();
		}
		this.sidebar = false;
		var cont = (this.poly.contents === "img") ? "img" : "span";
		this.polyContainer = new Element("div",{
			id:'polyContainer'+this.poly.id,
			'class':'polyContainer',
			'styles' : {
				'left' : this.left,
				'top' : this.top,
				'width' : 150,
				'height' : 150
			}
		}).inject(document.body);
		while(poly.facets--){
			this.polyFaces.include(
				new Element(cont,{			
					id : "l" + poly.facets + this.poly.id,
					'rotate' : this.rotate,
					'sidebar' : this.sidebar,
					'inFocus' : false,
					'src': (cont === "img") ? this.findObj(poly.facets) : "", 
					'styles':{
						'z-index': poly.facets
					}
				}).injectTop(this.polyContainer)
			)		
			if(cont !== "img") $("l" + poly.facets + this.poly.id).set("html",this.findObj(poly.facets));
			this.attachFaceEvents("l" + poly.facets + this.poly.id);
		}		
	},
	
	attachFaceEvents : function(polyFace){	
		$(polyFace).addEvent('mouseenter',function(event){	
			if(!this.sidebar && event.target.getProperty("rotate") === "false"){							
				event.target.set('morph', {duration: 'short', transition: 'expo:in'});
				event.target.setProperty("lastzIndex",event.target.getStyle("z-index").toInt());
				if(this.poly.contents === "img"){
					event.target.morph({height: "150%", width: "150%", opacity:1}); // height should be based on original size.											
					event.target.style.border = "1px solid lightyellow";
				}
				if(this.poly.contents === "text"){
					event.target.morph({fontSize:'90px'});
				}
				event.target.style.zIndex = 999;
			}
		}.bind(this));
		$(polyFace).addEvent('mouseleave', function(event){						
			if(!this.sidebar && event.target.getProperty("rotate") === "false"){		
				event.target.set('morph', {duration: 500, transition: 'bounce:out'});
				event.target.morph({
					height: (this.poly.contents === "img") ? event.target.getProperty("lastHeight") : 0, 
					width: (this.poly.contents === "img") ? event.target.getProperty("lastWidth") : 0, 
					opacity: event.target.getProperty("lastOpacity"),
					fontSize: (this.poly.contents === "text") ? event.target.getProperty("lastFontSize") : 0
				});											
				//(function(){
					//this.poly.rotatePoly(this.a, this.b, this.left, this.top);		
				//}.bind(this)).delay(501);		
				event.target.style.border = "0px";
				event.target.style.zIndex = event.target.getProperty("lastzIndex").toInt();
			}
		}.bind(this));
		$(polyFace).addEvent('mousedown', function(event){		
			this.sidebar = true;										
			if(event.target.getProperty("inFocus") === "true"){
				this.reconstructPoly(event.target);
			}else{
				if(event.target.getProperty("rotate") === "false"){
					this.constructDetails();
					this.scatter(event.target,false);
				}
			}							
		}.bind(this));
	},
	
	reconstructPoly : function(target){
		this.sidebar = false;	
		target.setProperty("inFocus","false");		
		$each(this.polyFaces, function(polyFace, index){	
			polyFace.set('morph', {duration: 400, transition: 'sine:in'});			
			polyFace.morph({
				left : polyFace.getProperty("lastX") + "px",
				top : polyFace.getProperty("lastY") + "px",
				opacity : polyFace.getProperty("lastOpacity"),
				width : '100%',
				height : '100%'
			});								
		}.bind(this));	
		$("detailsPanel").setStyle("display","none");
		(function(){
			this.poly.rotatePoly(this.a, this.b, this.left, this.top);		
		}.bind(this)).delay(410);	
	},

	constructDetails : function(){
		if(!$("detailsPanel")) new Element("div",{id:"detailsPanel"}).inject(document.body);		
		$("detailsPanel").setStyle("top", parseInt(this.polyContainer.getStyle("top")) + 30 + "px");
		$("detailsPanel").setStyle("left", this.polyContainer.getStyle("left"));
		$("detailsPanel").setStyle("width", 300);
		$("detailsPanel").setStyle("height", 200);	
		$("detailsPanel").setStyle("border-color", "#f0f0f0");
	},
	
	scatter : function(target,morph){			
		target = ($defined(target)) ? target : new Element("div");
		try{
			$each(this.polyFaces, function(polyFace, index){
				if(morph || (polyFace.id !== target.id)){				
					polyFace.setProperty("sidebar","true");
					polyFace.set('morph', {duration: 1200, transition: 'expo:out'});			
					polyFace.morph({
						left : Math.floor((Math.random()*window.getSize().x)+1) + "px",
						opacity : 0,
						width : '10%',
						height : '10%'
					});
				}else{
					this.showDetails(polyFace);
				}			
			},this);	
		}catch(e){};
	},

	showDetails : function(polyFace){	
		(function(){
			$("detailsPanel").setStyle("display","block");
			$("detailsPanel").set('morph', {duration: 400, transition: 'expo:in'});
			$("detailsPanel").morph({borderColor : '#333333'});							
		}.bind(this)).delay(410);		
		polyFace.setProperty("inFocus","true");
		polyFace.set('morph', {duration: 400, transition: 'circ:out'});			
		polyFace.morph({
			border : 0,
			left : $("detailsPanel").getLeft() + 10 + "px",					
			top: $("detailsPanel").getTop() + 40 + "px",
			height : '150%',
			width : '150%',				
			opacity: 1,
			zIndex: 9999,
			cursor : "pointer"
		});	
	}		
});