$( function(){
	if( typeof( $( {} ).pngFix ) == "function" ) {
		$( document ).pngFix();
	}

	var $mouseX = $( ".mouseX" );
	var $mouseY = $( ".mouseY" );
	$( "html" ).mousemove( function( i_event ){
		$mouseX.text( i_event.pageX );
		$mouseY.text( i_event.pageY );
	} );
	
	$( ".shadowIcon" ).each( function(){
		var icon = new $.ShadowIcon( $( this ) );
	} );

} );

var EASING_VALUE = 0.2;
var SHADOW_RADIUS_MARGIN_X = -11;
var SHADOW_RADIUS_MARGIN_Y = -11;
var SHINE_RADIUS_MARGIN_X = 0;
var SHINE_RADIUS_MARGIN_Y = 0;


$.ShadowIcon = function( $i_target ) {

	this.$target = $i_target;	//ターゲット
	this.$shadow;			//陰
	this.$icon;				//アイコン
	this.$shine;				//輝き
	
	this.originX;				//原点
	this.originY;				//原点
	this.offsetX;				//オフセット値
	this.offsetY;				//オフセット値
	this.maxRadiusX;			//最高半径
	this.maxRadiusY;			//最高半径
	
	this.timer;
	this.disRadian;			//目的角度
	this.nowRadian = 0;		//現在角度
	this.disX;				//目的地
	this.disY;				//目的地
	this.nowX;				//現在地
	this.nowY;				//現在地
	
	this.shineOffsetX;
	this.shineOffsetY;
	this.maxShineRadiusX;
	this.maxShineRadiusY;
	this.disShineX;
	this.disShineY;
	this.nowShineX;
	this.nowShineY;
	
	this.cssObject = {};
	
	//initialize
	this.init.apply( this );
	
};
$.ShadowIcon.prototype = {

	/*------------------------------------------------------
	* initialyze
	------------------------------------------------------*/
	init : function(){
	
		this.$shadow = this.$target.find( ".layer1" );
		this.$icon = this.$target.find( ".layer2" );
		
		var $iconImage = this.$icon.find( "img");
		var $shadowImage = this.$shadow.find( "img" );
		
		var iconWidth = $iconImage.width();
		var iconHeight = $iconImage.height();
		
		var shadowWidth = $shadowImage.width();
		var shadowHeight = $shadowImage.height();
		
		//原点
		var p = this.$icon.offset();
		this.originX = Math.round( p.left + ( iconWidth / 2 ) );
		this.originY = Math.round( p.top + ( iconHeight / 2 ) );
		
		//オフセット値
		this.offsetX = Math.floor( ( iconWidth - shadowWidth ) / 2 );
		this.offsetY = Math.floor( ( iconHeight - shadowHeight ) / 2 );
		
		//最高値
		this.maxRadiusX = ( this.offsetX > 0 ) ? this.offsetX : -this.offsetX;
		this.maxRadiusY = ( this.offsetY > 0 ) ? this.offsetY : -this.offsetY;
		
		this.maxRadiusX += SHADOW_RADIUS_MARGIN_X;
		this.maxRadiusY += SHADOW_RADIUS_MARGIN_Y;
		
		this.nowX = this.offsetX;
		this.nowY = this.offsetY;
		
		this.cssObject["left"] = this.nowX + "px";
		this.cssObject["top"] = this.nowY + "px";
		this.$shadow.css( this.cssObject );
		
		
		//-----------------------------------------------------------------
		//	輝き部分
		//-----------------------------------------------------------------
		this.$shine = this.$target.find( ".layer3" );
		var $shineImage = this.$shine.find( "img" );
		var shineWidth = $shineImage.width();
		var shineHeight = $shineImage.height();
		
		//オフセット値
		this.shineOffsetX = ( iconWidth - shineWidth ) / 2;
		this.shineOffsetY = ( iconHeight - shineHeight ) / 2;
		
		//最高値
		this.maxShineRadiusX = ( this.shineOffsetX > 0 ) ? this.shineOffsetX : -this.shineOffsetX;
		this.maxShineRadiusY = ( this.shineOffsetY > 0 ) ? this.shineOffsetY : -this.shineOffsetY;
		
		this.maxShineRadiusX += SHINE_RADIUS_MARGIN_X;
		this.maxShineRadiusY += SHINE_RADIUS_MARGIN_Y;
		
		//現在地
		this.nowShineX = this.shineOffsetX;
		this.nowShineY = this.shineOffsetY;
		
		this.cssObject["left"] = this.nowShineX + "px";
		this.cssObject["top"] = this.nowShineY + "px";
		this.$shine.css( this.cssObject );
		
		$( "html" ).bind( "mousemove", $.proxy( this.onMouseMove, this ) );
	},
	
	/*------------------------------------------------------
	* mousemove
	------------------------------------------------------*/
	onMouseMove : function( i_event ) {
	
		var px = i_event.pageX - this.originX;
		var py = i_event.pageY - this.originY;
	
		this.disRadian = Math.atan2( py, px );
		var d = Math.sqrt( Math.pow( px, 2 ) + Math.pow( py, 2 ) );
		if( d > $.ShadowIcon.Radius ) {
			d = $.ShadowIcon.Radius;
		}
		d = d / $.ShadowIcon.Radius;
		
		var radiusX = d * this.maxRadiusX;
		var radiusY = d * this.maxRadiusY;
		this.disX = -Math.cos( this.disRadian ) * radiusX + this.offsetX;
		this.disY = -Math.sin( this.disRadian ) * radiusY + this.offsetY;
		
		/*
		radiusX = d * this.maxShineRadiusX;
		radiusY = d * this.maxShineRadiusY;
		this.disShineX= Math.cos( this.disRadian ) * radiusX + this.shineOffsetX;
		this.disShineY = Math.sin( this.disRadian ) * radiusY + this.shineOffsetY;
		*/
		
		if( !this.timer ) {
			this.timer = setInterval( $.proxy( this.onEnterFrame, this ), 50 );
		}
		
	},
	
	/*------------------------------------------------------
	* on enterframe
	------------------------------------------------------*/
	onEnterFrame : function() {
	
		this.nowX += ( this.disX - this.nowX ) * EASING_VALUE;
		this.nowY += ( this.disY - this.nowY ) * EASING_VALUE;
		this.cssObject["left"] = this.nowX + "px";
		this.cssObject["top"] = this.nowY + "px";
		this.$shadow.css( this.cssObject );
		
		var distance = this.disRadian - this.nowRadian;
		//PIの範囲に
		if( distance < 0 ){
			distance += $.ShadowIcon.PI2;
		}
		if( distance > $.ShadowIcon.PI ){
			distance -= $.ShadowIcon.PI2;
		}
		
		this.nowRadian += distance * EASING_VALUE;
		this.nowShineX= Math.cos( this.nowRadian ) * this.maxShineRadiusX + this.shineOffsetX;
		this.nowShineY = Math.sin( this.nowRadian ) * this.maxShineRadiusY + this.shineOffsetY;
		this.cssObject["left"] = this.nowShineX + "px";
		this.cssObject["top"] = this.nowShineY + "px";
		this.$shine.css( this.cssObject );
		/*
		this.nowShineX += ( this.disShineX - this.nowShineX ) * EASING_VALUE;
		this.nowShineY += ( this.disShineY - this.nowShineY ) * EASING_VALUE;
		this.cssObject["left"] = this.nowShineX + "px";
		this.cssObject["top"] = this.nowShineY + "px";
		this.$shine.css( this.cssObject );
		*/
	}
	
};

$.ShadowIcon.PI = Math.PI;
$.ShadowIcon.PI2 = $.ShadowIcon.PI * 2;
$.ShadowIcon.Radius = 200;
$.ShadowIcon.TO_DEGREE = 180 / Math.PI;