$(function() {
var $menu				= $('#ei_menu > ul'),
$menuItems			= $menu.children('li'),
$menuItemsImgWrapper= $menuItems.children('a'),
$menuItemsPreview	= $menuItemsImgWrapper.children('.ei_preview'),
totalMenuItems		= $menuItems.length,

ExpandingMenu 	= (function(){
	/*
		@current
		set it to the index of the element you want to be opened by default,
		or -1 if you want the menu to be closed initially
	 */
	var current				= -1,
	/*
		@anim
		if we want the default opened item to animate initialy set this to true
	 */
	anim				= true,
	/*
		checks if the current value is valid -
		between 0 and the number of items
	 */
	validCurrent		= function() {
		return (current >= 0 && current < totalMenuItems);
	},
	init				= function() {
			/* show default item if current is set to a valid index */
		if(validCurrent())
			configureMenu();

		initEventsHandler();
	},
	configureMenu		= function() {
			/* get the item for the current */
		var $item	= $menuItems.eq(current);
			/* if anim is true slide out the item */
		if(anim)
			slideOutItem($item, true, 900, 'easeInQuint');
		else{
				/* if not just show it */
			$item.css({width : '570px'})
			.find('.ei_image')
			.css({left:'0px', opacity:1});

				/* decrease the opacity of the others */
				$menuItems.not($item)
						  .children('.ei_preview')
						  .css({opacity:0.2});
		}
	},
	initEventsHandler	= function() {
			/*
			when we click an item the following can happen:
			1) The item is already opened - close it!
			2) The item is closed - open it! (if another one is opened, close it!)
			*/

		$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
			var $this 	= $(this).parent(),
			idx		= $this.index();

			if(current === idx) {				
				slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);				
				current = -1;
			}
			else{
				if(validCurrent() && current !== idx)
						slideOutItem($menuItems.eq(current), false, 250, 'jswing');

				current	= idx;								
					slideOutItem($this, true, 250, 'jswing');
			}
			return false;
		});
	},
		/* if you want to trigger the action to open a specific item */
		openItem			= function(idx) {
			$menuItemsImgWrapper.eq(idx).click();
		},
		/*
		opens or closes an item
		note that "mLeave" is just true when all the items close,
		in which case we want that all of them get opacity 1 again.
		"dir" tells us if we are opening or closing an item (true | false)
		*/
	slideOutItem		= function($item, dir, speed, easing, mLeave) {
		var $ei_image	= $item.find('.ei_image'),

		itemParam	= (dir) ? {width : '290px'} : {width : '75px'},
		imageParam	= (dir) ? {left : '0px'} : {left : '75px'};
			
			///koronellos
			//$('.peKenBurns').css('display','none');
			
			/*
			if opening, we animate the opacity of all the elements to 0.1.
			this is to give focus on the opened item..
			*/
			
		if(dir)
		/*
				alternative:
				$menuItemsPreview.not($menuItemsPreview.eq(current))
								 .stop()
								 .animate({opacity:0.1}, 500);
		 */ 
			$menuItemsPreview.stop()
		.animate({opacity:0.5}, 1000);
		else if(mLeave)
		
			$menuItemsPreview.stop()			
		.animate({opacity:1}, 500, function(){ });	// $('.peKenBurns').fadeIn(500).css('display','block') }    //koronellos
		
			/* the <li> expands or collapses */
		$item.stop().animate(itemParam, speed, easing);
			/* the image (color) slides in or out */
		$ei_image.stop().animate(imageParam, speed, easing, function() {
				/*
				if opening, we animate the opacity to 1,
				otherwise we reset it.
				*/
			if(dir)
				$ei_image.animate({opacity:1}, 1000);
			else
				$ei_image.css('opacity', 0.5);
		});
	};

	return {
		init 		: init,
		openItem	: openItem
	};
})();

/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();

/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});