/* */

m.imageFlip = function(canvas_id, src1, src2, bg_color)
{
	this.src = src1;
	this.src_back = src2;
	this.bg = bg_color || "#000";
	this.tex = new Image();
	this.tex_back = new Image();
	this.points = new Array();
	this.mg = false;
	this.iTrace = 0;
	this.shade = false;
	this.uvs = [
			   [{u:0, v:0},
			   {u:1, v:0},
			   {u:1, v:1}],
	
			   [{u:0, v:0},
			   {u:1, v:1},
			   {u:0, v:1}]
			   ];
	this.uvs_back = [
			   [{u:1, v:0},
			   {u:0, v:0},
			   {u:0, v:1}],
	
			   [{u:1, v:0},
			   {u:0, v:1},
			   {u:1, v:1}]
			   ];
	this.IDIntervalRotate;
	this.Angle = 0;
	this.MaxAngle = 0;
	this.Sens = true;
	this.Step = 0.3;
	this.FL = 600;
	this.nbseg = 1;

	this.nb = 0;

	this.rotate = function()
	{
		var offset = this.Sens ? this.Step : -this.Step;
		if( (this.Sens == true && (this.Angle+offset) >= this.MaxAngle) || (this.Sens == false && (this.Angle+offset) <= this.MaxAngle) )
		{
			offset = this.MaxAngle - this.Angle;
			clearInterval( this.IDIntervalRotate );
			this.draw();
			return;
		}
		this.Angle += offset;
		for(var i = 0; i < 	this.points.length; i++)
		{
			this.points[i].rotateY(offset);
		}
		this.render();
	};

	this.render = function()
	{
		P3D.g = this.ctx;
		P3D.texture = this.isBackFace() ? this.tex_back : this.tex;
		
		var uvs = false;
		if( this.isBackFace() )
		{
			P3D.texture = this.tex_back;
			uvs = this.uvs_back;
		}
		else
		{
			P3D.texture = this.tex;
			uvs = this.uvs;
		}

		this.clear();
		var poss = [{x:this.points[0].screenX(), y:this.points[0].screenY()},
					{x:this.points[1].screenX(), y:this.points[1].screenY()},
					{x:this.points[2].screenX(), y:this.points[2].screenY()}
					];
		P3D.drawTriangle(poss, uvs[0], this.shade);

		var poss = [{x:this.points[0].screenX(), y:this.points[0].screenY()},
					{x:this.points[2].screenX(), y:this.points[2].screenY()},
					{x:this.points[3].screenX(), y:this.points[3].screenY()}
					];
		P3D.drawTriangle(poss, uvs[1], this.shade);
	};
	this.draw = function()
	{
		this.clear();
		if( this.isBackFace() )
			this.ctx.drawImage( this.tex_back, 0, 0 );
		else
			this.ctx.drawImage( this.tex, 0, 0 );
	};
	this.clear = function(f, w, h)
	{
		this.ctx.beginPath();
		this.ctx.clearRect(0, 0, this.width, this.height);
	};
	this.onLoaded = function()
	{
		this.nb++;
		if( this.nb < 2 ) return;

		var x2 = this.tex.width/2;
		var y2 = this.tex.height/2;
		var cx = -this.width/2;
		var cy = -this.height/2;
		var cz = 0;
		var z = 0;

		var P1 = new m.Point3D(-x2, -y2, z, this.FL);
		var P2 = new m.Point3D( x2, -y2, z, this.FL);
		var P3 = new m.Point3D( x2, y2, z, this.FL);
		var P4 = new m.Point3D(-x2, y2, z, this.FL);

		this.points = new Array();
		this.points.push(P1);
		this.points.push(P2);
		this.points.push(P3);
		this.points.push(P4);

		for( var i = 0; i < this.points.length; i++ )
		{
			this.points[i].setVanishingPoint(this.vpX, this.vpY);
			this.points[i].setCenter(cx, cy, cz);
		}
		this.draw();

		_this = this;
		mf.Event.addEvent(_this.cv, 'mouseover', function(evt){_this.onMouseOver(evt)});
		mf.Event.addEvent(_this.cv, 'mouseout', function(evt){_this.onMouseOut(evt)});
		//mf.Event.addEvent(_this.cv, 'click', function(evt){_this.onClick(evt)});

		initNeed();
	};

	this.onMouseOver = function(evt)
	{
		var cv = mf.Event.getEventElement(evt);
		var _this = flips[parseInt(cv.getAttribute('flip_id'))];
		clearInterval(_this.IDIntervalRotate);
		_this.Sens = true;
		_this.MaxAngle = Math.PI;
		_this.IDIntervalRotate = setInterval(function(){_this.rotate();},50);
	};
	this.onMouseOut = function(evt)
	{
		var cv = mf.Event.getEventElement(evt);
		var _this = flips[parseInt(cv.getAttribute('flip_id'))];
		clearInterval(_this.IDIntervalRotate);
		_this.Sens = false;
		_this.MaxAngle = 0;
		_this.IDIntervalRotate = setInterval(function(){_this.rotate();},50);
	};
	this.onClick = function()
	{
		
	};
	this.isBackFace = function()
	{
		var pointA = this.points[0];
		var pointB = this.points[1];
		var pointC = this.points[2];

		var cax = pointC.screenX() - pointA.screenX();
		var cay = pointC.screenY() - pointA.screenY();
		var bcx = pointB.screenX() - pointC.screenX();
		var bcy = pointB.screenY() - pointC.screenY();
		return cax * bcy > cay * bcx;
	};
	this.init = function()
	{
		_this = this;
		this.tex.onload = function(){_this.onLoaded()};
		this.tex_back.onload = function(){_this.onLoaded()};
		this.tex.src = this.src;
		this.tex_back.src = this.src_back;
	};
	
	
	this.cv = elements(canvas_id);
	if( this.cv && typeof(this.cv.getContext) == 'function')
	{
		this.ctx = this.cv.getContext('2d');
	
		this.width = this.cv.width;
		this.height = this.cv.height;
	
		this.vpX = this.width;
		this.vpY = this.height;

		_this = this;
		_this.tex.onload = function(){_this.onLoaded()};
		_this.tex_back.onload = function(){_this.onLoaded()};
		_this.tex.src = _this.src;
		_this.tex_back.src = _this.src_back;
	};
};
/*
m.imageFlip = function(canvas_id, src, bg_color)
{
	this.src = src;
	this.bg = bg_color || "#000";
	this.tex = new Image();
	this.points = new Array();
	this.mg = false;
	this.iTrace = 0;
	this.shade = false;
	this.uvs = [
			   [{u:0, v:0},
			   {u:1, v:0},
			   {u:1, v:1}],
	
			   [{u:0, v:0},
			   {u:1, v:1},
			   {u:0, v:1}]
			   ];
	this.IDIntervalRotate;
	this.Angle = 0;
	this.MaxAngle = 0;
	this.Sens = true;
	this.Step = 0.6;
	this.FL = 600;
	this.nbseg = 1;

	this.cv = document.getElementById(canvas_id);
	this.ctx = this.cv.getContext('2d');

	this.width = this.cv.width;
	this.height = this.cv.height;

	this.vpX = this.width;
	this.vpY = this.height;

	this.rotate = function()
	{
		var offset = this.Sens ? this.Step : -this.Step;
		
		if( (this.Sens == true && (this.Angle+offset) >= this.MaxAngle) || (this.Sens == false && (this.Angle+offset) <= this.MaxAngle) )
		{
			offset = this.MaxAngle - this.Angle;
			clearInterval( this.IDIntervalRotate );
			this.draw();
			return;
		}
		this.Angle += offset;

		for(var i = 0; i < 	this.points.length; i++)
		{
			this.points[i].rotateY(offset);
		}
		this.render();
	}
	this.render = function()
	{
		P3D.g = this.ctx;
		P3D.texture = this.tex;
		P3D.clear(this.bg, this.width, this.height);
		var poss = [{x:this.points[0].screenX(), y:this.points[0].screenY()},
					{x:this.points[1].screenX(), y:this.points[1].screenY()},
					{x:this.points[2].screenX(), y:this.points[2].screenY()}
					];
		P3D.drawTriangle(poss, this.uvs[0], this.shade);

		var poss = [{x:this.points[0].screenX(), y:this.points[0].screenY()},
					{x:this.points[2].screenX(), y:this.points[2].screenY()},
					{x:this.points[3].screenX(), y:this.points[3].screenY()}
					];
		P3D.drawTriangle(poss, this.uvs[1], this.shade);
	}
	this.draw = function()
	{
		P3D.g = this.ctx;
		P3D.texture = this.tex;
		P3D.clear(this.bg, this.width, this.height);
		this.ctx.drawImage( this.tex, 0, 0 );
	}

	this.onLoaded = function()
	{
		var x2 = this.tex.width/2;
		var y2 = this.tex.height/2;
		
		var cx = -this.width/2;
		var cy = -this.height/2;
		var cz = 0;
		var z = 0;

		var P1 = new m.Point3D(-x2, -y2, z, this.FL);
		var P2 = new m.Point3D( x2, -y2, z, this.FL);
		var P3 = new m.Point3D( x2, y2, z, this.FL);
		var P4 = new m.Point3D(-x2, y2, z, this.FL);

		this.points = new Array();
		this.points.push(P1);
		this.points.push(P2);
		this.points.push(P3);
		this.points.push(P4);

		for( var i = 0; i < this.points.length; i++ )
		{
			this.points[i].setVanishingPoint(this.vpX, this.vpY);
			this.points[i].setCenter(cx, cy, cz);
		}	
		//this.render();
		this.draw();

		_this = this;
		mf.Event.addEvent(this.cv, 'mouseover', function(evt){_this.onMouseOver(evt)});
		mf.Event.addEvent(this.cv, 'mouseout', function(evt){_this.onMouseOut(evt)});
		mf.Event.addEvent(this.cv, 'click', function(evt){_this.onClick(evt)});
	}
	this.onMouseOver = function()
	{
		clearInterval(this.IDIntervalRotate);
		this.Sens = true;
		this.MaxAngle = Math.PI;
		_this = this;
		this.IDIntervalRotate = setInterval(function(){_this.rotate();},50);
	}
	this.onMouseOut = function()
	{
		clearInterval(this.IDIntervalRotate);
		this.Sens = false;
		this.MaxAngle = 0;
		_this = this;
		this.IDIntervalRotate = setInterval(function(){_this.rotate();},50);
	}
	this.onClick = function()
	{
		
	}
	this.init = function()
	{
		_this = this;
		this.tex.onload = function(){_this.onLoaded()};
		this.tex.src = this.src; //"http://www.mondofragilis.net/var/mondo_site/storage/images/media/images/franck-vasserot/850606-1-eng-GB/Franck-Vasserot_medium.png";	
	}
	
	this.init();
}
window.onload = function()
{
	new imageFlip('cv',
				  "http://www.mondofragilis.net/var/mondo_site/storage/images/companies/messaggio-studios/messaggio-studios-updates/messaggio-studios-for-safer-mines/1479317-1-eng-GB/messaggio-studios-for-safer-mines_news_top.png",
				  '#CCCCCC');
}
*/