/*
jquery hover3d
=================================================
version: 1.0.0
author: rian ariona
website: http://ariona.net
docs: http://ariona.github.io/hover3d
repo: http://github.com/ariona/hover3d
issues: http://github.com/ariona/hover3d/issues
*/

(function($){
	
	$.fn.hover3d = function(options){
		
		var settings = $.extend({
			selector      : null,
			perspective   : 1000,
			sensitivity   : 20,
			invert        : false,
			shine	      : false,
			hoverinclass  : "hover-in",
			hoveroutclass : "hover-out"
		}, options);
		
		return this.each(function(){
			
			var $this = $(this),
				$card = $this.find(settings.selector);

			if( settings.shine ){
				$card.append('<div class="shine"></div>');
			}
			var $shine = $(this).find(".shine");

			// set perspective and transformstyle value
			// for element and 3d object	
			$this.css({
				perspective: settings.perspective+"px"
				//transformstyle: "preserve-3d"
			});
			
			$card.css({
				perspective: settings.perspective+"px"
				//transformstyle: "preserve-3d",
			});

			$shine.css({
				position  : "absolute",
				top       : 0,
				left      : 0,
				bottom    : 0,
				right     : 0
				//"z-index" : 9
			});
			
			// mouse enter function, this will add hover-in
			// class so when mouse over it will add transition
			// based on hover-in class
			function enter(){
				$card.addclass(settings.hoverinclass);
				
				settimeout(function(){
					$card.removeclass(settings.hoverinclass);
				}, 1000);
			}
			
			// mouse movement parallax effect
			function move(event){
				var w      = $this.innerwidth(),
					h      = $this.innerheight(),
					ax 	   = settings.invert ?  ( w / 2 - event.offsetx)/settings.sensitivity : -( w / 2 - event.offsetx)/settings.sensitivity,
					ay     = settings.invert ? -( h / 2 - event.offsety)/settings.sensitivity :  ( h / 2 - event.offsety)/settings.sensitivity;
					dy     = event.offsety - h / 2,
					dx     = event.offsetx - w / 2,
					theta  = math.atan2(dy, dx),
					angle  = theta * 180 / math.pi - 90;
					
				if (angle < 0) {
					angle  = angle + 360;
				}
				

				$card.css({
					perspective    : settings.perspective+"px",
					//transformstyle : "preserve-3d",
					transform      : "rotatey("+ax+"deg) rotatex("+ay+"deg)"
				});

				//$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsety / h * .5 + ') 0%,rgba(255,255,255,0) 80%)');
			}
			
			// mouse leave function, will set the transform
			// property to 0, and add transition class
			// for exit animation
			function leave(){
				$card.addclass(settings.hoveroutclass);
				$card.css({
					perspective    : settings.perspective+"px",
					//transformstyle : "preserve-3d",
					transform      : "rotatex(0) rotatey(0)"
				});
				settimeout( function(){
					$card.removeclass(settings.hoveroutclass);
				}, 1000 );
			}
			
			// mouseenter event binding
			$this.on( "mouseenter", function(){
				return enter();
			});
			
			// mousemove event binding
			$this.on( "mousemove", function(event){
				return move(event);
			});
			
			// mouseleave event binding
			$this.on( "mouseleave", function(){
				return leave();
			});
			
		});
		
	};
	
}(jquery));