// 우측메뉴 클래스
// 작성자 : 홍준수 ( huchi001@seedpost.co.kr )

function rightMenu ( container )
{
	this.container = container;
	this.eventNum = container.find (".event").length;

	this.currentStateNum = 0;

	container.css ( { height:this.eventNum * 90 } );
	this.makeRightMenu();
	this.OVER = -1;

	this.container.stop().css ( { "z-index":100 , display:"none" } );
	this.container.find(".eventMenu1").stop().css ( { left:200 } );
}

rightMenu.prototype.makeRightMenu = function()
{
	var divStr = "";
	var owner = this;

	/*
	divStr += '<div class="eventMenu2" style="position:absolute; left:0px; ">';
	this.container.find ( ".event").each ( function ( i )
	{
		var thum = $(this).attr ( "thum2" );

		divStr += '<div class="eventCon" num="' + i +'" style="cursor:hand; position:absolute; top:' + i * 90 + '; left:50px;">';
		divStr += '<img src="' + thum + '"/>';
		divStr += '</div>';
	} );

	divStr += '</div>';
	*/
	divStr += '<div class="eventMenu1" style="position:absolute; left:-50px;" >';

	this.container.find ( ".event").each ( function ( i )
	{
		var thum1 = $(this).attr ( "thum2" );
		var thum2 = $(this).attr ( "thum1" );

		divStr += '<div class="eventCon" num="' + i +'" style="cursor:hand; overflow:hidden; width:100px; height:100px; position:absolute; top:' + i * 86 + '; left:50px;">';
		divStr += '<div><img src="images/eventThum_bg.png"/></div>';
		divStr += '<div style="position:absolute; top:0px;"><img src="' + thum2 + '"/></div>';
		divStr += '<div class="over" style="position:absolute; top:-0px; display:none; "><img src="' + thum1 + '"/></div>';
		divStr += '</div>';
	} );
	divStr += '</div>';
	this.container.append ( divStr );



	this.container.find ( ".eventMenu1").find(".eventCon").bind ( "mouseover" , over1 ).bind ( "mouseout" , out1 ).bind ( "click" , clickMenu1 );
//	this.container.find ( ".eventMenu1").bind ( "mouseover" , over ).bind ( "mouseout" , out );

	function over1 ( e )
	{
		var tar = $(e.currentTarget);
		var num = tar.attr ( "num" );
		changeState1( num );
	}

	function out1 ( e )
	{
		changeState1 ( owner.OVER );
	}

	function changeState1 ( num )
	{
		owner.container.find(".eventMenu1").find(".eventCon").each ( function ( i )		{
			if ( num == i  )
			{
				$(this).find(".over").stop().css( "display" , "block" ).animate ( { opacity:1 } );
				//$(this).find(".over").stop().animate( { top:0 } , 350 );
			}
			else
			{
				$(this).find(".over").stop().animate ( { opacity:0 } );
				//$(this).find(".over").stop().animate ( { top:-87 } , 350 );
			}
		} );
	}

	function clickMenu1 ( e )
	{
		var tar = $(e.currentTarget);
		var num = tar.attr ( "num" );
		parent.rightMenuButtonClick ( num );
	}
}

rightMenu.prototype.state = function ( num )
{
	if ( this.currentStateNum == num ) return;

	this.OVER = -1;
	//this.container.find ( ".eventMenu1").find(".eventCon").mouseout();

	this.currentStateNum = num;
	var owner = this;
	this.container.css ( "display" , "block" );
	var tar = this.container.find ( ".eventMenu1" );

	if ( num == 1 )
	{
		this.container.stop().css ( { "z-index":100 } );
		
		if ( $.browser.mozilla || isMobile )
		{
			tar.stop().css ( { left:-37 } );
			this.container.stop().css ( { "z-index":600 , top:-700 } ).animate ( { top:100 } , 1000 );
		}
		else
		{
			tar.stop().css ( { left:-150 } ).animate ( { left:20 } , { duration:500 , easing:"easeInQuad" , complete:stateMotion } );
		}

		function stateMotion()
		{
			owner.container.stop().css ( { "z-index":600 } );
			tar.animate ( { left:-45 } , { easing:"easeOutQuad" } );
		}
	}
	else
	{
		if ( $.browser.mozilla || isMobile )
		{
			tar.stop().css ( { left:-37 } );
			this.container.stop().animate ( { top:-700 } , 1000 );
		}
		else
		{
			tar.stop().animate ( { left:20 } , { easing:"easeInQuad" , complete:stateMotion2 } );
		}

		function stateMotion2()
		{
			owner.container.stop().css ( { "z-index":100 } );
			tar.animate ( { left:-150 } );
		}
	}
}

rightMenu.prototype.setCurrentNum = function ( num )
{
	this.OVER = num;
	this.container.find ( ".eventMenu1").find(".eventCon").eq ( num ).mouseover();
}


/*
	<div class="rightMenu">
		<div class="event" thum1="images/eventThum_1.png" thum2="images/eventThum_1_small.png"></div>
		<div class="event" thum1="images/eventThum_1.png" thum2="images/eventThum_2_small.png"></div>
		<div class="event" thum1="images/eventThum_1.png" thum2="images/eventThum_3_small.png"></div>
	</div>
	*/