//before using this , should include the scriptaculous js framework

var slidingMenuFlag1 = 'folded';
var slidingMenuFlag2 = 'folded';
var slideMenuMovingSpeed = 0.2;




//this is the function called after the moving effect finished, and the obj is the object that controls the moving action
function doAfterMenu1MovingFinished(obj)
{
	var img1;
	var roundCornerImg2 = '';
	//change the arrow
	var objArrow1 = document.getElementById('slide_menu_handler1');
	var objHandlerDiv2 = document.getElementById('slide_menu2_handler_div');
	if(slidingMenuFlag1 == 'folded')
	{
		img1 = 'icon_label1.gif';
		if(slidingMenuFlag2 != 'folded') roundCornerImg2 = 'top_menulabel2_slided.gif'; //the rounded corner is in dark green color
	}else{
		img1 = 'icon_down_label1.gif';
	}
	objArrow1.style.background = 'url(/extension/ccifc/design/ccifc/images/'+img1+') no-repeat right top';
	if(roundCornerImg2 != '' ) objHandlerDiv2.style.background = 'url(/extension/ccifc/design/ccifc/images/'+roundCornerImg2+') no-repeat';

}



// distance, a positive integer
function menu1VerticalSlide(objectId, distance)
{
	
	var Y; // the verical distance
	if(slidingMenuFlag1 == 'folded') // the current status of the menu is in folded, 
	{
		Y = -1 * distance;
		slidingMenuFlag1 = 'open'; // so the next status of the menu should be open, 
	}else{
		Y = distance;
		slidingMenuFlag1 = 'folded';
	}
	
 	// Y < 0, moving up, Y > 0, moving down 
	new Effect.Move(objectId, { x: 0, y: Y, mode: 'relative' ,duration: slideMenuMovingSpeed, afterFinish: doAfterMenu1MovingFinished  });
}




//this is the function called after the moving effect finished, and the obj is the object that controls the moving action
function doAfterMenu2MovingFinished(obj)
{
	var img2;
	var roundCornerImg2;
	//change the arrow
	var objArrow2 = document.getElementById('slide_menu_handler2');
	var objHandlerDiv2 = document.getElementById('slide_menu2_handler_div');
	if(slidingMenuFlag2 == 'folded')
	{
		img2 = 'icon_label2.gif';
		roundCornerImg2 = 'top_menulabel2.gif'; //the rounded corner is in grey color
	}else{
		img2 = 'icon_down_label2.gif';
		if(slidingMenuFlag1 == 'folded') {
			roundCornerImg2 = 'top_menulabel2_slided.gif'; //the rounded corner is in dark green color
		}
		else {
			roundCornerImg2 = 'top_menulabel2.gif'; //the rounded corner is in grey color
		}
	}
	//roundCornerImg2 = 'top_menulabel2_transparent.gif';
	objArrow2.style.background = 'url(/extension/ccifc/design/ccifc/images/'+img2+') no-repeat right top';
	objHandlerDiv2.style.background = 'url(/extension/ccifc/design/ccifc/images/'+roundCornerImg2+') no-repeat';

}



// distance, a positive integer
function menu2VerticalSlide(objectId, distance)
{
	
	var Y; // the verical distance
	if(slidingMenuFlag2 == 'folded') // the current status of the menu is in folded, 
	{
		Y = -1 * distance;
		slidingMenuFlag2 = 'open'; // so the next status of the menu should be open, 
	}else{
		Y = distance;
		slidingMenuFlag2 = 'folded';
	}
	
 	// Y < 0, moving up, Y > 0, moving down 
	new Effect.Move(objectId, { x: 0, y: Y, mode: 'relative' ,duration: slideMenuMovingSpeed, afterFinish: doAfterMenu2MovingFinished  });
}



function autoSlideMenu1(objectId,handlerHeight)
{
	var objMenu1 = document.getElementById(objectId);
	var moveDistance = objMenu1.offsetHeight - handlerHeight + 0;
	menu1VerticalSlide(objectId, moveDistance);

}


function autoSlideMenu2(objectId,handlerHeight)
{
	var objMenu2 = document.getElementById(objectId);
	var moveDistance2 = objMenu2.offsetHeight - handlerHeight  + 0;
	menu2VerticalSlide(objectId, moveDistance2);
}