// Animate menu
// Romain Caddoux - 06/05/09
// --------------------------------------------
//	HTML object
//		...
//		<div id="container-[menu-name]">
//			<div id="[item-id]" start-pos="y,x" target-pos="y,x" focus-pos="y,x"><span>[ITEM-TITLE]</span></div>	
//		</div>
//		...
//
//	Menu attributes
//		id: menu id (string), must start with "container-"
//	Item attributes
//		id: item id (string)
//		start-pos: initial item position, "y(int),x(int)"
//		target-pos: grouped item position, "y(int),x(int)"
//		focus-pos: selected item position, "y(int),x(int)"
//	
// --------------------------------------------
//	Object Usage
//		var menu = new animatedMenu({
//					introDuration: 200,
//					animDuration: 800,
//					addBounce: "false",
//				})
//	Properties
//		introDuration: time/ms (int), growing & bouncing items duration (shown at start)
//		animDuration: time/ms (int), move duration (when item is selected)
//		addBounce: "true"/"false" (string), add bounce effect to move animation
//	Methods 
//		reset(): reinitialize items positons
//
// --------------------------------------------

animateMenu = function(args){

	var itemCollection = $("div[id^='container'] > div");
	var _this = this;
	var count = 0;
	var num_obj = 0;
	// Callbacks
	this.onShow = args.onShow || function(){};

	this.introDuration = args.introDuration || 600;
	this.animDuration = args.animDuration || 1000;
	this.addBounce = args.addBounce || "true";

	this.reset = function(){

		itemCollection.each(
			function(){	
				$(this).css("zIndex",$(this).attr("zindex-keeper"));
				$(this).css("opacity",1);
				$(this).animate({
					top: $(this).attr("start-pos").split(",")[0],
					left: $(this).attr("start-pos").split(",")[1]			
				},
				_this.animDuration);
			}
		)

	}

	function anime (evt){
		if($(this).attr('move') != "false")
		{
			var node = $(evt.target)
		
			while(node.attr("nodeName") != "DIV"){
				node = node.parent();
			}
				
			$(this).css("zIndex",100);
			$(this).css("opacity",1);
			node.animate({
						top: $(this).attr("focus-pos").split(",")[0],
						left: $(this).attr("focus-pos").split(",")[1]
					},
			_this.animDuration);
			
			itemCollection.not("#" + node.attr("id")).each(
				function(i){			
					$(this).css("zIndex",$(this).attr("zindex-keeper"));
					$(this).css("opacity",0.6);
					$(this).animate({
						top: $(this).attr("target-pos").split(",")[0],
						left: $(this).attr("target-pos").split(",")[1]
					},
					_this.animDuration);
				}
			)
		}
	};
	
	if(this.addBounce == "true"){
		jQuery.easing.def = 'easeOutBounce';
	}

	itemCollection.each(
		function(){				
			$(this).css("top",$(this).attr("start-pos").split(",")[0]);
			$(this).css("left",$(this).attr("start-pos").split(",")[1]);
			$(this).attr("zindex-keeper",$(this).css("zIndex"));
			$(this).click(anime);
			num_obj++;
		}
	);
		
	showMenu = function(){
		if(itemCollection.eq(count)){
			itemCollection.eq(count).show("scale", {percent: 100, easing:'easeOutBounce'}, _this.introDuration, function(){showMenu(count++);});
		}
		if (num_obj == count) {
			_this.onShow.call(_this);
		}
	}	
	showMenu();	
	
}